Joomla Templates Club 406,261 posts

[shotley Friend shotleyJoin date: February 2010Posts: 8Downloads:0Uploads:0 Thanks: 3]

#153863

Hi, I have a question about customizing the look of JaSlideshow2 in Ores. I have seen in other themes that there is a way to make the buttons on the right of the module have more definition. Howevr, in Ores, they are alll the same color, there is no border between them, and they don’t really change when highlighted.

I suspect that this is all done through the mod_jaslideshow2.css file, but I can’t really determine what changes to make or what styles apply to which elements of the module. Does anyone know how I can:

• Add some defintion ( a horizontal line) between the buttons
• Change the active button so that it has a different background color and/or different font color than the other buttons

Getting the buttons to look more like they do in JA Rasite (with different colors and fonts) is the goals. I think this may affect the arrow as well.

Here is a snapshot of the module. It is in JA Ores in the light green color.

You can see the full site at http://www.newcitycompanies.com/new

Thanks in advance for any ideas you have!

[congtq Friend congtqJoin date: September 2009Posts: 278Downloads:0Uploads:28 Thanks: 10 Thanked: 49 times in 48 posts]

#353947

You only change in 2 files: modulesmod_jaslideshow2assetsstyle.css and templatesja_orescsstemplate.css. You can also change files in templatesja_orescsscolors folder.
You should install Firebug – a free addon of Firefox, it is a excellent tool to help you detect css.

[shotley Friend shotleyJoin date: February 2010Posts: 8Downloads:0Uploads:0 Thanks: 3]

#353985

Ok but is there any kind of guide that shows which of the many CSS tags need to be changed? For example, which ones affect the attributes I mentioned?

[congtq Friend congtqJoin date: September 2009Posts: 278Downloads:0Uploads:28 Thanks: 10 Thanked: 49 times in 48 posts]

#354071

You can change these css:

.ja-slide-buttons span {
background: #000000;
color: #FFFFFF;
display: block;
float: left;
margin-right: 5px;
padding: 2px 5px;
cursor: pointer;
}

.ja-slide-thumb-inner {
background-color: transparent;
border: 0px;
color: #101010;
padding-right: 0;
padding-bottom: 20px;
}

.ja-slide-thumbs-wrap .active .ja-slide-thumb-inner {
background: transparent;
color: #101010;
}
in templatesja_orescssmod_jaslideshow2.css file

[Author]

Posts