Add CSS to your theme

If you’re like me and you like to change your theme up a bit, but are restricted by the limited themes and lack of editing capabilities, here’s a quick and easy way to add custom CSS to your theme. It’s not the cleanest solution, but it’s effective!

  1. Go to Plugins.

  2. Activate Gravity Forms. This is also good for simple contact forms like the one on my site!

  3. A link called Forms should now appear on your dashboard’s sidebar. Hover over it and click New Form.

  4. Hover over Untitled Form and click on it. Edit options should pop up. Edit the title to say CSS for reference, but you can ignore the description.

  5. Under Standard Fields, click on HTML and an HTML Block should show up underneath Form Settings in the center of the page.

  6. Click on HTML Block, remove the Field Label (HTML Block), and under content, add the following:

    <style type="text/css">
    	#supplementary.one{display:none}
    </style>

    This hides the form buttons that might normally show up. It hides the entire footer widget we’re using, so don’t put anything else in that footer widget!

  7. Click Update Form.

  8. Now hover over Appearance on your dashboard sidebar and click on Widgets.

  9. In your Available Widgets should be a Forms widget. Drag it to Footer Area One, select CSS, remove the Title, and uncheck the boxes for Display form title and Display form description. Click Save.

View your pages and blog and make sure that your styling has showed up properly. You’re finished!

To remove the top border on the Twenty Eleven theme:

<style type="text/css">
	#branding{border:0}
</style>

To remove comments on a page (please do not use this on regular post pages – I only used it on my contact page to prevent double forms):

<style type="text/css">
	#comments{display:none}
</style>

For custom fonts, I used Google Webfonts.

I changed the fonts, centered slideshows, shrunk/enlarged text, made <pre> blocks (the grey blocks) wrap properly, and various other edits.

One of my previous stylesheets:

<style type="text/css">
/* Title Font -------------- */
	@import url(http://fonts.googleapis.com/css?family=Montserrat:700);

/* Quote/Blockquote Font -------------- */
	@import url(http://fonts.googleapis.com/css?family=Mate:400italic);

/* Body Font (Normal, Italic, Bold, Bold Italic) -------------- */
	@import url(http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic);

/* Basic font styling -------------- */
	body{font-family:"Asap",sans-serif;color:#2d2d2d}
	blockquote{font-family:"Mate",serif}
	pre{word-wrap:break-word;font-size:.8em}
	h2{font-size:1.2em}
	::-moz-selection{background:#ccc}
	::selection{background:#ccc}

/* Title font styling -------------- */
	.entry-title{font-family:"Montserrat",sans-serif;text-transform:uppercase;padding-right:0}

/* Hides footer widget for this form -------------- */
	#supplementary.one{display:none}

/* Fixes for post footer links -------------- */
	.entry-meta a:hover{color:#d24836!important}
	.edit-link a:hover{color:#fff!important}.

/* Removes border and search bar from banner -------------- */
	#branding{border:0}
	#branding #searchform{display:none}

/* Removes bullet points from sidebar links -------------- */
	.widget-area ul{list-style:none}
	.ngg-slideshow{margin:0 auto}

/* Custom styling for my events widget -------------- */
	.con_event{font-size:1.3em;margin:0;font-weight:bold}
	.con_info{margin-bottom:.75em}

/* Changes nav bar color/Removes bottom shadow -------------- */
	#access{background:#2d2d2d;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}

/* Removes shadow from searchbar -------------- */
	input{-webkit-box-shadow:none!important;-moz-box-shadow:none!important;box-shadow:none!important}

/* Hides comment icon next to title -------------- */
	.comments-link{display:none}

/* Customizes border/Removes shadow from submenus -------------- */
	.children{-webkit-box-shadow:none!important;-moz-box-shadow:none!important;box-shadow:none!important}
	.children li a{border-bottom-style:solid!important}
	.children li:last-child a{border-bottom:0!important}
</style>

Here is a before and after of my blog. This is with a different stylesheet than the one mentioned above.

Before:
Screen shot 2013-02-19 at 6.53.19 PM

After:
Screen shot 2013-02-19 at 6.52.02 PM

Leave a Reply

Your email address will not be published. Required fields are marked *