Joomla Templates Club 406,261 posts

[mahoo Friend mahooJoin date: June 2007Posts: 46Downloads:0Uploads:6 Thanks: 12 Thanked: 1 times in 1 posts]

#175874

Hi,

Can anyone help to change the header background colour to any colour like white as my logo colour and bg colour are the same.
Usually it’s the header.png in the template images folder but as for the T3 Framework it’s hard to find file locations.

Please assist me on this.

thanks
Mahoo

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#447680

Hi Mahoo

In order to make sure you get a solution for you, it helps if you can post up the url of the site together with making sure that in Template Manager the optimise css is set to off.

[mahoo Friend mahooJoin date: June 2007Posts: 46Downloads:0Uploads:6 Thanks: 12 Thanked: 1 times in 1 posts]

#447683

Thanks Swissa, Here is my web address: http://www.somcable.com

I want to change the bg colour of the area where my logo sits on, maybe have a gradian effect of white becoming orange.
But the main thing is to have a white bg for the logo.

thanks again
Mahoo

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#447685

Hi Mahoo,

You are welcome but in order for me to see the css files can you set in Template Manager, “Optimise css” to ‘no’ please? Thanks!

1 user says Thank You to swissa for this useful post

1. mahoo

[mahoo Friend mahooJoin date: June 2007Posts: 46Downloads:0Uploads:6 Thanks: 12 Thanked: 1 times in 1 posts]

#447692

Hi Swissa,

I have now set the Template manager “Optimise css” to NO.

Many thanks

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#447694

That makes it so much easier especially as you are using a colour not default. Thanks!

EDITED!!

To get the whole area of the header to go white you can go to around line 104 of templates/ja_nex/themes/orange/css/template.css and change the colour

#ja-header {background: #F6733A; < change to #ffffff
}

This will allow the map to show through behind the logo

If you want to lose the colour either side of the menü you’ll need to edit the code a bit more but with your colour scheme I think it fits in really well as it is!!

Hope that helped you!

1 user says Thank You to swissa for this useful post

1. mahoo

[mahoo Friend mahooJoin date: June 2007Posts: 46Downloads:0Uploads:6 Thanks: 12 Thanked: 1 times in 1 posts]

#447710

Thanks for that Swissa,

it worked when i changed the whole background to white but that killed the whole theme and became ugly. What i am after is really to keep the orange theme but only change the background of the area behind the logo only to any colour, so that the logo is visible. Also i want to move the map towards the middle rather than behind the logo.

Any suggestions?
Thank you so much
Mahoo

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#447711

<em>@mahoo 312792 wrote:</em><blockquote>became ugly</blockquote>

If you find it ugly don’t use it!! 😀

You’ve set your site to offline so I can’t see it anymore but you seem to have 2 different logos. One is slightly lighter than the other. Is that right? Anyway from memory (and my notepad on my mac) you can go to line 110 of templates/ja_nex/themes/orange/css/template.css and add white (or any colour you want) at the end of the line.

h1.logo a {background-image: url(../images/logoG.png) white;
}

This will give you the darker logo (logoG.png). If you want the lighter image I suggest you drop that one into the same image file and then edit the code above to be /images/logo.png. It will block out part of the map as it will give the logo a background. To move the map over I’d really need to see the site again and test it in my browser but easy enough to do. What you are looking for is

#ja-header .main {background: url('../templates/ja_nex/images/map-bg.png') no-repeat left bottom;
padding: 8px 0px 15px 0;
}

In fact if you copy this code and put it into your templates/ja_nex/themes/orange/css/template.css at the end of the file it should give you what you want.

#ja-header .main {background: url('../templates/ja_nex/images/map-bg.png') no-repeat 140px bottom;
padding: 8px 0px 15px 0;
}

If you play with the 140px number you should get it to sit where it is best for you! 🙂

Hope that helps you even though I’m blind!! :laugh:

[mahoo Friend mahooJoin date: June 2007Posts: 46Downloads:0Uploads:6 Thanks: 12 Thanked: 1 times in 1 posts]

#447764

Hi Swissa,

Thank you for your time and effort… Sorry for the site being down and i have now put back up,

I have tried the code below but doesn’t change anything. As you can see the logo is almost invisible.

h1.logo a {background-image: url(../images/logoG.png) white;
}

The only other solution i am thinking in to have another image with blend of white to be placed behind the logo or maybe super impose the logo with another white image behind.

Still want to move the map image to the centre though…

many thanks
Mahoo

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#447766

Hallo Mahoo,

You changed the logo? Always good if you can blend with something but in the meantime you can try this if you want to. I try to make the white behind the logo as small as possible and also to align it to the left of the menü so that it looks a bit better.

templates/ja_nex/css/template.css @ line 651

h1.logo a {background: url(../images/logo.png) no-repeat center center white;
display: block;
height: 70px;
width: 100px;
margin-left: 30px;
}

For the map in the same css file @ 634 use this code.

#ja-header .main {background: url(../images/map-bg.png) no-repeat 100px bottom;
padding: 8px 0 15px 0;
}

Maybe that works better for you. If you dont like this I suggest that you redo the logo to a better style for the template. There I cannot help you I’m afraid. There are as yet undiscovered bacteria on distant planets that are more creative than me! :laugh:

---

Attachments:

1. 

1 user says Thank You to swissa for this useful post

1. mahoo

[mahoo Friend mahooJoin date: June 2007Posts: 46Downloads:0Uploads:6 Thanks: 12 Thanked: 1 times in 1 posts]

#447777

Hey Again,

I can’t thank you enough… for taking the time to help me out here. It’s a learning experience.
It worked and this is how i wanted but i will edit the logo somehow to have more elegant background rather than the square rectangle.
But at least my problem is solved. Can i PM you for any future help?
take Care
Mahoo

1 user says Thank You to mahoo for this useful post

1. swissa

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#447780

You are very welcome. We’re all learning – I know I am. 😉

Posting up on the forum will give you access to the whole community – lots of people here with more experience than I have. If I can help you again then I’ll certainly try. 🙂

Good luck with the site and with the fibre rollout. Bestens!

[Author]

Posts