Customising the look and functionality of your site
Giving your site style using the Klasik theme
From this point onwards, the tutorials are aimed specifically at artists wishing to create a site with the Klasik WordPress theme. I’ll talk you through step by step how to build the pages so that your site displays similarly to DarenRedman.com. Of course it will still be highly unique, as the text and images will be yours, and you can choose custom colours and fonts.
This chapter is fairly long so if you prefer to tackle it in sections, here’s a list of how it is divided. Click on the links to jump to the corresponding section.
[ezcol_1half]
Giving your artist website a unique look with fonts and colours
In Planning your Artist Website we talked about choosing fonts and colours for your site to make it unique and explored some useful tools to assist you. Now, we’ll implement those choices to give your site its individual style.
I have used just one font style throughout the whole of Daren Redman’s site to give it a clean and consistent look. The Klasik theme uses Google fonts specifically and there are hundreds of options; check them out here.
The font I selected was Raleway.
[/ezcol_1half] [ezcol_1half_end]
[/ezcol_1half_end]
Font colours
I have chosen 3 font colours: one for the main title of the site (the logo), one for all other titles on the site (like page titles and subheadings) and links and one for the main body text. You may want to use a different link colour, which would take the total to 4. Any more font colours than this and your site will start to look busy and unprofessional. You’ll need to know the Hex values for your colours. The Hex value is the code that tells browsers which colours to display on your site. The shades in your artwork are a good place to start when looking for colours.
For more guidelines see Planning the colours and fonts for your site.
I suggest you make a list of the colours you want to use and where you’d like to use them so you have a handy reference.
[ezcol_1quarter]
Main logo & links
Hex value: #D6370D
[/ezcol_1quarter] [ezcol_1quarter]
Subheadings & navigation
Hex value: #36422A
[/ezcol_1quarter] [ezcol_1quarter]
Paragraph text
Hex value: #767575
[/ezcol_1quarter] [ezcol_1quarter_end]
Background content area
Hex value: #E8E9EA
[/ezcol_1quarter_end]
Adding custom fonts and colours in the Klasik theme
Once you have chosen the colours and fonts you wish to use on your site, you can implement them very easily in the Klassik theme.
1. Go to the WordPress dashboard. Hover over ‘Options’ and click on ‘Branding’.
2. Under ‘Custom Font’, choose the font you have selected for all the main content on your site (the paragraph text). All Google fonts are listed in the dropdown menu. On Daren’s site I used Raleway.
3. Next scroll down to ‘Background colour’. The background colour will fill the space between your main content area and the edge of the browser. Remember to keep this colour subtle – nothing that will upstage your artwork. I chose a light grey for Daren’s site (#E8E9EA). Remember to enter to the Hex value.
4. Now, under ‘Content color’ choose the colour for the main content area. Again something light that will make the images stand out is preferable. I chose a very subtle off-white colour (#fdfdfd). If you don’t want any distinction between the background and the content area, set them both to the same colour.
5. Now set the ‘Bucket’ and ‘On Hover’ colours. I recommend you choose the same colour for both. This is the colour that will show as a background when you hover over the images on the homepage when their title appears. To keep a consistent look, I chose the same grey that I used for the background of the entire site.
6. Finally on this page, choose the colour for the footer icons. The footer icons are social media icons that link to your social media profiles (such as Facebook and Twitter). We’ll choose which social media networks to link to later. For now, enter the colour you’d like them to be. I chose a dark green that I picked out from one of Daren’s pieces of artwork (#36422A).
Once you have completed all the fields the ‘Branding’ page should look something like this (but with your own choice of colours replacing the ones I have used). Don’t worry about the settings I’ve ignored (like ‘Background pattern’) – just leave them as they are.
Customising the header
Now you’ve set the general fonts and colours, it’s time to get more specific, starting with the header – the area that appears at the top of every page on your site.
1. Go to Options>Header.
The first option is to upload a custom favicon. The favicon is the tiny image that displays in the address bar next to the site URL. If you don’t upload a custom favicon, the logo of your hosting provider will be displayed (in our case Bluehost).
For branding purposes I’d recommend designing a simple favicon measuring 50×50 pixels using the same colours and fonts you’ve chosen for the rest of the site. You can do this fairly simply in Adobe Photoshop or Illustrator. If you don’t have either of those programmes, a quick Google search for free graphic design programmes will return many useful results. Alternatively if you’d like TextileArtist.org to design you a favicon and a site logo get in touch here.
2. Once you have a custom favicon, simply click ‘Add image’.
3. On the next screen click on ‘Upload’.
Then drag and drop the image from your computer into the window.
[ezcol_1third]
Enter some information in the ‘Title’ field. It’s also a good idea to enter information in the ‘Alternative text’ field (the text that will display if the image is unavailable) and the ‘Description’ field. Try to use words that are pertinent to you as an artist (what might people search for in Google when looking for an artist like you?). We’ll explore search engine optimization (how to be found in Google and in other search engines) more thoroughly later on, but for now go with your instinct. As a basic, I simply entered Daren Redman textile artist – this tells Google the site is about a textile artist called Daren Redman. Ignore the ‘Caption’ field for the favicon.
[/ezcol_1third] [ezcol_2third_end]
[/ezcol_2third_end]
4. You will now go through the same process with a ‘Logo’ if you have one (contact us here if you’d like us to design one for you). The logo I designed for DarenRedman.com is 250 pixels wide and 40 pixels high. Upload it using the same process as for the favicon.
5. Don’t worry if you don’t have a logo – you don’t need one. If you want to simply enter text to use in place of a logo, enter the name of your site under ‘Text logo’.
Then set the colour, the font and the font size for the logo. You can adjust all of this later if needs be, but to start off try setting the size to somewhere between 15 and 20. The site logo can be a good place to be creative with fonts; if you want the logo to stand out try using something different and slightly more elaborate to whatever you selected as the main font.
6. Finally enter the Hex values for the ‘Sub-menu color’ and the ‘Sub-menu hover color’. I’d suggest using the same colour as your ‘Container color’ (that you entered under Options>Branding) for the ‘Sub-menu’ and perhaps the same as your ‘Background colour’ (again under Options>Branding) for the ‘Sub-menu’ hover. This will give the site consistency, making it simple and slick.
7. Click ‘Save options’ (in the top right hand corner of the page).
Customising the footer
You now need to go through the same process for the footer (the area at the bottom of every page on your website).
1. Go to Options>Footer.
2. If you want any copyright information to appear on your site enter it under ‘Copyright text’ and it will appear after the rest of your content in the footer of every page. In the case of an artist, this text might address image protection and permissions.
3. Then scroll down and choose which social media networks you belong to so that you can link them up with your site. Do this by clicking ‘Add row’, selecting the appropriate social network from the drop-down menu and entering the URL of your profile on that network (whatever appears in the address bar when you’re on your Facebook profile page for example).
4. Click ‘Save options’ (top right-hand corner).
Adjusting the main options
You now need to adjust the main Klassik theme options in order for the site to display correctly.
1. In the WordPress dashboard, hover over ‘Options’ in the right hand menu and click on ‘Main’.
2. Check the box that says ‘Disable all likes’. This will take away the functionality for visitors to click a ‘like’ button. This is the domain of social media, not a professional artist website.
3. Having said that, if you are planning on including a blog on your site, the next option will allow visitors to share your articles; this can only be a good thing as it gives your art more exposure. So select the social media platforms you’d like your blog posts to be shared on.
Leave everything else on this page as it is.
Further customisation using CSS
Now, in order to make site wide changes to the look of your site, we’re nearly done. However, if you want to achieve a similar look to DarenRedman.com you’ll need to do a few extras. Stay on the page you’ve just been on: Options>Main.
Scroll down to the box for Custom CSS. CSS stands for cascading style sheet and it is a form of code that lets search engines know how to display your site (which fonts and colours to use and where, for example).
I’ll share with you what I added to this box to customise Daren Redman’s site and what the results were.
Add a shadow to the main container
Firstly, I added a box shadow to the container area to give it a little more depth.
[ezcol_1half]
Without shadow
[/ezcol_1half] [ezcol_1half_end]
With shadow
[/ezcol_1half_end]
To do this type in this code into the ‘Custom CSS’ box:
‘.container’ identifies which element of the page you want to adjust. The rest of the code adds the shadow.
Remember to click on ‘Save Options’ after every CSS update you perform.
Customising the look of the Navigation
[ezcol_1half]
1. By default the navigation font is grey. I wanted to tie it in more with the rest of my site colours and add a couple more effects.
[/ezcol_1half] [ezcol_1half_end]
[/ezcol_1half_end]
To do this type in this code into Custom CSS (underneath the last piece of code you entered for the box shadow).
‘nav ul li a’ specifies that you want to change the default settings for the navigation. Here you are transforming the navigation text so that it is capitalised {text-transform: uppercase;}, you are adjusting the colour of the text {font-color:#36422a;}, and changing the size of the navigation text {font-size: 13px;}. Depending on which font you are using, you may need to play with the font size. Remember to change the Hex value of the colour to your own custom colour.
Note the American spelling of ‘color’ for CSS. This is important as browsers won’t recognise the English spelling.
2. Add the following code to change the colour of the line that appears when you hover over a menu item. Remember to change the Hex code to that of your own preferred colour.
3, Click ‘Save options’.
Customising the look of links
Any text that links to another page on the internet (whether that be to another page on the same site or a different site entirely) is called a link. These generally display in a different colour to your main body text in order to stand out and let visitors know they are clickable. By default in the Klassik theme, links are in bold. I felt this looked a little clunky with the font I had chosen (Raleway) and wanted to change it. I also wanted to alter the colour of links.
‘a’ is the CSS code for all links. Here I changed the colour of links {color: #36422a;}, specified that I didn’t want them to display as bold {font-weight: normal;} and changed the colour of the link text when visitors hover over it with their mousepad {color:#D6370D;}. Again, remember to replace the Hex values with your own choices.
Changing the colour and look of headings and sub-titles
The last site-wide styling change we need to make is to headings. Heading sizes and colours are set with CSS. There are generally 6 different sizes of headings (h1-h6). I didn’t want to change the default sizes, just the colour. I also wanted to capitalise headings; the font I selected is quite light and capitalisation makes headings stand out a little.
Your site won’t look anything like DarenRedman.com just yet as we haven’t added any content. But now we have a strong basis, we’ll start making it unique to you as an artist in the next section by building the homepage.
