I have shown you how to center your blog header. Today I will be guiding you on designing your sidebar widget Title which makes your blog more stylish and classic.
Widget titles appear above your gadgets so long you've written a text into the title box in your widget editor. Generally, these titles are styled based on your chosen template and by default, the sidebar widget title of the older blogger themes are simply plain and don't look appealing to the eyes!
There are several edits that can be carried out with just CSS codes which can result in a beautiful customised and more appealing widget title.
This edit requires nothing more than pasting the needed CSS codes into your theme's skin section through the CSS box in the advanced section of your template's editor.
To design your sidebar widget Title, you need to decide on what how you want your gadget to look like or feel. If you are using the default blogger templates, there are a few edits you can do on your sidebar title like changing the font, size and size but most of those changes will affect other gadgets in your blog because blogger somehow interlinked most gadgets and sections with CSS codes. Any edit on one might affect the other.
So, let's do it the other way.
Navigate to the advanced section of your theme's customizer page then, according to your requirement choose any CSS choice below, edit further to your taste then paste and save...
To make changes to the title alone simply copy the code below and paste into the custom CSS box.
# sidebar h2 {
color: #000; /* your text colour . you can change this */
text-transform: uppercase; /* You can use lowercase instead or remove to use the default rule */
font-size: 16px; /* your Title size. Can be increased */
letter-spacing: 3px;
text-align: center; /* this will center your title */
margin-bottom: 1em;
}
Before
After
Adding border to your Widget Title
If you'd love to add border to your title simply add any of the code below to the code above making sure it/they come before the closing tag "}".
#1 All round border
border: 1px solid #000;
#2 Border below the Title
border-bottom: 1px solid #000;
#3 Border above The Title
border-top: 1px solid #000;
To add border above and below your Sidebar widget title, copy #2 and #3 above and paste in the first CSS code.
To add a background to your sidebar widget title simply copy the code below instead.
# sidebar .widget h2 {
text-transform: uppercase; /* You can use lowercase instead or remove to use the default rule */
font-size: 16px; /* your Title size. Can be increased */
Background: #000; /* your title background. You can change this*/
letter-spacing: 3px;
color: #fff; /* your text colour . you can change this */
text-align: center; /* this will center your title */
margin-bottom: 1em;
}
To use an image as your sidebar title background instead, simply create or download your preferred image and resize to preferable 300 * 50 pixels then copy the code below instead...
# sidebar h2 {
background-image:url(YOUR IMG URL HERE); /* your image URL*/
background-repeat: no-repeat;
height: 30px; /* this is the height of your/background image */
text-transform: uppercase; /* You can use lowercase instead or remove to use the default rule */
font-size: 16px; /* your Title size. Can be increased */
text-align: center; /* this will center your title */
padding-top: 10px /* this will pull the title a bit lower */
}
Comments
Post a Comment