For some mails, I replied back personally but now I think, its better to include small article, not a lengthy one but one tip at a time covering customizations I have already done and whenever it happens in future… what do you think?
I will start with Customizing Header section and adding a banner image (look for area holding my logo, tagline and short description about me, at the top of the page) to it.
To begin with, I must share... I am using Thesis Wordpress Theme (version 1.5). My tips will only be based on that (I may include one more theme in near future, which I am experimenting with, for one of my upcoming blog).
Please remember, I am no expert and my procedure may be different from expert opinions available on topic, still for one thing you can remain assured, I have followed these steps and results match my expectations.
Add banner image to Thesis Theme Header
- To get best results on Thesis theme, you must download Thesis OpenHook plugin, highly recommended.
- Open your dashboards, locate the area, which says, Quickpress, upload your image via this option and insert image into post.
- Now you have got an HTML code for your image along with the link, where you want viewer to be redirected once the image is clicked, cut and paste this HTML code to notebook editor.
- See on left of your dashboard, under the heading, Appearance, click on Thesis Openhook.
- Locate OpenHook for Header; add HTML code (from step 2) here.
- Click on Remove Thesis default header and save; with this you are done.
Wait a bit, I don't prefer last step... as for Search Engines your site name and tagline plays important role while your site got indexed, so why to remove them... instead I have followed next step and ignored the last one...
- Open Custom Stylesheet
custom.css
by clicking Thesis Custom Styling below Thesis OpenHook under Appearance on left of dashboard and add below given snippet at the bottom of available code on page-
/*CODE TO HIDE DEFAULT HEADER AND SHOW CUSTOM HEADER */
.custom #header #logo { display: none; }
.custom #header #tagline { display: none; }
/* Optional to remove space around header image so image sits on divider line */
.custom #header { padding: 0; }
- Save your changes and you are ready to show your style to world with this clickable personalized Header image.
Isn’t it simple?
If you are benefited, add your website below and I will make a visit to your site.
No comments:
Post a Comment