Recent Searches

No recent searches

    Popular Articles

      Articles
      View all
        Topics
        View all
          Tickets
          View all
            no results

            Sorry! nothing found for

            Camelot 2.0 Theme - Appearance

            Modified on Fri, 17 Jul at 1:04 PM

            WordPress Customizer

            We are going to make a start with the top-level WordPress website styles. Go to Appearance Menu > Customize. This will open the settings screen below, the following tabs need to be visited.

            Appearance Menu > Customize


            General Settings

            Site Identify

            1. Site Title (business name) 

             2. Tagline (business description) for your website.

            3. Uploading your favicon under Site Icon – the icon that sits inside browser tabs. Favicons should be square and at least 512 × 512 pixels. 

            4. Click ‘Select Site Icon’ and as you did for the logo, drag your favicon into your media library and select. Crop if needed.


            		Screenshot showing WordPress General Settings for Site Identity, including site title, tagline, and favicon upload options.


            1. Layout Settings

            Click on the Camelot blue swatch in Theme Accent Color and it will bring up your default colour palette you have selected earlier. Choose the main highlighting colour from your brand which the theme will use as the default colour for various modules on your pages.

            Screenshot showing WordPress layout settings with the Camelot theme accent color palette selection.


            1. Typography

            There are extensive settings here for your typography but we have done most of the work with Camelot 2.0. Select your Header Font and Body Font from the long Google Fonts dropdown list. For a better view or search of these fonts visit Google Fonts.

            You may want to change your Header Text Color or Body Text Color if you feel it is more suitable for your brand. The Body Link Color is for text you have added hyperlinks to.

            Screenshot showing WordPress typography settings, including font selection and text color options for headers, body text, and links.

            1. Buttons

            Buttons


            Go back to the start of the menu and visit Buttons > Button Style. Enter your main highlight color for the Background Color and Border Color (if preferred). Select the font that will appear in your buttons.

            Screenshot showing WordPress button style settings, including button color, border color, and font selection options.


            Then to the second part of button settings, Buttons Hover Style. If you wish for there to be a different hover state, change where applicable. Camelot 2.0 default button is the same colour for both states with an arrow appearing on mouse-over.

            Buttons Hover Style


            Tips: To keep brand consistency, use either the heading or paragraph font you selected in Typography settings above.


            Additional CSS


            This area contains CCS code for the styling of custom elements used throughout Camelot. This will rarely need to be edited but in the small number of cases you will, you will find the relevant code under its labelling.

            Additional CSS


            Updating Menu Structures

            There are 4 locations for menus in Camelot 2.0. The Primary Main Header, Homepage Icon Menu, Footer Column Menus and About subpages (side menu).

            Screenshot showing Camelot 2.0 menu structure locations, including the Primary Main Header, Homepage Icon Menu, Footer Column Menus, and About subpages.

            The Primary Main Header

            There is little to do here unless you wish to add new or remove pages. 


            Add New Pages

            1. Go to the View All tab to see the full page list.

            2. Check the boxes for the pages you want to add.

            3. Click Add to Menu. The new pages will appear at the bottom of the menu structure.

            4. Edit the Navigation Label in the text field

            5. Drag and drop your pages into the desired position. To create a sub-page, drag the page slightly to the right under another page (indented).

            Screenshot of the WordPress menu editor showing the “Primary Main Header” navigation menu. The page provides instructions for adding and organizing menu items, including viewing all pages, selecting pages to add, clicking “Add to Menu,” editing navigation labels, and dragging pages to reorder or create sub-pages by indenting them.

            Note: This does not change the page URL (permalink). To change the URL, edit the page settings directly.


            Remove Pages from Menu

            • Click the page in the menu.

            • Select Remove to delete it from the menu.

            Screenshot of the WordPress menu editor showing instructions for removing pages from a menu. It explains that users can click a page item in the menu and select “Remove” to delete it from the navigation menu.



            Icon Menu (Homepage)

            1. Select Icon Menu

            2. In the URL field, replace the default number with your own telephone number. Keep tel: before the number (e.g., tel:123456789) so browsers recognize it as a phone link.

            3. Save Menu.

            Screenshot showing Icon Menu settings with instructions to update the phone link using the tel: format and save the menu.

            Footer Menu 1, 2 & 3 and About Menu

            The footer menu is essentially split into 3 different menus, one for each footer column 2-4. Select each from the top dropdown and if you wish to add, swap, remove or re-arrange them, use the same method as above for the Main Menu.

            Footer Menu 1, 2 & 3 and About Menu


            Was this article helpful?

            That’s Great!

            Thank you for your feedback

            Sorry! We couldn't be helpful

            Thank you for your feedback

            Let us know how can we improve this article!

            Select at least one of the reasons
            CAPTCHA verification is required.

            Feedback sent

            We appreciate your effort and will try to fix the article

            Preview
            0 of 0