Joomla Templates Club 406,261 posts

[omart Friend omartJoin date: May 2008Posts: 11Downloads:0Uploads:1 Thanks: 2]

#132435

I like the style in JA_Fedora of the left column, i mean de degradiant style, how can i use that same style on the right column.
Great Work, Thanks.

[lcristian Friend lcristianJoin date: August 2008Posts: 174Downloads:0Uploads:3 Thanked: 31 times in 26 posts]

#266342

You’ll have to update this file : /templates/ja_fedora/css/template.css and add some CSS code to the right module to load the same (or mirrored) gradient gif file.

[omart Friend omartJoin date: May 2008Posts: 11Downloads:0Uploads:1 Thanks: 2]

#266349

Thanks for the answer, but i think is more than just that, i play a lot whit this css with no luck, please developers give me a hand.
[PHP]
#ja-col1 {
float: left;
overflow: hidden;
width: 20%;
padding-top: 15px;
border-top: 5px solid #AEAEAE;
}

#ja-col2 {
float: right;
overflow: hidden;
width: 25%;
margin-top: 15px;
background: url(../images/vline.gif) repeat-y left;
}

#ja-col2 div.ja-innerpad {
padding-bottom: 30px;
background: url(../images/grad4.gif) no-repeat left bottom;
}
[/PHP]

[sgreer Friend sgreerJoin date: August 2008Posts: 14Downloads:0Uploads:1 Thanked: 1 times in 1 posts]

#267383

there’s many more styles for each of them including module styles, header styles etc. that are defined inside the #ja-col tabs. For instance if you look through the template, as an example you’ll see:

#ja-col1 div.moduletable h3,
#ja-col1 div.moduletable_menu h3,
#ja-col1 div.moduletable_text h3 {
margin: 0 0 5px;
padding: 0 5px 4px 20px;
text-transform: uppercase;
background: url(../images/symbol.gif) no-repeat 0 6px;
border-bottom: 1px solid #DDDDDD;
}

#ja-col2 div.moduletable h3,
#ja-col2 div.moduletable_menu h3,
#ja-col2 div.moduletable_text h3,
#ja-col2 div.moduletable_resources h3 {
font-size: 100%;
margin: 0 0 5px -11px;
padding: 5px 15px 9px;
background: url(../images/orange/h3r-bg.gif) no-repeat right center;
text-transform: uppercase;
color: #FFFFFF;
}

This shows the differences between the H3 tags. Probably the way that I would tackle it, is by going through the template.css file and finding all #ja-col1 tags and adding in ‘, #ja-col2 etc. and then searching through all #ja-col2 references and deleting all that you haven’t just created. See below for an example.


#ja-col1 div.moduletable h3,
#ja-col1 div.moduletable_menu h3,
#ja-col1 div.moduletable_text h3,
#ja-col2 div.moduletable h3,
#ja-col2 div.moduletable_menu h3,
#ja-col2 div.moduletable_text h3 {
margin: 0 0 5px;
padding: 0 5px 4px 20px;
text-transform: uppercase;
background: url(../images/symbol.gif) no-repeat 0 6px;
border-bottom: 1px solid #DDDDDD;
}


You may want to just copy the whole section out rather than using commas – as you may find you want to tweek it individually. For instance you may want the right column to align to the right etc.

Hope this helps.

Simon

[Menalto Friend MenaltoJoin date: May 2007Posts: 4736Downloads:0Uploads:43 Thanks: 2 Thanked: 531 times in 361 posts]

#270470

Did you manage to solve this? if so please mark this as solved, if not and you still need help please post here again and include your joomla version, template verison and a description of your problem if different from before.

[Author]

Posts