(23 posts)
(7 voices)
flashden422
Member
Hello,
Could you please let me know which files and the line numbers in each files would need to be altered to make the logo area bigger at the top of each of the pages and the home page as well. I'm using the latest version of InFocus (downloaded a few weeks ago) and the latest version of Wordpress (3.2.1).
Or feel free to post a link to the documentation. I had thought that I had seen this online before, but can't seem to find it now.
Thank You.
flashden422
Member
Update:
I found the code around line 124 of the style.css. I commented out the original so I would have it just in case.
- - -
#header{position:relative;height:140px;background:url(images/header.png) repeat-x center top;}
/*#header{position:relative;height:100px;background:url(images/header.png) repeat-x center top;}*/
.has_slider #header{height:140px;}
/*.has_slider #header{height:92px;}*/
- - -
I have the right spacing now. Just need to change the header from 100 tall to 140 tall.
The strange thing is that when I open up the header in Photoshop or Illustrator it's pitch black, which is not how it looks in the preview or online, as I am using the steel blue theme. Can you tell me where I can get the steel blue Header PSD so I can change it to be 140 tall? Or perhaps post it here or email it to me?
flashden422
Member
Hello. I wanted to give you an update on this.
I found the source files for the InFocus Steel Blue theme here:
http://mysitemyway.com/skins/custom-skins/steelblue-05/
I was able to open the existing Header.png file with Adobe Fireworks without loosing any of the gradients or other details being lost. After I opened it in Fireworks, I saved it as a file type that would open in Adobe Illustrator and Flash. A .psd if I recall correctly. Then I opened it up in Flash, set the stage to the proper Header dimensions and broke it into a bitmap.
From here I could separate the image so it could be stretched without looking stretched. I published it as a PNG and uploaded it to the site, replacing the current Header.png.
Worked out well.
But I'd still like to get an original .PSD or .EPS file if possible so it can look as good and crisp as possible. Thank you.
Webtreats
Support
Hi flashden422,
We run our final images through an image compressor to minimize filesize, which sometimes makes the transparent .png files turn black in Photoshop.
I've attached the uncompressed header graphic below which shouldn't have that issue.
header.png (73.7 KB, 59 downloads) 9 months old The 'raw' uncompressed header.png file you made available here:
1) Do I adjust and use that file in the actual size you provided?
2) I notice that the code says "repeat" do I need to take just a crop of that file or just replace the entire width file with my new adjusted height?
Elliott
Support
Hello MacMyDay,
Yes you would adjust the size of the image as it is displayed. The only CSS edit you should need is increasing the header, navigate to Dashboard -> your theme -> General Settings -> Custom CSS and add this line,
#header { height: 150px !important; }
And then edit the image file so it's 150px tall or to whatever dimension you need.
Excellent. I'm going to work on this later this week and also customize the logo.
One other question on header and logo image. If I want to place in image as the logo and have that image top align with the top of the header.png file (ideally I would create a logo that was the same height as the header png so that bottom and top are aligned and superimposed on the top.
You can see I have a silly place holder on my site here http://www.allankarl.com/keynote_speaker - currently the image isn't the exact size anyway and it's just a place holder as a test, but if i wanted the top to be lined up on the top how do I remove the padding or margin to get this to fit nicely on top?
thanks,
Allan
Hey there -
I tried that, but the logo didn't move. I tried different values and didn't move. I added !important; as well, that didn't do anything.
logo-buffering.jpg (146.1 KB, 4 downloads) 6 months old Hey Elliott -
That code worked better, I was able to adjust a little bit on this trial and found that 7px was about right. Could that alert bar on my site that is set there because the Jigoshop "store" is in "demo" mode, be affecting placement of the logo in terms of alignment?
After playing around a bit with the logo I have three additional questions or issues:
1) I created a PNG-24 file in photoshop and rasterized and smoothed the text, but the text on my logo file is jagged and unacceptable bad resolution. Is InFocus doing something that is making this look bad. When I look at logo in browser in looks nice and clean?
2) While the header.png file is 100px high, and I created the logo/image at same height, I noticed that I needed to make it smaller (85px) to prevent overlapping below into slider area; yet on sub pages the image is not big enough as there seems to be a 10-15 px gap
please check out the site and see: http://www.allankarl.com/keynote_speaker
3) Of course, I'm looking to increase height of the header.png file for the final version, but how will this affect both home and subpage?
thanks,
Allan
Hi Elliott - Okay. I'll work on #1 and figure out what's up with the file
Regarding #2 -- There is something weird here. I have disabled demo mode for the shopping cart (jigoshop) and still have that behavior. I have adjusted the code you provided
.logo { position: absolute !important; top: 7px !important; left: 0px !important; }
And if i change from 0-10px on the top it moves consistently; and the subpages have extra space on the bottom. So not sure what is throwing the home page off, as I noted before, the logo images is set at 85px; yet the header png is at 100px, I did this because the100 px logo overlapped the header.png. the 85px logo does not.
It seems that then the logo is too small in height on the subpages. And maybe it's this 15px difference?
Elliott - That gave me the control to move just home and just other pages, but it's funny because the subpages must be a few pixels taller than the home page as my logo image doesn't have the height to position from top to bottom.
There's a post elsewhere here that shows how to use different logos on different pages, as I refine my logo, I will look to replace the logo on subpages with one that's taller and fits the space.
thanks!
You must log in to post.
resolved
