What's new

Website top bar is too dark - need it lighter


eXtremer

Member
Messages
16
Likes
0
Hi all,

I need to change a top bar to be more lighter on my new website, because the logo is loosing in the background. Tried to do it by myself but the I can make it more lighter but I'm loosing transparency, I don't know how to modify the image without loosing transparency.
If someone could help me I would really appreciate.

Thank you.

image attached.

Don't know why but the image attached cannot be downloaded.
 
Last edited by a moderator:

Hoogle

Guru
Messages
8,334
Likes
2,587
I am guessing it is a repeating of 1 X 1 if that is the case then open up in photoshop and choose a lighter colour rather than the black
 

IamSam

Administrator
Staff member
Administrator
Messages
20,657
Likes
12,501
Is this the image?

It's a dark square that is 128 x 128 px at 72 ppi

Screen Shot 2015-01-12 at 12.12.39 PM.png
 
Last edited:

Hoogle

Guru
Messages
8,334
Likes
2,587
it is obviously a repeating pattern very common with headers and footers in webdesign it takes 1 small image and repeats it to fill the desired area, making loading time quicker. All he needs to do is in the images folder find the image that will probably be named header.png or headerrepeat etc and open it up and paint a new colour not so dark. Save it and replace existing version, reupload image to server
 

eXtremer

Member
Messages
16
Likes
0
I am guessing it is a repeating of 1 X 1 if that is the case then open up in photoshop and choose a lighter colour rather than the black
Yes you are right it is 1x1, I choose a lighter color but I'm loosing transparency, I need it with transparency as the original.
 

Hoogle

Guru
Messages
8,334
Likes
2,587
I wouldnt do it with a 1x1 instead change it to the full height of your header X 1 so say 200 pixels high and 1 pixel wide then set the repeat to only horizontal, this will open up more options such as gradients etc.
 

eXtremer

Member
Messages
16
Likes
0
it is obviously a repeating pattern very common with headers and footers in webdesign it takes 1 small image and repeats it to fill the desired area, making loading time quicker. All he needs to do is in the images folder find the image that will probably be named header.png or headerrepeat etc and open it up and paint a new colour not so dark. Save it and replace existing version, reupload image to server
You are totally right!

I've tried it, look what happens...

Original:

xWOaSD3.jpg

Modified bye me, without transparency:

e1a8YuW.jpg
 
Last edited by a moderator:

Hoogle

Guru
Messages
8,334
Likes
2,587
ok same principal as my last post but instead of it being 200 X 1 do it 1X200 or banner height using a black to transparant gradient making sure it is not totally transparant on the right. and repeat it vertically rather than horizontally
 

Hoogle

Guru
Messages
8,334
Likes
2,587
I have to ask though why are you worrying about a repeat when you have a fullscreen photo as the background, these days everybody has fast internet so not really going to add any time to your page load time if you just do the header as 1 png-24 image the size you need it and not bother with trying to repeat it
 

eXtremer

Member
Messages
16
Likes
0
ok same principal as my last post but instead of it being 200 X 1 do it 1X200 or banner height using a black to transparant gradient making sure it is not totally transparant on the right. and repeat it vertically rather than horizontally
I don't know how to do it in Photoshop, I can do some simple stuff, this is way to much for me. If someone could do it for me or show me how to do it I would really appreciate.
It's not about loading time, the website (template) is like this don't want to change it.
 

Hoogle

Guru
Messages
8,334
Likes
2,587
mmm wordpress. not straight html. can you please send me the header.php file that will be in the theme template folder. I dont want to try and rewrite any code incase it is just a feature that may be adjustable via the theme interface. Also it may just be css via the main stylesheet so if you have that to hand it would be appreciated. Howeer some themes stipulate that you can not edit the theme other than the povided edit controls, so changing some of the master files may actually result in your whole site collapsing as some themes have measures in to prevent actual code edit.
 

eXtremer

Member
Messages
16
Likes
0
mmm wordpress. not straight html. can you please send me the header.php file that will be in the theme template folder. I dont want to try and rewrite any code incase it is just a feature that may be adjustable via the theme interface. Also it may just be css via the main stylesheet so if you have that to hand it would be appreciated. Howeer some themes stipulate that you can not edit the theme other than the povided edit controls, so changing some of the master files may actually result in your whole site collapsing as some themes have measures in to prevent actual code edit.
header.php & style.css atached , please see the zip file.
Thank you.
 
Last edited:

Top