Edit Logo Title Text Color, Size and Style in Quiver

 

 

 

 

 

Quiver allow you to customize the logo title text color, font and style for Sidebar Background Page and Content Background Page Layout independently. This allow you to have a lot more flexibility on the type of background you want to use and still make sure your logo stand out from the background.

Click here to open your Weebly Editor and click into the Code Editor.

Open-Code-Editorw-theme-editor

Step 1: Locate Logo Title Customization Area in Main_style.css

Once in the code editor, click on “main_style.css” to open the css editing page. Here scroll down to near the bottom of the page till you see the SITE TITLE – LOGO TEXT editing area.

site-title-1

 

Step 2: Edit Logo Title Font  Size, style and weight

The first section allow you to customize the logo title font size, style and weight.

site-title-size-style-weight

/* Change Site Title Logo Font Properties */
#wsite-title, h1.logo {
font-size: 44px;
font-family:’Open Sans’, Helvetica, Arial, sans-serif;
font-weight: 300;
}

FONT SIZE: font-size: 44px;

The default font size is 44px, you can change this number larger for larger font OR smaller for smaller font. For example, if I want to make the font size smaller, here is how it will look like

/* Change Site Title Logo Font Properties */
#wsite-title, h1.logo {
font-size: 24px;
font-family:’Open Sans’, Helvetica, Arial, sans-serif;
font-weight: 300;
}

 

FONT STYLE: font-family:’Open Sans’, Helvetica, Arial, sans-serif;

The default font family style is ‘Open Sans’. You can change this to any font family you like. For example, if I want to change the logo tile to Arial, here is how it will look like:

/* Change Site Title Logo Font Properties */
#wsite-title, h1.logo {
font-size: 44px;
font-family: ‘Arial’, Helvetica, Arial, sans-serif;
font-weight: 300;
}

If you are using the NEW Weebly editor, you can edit the font style of your logo in “design”. Here is a tutorial from Weebly that can help: http://kb.weebly.com/change-fonts.html

 

FONT WEIGHTfont-weight: 300;

The default font weight is 300. Here you can choose between “bold” or “normal”. For example, if I want the logo title to be bold, here is how the code will look like:

/* Change Site Title Logo Font Properties */
#wsite-title, h1.logo {
font-size: 44px;
font-family: ‘Open Sans’, Helvetica, Arial, sans-serif;
font-weight: bold;
}

Step 3: Customize Font Color

site-title-size-style-color

 

CONTENT BACKGROUND PAGE LAYOUT

To customize the logo font color for content background page layout, edit this code:

#wsite-title, h1.logo {color: #000;}

Here choose any hex color code to replace the default black (000) color.

 

SIDEBAR BACKGROUND PAGE LAYOUT

To customize the logo font color for content background page layout, edit this code:

.sidebar-bg #wsite-title, h1.logo {color: #000;}

Here choose any hex color code to replace the default black (000) color.

 

Step 4: Customize Font Hover Color

site-title-size-style-color-hover

 

CONTENT BACKGROUND PAGE LAYOUT

To customize the logo font color for content background page layout, edit this code:

#wsite-title:hover {color: #aaa;}

Here choose any hex color code to replace the default light gray (aaa color.

 

SIDEBAR BACKGROUND PAGE LAYOUT

To customize the logo font color for content background page layout, edit this code:

.sidebar-bg #wsite-title:hover {color: #aaa;}

Here choose any hex color code to replace the default light gray (aaa) color.

 

Step 5: Save & Publish

Save and re-publish your site for the change to take effect

Tags: