Customization using Additional CSS

The WP-Drudge template has many, many options for customizing the look and feel of your site. Sometimes, though, this just isn’t enough to get it just right. That’s why WP-Drudge has a built-in way to easily add CSS that will come with you through upgrades.

To add CSS, just paste it into the “Additional CSS” box on the Options page and click Save. CSS is very specific in its syntax so unless you know what to add, you might run into issues. It’s unlikely you’ll break anything (and the fix is, of course, to delete what you added) but possible so be warned.

For “font-size” declarations, increase or decrease the number to increase or decrease the font size, respectively. Declarations below use the “em” scheme, which increases the size of the text using a multiplier. “1em” is just saying “multiply the size of the size by 1,” which, in turn, means “do nothing.” 2em means “multiply the size of the font by 2,” or “double the size.”

Please note: At some point in the near future, the Additional CSS box will go away. If you are just starting to add styling to your site, I would recommend adding it using the Simple Custom CSS plugin or something similar.

Change site name to match the Drudge style

#header #logo-or-name {font-family: Impact, AvenirNextCondensed-Bold, AvenirNext-Bold , sans-serif; text-shadow: #ccc -1px 0, #ccc -2px 0, #ccc -3px 1px, #ccc -4px 1px, #ccc -5px 1px, #ccc -6px 2px, #ccc -7px 2px; font-size: 80px; font-weight: normal; font-style: italic; text-transform: uppercase; color: black; text-decoration: none}@media (max-width: 600px) { #header #logo-or-name { font-size: 50px } }

Change the size of the site name (no logo image)

#header #logo-or-name {font-size: 2em}

Change the size of the featured box description text

#featured .link-content {font-size: 2em}

Change the look of the featured box description text

#featured .link-content {font-weight: bold; font-style: italic}

Increase the size of the tagline text at the top

#tagline {font-size: 1.4em}

Add more spacing between static links

.wpd-static-links li {padding: 6px 0}

Remove spacing between static links

.link-col .wpd-static-links li {padding: 0; margin: 0}

Center the post images

Version 2.3 and after:
.posts-list li.the-content .image-wrap
Version 2.2.2 and before:
.posts-list img {margin: 6px auto; display: block;}

Change the size of the footer text

#footer {font-size: 2em}

Centering the navigation menu and category links

.header-nav {text-align: center} .header-nav li {float: none; display: inline-block}

Centering the posted link blocks

.posts-list li.the-content {text-align: center}

Add a border on the left and right

#wrapper, #mobile-wrapper {border-left: 5px solid #CCCCCC; border-right: 5px solid #CCCCCC;}

Increase or decrease the 5px to change the thickness, simple colors are here: http://html-color-codes.com/