Joomla Templates Club 406,261 posts

[blatchy Friend blatchyJoin date: May 2011Posts: 9Downloads:0Uploads:1 Thanks: 9]

#164822

I would like to use a small .gif I created for each header section instead of using the small, pinkish first word for the header. The rest of the header text would remain the same. Is there a way I can do this?

Thanks!

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

#394724

Absolutely …. and it’s actually very simple . . .

First, make sure you upload your custom logo image to template/ja_methys/images

Second, find the following css rules within the template.css file (it should be at/about line 814) . .


/* Logo Image ---*/
h1.logo { width: 190px; height: 70px; }

h1.logo a {
background: url(../images/logo.gif) no-repeat left;
display: block;
width: 190px;
height: 70px;
}
Replace “logo.gif” (which I emphasized in bold above – should be at/around line 818) with the name of YOUR logo that you just uploaded to your images folder.

Depending on how you want the overall area to look, you may need to adjust some of the height/width settings – but again, this is vry easy and most certainly worth the “trial-and-error” experimentation.

Hope that helps – Let us know.

TOM

😎

1 user says Thank You to TomC for this useful post

1. blatchy

[blatchy Friend blatchyJoin date: May 2011Posts: 9Downloads:0Uploads:1 Thanks: 9]

#394766

Won’t that just adjust the main logo on the page? I’m looking to use a different logo, smaller, and instead of having section headers which have the first word as pink and 60% of full siez, and then the rest of the header in normal text….I want to replace the first word with the small logo instead but keep the remaining text the same. So instead of header like ‘abc Menu, I would have the logo for abc followed by the word ‘menu’.

Thanks!

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

#394803

Ahhh, I thought you were talking about the main site logo in the header section, my mistake.

So, if I understand you correctly, you are wanting to change the display for the various section category names – correct? … with your small logo as the “first word” and the second word being the name of the section (or something like that), correct?

If this is the case, then it seems to me that the code for such is within the template.css at approximately line 27


1.componentheading, .componentheading {
font-size: 100%;
text-transform: lowercase;
font-family: Arial, Helvetica, sans-serif;
border-bottom: 1px solid #333;
font-style: normal;
font-weight: normal;
padding: 0 0 10px;
margin: 0 0 10px;
color: #333;
}

.componentheading { font-size: 180%; }

h1.componentheading span {
padding-right: 20px;
background: url(../images/arrow-1.gif) no-repeat right 8px;
font-size: 150%;
}

span span.first-word {
background: none;
padding-right: 2px;
color: #ff0066;
text-transform: lowercase;
font-size: 60%;
}

h1.componentheading span span.first-word {
background: none;
padding-right: 2px;
color: #ff0066;
text-transform: lowercase;
font-size: 60%;
}

h2.contentheading, .contentheading {
font-weight: normal;
color: #111;
font-size: 250%;
}

Now I haven’t experimented with this, but it seems to me that if you modify the rules at lines 48, 56 and 64 – designating your logo as the background image, and then just utilize a one-word title name for your various sections – that might work.

If you want to try to do the same with the module headers, then it seems to me that the code for such is within the template.css at approximately line 548 – 603

div.ja-moduletable h3, div.moduletable h3 {
font-size: 100%;
text-transform: lowercase;
border-bottom: 1px solid #333;
font-style: normal;
font-weight: bold;
color: #000;
font-family: Arial, Helvetica, sans-serif;
padding: 0 0 10px;
margin: 0 0 10px;
color: #333;
}

div.ja-moduletable h3 span, div.moduletable h3 span {
padding-right: 20px;
background: url(../images/arrow-1.gif) no-repeat right 8px;
font-size: 150%;
text-transform: lowercase;
}

div.ja-moduletable h3 span.first-word, div.moduletable h3 span.first-word {
background: none;
padding-right: 0px;
color: #ff0066;
text-transform: lowercase;
font-size: 80%;
}

div.blue h3 span.first-word {
color: #1188cc;
}

div.badge-hot h3 span.first-word {
color: #cc0000;
}

div.badge-top h3 span.first-word {
color: #55aaff;
}

div.badge-pick h3 span.first-word {
color: #8888aa;
}

div.badge-new h3 span.first-word {
color: #66aa22;
}

div.blue a {
color: #1188cc;
}

div.ja-moduletable p {
margin: 10px 0;
}
Again, logically, it seems that if you modify div.ja-moduletable h3 span.first-word, div.moduletable h3 span.first-word with designating your logo as the background image, and then just utilize a one-word title name for your various modules – that might work.

Again, I haven’t tried this method, but it seems like it would make logical sense and it’s worth a trial-and-error shot, right?

Let me know if this method works.

TOM

2 users say Thank You to TomC for this useful post

1. JA Developer
2. blatchy

[blatchy Friend blatchyJoin date: May 2011Posts: 9Downloads:0Uploads:1 Thanks: 9]

#394809

Well, we’re getting closer lol. Yes, that’s exactly what I need. I had tried what you had mentioned before on my own and got the same results: even a one word title will take the charcteristics of the first word and then display over the top of the image as opposed to following the image.

Any thoughts?

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

#394826

Hmmmm ….. what about if you were to create a css rule as such . . .


h1.componentheading.first-word {
background:(... logo.gif);
}
but still keep . . .


h1.componentheading span span.first-word {
background: none;
padding-right: 2px;
color: #ff0066;
text-transform: lowercase;
font-size: 60%; }

Would not the “span span” in the second rule differentiate the two?
Then you could modify the “span span” rule so that the text displays as you like.

Gotta be honest, I’m theorizing here . . . I’ll be interested to know if it works.

🙂

1 user says Thank You to TomC for this useful post

1. blatchy

[blatchy Friend blatchyJoin date: May 2011Posts: 9Downloads:0Uploads:1 Thanks: 9]

#398126

Sorry, I was away for awhile. I made the changes you described. The first word still appears and it just appears over the logo. Any thoughts? Even if I could put in a blank value of the first word, that would work as well.

And thank you!

[thangnn1510 Friend thangnn1510Join date: October 2014Posts: 1608Downloads:0Uploads:80 Thanks: 73 Thanked: 278 times in 256 posts]

#398350

Please give your link site and screenshot. Thanks.

1 user says Thank You to thangnn1510 for this useful post

1. blatchy

[blatchy Friend blatchyJoin date: May 2011Posts: 9Downloads:0Uploads:1 Thanks: 9]

#398402

The site:
http://fishingisstupid.com/ThreeHeadsBrewing/

Thanks!

---

Attachments:

1. 

[thangnn1510 Friend thangnn1510Join date: October 2014Posts: 1608Downloads:0Uploads:80 Thanks: 73 Thanked: 278 times in 256 posts]

#398523

Please change this code:

div.ja-moduletable h3 span.first-word, div.moduletable h3 span.first-word {
background: url("/ThreeHeadsBrewing/templates/ja_methys/images/smalllogo.gif") no-repeat scroll left center transparent;
color: #7B2E00;
font-size: 60%;
padding-left: 24px;
padding-right: 2px;
text-transform: lowercase;
}

to

div.ja-moduletable h3 span.first-word, div.moduletable h3 span.first-word {
background: url("/ThreeHeadsBrewing/templates/ja_methys/images/smalllogo.gif") no-repeat scroll left center transparent;
color: #7B2E00;
font-size: 60%;
padding-right: 2px;
text-transform: lowercase;
}

and change this code:

h1.componentheading span {
background: url("/ThreeHeadsBrewing/templates/ja_methys/images/smalllogo.gif") repeat scroll 0 0 transparent;
font-size: 150%;
padding-right: 20px;
}


to

h1.componentheading span {
background: url("/ThreeHeadsBrewing/templates/ja_methys/images/smalllogo.gif") no-repeat scroll 0 0 transparent;
font-size: 150%;
padding-left: 13px;
padding-right: 20px;
}

in template/ja_methys/css/template.css.

1 user says Thank You to thangnn1510 for this useful post

1. blatchy

[blatchy Friend blatchyJoin date: May 2011Posts: 9Downloads:0Uploads:1 Thanks: 9]

#399331

We’re almost there. Could you take a look at the gheaders on the right column, for events and twitter? The first word is still coming up over the top of the logo although I thought I made the necessary change.

Also, I don’t want any of the words to be itlacized or smaller (like the first word). I want them to look like all the subsequent words. I think I can do that on my own but any help would do.

Thank You!

[thangnn1510 Friend thangnn1510Join date: October 2014Posts: 1608Downloads:0Uploads:80 Thanks: 73 Thanked: 278 times in 256 posts]

#399460

Please change this code:


div.ja-moduletable h3 span.first-word, div.moduletable h3 span.first-word {
background: url("/ThreeHeadsBrewing/templates/ja_methys/images/smalllogo.gif") no-repeat scroll left center transparent;
color: #7B2E00;
font-size: 60%;
padding-right: 2px;
text-transform: lowercase;
}

to


div.ja-moduletable h3 span.first-word, div.moduletable h3 span.first-word {
background: url("/ThreeHeadsBrewing/templates/ja_methys/images/smalllogo.gif") no-repeat scroll left center transparent;
color: #7B2E00;
font-size: 100%;
padding-left: 27px;
padding-right: 2px;
text-transform: lowercase;
}

in template/ja_methys/css/template.css.

1 user says Thank You to thangnn1510 for this useful post

1. blatchy

[blatchy Friend blatchyJoin date: May 2011Posts: 9Downloads:0Uploads:1 Thanks: 9]

#402107

I’m all set now. Thanks so much!

[Author]

Posts