Joomla Templates Club 406,261 posts

[ruunehaako Friend ruunehaakoJoin date: October 2013Posts: 9Downloads:0Uploads:3 Thanks: 3]

#191381

Hi!

I tried to change the background color of the header and the main menu to black. But I didn’t work out that well – see screenshot below. I would like the whole area around the logo and behind the menu black.

In the template.css file, I added “background: black;” on line 770 and 815 (approx);

#ja-header .main { text-align: center;
background: black;
}

I would really appreciate if you could point out where to change the code!

/Marten

feelfresh.se

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

#508974

You’re close, but it’s a different CSS rule.

So that I can best assist you, please temporarily set “Optimize CSS” to “No” within your Template Manager–General settings.

[ruunehaako Friend ruunehaakoJoin date: October 2013Posts: 9Downloads:0Uploads:3 Thanks: 3]

#508975

<em>@TomC 393584 wrote:</em><blockquote>You’re close, but it’s a different CSS rule.

So that I can best assist you, please temporarily set “Optimize CSS” to “No” within your Template Manager–General settings.</blockquote>

Ok, done.

(As you can see on my site, I’ve removed the changes done in template.css.)

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

#508976

Try This . . .

Within file path –> /templates/ja_zite/css/layout.css
at line 86, add a “background” property – for example . . .


#ja-header {
background: #000000
}

Let me know if that works for you.

You might also want to take a look at the “Understanding Template Overrides in Joomla” link in my signature.

1 user says Thank You to TomC for this useful post

1. ruunehaako

[ruunehaako Friend ruunehaakoJoin date: October 2013Posts: 9Downloads:0Uploads:3 Thanks: 3]

#508981

<em>@TomC 393588 wrote:</em><blockquote>Try This . . .

Within file path –> /templates/ja_zite/css/layout.css
at line 86, add a “background” property – for example . . .


#ja-header {
background: #000000
}

Let me know if that works for you.

You might also want to take a look at the “Understanding Template Overrides in Joomla” link in my signature.</blockquote>

Yes, it works nicely – the whole area above the menu is now black. Thanks a lot!
I’ve also been looking into “mega.css” to change the bg-color of the menu, but I guess that won’t change color on the full width of the area – only behind the menu objects? Can this also be solved in layout.css, perhaps?

And yes, I really should look into the Overrides!

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

#508982

Seems that the JA Developers designed this template with the main nav being – for lack of a better term – nested on top of the overall main bg. I’m sure this can be done – though I’m going to reach out to my fellow JA Support Colleagues for some additional thoughts on it for you.

1 user says Thank You to TomC for this useful post

1. shawhir

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#509014

You can try to work with my below solution

Open templates/ja_zite/css/template.css file

Add new script

body#bd #ja-wrapper {
background: #000;
}

Remember to clear cache from Admin area after changed

[ruunehaako Friend ruunehaakoJoin date: October 2013Posts: 9Downloads:0Uploads:3 Thanks: 3]

#509225

<em>@Ninja Lead 393631 wrote:</em><blockquote>You can try to work with my below solution

Open templates/ja_zite/css/template.css file

Add new script

body#bd #ja-wrapper {
background: #000;
}

Remember to clear cache from Admin area after changed</blockquote>

Thanks! The suggested code almost solved my problem, but I think it must be “tamed” a bit;

I added the script, and the area behind the main menu turned black – great!

However, the bg-color of User1, Position5 and 7 and so on turned out black as well. User2 and 3 was not affected.
(see site at feelfresh.se)

Looks like the new code overrides the settings for some of the other areas as well.

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#509256

You can change background for User2 and 3 here

Open templates/ja_zite/css/template.css file

From

#ja-topsl1 {
background: #f9f6f7;
border-bottom: 1px solid #ddd;
}

#ja-botsl {
background: #fff;
border-top: 1px solid #ddd;
}

Change to

#ja-topsl1 {
background: #000;
border-bottom: 1px solid #ddd;
}

#ja-botsl {
background: #000;
border-top: 1px solid #ddd;
}

Don’t forget to clear cache from Admin area

1 user says Thank You to Ninja Lead for this useful post

1. shawhir

[ruunehaako Friend ruunehaakoJoin date: October 2013Posts: 9Downloads:0Uploads:3 Thanks: 3]

#509356

<em>@Ninja Lead 393958 wrote:</em><blockquote>You can change background for User2 and 3 here

Open templates/ja_zite/css/template.css file

…

</blockquote>

Ok, what I meant was that the area above the slideshow (behind the menu & around the logo) went black, and that’s good!

But, unfortunately, User1, Position5 and 7 and so on went black as well.

So – if it’s possible – I would like only the area above Slideshow to have a black background (except for the bottom part of the site, that already is black).

Sorry if my last post was confusing, english is not my native language.

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#509440

I’m misunderstanding about your request, Now, this way will help you to change User1, Position5 and 7 with black on your site

Open templates/ja_zite/css/template.css file

from

#ja-topsl1 {
background: #f9f6f7;
border-bottom: 1px solid #ddd;
}

Change

#ja-topsl1 {
background: #FFF;
border-bottom: 1px solid #ddd;
}
#ja-container {
background: #FFF !important;
}


Don’t forget to clear cache from Admin area

1 user says Thank You to Ninja Lead for this useful post

1. ruunehaako

[shawhir Friend shawhirJoin date: October 2013Posts: 15Downloads:0Uploads:0 Thanks: 5]

#509476

Hey folks I am curious to this too and sadly don;t have the best amount of css experience other than playing with it in firebug. I am very curious to turn the upper part black which has the menu and where the logo sits. Can anyone be kind enough to help?

[shawhir Friend shawhirJoin date: October 2013Posts: 15Downloads:0Uploads:0 Thanks: 5]

#509481

Thanks to Mister Ninja I’ve changed most of it to black other than the Menu bar. I’m going to keep trying but If anyone can help out along the way I’ll be grateful. Sending out the good vibes.

[ruunehaako Friend ruunehaakoJoin date: October 2013Posts: 9Downloads:0Uploads:3 Thanks: 3]

#509493

<em>@shawhir 394231 wrote:</em><blockquote>Thanks to Mister Ninja I’ve changed most of it to black other than the Menu bar. I’m going to keep trying but If anyone can help out along the way I’ll be grateful. Sending out the good vibes.</blockquote>

I too really appreciate the effort of the JA team. Thanks to Ninja and TomC I’m pretty close to a solution;

In layout.css the header can be changed:

#ja-header {
background: #000000
}

And in template.css, the color behind the menu (menubar);

body#bd #ja-wrapper {
background: #000
}


However, the second part also affects some areas; User1 & 2, “Main Body” and Position5 & 7.

#ja-topsl1 {
background: #f9f6f7
border-bottom: 1px solid #ddd
}
#ja-container {
background: #f9f6f7 !important;
}
This part takes care of almost everything. User2, “Main Body” and Pos5,7 is now back to normal.

User1 is now the problem. But after adding backgroundcolor to ja-topsl, it’s been taken care of;

#ja-topsl {
background: #f9f6f7
border-bottom: 1px solid #ddd
}


Only one tiny(?) problem left to solve: The thin area just below the Slideshow. It seems to be connected with the area behind the menu (just above Slideshow).

I don’t have any css experience, but maybe the body#bd #ja-wrapper and the changes in ja-topsl1 can be replaced by

#ja-container {
background: #f9f6f7 !important;
}
in the proper place? But I guess I would end up with the same problem anyway – a thin black bar just below the Slideshow.

But, when I don’t use the slideshow it looks brilliant!

Almost there!

[shawhir Friend shawhirJoin date: October 2013Posts: 15Downloads:0Uploads:0 Thanks: 5]

#509501

It really does look brilliant but now I am back to the start of where I am – my entire screen is black.

I see that you were able to do it with your own site and now I am trying to mimic what you have done. This will take some time but I can see you got there 🙂

[Author]

Posts