Warning: Cannot modify header information - headers already sent by (output started at /home/jerwon11/divtagtutorials.com/wp-content/plugins/captcha/captcha.php:1) in /home/jerwon11/divtagtutorials.com/wp-content/plugins/wp-super-cache/wp-cache-phase2.php on line 60
How to edit Site Title or Logo Text Font Size, Color and Style

How to edit Site Title or Logo Text Font Size, Color and Style

You can customize the site title or text logo font styling.  Some themes have this customizable area coded in while some does not have it. In this tutorial we will cover both situation so you can customize your site title or text logo.

1) Pre-installed Logo Text / Site Title Customizable Area

If your theme already have a site title customizable area re-installed, you should be able to find this code:

/* ——————————————————————————-/
SITE TITLE – LOGO
/ —————————————————————————— */

/* Change style of Site Title */
#wsite-title {
color: #ffffff;
font-size: 24px;
font-family: “Open Sans”, sans-serif;
}

/* Change hover site title color */
#wsite-title:hover { color: #aaa; }

Here you can customize the site title color, font size font style and hover color

  • Font color: color: #ffffff; Your can choose your hex color code here: http://www.colorpicker.com/
  • Font size: font-size: 24px;
  • Font style: font-family: “Open Sans”, sans-serif;
  • Font hover color: color: #aaa; Your can choose your hex color code here: http://www.colorpicker.com/

Once you are happy with your change, save & re-publish your site for the change to take effect.

 

2) No pre-installed logo text / site title customizable area

If you don’t have the code pre-installed, you can add it. In main_style.css, scroll down to the bottom of the page where you see blank spaces. Then copy a paste this code:

/* -------------------------------------------------------------------------------/
SITE TITLE - LOGO
/ ------------------------------------------------------------------------------ */

/* Change style of Site Title */
#wsite-title {
color: #ffffff;
font-size: 24px;
font-family: Arial;
}

/* Change hover site title color */
#wsite-title:hover { color: #aaa; }

 

Now you can customize the font color, font size, font style, and hover font color.

 

/* ——————————————————————————-/
SITE TITLE – LOGO
/ —————————————————————————— */

/* Change style of Site Title */
#wsite-title {
color: #ffffff;
font-size: 24px;
font-family: Arial;
}

/* Change hover site title color */
#wsite-title:hover { color: #aaa; }

Here you can customize the site title color, font size font style and hover color

Once you are happy with your change, save & re-publish your site for the change to take effect.