How to: Style Thesis Sidebar Widget Background and Border

Byadmin

From today, I’m going to make shouts on Thesis customization tutorials frequently to stay tuned to customize your Thesis theme to give it a new look. In this shout, I’m going to share the tutorial on how to style the thesis sidebar widget background and border.

To customize your thesis theme, you need to have a primary knowledge about the Custom File Editor, which is located in Dashboard>Thesis>Custom File Editor and there you should get to the files to add codes which are custom.css and Custom_function.php.

So, let me show a tutorial on styling the thesis sidebar widget background and border.

To Style the Sidebar Widget Text Area and Link

  • At first, go to the location Dashboard>Thesis>Custom File Editor and select custom.css
  • Now, copy the following code
/*side bar widget area link style */
.custom li.widget ul li{
background:#F0F0F0;
border: 0.1em solid #C7C7C7;
-moz-border-radius:4px;
padding:0.5em;
margin:0.5em;
}
  • After copying the code above, paste it on custom.css

To Style the Sidebar Widget Background and Border

  • At first, go to the location Dashboard>Thesis>Custom File Editor and select custom.css
  • Now, copy the following code
/*side bar widget background and border*/
.custom li.widget ul {
background:#444;
border: 0.1em solid #C7C7C7;
-moz-border-radius:4px;
padding:0.5em;
}

Finally, after copying the code above, paste it on custom.css and save the changes by clicking on the save button.