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:

Beans-default-Site-Branding

Site Branding alternative styling.

 

Beans-Site-Branding-custom

CSS used:

.tm-site-branding, 
.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;
}

 

Beans-Site-Branding-OSF

Site title (site title tag hidden) used for this site: https://spirituellfilm.no/
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:
easywebdesigntutorials.com/customize-css-to-style-your-site

 

No comment yet, add your voice below!


Add a Comment

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

Comment *
Name *
Email *
Website