Posted on

Create a WordPress Theme – Part 3 – CSS Styling

css-design-01

Now we have a look at some styling options which are useful to adapt your theme to your specific needs.

Like the other parts of working on a theme we are using the TwentyFifteen WordPress theme as base template for everything.

The styling options can be found in ./style.css and are very well documented. Just be aware that media queries are used to optimize the display for different resolutions of the page and therefore you might need to change some parts in multiple places.

How a typical WordPress article styling looks like

Usually an article has the following tags used:

<article>

<div class="post-thumbnail">
</div>

<header class="entry-header">
</header>

<div class="entry-content">
</div>

<footer class="entry-footer">
</footer>

</article>

Modify the header of posts

You can modify the header of your posts by modifying the entry-header. There are multiple places for different resolutiongs. Here an example to have 1em at the top and bottom of your header:

.entry-header {
	padding: 1em 7.6923%;
}

Modify the featured image

The featured image display is modified in the post-thumbnail class. Here an example to remove the bottom margin:

.post-thumbnail {
	margin-bottom: 0;
}

Modify the content display

The content can be modified in the class entry-content. There are multiple place for this definition depending on the resolution of the screen. Here an example to change the top margin to 1em:

.entry-content,
.entry-summary {
	padding: 1em 7.6923% 7.6923%;
}

And here to remove the bottom padding; especially helpful if you want to have the feature image below the title in the overview. Make sure to change if for the various media queries.

.hentry-index {
	padding-top: 3%;
	padding-bottom:0;
}

Modify the social icons in WordPress

The social icons are using a class social-navigation and there you can modify the link attribute to your needs. Below an example where we increase the margin between the icons, have rounded corners with 20% radius, make the color of the social icons white and add a white border around the icon too fit better for differently colored backgrounds.

.social-navigation a {
	display: block;
	height: 3.2em;
	position: relative;
	width: 3.2em;
	border-radius:20%;
	border:2px solid #ffffff;
	margin: 0.2em;
	color:#ffffff;
}

Another part is changing the icons itself. For each of the social media icons you will find a specific link attribute and we modify/add some information over here.

In the :before definition we just have the font code for this icon so we leave it like it is. In the main definition we add the default background color and some nice transition effect. In the :hover definition we add a different color and the transition effect as well. Therefore you get a nice change of the colors if you move your mouse over the icon.

.social-navigation a[href*="pinterest.com"]:before {
	content: "\f210";
}

.social-navigation a[href*="pinterest.com"] {
	background-color: #cb2027;
	transition: background-color 100ms linear;
}

.social-navigation a[href*="pinterest.com"]:hover {
	background-color: #eb4047;
	transition: background-color 100ms linear;
}