Frequently asked customization options using Custom CSS and the Description

Quite frequently people ask how to make minor adjustments to the appearance of their site and often the easiest way is to use the Custom CSS field in Customize > Advanced and the Description in Customize > Info.  The advantage of making tweaks through these two fields is you will still automatically get updates to Backburner as they are submitted.  Below are several snippets that are frequently requested to get you going in the right direction.

Center content in the browser

#overall {
  margin: 10px auto 40px auto;
}

Change the background

body{
  background: url(http://PATH_TO_YOUR_UPLOADED_IMAGE) !important;
}

Override the all uppercase blog title

.header h1 {
  text-transform: none;
}

Full skinning and styling of Backburner
Advanced User* - Take a look at the source of the CSS file and you will see the three theme styles ash (6.a), charcoal (6.b) and royal (6.c) listed at the bottom.  Copy one of the styles into a text editor, define the nine new style colors, find and replace the colors in the style, remove the style specific class from each html element listed (ie. body.royal becomes body), and the paste the new style in the Custom CSS field.  Below is an example of the colors used by the royal style:

/* Colors
#ffffff; /* white
#ff1e19; /* red
#251f25; /* dark purple 1
#957c9b; /* light purple 1
#827186; /* light purple 2
#2b232d; /* dark purple 2
#2b232d; /* dark purple 3
#ffffff; /* white 2
#b8c0c7; /* light blue
*/

Add additional sidebar boxes
Advanced User* - Since the Description field allows for HTML you could close out the html tags for the description sidebar box and then create additional boxes with your content.  Feel free to play around with this method, but it is 100% unsupported.

Your Description</p>
</div>
<div class="hr_side"><hr></div>
<div class="box_side">
<p>Additional sidebar box

*Have fun and experiment with these advanced ways of customizing your site, but keep in mind it’s unsupported.  If you do something truly amazing with your site let me know and I’ll feature it.


Blog comments powered by Disqus

 



Posts I Liked on Tumblr