Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • mcgra Friend
    #174931

    I installed the quickstart for JA Orisite which seems to render the accordion module with active tab marker (the little diamond shaped widget) off to one side. I believe this should be centered as it is in every other place within the template that uses this same GUI element. The accordion module itself works just fine…just the aesthetics are off.

    Your demo site has the same GUI inconsistency as my quickstart install in both IE9 and Firefox 10, so I don’t believe it’s an issue specific to my installation.

    How do we fix it? Thanks…

    Manos Moderator
    #443555

    Hi,

    You can try this :

    Find the code:


    .ja-accordion ul.ja-accordion-containner h3.ja-accordion-title.active {

    background: url("../templates/ja_orisite/images/tab-accordion.png") no-repeat scroll left bottom #FFFFFF;

    border-bottom: medium none;

    color: #BD3928;

    padding-bottom: 20px;

    }

    And change it to :


    .ja-accordion ul.ja-accordion-containner h3.ja-accordion-title.active {

    background: url("../templates/ja_orisite/images/tab-accordion.png") no-repeat scroll left bottom #FFFFFF;
    border-bottom: medium none;
    color: #BD3928;

    padding-bottom: 20px;
    position: relative;
    left: 15px;

    }

    Please let me know if that helps you!

    Regards

    mcgra Friend
    #443575

    Thanks for trying. That shifted everything to the right a bit, but left a gap where the line should have been. I believe it was better off the original way.

    In looking at the actual graphic file /templates/ja_orisite/images/tab-accordion.png, it appears the source image is rendered incorrectly (in my book anyway) from the start. I think it should be centered on the line, not left-justified as it currently is. I guess I’ll have to see if that widget is included in the PSD source files.

    Thanks again for the effort…


    1. tab-accordion
    Manos Moderator
    #443717

    No you don’t want to change the image because it’s used in other parts also!
    Here is what you need to do:
    Open the file JOOMLA/templates/ja_orisite/css/mod_jaaccordion.css

    And around line 27 you will find this code:


    .ja-accordion ul.ja-accordion-containner h3.ja-accordion-title.active {
    color: #bd3928;
    background: url(../images/tab-accordion.png) no-repeat left bottom #fff;
    padding-bottom: 20px;
    border-bottom: none;
    }

    You need to change it to


    .ja-accordion ul.ja-accordion-containner h3.ja-accordion-title.active {
    color: #bd3928;

    padding-bottom: 20px;
    border-bottom: none;
    }

    and after that copy and paste this code :


    h3.ja-accordion-title.active {
    background: url(../images/tab-accordion.png) no-repeat left bottom #fff !important;
    position: relative !important;
    left: 15px !important;
    }

    This should do the trick 🙂

    Regards

    mcgra Friend
    #443766

    Thanks again for the help pacsm, but this appears to yield the same visual result as the first set of code you had me try (see the chartreuse/green circled area in the picture attached below).

    Here’s the snippet out of my /templates/ja_orisite/css/mod_jaaccordion.css file:

    .ja-accordion ul.ja-accordion-containner h3.ja-accordion-title.active {
    color: #bd3928;
    padding-bottom: 20px;
    border-bottom: none;
    }

    h3.ja-accordion-title.active {
    background: url(../images/tab-accordion.png) no-repeat left bottom #fff !important;
    position: relative !important;
    left: 15px !important;
    }

    Maybe I’m not being clear about what I’m after, so lets try a picture instead:

    I’d like to center the accordion active tab diamond shaped widget within the entire width of the accordion module (the one circled in orange on the included picture)…just like all the rest of the similar elements within the home page (as circled in blue).

    Any ideas after seeing what I’m hoping for? Thanks again for bearing with me…:)


    1. accordion-widget
    Manos Moderator
    #443790

    Hello,

    Well you need to change the image to do that as it is not designed in this way but after that you will have to change the CSS code on every single place that this image shows.

    The best way to do this is edit the psd file make the image smaller (remove the border line) and then design the border line if you still want that line with CSS.

    My solution is to center the diamond image a few px as it shows a little bit unaligned

    swissa Friend
    #443795

    Don’t want to step on anyone’s toes here but can I throw another suggestion in?

    You can try using the .png from tabs (I know it because i use tabs) and checking it on the demo this seems to achieve what you are trying to do. Same as pascm suggests without making a new png!

    .ja-accordion ul.ja-accordion-containner h3.ja-accordion-title.active {

    }

    Might help – even though it doesn’t have a bottom line?

    mcgra Friend
    #443935

    Thanks folks, I’ll give those suggestions a try!

Viewing 8 posts - 1 through 8 (of 8 total)

This topic contains 8 replies, has 3 voices, and was last updated by  mcgra 12 years, 1 month ago.

We moved to new unified forum. Please post all new support queries in our New Forum