Replicate Site Title Design of Modern Portfolio Pro

Whether you’re building a professional website for your company or a personal blog, having a logo make it looks professional.

However, not everybody can afford to pay for a logo design, especially if they want to build their site within a budget.

While there are a number of free logo design tools to help you create a logo, their trial versions are very limited and may not be suitable to your requirements.

However, you can tweak the CSS code of your theme and make your Site Name (site title) stand out.

In this tutorial, I’m going to show you how to replicate the Site Title of the Modern Portfolio Theme by Genesis.

First of all, here’s what the Site Title in Modern Portfolio Theme looks like:

The Site Title in the screenshot above is not Logo  – it has been created with the help of CSS pseudo-elements.

We’re going to replicate the design in Genesis Sample theme although you can make it work on any non-Genesis theme as well. However, I am yet to test that out.

So, here’s what the Site Title in Genesis Sample theme looks like:

 

After applying the tweaks in the CSS file of the Genesis Sample theme, the Site Title will appear as follows:

So here are the CSS tweaks to your CSS file of your active theme.

Step #1:

/*----- Hide the Site Description -----*/

.site-description {
	text-indent: -9999px;
}

Step #2:

/*----- Customize the Site Title -----*/

.site-title {
    font-size: 2.4rem;
    font-weight: 300;
    line-height: 1.2;
}

Step #3:

/*----- Add a Pseudo Element -----*/

.site-title a::before {
    content: 'G';
}

Step #4:

/*----- Stylize the Pseudo Element -----*/

.site-title a::before {
    content: 'G';
    background-color: #222;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-family: 'Source Sans Pro', serif;
    height: 48px;
    line-height: 40px;
    margin-right: 12px;
    padding: 3px 4px;
    text-align: center;
    width: 48px;
    text-transform: uppercase;
}

Step #5:

/*----- Apply Hover Effect on Pseudo Element  -----*/

.site-title a:hover::before {
    background: #27b4b2;
}