Joomla Templates Club 406,261 posts

[eschossow Friend eschossowJoin date: May 2011Posts: 5Downloads:0Uploads:0]

#165578

Hello,
Looking for help on changing the background from Orange to color 006600 (already have done so on the text and some of the nav bars.I know that you need to change the actual .gif file, but am having a hard time figuring out how the change the “angled” headings for the modules.
If someone could direct me to the actual .gif files or a list of the ones i’d need to change, I would appreciate it.

website at: http://www.thatstoofah.com

thanks

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#398075

If I am understanding your issue correctly . . . it would seem that the CSS rule that applies to that particular element is at line 815 in your template.css file – as follows . . .


div.moduletable h3 span.left-bg, div.moduletable_menu h3 span.left-bg, div.moduletable_default h3 span.left-bg, div.moduletable_text h3 span.left-bg, div.moduletable_tabs h3 span.left-bg {
background: url("../images/span-left.gif") no-repeat scroll right bottom transparent;
display: block;
float: left;
padding: 10px 60px 12px 10px;
The image appears to be called “span-left.gif” within your template images folder. The actual image, itself, looks like this . .

The path to find the image is templates/ja_opal/images/span-left.gif. – Note that the original image appears larger/longer than it does as displayed – as it is automatically resized to fit whatever element for which it is utilized. (so don’t be thrown off by the length of the original image).

So, what you would need to do is modify or replace that image with whatever you want – and update the CSS rule above accordingly.

Hope that helps – Let us know if you run into further problems.

😎

---

Attachments:

1. 

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#398174

Hi ,

In this template, you have to change 3 images:
1.templates/ja_opal/images/h3-bg2.gif
Css for it: template.css line 524

#ja-contentheading h1.componentheading {
background: url("../images/h3-bg2.gif") no-repeat scroll left bottom transparent;
border: medium none !important;
color: #FFFFFF;
font-size: 100% !important;
letter-spacing: 1px;
margin: 0 0 0 -5px;
padding: 0 0 0 5px;
text-transform: uppercase;
}

2./templates/ja_opal/images/arrow-right.gif
Css for it: template.css line 535

#ja-contentheading h1.componentheading span.left-bg {
background: url("../images/arrow-right.gif") no-repeat scroll right bottom transparent;
display: block;
float: left;
padding: 9px 20px 14px 10px;
}

3.templates/ja_opal/images/span-left.gif
Css for it :template.css line 815

div.moduletable h3 span.left-bg, div.moduletable_menu h3 span.left-bg, div.moduletable_default h3 span.left-bg, div.moduletable_text h3 span.left-bg, div.moduletable_tabs h3 span.left-bg {
background: url("../images/span-left.gif") no-repeat scroll right bottom transparent;
display: block;
float: left;
padding: 10px 60px 12px 10px;
}

Those are 3 images you have to change and you can change css following your new images.
You can install Firebug add on for Firefox, it will helps you so much in style your site.
Regards

[Author]

Posts