The Neoclassical Theme comes with a revolutionary rotating header image. You can actually use as many header images as you like and they will rotate on each refresh. It’s a cool feature, but when it comes to branding your blog, this rotating images makes it quite difficult for visitors distinguish your blog with a certain image or a certain header. Here’s how you can replace your Headlines and Rotating Headers with your own clickable header image without messing with the actual stylesheet.
Your header image should NOT be wider than 865 pixels. The height is variable so you can choose any height you prefer. For simplicity purposes, save your image as a jpg file, Using your FTP client, upload your header image file to the Neoclassical Theme’s images folder in your server.
Go, Dashboard – Appearance – Editor – Custom css.
Copy these codes and paste them in the custom css file.
.custom #masthead #logo a { display: block; height: 250px; width: 865px; background: url('http://your full URL path for the image file') no-repeat; outline: none; margin:5px 0px 5px 3px; }
.custom #masthead #logo, .custom #masthead #tagline {text-indent: -9999px; }
.custom #masthead h1, #masthead #tagline { display: none; height: 0; }
.custom #masthead { padding: 0; }
.custom #rotating_image img { display: none; border: 10px solid #eee; }
Replace Your Full URL Path For The Image File to that of yours. e.g
http://blogigs.com/wp-content/themes/neocalssical/images/yourimage.jpg
Replace the Width and Height of the image to the size of your image.
Update file. Refresh your blog and you should see your new clickable header.
Hi Leslie,
Where did you place your image file? If you have placed it in the image folder of the theme, then the path should simply be (images/yourimagefile.jpg) Also remember to check if your image is a jpg file. If it’s png or bmp file, then specify the extention accordingly.
Hi Costa, great post. can you make the Neoclassical theme’s rotating images header “clickable.” without removing the rotating feature i.e. you click on the header, it will load a new header image. i like the random rotating feature, just also wish to make it clickable so that viewer can change the images without having to click page refresh.
Please provide code changes if necessary.
Thanks
Mike
Hi Mike,
That’s food for some thought. I’ll see if it’s possible and update it here if it is.
hi
I am new at this. I was unable to get the image to appear even though the space (height) has been enlarged to fit the new image on the blog. I checked the location of the image is correct.
I included all of this code:
custom #masthead #logo a { display: block; height: 250px; width: 865px; background: url(‘http://your full URL path for the image file’) no-repeat; outline: none; margin:5px 0px 5px 3px; }
.custom #masthead #logo, .custom #masthead #tagline {text-indent: -9999px; }
.custom #masthead h1, #masthead #tagline { display: none; height: 0; }
.custom #masthead { padding: 0; }
.custom #rotating_image img { display: none; border: 10px solid #eee; }
Is that correct? (Besides changing the url and the height… I only changed the height on one spot)
thanks for your help… so much!
Oh and when I first clicked into the Custom CSS Editor there was this:
/* Welcome to Custom CSS!
You can select to add this stylesheet to your theme, or entirely replace it. If you add this to your theme, it will be loaded last, which means that your rules can take precedence and override the theme CSS rules.
Things we strip out include:
* CSS comments
* HTML code
* @import rules
* expressions
* invalid and unsafe code
* URLs not using the http: protocol
Thi /* Welcome to Custom CSS!
You can select to add this stylesheet to your theme, or entirely replace it. If you add this to your theme, it will be loaded last, which means that your rules can take precedence and override the theme CSS rules.
Things we strip out include:
* CSS comments
* HTML code
* @import rules
* expressions
* invalid and unsafe code
* URLs not using the http: protocol
Things we encourage include:
* @media blocks!
* sharing your CSS!
* testing in several browsers!
* helping others!
Please use the contact form if you believe there is something wrong with the way the CSS Editor filters your code.
*/ngs we encourage include:
* @media blocks!
* sharing your CSS!
* testing in several browsers!
* helping others!
Please use the contact form if you believe there is something wrong with the way the CSS Editor filters your code.
*/
I didn’t know if that was just a message or part of the code after I added the header code and saved it the above was gone.
Andrea,
For your first comment,
Where did you upload your image? The easiest way would be to upload it to the Theme’s images folder. Using your ftp client, go to your wp-content – themes – neoclassical – images.
Upload your image your images folder. For the neoclassical theme, the height should be preferably 180px. to avoid any other modifications.
if you have uploaded the correct image, the the background URL should be written like this:
background: url(‘images/banner.jpg’)
that is if you have saved your images as “banner.jpg” If you have saved it as “header.jpg” or any other filename, then change accordingly.
The rest of the codes remains the same. Hopefully you have not done any changes to the stylesheet.
………………………
For your second comment;
Are you sure this is the Neoclassical Theme that you are using? These tips are only tested for the Neoclassical Theme. I do not know if it works with other Themes.
;
Hi,
Thanks for you feedback about the blog header. i haven’t been able to get it to work. I am using the 2 column neoclassical so I uploaded the image in that images folder rather than the neoclassical.
The image seems to be in the right place and I can get it to show up on the internet
http://azumera.com/compost/wp-content/themes/2col-Neoclassical/images/bloglettuceheader.jpg
but not my blog http://www.azumera.com/compost
Maybe the problem is that when i save it in the wordpress custom css it saves as/ or turns into:
background: url(\’http://azumera.com/compost/wp-content/themes/2col-Neoclassical/images/bloglettuceheader.jpg\’)
with the dashes added \\ at the beginning and ending.
I don’t believe I have messed with the CSS because I selected:
Add this to the 2col-Neoclassical theme’s CSS stylesheet
I did make the photograph bigger because the instructions said any height is ok. The space where the blog header is supposed to be is larger now so I believe it is reading the new size of the header.
thanks so much for any help!
I’ve replied your email with instructions. Only remember the image should be uploaded to the images folder INSIDE the Neoclassical Theme. NOT anywhere else.
Hi Costa,
First let me say I love your theme. Thank you for sharing.
I can’t seem to change the header even after following the instructions. I made sure to upload my new image to the images folder but it still does not work. Not sure what I am doing wrong. Thanks,
Steve
Hi Steve.
But you have already got the image up, only problem is you did not re-size the image to fit the header. The proper width should be 910 px.
Re-size your image to that width and after doing so, take note of the height. After you have done that, re-load the image, then change the width and the height specifications in your custom css file accordingly.
Also, I see you are using the Theme as a CMS where you rely on Page content rather than Post contents. If that is your intention, then you should refer to my post on how to use WoprdPress as a CMS
http://blogigs.com/how-to-turn-your-wordpress-blog-into-a-cms/
As of now you have duplicate contents for your Home Page and the page titled, Jacksonville Divorce Information. You should remove the Home page to avoid getting penalized by Google.
The RSS Subscribe link is now being pushed to the second line because you have such lengthy titles on the navigation bar. A workaround is to stop that “subscribe” link from showing. To do this copy and paste this code in you custom css file.
.custom #nav li.rss { display: none;}
Use a text widget to display your RSS Feeds Subscription links in the sidebar. All the codes are available in your Feedburner account.
Hope this helps. Do let me know if you have further problems.
Costa, thank you for helping. I left this morning frustrated (with myself) thinking I hadn’t figured it out and when I checked the computer tonight, it was working. I will work on the other changes and suggestions later in the day. Thanks again for taking the time to help,
Steve
Hi Costa,
I am having a hard time figuring out how to get the full file path for my image header so I can insert it in the custom.css file. Where would I look to find this? Thank you.
Upload your image to the images folder within the Neoclassical Theme. If you do that, the path is simply:
‘images/yourimage.ext’
refer to my reply to the comment by Andrea on the top.