Joomla Templates Club 406,261 posts

[mcgra Friend mcgraJoin date: February 2012Posts: 4Downloads:0Uploads:2]

#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 ManosJoin date: February 2014Posts: 2806Downloads:46Uploads:56 Thanks: 200 Thanked: 633 times in 576 posts]

#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 mcgraJoin date: February 2012Posts: 4Downloads:0Uploads:2]

#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…

---

Attachments:

1. 

[Manos Moderator ManosJoin date: February 2014Posts: 2806Downloads:46Uploads:56 Thanks: 200 Thanked: 633 times in 576 posts]

#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 mcgraJoin date: February 2012Posts: 4Downloads:0Uploads:2]

#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…:)

---

Attachments:

1. 

[Manos Moderator ManosJoin date: February 2014Posts: 2806Downloads:46Uploads:56 Thanks: 200 Thanked: 633 times in 576 posts]

#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 swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#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 {

• color: #BD3928;
• background: url('../plugins/system/jatabs/jatabs/themes/ja_orisite/menu-active.png') no-repeat center bottom #FAFAFA;
• padding-bottom: 20px;
• border-bottom: none;

}

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

[mcgra Friend mcgraJoin date: February 2012Posts: 4Downloads:0Uploads:2]

#443935

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

[Author]

Posts