Check out the below details on setting up everything on your Oyster template from the branding to formatting.


Web Branding

  • Images

  • Colour Scheme

  • Footer & Social

Web Content Management

  • Banner Image

  • Content

  • SEO

  • Login/Register/Advert Pages

Web Branding

Click through Website > Web Settings > Web Branding to access the branding section - this will allow you to update any logos used throughout the site, makes changes to your colour scheme and add contact details and social links.


On the Page, we can update our main Logo, Advert Image, Social Sharing Image and Favicon. Drag and Drop, or click into each section to upload an image.


The Logo is the image that will be used on all pages throughout the site as the main website Logo.

· Sized at 1600 x 90 px

· It should have a transparent background


The Favicon is the icon used on the tabs of web pages -

· 16 x 16 in size

· Will have a .ico, .png, or .jpg file type

· This should be a smaller icon- perhaps a letter or image and not your full logo (like our fish!

Social Sharing Image

The Social Sharing Image is the image used when your recruiters share Web Pages and Adverts out to social media sites and Google For Jobs.

· Sized at 1200 x 630 px

· Have a logo centred in the image atop of a block colour

Using this size ensures the image should pull through correctly across all platforms and means the image shouldn't be stretched.

Editing Colour Scheme

The Menu, Body, Button and Footer sections on the Web Branding allow you to select the colour scheme used throughout the website.

For the best look and feel on Oyster, we would recommend using 3 different colours within the branding. As above, we have picked White, Black and Red - it's recommended to use three different colours that still complement each other.

For example, firstly, select a general background colour - this would usually be white or black.

Then your two branding colours - these would be best coming from your Logo or other branding used by your business! Make sure these are colours that don't clash such as bright pink and green - use colours that are known to match such as red & blue, or two shades of the same colour, such as sky blue and navy.


On Oyster, the colours in the header section relate to the bar at the top of the site and your banner text.


In Oyster, the colours in the Menu section relate to the menu bar running along the top of the site, under the header, containing your logo, menu items and login / register buttons:


The Primary Body settings will affect the headings, text and hyperlinks used through the content areas on the site:





The Primary Buttons section will update the colour of Call to Action buttons throughout the site, including Job Search, Login, and Job Card details:


The footer settings will update the colour of the background and text colour for the website Footer throughout the site:

Contact Details & Social

At the bottom of the Web Branding section, we have our Contact Details and Social Media Links.

Website Content Management

Adding Your Banner Image

Your banner image is the image that displays across the main front of your website:

To add your banner image to your Homepage, click through Website > Web Content, select the homepage then hit Images.

This will allow you to upload to the Banner Image section by hitting select Image

You can then upload and select the banner image you wish to use. The banner image for the Oyster template should be 1300 x 861 px in size.

Please Note: On Oyster there is only space for a single Banner image.

Once completed, hit Save and this will add the banner image to your Homepage!

Banner Image best practice:

  • The banner image should be sized 1700x 900px

  • The colour is important - ensure your website is eyecatching and pops on the screen with vibrant colours

  • However, make sure the colours and content of our banner image match your brand colours and values

  • Ensure your banner image colours don't clash with your menu text and logo colours - otherwise, they will become impossible to see on screen! (Example - Don't have a light-coloured banner if your logo and menu items are white)

Adding Content

To add content to your Firefish Site, click through Website > Web Content. This will show you the content editor.

You can check out our full guide on utilising the Web Content Editor here! This guide will chat you through everything from typing up some content to embedding videos on your pages!

Content Recommendations

  • Make sure you have enough content on the site before going live - we'd recommend having pages such as About Us, Candidates, Employers, Jobs, Contact us and any plugins you have available.

  • Let someone read through the content before publishing - its always great to get a second opinion, ensuring the content matches your brand voice.

  • Make sure to add in banner images for each page using the method stated above for the homepage!

  • Think about the structure of the site- you don't want to have 100 menu items - can any pages be grouped together under a main heading?

Adding SEO

All web pages in Firefish will have an SEO tab, and this allows you to add in a Page Title, Description and keywords to be picked up by search engines such as Google.

Adding this information is vital to ensuring your website is optimised for searching and improving your website's ranking against other similar sites.

Navigate to the SEO tab on a web content page where you can then update the information fields:

You can find our full guide on Website SEO and how to manage this here!

SEO Character Recommendations

  • Page Title should be 55-60 characters

  • Keywords should be no longer than 100 characters in each

  • The Description should be around 150-160 characters

Advert Pages


The Advert pages of your website will pull the banner image from your Jobs Page.

Did this answer your question?