Theme Settings

The best place to get started customizing your site and making it look just how you desire, is via the Themes Settings panel. The Theme Settings panel is where you adjust the general settings for the theme and is where you can make adjustments to the site colours, fonts, layouts etc. The Theme Settings panel is located under “Appearance -> Theme Settings” from the WordPress admin area.

BS2 Theme Settings

In the Theme Settings panel you’ll find several tabs, each loaded with various options. Below we’ll go through each tab and discuss each option and what they do.

General

In the general tab you will find options for the site logo, favicon and Google Analytics.

  • Logo: Keep in mind that this theme is responsive, which means it will scale down as the browser window becomes smaller. We would advise, that the perfect maximum size for a logo – in any size browser – would be around 300px by 80px. You can also set up the top margin for the logo via this option, use this option to ensure your logo is centered vertically.
  • Favicon: This is pretty straightforward. Select any favicon you want for your website.
  • Google Analytics: Your Google Analytics code, used to track site traffic and provide statistics for your website, can be inserted in this tab. Please note: that you won’t need to enter the whole javascript code, only your analytics number (hence the smaller field). Once you’ve inserted your analytics number and saved, the tracking with Google will start straight away.

Design

This tab contains several design settings, such as colours and fonts.

  • Colours: There are three default colours we’ve used in the Beauty Salon 2 theme, these are the purple (primary), green (secondary) and pink (tertiary). You can change these colours via this panel to any colour you’d like. Once you click inside the colour field, a colour picker will appear and allow you to easily select your desired colour.
  • Fonts: There are two fields for making your font selections. You can choose a main font, used throughout the site for your headings and titles, and a secondary font used for page content. These fonts can be loaded directly from the Google Font library, but you are also free to use any font source you’d like.
  • To use a Google Font, go to http://www.google.com/fonts and find a font of your choice, then click on “Add to collection” followed by the “use” button in the bottom right corner. On the page which follows you will need to copy/paste the font code. Make sure that you select both the “Normal” and the “Bold” font styles. If you scroll down you’ll see the link that you need. Only copy the source link in this example, not the whole link element. For example, for the Montserrat font you would select “http://fonts.googleapis.com/css?family=Montserrat:400,700“. Keep this page open (you’ll need it again in a minute) and copy/paste the line of text into the font source field in the Theme Settings. The next thing you will need is the font family, this is displayed on the same page as the source we just copied. As before, copy the whole line into the font family field in the Theme Settings. For example, for the Montserrat font this would be “font-family: ‘Montserrat’,sans-serif;“. Do this for both the main and secondary fonts and you’re done!

Frontpage

This tab has several settings for the slider and content blocks on the frontpage.

  • Frontpage header: There are three options for the header. You can choose to hide the whole header, in which case you can disregard all other settings in this tab. You can also opt to only display the slider, in which case you must first make sure that you have set up some slides under “Slides -> Add new” in the WordPress admin area. You can also choose to show the slider and the content blocks together, just like we have in the demo.
  • Slider settings: There are several slider options you can choose from, but keep in mind that the animation and wait times are given in milliseconds. This means that if you want to insert 5 seconds, you’ll need to input 5000 instead. This will give you more precise control over the slider timing.
  • Block settings: You can insert any content you want in to your content blocks. However, keep in mind that it will need to fit next to the slider, so don’t write too much or it won’t fit. You can always double check this yourself on the frontpage by resizing your browser screen. The first block will always vertically center its content, the second block will not. For the first block, you can use the <span> element to make selective parts of your text bold and in the primary font colour. The second block can be adjusted with a custom background and text colour.

Tiles

This tab contains a couple of options for your tile pages. Here you can set the title for the tile detail pages, these are the pages you are directed to once you have clicked on a tile. You can also set the related tile title, related tiles are tiles displayed from same category as the tile that is currently being viewed.

Footer

This tab has several settings which apply to the footer of your site.

  • Footer gallery: You can select to either show or hide the footer gallery. The footer gallery shows all of the featured images from your tiles on repeat. This section is for decorative purposes only.
  • Footer logo: You can also include a logo/image inside the footer if desired. Just as with the top logo you can give it a top margin to ensure your logo is centered correctly.

Social icons

This tab has options for three social icons to be added.

  • Icon image: This is the image that will be used for this social icon. Keep in mind that the images will be resized to 44px in height in the css. This will ensure that all social icons remain uniform and the same size.
  • Icon link: This is the link for your icon. You can insert any link you want to connect with any of your social media platforms.

Error page

This tab has options for the error or 404 page. The error page shows up whenever a user uses an url that doesn’t exists within your site structure. To personalize your error page, you have the option to insert a title and some content. This page has a large error icon inserted automatically, just above the content text to grab your readers attention.