-
AuthorPosts
-
June 4, 2011 at 8:27 pm #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 ModeratorTomC
- Join date:
- October 2014
- Posts:
- 14077
- Downloads:
- 58
- Uploads:
- 137
- Thanks:
- 948
- Thanked:
- 3155 times in 2495 posts
June 4, 2011 at 8:43 pm #394724Absolutely …. 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
June 5, 2011 at 2:11 pm #394766Won’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 ModeratorTomC
- Join date:
- October 2014
- Posts:
- 14077
- Downloads:
- 58
- Uploads:
- 137
- Thanks:
- 948
- Thanked:
- 3155 times in 2495 posts
June 6, 2011 at 12:18 am #394803Ahhh, 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
June 6, 2011 at 2:26 am #394809Well, 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 ModeratorTomC
- Join date:
- October 2014
- Posts:
- 14077
- Downloads:
- 58
- Uploads:
- 137
- Thanks:
- 948
- Thanked:
- 3155 times in 2495 posts
June 6, 2011 at 3:50 am #394826Hmmmm ….. 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
June 24, 2011 at 12:28 am #398126Sorry, 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 Friendthangnn1510
- Join date:
- October 2014
- Posts:
- 1608
- Downloads:
- 0
- Uploads:
- 80
- Thanks:
- 73
- Thanked:
- 278 times in 256 posts
June 25, 2011 at 1:01 pm #398402thangnn1510 Friendthangnn1510
- Join date:
- October 2014
- Posts:
- 1608
- Downloads:
- 0
- Uploads:
- 80
- Thanks:
- 73
- Thanked:
- 278 times in 256 posts
June 27, 2011 at 2:16 am #398523Please 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
June 30, 2011 at 11:46 am #399331We’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 Friendthangnn1510
- Join date:
- October 2014
- Posts:
- 1608
- Downloads:
- 0
- Uploads:
- 80
- Thanks:
- 73
- Thanked:
- 278 times in 256 posts
July 1, 2011 at 4:11 am #399460Please 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
July 20, 2011 at 1:47 pm #402107I’m all set now. Thanks so much!
AuthorPostsViewing 13 posts - 1 through 13 (of 13 total)This topic contains 13 replies, has 3 voices, and was last updated by blatchy 13 years, 3 months ago.
We moved to new unified forum. Please post all new support queries in our New Forum
INsert small logo instead of First Word for headers?
Viewing 13 posts - 1 through 13 (of 13 total)