Styling the Site Branding

Here are some suggestions on styling the Site Branding which includes the Site title and the site title tag.

The default is styled like so:


Site Branding alternative styling.


CSS used:

.tm-site-branding a {
font-size: 38px;
line-height: 24px;
letter-spacing: 1px;
color: #FFD700;
font-weight: 300;
text-decoration: none;
padding: 20px 5px 5px 15px;
display: block; 
float: none;

font-weight: 800;
text-decoration: none;
font-family: "tangerine";
text-shadow: 1px 0px 1px #000;
height: 30px;

width: 400px;

/* width: 100%;
text-align: center; */

.tm-site-branding a:hover {
color: #f8d305;
text-shadow: 1px 0 1px #594a4a;

.tm-site-title-tag {
font-size: 14px;
padding: 10px 5px 5px 15px;
text-shadow: none;
color: #513939;
letter-spacing: 1.1px;

Site title (site title tag hidden) used for this site:
Background is a brown header color. The site title is pushed down in relation to the header.

.site-title a, .site-title a:hover, .site-title a:focus {
color: #f99b1c;
text-decoration: none;
font-size: 110px;
font-weight: 500;
font-family: trebuchet ms, serif;
text-shadow: -3px -3px 2px #ffffff;

Additional examples:

//Make tagline a bit bigger - 1. site title tag name 2. class 3. the new uk class 
- Can be overwritten by CSS.
beans_add_attribute( 'beans_site_title_tag', 'class', 'uk-text-large' );

Btw here is a CSS tutorial I have written that will also help with styling:

Filed under: LearningTagged with:

No comment yet, add your voice below!

Add a Comment

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

Comment *
Name *
Email *