Help to replace header using banner option on iNove theme
-
Hi, please could someone help me with this. My site (Tsardom.net) uses the iNove Theme and I am trying to replace the header by using the banner option as per the instructions here: http://j.mp/fv3Afp
I am trying to use one of these images (one has rounded corners but need to see which looks best):
http://img526.imageshack.us/i/2011headerroundedsmall.png/
http://img402.imageshack.us/i/2011headersmall.png/I entered the following code into the banner box as per the instructions I mentioned above:
<div style=”position:relative;top:-15px;left:-631px;width:290px;height:45px;background:transparent url(‘http://s3.wordpress.com/wp-content/themes/pub/inove/img/header.jpg’) no-repeat;padding-top:0;padding-left:0;”><img src=”http://img402.imageshack.us/i/2011headersmall.png/” alt=”Main page” title=”Main Page” width=”936″ height=”90″ /></div>
but it isn’t working (I have all visibility boxes checked by the way) so I’ve had to revert to my old banner.
I’d really like to get this sorted to improve the quality of my site’s appearance now that I have started to get a lot more traffic. Any help would be greatly appreciated. Once the banner is in place I will manually shut off the site title and tagline in the General Settings page.
The blog I need help with is: (visible only to logged in users)
-
Sorry, I failed at getting the code to show up correctly above.
<div style="position:relative;top:-15px;left:-631px;width:290px;height:45px;background:transparent url('http://s3.wordpress.com/wp-content/themes/pub/inove/img/header.jpg?m=1341020661i') no-repeat;padding-top:0;padding-left:0;"><img src="http://img402.imageshack.us/i/2011headersmall.png/" alt="Main page" title="Main Page" width="936" height="90" /></div> -
You might take a look at this post by Panos, which is much simpler.
-
Many thanks for the tip, I worked out where I was going wrong – the image was saving at a much higher resolution than I’d sized it to. Using a combination of the instructions (the size Panos suggested was big enough to replace the whole header) I’ve managed to get it to work.
The only problem I now have is that reducing the resolution has caused serious quality degradation with the logo and title looking quite poor. Is there a way to avoid that happening as a lot of sites I come across have nice sharp images even at small sizes.
-
JPG compression will always make graphic elements look fuzzy due to anti-aliasing. My suggestion is to try PNG which is much better with text and graphic elements, and due to the nature of your image, it should work fine. I would suggest PNG 24 bit rather than 8 bit if your image editing program gives you that option.
-
The original was a PNG (created in MS Publisher as I have limited graphic design abilities!) but WL Photo was only resizing to JPG. I’ve now managed to convert it using Photoshop to a PNG and using a ‘Bicubic sharpener’ I saw recommended online. The resulting image is now of a much more acceptable quality although still not as crisp and sharp as I would have liked.
I’ll try to learn some basic Photoshop skills if possible and recreate the header from scratch in there to see if that makes any difference at all.
Many thanks for all your help – really appreciate it. :-)
-
To get the best sharpness, it is better to go back to the original artwork, recreate the image in the exact size, and then save that image as a PNG. Once it has been saved once as a JPG, the anti-aliasing is already done and there is little that can be done to get it crisp and sharp. Bicubic sharpen can improve it somewhat, but only to a certain point, and reapplying the filter multiple times will end up with the image getting pixelated and introduce moray patterns.
If you don’t have the original in anything other than a JPG, you might have to recreate it from scratch.
Also in the file menu in Photoshop CS3, 4 and 5 is a “save for web & devices” selection. Use that and it will automatically optimize the image for the web and it will be as crisp and clear as it can be.
-
Yeah, at the second attempt I went back to the original PNG to create the smaller PNG instead of using the JPG. I did stumble across the web optimisation page but the resultant file was no better or worse than the PNG it had just saved. At any rate it’s a major improvement over the default header of the theme as a lot of readers didn’t have the font it used and so their devices were just using default fonts.
-
- The topic ‘Help to replace header using banner option on iNove theme’ is closed to new replies.
WordPress.com Forums 
