The Theme Settings panel is where you’ll find the general settings for the Company Theme, and are responsible for selecting the site colours, fonts and general layouts etc. You can find the Theme Settings under “Appearance -> Theme Settings” form the WordPress admin area.
The Theme Settings panel consists of several tabs with various options.
Inside the General tab you’ll find the options for the logo, favicon, Google Analytics and general layouts.
- Logo: Keep in mind that the theme is responsive, this means that it will scale down as the browser gets smaller. Therefore, we suggest the perfect maximum size for a logo – in any size browser – should be around 240px by 32px. However, the navigation bar will automatically resize for a larger logo size if required.
- Favicon: This is pretty straightforward – select the desired favicon for your website.
- Sidebars: The Company theme allows you to create several custom sidebars. This means that you can give specific pages their own unique sidebar, different to other pages on the site. To create these sidebars, simply input a comma separated list, of all the sidebars that you want to display. You can also specify exactly where you want your sidebars to display, either on the left or right side of the page, or hide them completely. If you choose to hide the sidebar completely, then the result will display as a fullwidth page. You can still specify on each specific page, via the page editor, where and how you’d like your sidebar to appear.
- Portfolio slug: This option will give you control of what content will show up in the url for portfolio items. After you set this, be sure to go to Settings -> Permalinks and save the page. If you don’t do this your portfolio items will result in an error page.
This tab contains several design settings, such as colours and fonts.
- Colours: There are several colours you can pick for this theme. You can change the colours set here to anything you’d like. Once you click in to the colour field, a colourpicker will be displayed so you can easily click and 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!
This tab has options for six social icons of your choice.
- Icon image: This is the image that will be used for this social icon. Keep in mind that the images will be resized to 20px in height in the css. This will ensure that it will always look good.
- Icon link: This is the link for your icon. You can insert any link you want, make sure you include the full url – including the HTTP: part at the beginning.
This tab has options for the error page. The error page shows up whenever a user uses an url that doesn’t exist on your site. You can insert the title and the content text for this page. This page automatically has a large error icon just above the content text.