Joomla Templates Club 406,261 posts

[juniew Friend juniewJoin date: December 2006Posts: 26Downloads:0Uploads:6 Thanks: 6]

#147457

Where can I change the color of the background behind the logo in JA Teline III?

Also where can I change the background behind the entire top horizontal row behind the headline and maga menu at the very top of the JA teline III template?

Please see attached picture

Thanks ALL!

---

Attachments:

1. 

[micrantha Friend micranthaJoin date: May 2007Posts: 465Downloads:0Uploads:6 Thanks: 6 Thanked: 158 times in 148 posts]

#328709

Hello juniew,

You can find selectors for CSS by studying source-code of your pages.
So selector for topbar: class=”ja-topbar”.
Look in template.css and find subject:

/* Topbar ---*/

Make yor changes there.

Same method for lookin-up selector for logo-code: class=”logo”.
Find subject:

/* Logo Image ---*/

Good luck,
Micrantha

[juniew Friend juniewJoin date: December 2006Posts: 26Downloads:0Uploads:6 Thanks: 6]

#329109

Thank you for your help. I have tried editing these variables but i am not a css expert it is just not coming out the way that i would like it to look. Can someone suggest a way in which i can get my template to look like the attached images with the yellow background color behind the logo and the search bar.

I would like to add an image fill the yellow color behind the logo and search bar that fits like the attached image.

Can someone please suggest some sample code to achieve this

Thanks all

---

Attachments:

1. 

[micrantha Friend micranthaJoin date: May 2007Posts: 465Downloads:0Uploads:6 Thanks: 6 Thanked: 158 times in 148 posts]

#329112

Hello juniew,

Try following rules in template.css

To give header color #FFC20F:

#ja-header .main { padding: 30px 0 10px; background-color:#FFC20F }

To keep topbar white:

.ja-topbar {
position: absolute;
top: 0;
width: 100%;
border-bottom: 1px solid #ddd;
font-size: 11px;
background-color:#FFF;
}

After that you have to edit logo image to fit this color.

Good luck,
Micrantha

1 user says Thank You to micrantha for this useful post

1. juniew

[juniew Friend juniewJoin date: December 2006Posts: 26Downloads:0Uploads:6 Thanks: 6]

#329316

Excellent! with your help and a little bit of tweaking I was able to get it exactly the way I want. Thank you so much for your continued help. I have attached a screen shot of what it looks like now.

How do i change the FONT of the Date, Headlines, feature, tool, member,twitter and RSS Topbar links and their associated hover color?

How do I change the border color that separates these Items?

again Thank you for all your help

---

Attachments:

1. 

[micrantha Friend micranthaJoin date: May 2007Posts: 465Downloads:0Uploads:6 Thanks: 6 Thanked: 158 times in 148 posts]

#329319

Hello juniew,

Easiest way to answer this kind of questions is first to look in source code of generated page, in order to find id’s and classes of the elements you want to get grip on via css.

In this case open file template.css and find these subjects:
/* Topbar —*/
/* Headlines Module —*/
/* RSS Module —*/
and selectors:
.ja-topbar
.ja-healineswrap
.ja-megamenu
.ja-twitter-tweets

You can find out by trial and error what rules you need.

Good luck,
Micrantha

1 user says Thank You to micrantha for this useful post

1. juniew

[juniew Friend juniewJoin date: December 2006Posts: 26Downloads:0Uploads:6 Thanks: 6]

#329506

Thank you Micrantha. I have tried everything and followed the commented headers for guidance on what to change but I am just about ready to pull my hair out. I got the font color changed for the left side of the topbar but the features, Tool, Member, twitter, RSS on the right are driving me crazy.

Could you tell me specifically where I can make such a change? including the background hover color?

Thanks a million

[micrantha Friend micranthaJoin date: May 2007Posts: 465Downloads:0Uploads:6 Thanks: 6 Thanked: 158 times in 148 posts]

#329510

Hello juniew,

Hope you have hair left…..
I am about to close computer.
I will look into it, probably begin next week.

good night,
Micrantha

[micrantha Friend micranthaJoin date: May 2007Posts: 465Downloads:0Uploads:6 Thanks: 6 Thanked: 158 times in 148 posts]

#329526

OK, you have to look into more css-files:
In any case file template.css contains a few lines you need:

.ja-topbar (font-size for all topbar-items; you could add background-color)
.ja-day, .ja-updatetime (you could change line for background-color)

.ja-headlines
.ja-headlines a:hover, .ja-headlines a:active, .ja-headlines a:focus
.ja-syndicate a
.ja-syndicate a:hover, .ja-syndicate a:active, .ja-syndicate a:focus

For megamenu there is also this important file: templates/ja_teline_iii/css/mod_jamegamenu.css

File modules/mod_jamegamenu/assets/style.css also contains some rules, but you probably don’t need to change these.

Hope your hair can grow again.
good luck,
Micrantha

1 user says Thank You to micrantha for this useful post

1. juniew

[juniew Friend juniewJoin date: December 2006Posts: 26Downloads:0Uploads:6 Thanks: 6]

#329891

Found it in the mod_jamegamenu.css… Thanks

[kha007 Friend kha007Join date: October 2009Posts: 50Downloads:2Uploads:6 Thanks: 17]

#330625

Hello
I came across this and I hope you could help me. I just want to change the color on the sides of my pages within the search bar. color model is that of the Home tab, because I do not know the code of that color .. I wish that when typing inside the search bar appears in a more readable color on black background. I have attached a picture of what I want.

thank you.

---

Attachments:

1. 

[micrantha Friend micranthaJoin date: May 2007Posts: 465Downloads:0Uploads:6 Thanks: 6 Thanked: 158 times in 148 posts]

#330629

Hello,
I don’t see your picture. Maybe you forgot?
I will look into it next time.
Micrantha

[kha007 Friend kha007Join date: October 2009Posts: 50Downloads:2Uploads:6 Thanks: 17]

#330631

<em>@micrantha 162256 wrote:</em><blockquote>Hello,
I don’t see your picture. Maybe you forgot?
I will look into it next time.
Micrantha</blockquote>

I put the picture in my previous post.

[micrantha Friend micranthaJoin date: May 2007Posts: 465Downloads:0Uploads:6 Thanks: 6 Thanked: 158 times in 148 posts]

#330657

Hello

For background color of space around page search these lines in template.css:

body#bd {
background: #f7f7f7;
color: #000;
}

If you want dark gray of home-buttin, change background to #333333.

For search field you have these lines:

#ja-search .inputbox {
width: 270px;
background: url(../images/icon-search.gif) no-repeat 8px center #fff;
padding-left: 24px;
font-weight: bold;
font-size: 115%;
}

#ja-search .inputbox:hover, #ja-search .inputbox:focus {
background-color: #fffff0;
}


You could change it to:

#ja-search .inputbox {
width: 270px;
background: url(../images/icon-search.gif) no-repeat 8px center #333;
padding-left: 24px;
font-weight: bold;
font-size: 115%;
color:#FFF; /*change text color to white*/
}

#ja-search .inputbox:hover, #ja-search .inputbox:focus {
background-color: #333;
}


Maybe this is what you mean?
Good luck,
Micrantha

1 user says Thank You to micrantha for this useful post

1. kha007

[kha007 Friend kha007Join date: October 2009Posts: 50Downloads:2Uploads:6 Thanks: 17]

#330796

Hi!!!
nice it’s work, thank you very mutch. something in the search bar, I would like the color remains constant. dark gray color only appears when the mouse passes over.
do you have an idea for resolve that?

[Author]

Posts