Carrington Build Documentation

Adding Your Logo

To add your logo to the FaveBusiness theme you can replace the site title with your logo via CSS. It is recommended you implement this using a child theme to avoid overriding your changes if you update the FaveBusiness theme in the future.

Preparing Your Logo File:

1. Using your favorite image editing program, create a web ready graphic of your logo

  • Be sure to match the background color of your theme or save it with a transparent background using .png format
  • Make note of the file name and dimensions (height and width) this graphic file

2. Add your logo file to your themes image folder

  • A common file path may look like this: wp-content/themes/(theme-name)/img/
  • As noted above, you should be making these changes in a child theme of FaveBusiness. If you are looking for the CSS and Image files in FaveBusiness they are located in wp-content/themes/favebusiness/assets/. Here you will find a directory for CSS files and another for image files.

Adding the Styles to show your logo:

3. Open your child themes style.css file

  • Typical file path at: wp-content/themes/(child-theme-directory)/style.css

4. Add the following lines to you style.css file

  • Note you will need to enter the proper file path dimensions for you logo graphic
/* Replace Site Title with Logo */
#header .site-title a {
	background: url(img/my-logo.png) 0 0 no-repeat; /*enter the proper file name for you logo graphic*/
	display: block;
	height: 96px; /*enter the height of your logo graphic*/
	width: 321px; /*enter the width of your logo graphic*/
	overflow: hidden;
	text-indent: -999em;
}

5. Save style.css

6. You should how see your logo in place of the site title in your theme.

  • If you created a child theme be sure the theme is active
  • If you do not see your logo and the site title is not showing fix the path to you logo graphic.

Using a full width logo graphic or banner image:

There have been some cases when a site author wishes to replace the site title with a logo or graphic banner that is the same width as the site content. If this is your desired approach you can use the following styles in place of the styles above:

/* positions search above logo/banner graphic */
#header {
	margin-top: 8px;
}
#header .str-container {
	padding-top: 31px;
}
#header .searchform {
	top: 0;
	right: 0;
}
/* replace the site title with a full width logo/banner graphic */
#header .site-title {
	background: red url(img/my-logo.png) 0 0 no-repeat; /*enter the proper file name for you logo graphic*/
	height: 50px; /*enter the height of your logo graphic*/
	width: 100%; /*= 992px, the full width of the content area*/
	text-indent: -999em; /*hides the site title text*/
	display: block;
	margin: 0 0 12px 0;
}

 

See also:

Back to Carrington Build

These sections are available to the public. The remaining sections are available exclusively to customers.