Eight Informative "How-To" Questions Answered On How to Change your Themes Appearance.
In this tutorial we used one of our newer SDF Skins called After-Five which is a multi-purpose theme designed for online marketers. While some documentation is specific to this SDF Skin, there are also a number of useful questions answered that can be applied to any design.
1. Header Settings and How to Change the Header
The Global Header Settings:
In this section, we'll cover how to build, customize and style the header section of the SEO Design Framework.
In the Global Header section SEO Design > Header> you can perform the following 3 tasks.
(a) Header Structure:
Build the header structure using the drag and drop and the + or – icons. You can rearrange multiple blocks in one row by resizing them horizontally or drag the blocks into the inactive section if they are not required.
Widgets can be added to “Header Block 1” from Appearance > Widgets
Same can be done for “Header Block 2” “Header Block 3” “Header Block 4”
(b) Upload your logo:
(b) Additional HTML/CSS :
Add Additional HTML (such as CSS, Shortcodes or scripts) to your Global Header sitewide.
2. How to Change the Primary Color
Under SEO designStylesPreset Colors (Toggle)
Primary color will affect Headings, Theme Buttons and Anchor Hover etc.
We built this theme with the primary color in mind so, rather than you having to continually look for one value to change, by changing the primary color you change multiple inputs. You can always override those inputs individually, but this is the purpose of presets (so that you can make one change and dynamically update anything pulling from it).
In this SDF Theme, the color of the line in the header, the Widget Title color and the default colors you will see on the read more section, buttons, colors in the search bar which pull from the (default button) under SEO DesignStylesButtons - section are all tied into the primary color option.
3. How to Turn On/Off the Title and Breadcrumbs Globally
If you turned the breadcrumbs "Off" in the "Global Settings" then they would be off when you created a new page or post in the "Local Page Level Settings" by default.
The Local Page Settings (located under the WordPress editor on pages or posts) allow you to optionally toggle the "Global Settings" on or off (on a page-by-page basis). So, using the example from above (with the breadcrumbs that you just disabled on the Global Settings), You could activate under the created page.
This "Global / Local" functionality includes any of the options displayed in the Local Page Settings Tabs (e.g. Settings, Header, Layout, Footer, Display Title, Background Video) and each sub menu options under those tabs.
This means that you can truly customize each page by either turning off assets globally and then selecting what you want active at the page level or vice versa (turning things on in the Global Settings and then Off in the Local Page Settings).
4. How to Change the Main Fonts and H1-H6 Fonts and Sizes
(a)
UnderSEO designStylesGoogle Web Fonts, Default Typography and List Styling (Toggle)
(b)
(c) List Styling
(d) H1 to H6 Heading Font settings
5. How to change the color of the Widget title, background and text.
UnderSEO DesignStyles Widget Areas and Widgets
(a)
(b)
(c)
Note:For Left Sidebar, Right Sidebar, Above Content Block and Below Content Block Styles can be change as same as in default.
6. Where to Change the List Order of Widgets.
UnderAppearanceWidgets
Here you can add or remove and widgets which you want to listed under Widgets i.e. (Left Sidebar, Right Sidebar, Above Content Block and Below Content)
7. How to Change the Social Media Icons Colors and Shape.
UnderSEO designStyles Social Media Follow Buttons /Sharing (Toggle)
This demo is shown for both Follow and Sharing buttons, as you can change it this way for Social media follow and Sharing styles.
(a)
(b) Set Default Follow Button Colors (or enable custom per media styling options using toggle below)
(c) If Set (per media) is enabled, all the social Buttons setting panel will appear
(d) Set all buttons essential attributes which are needed
8. How to change the footer (where do I change the footer color and styles)?
Footer can be change from Appearance Widgets
(a) Footer block widgets
(b) Footer bottom block widgets
(c) For Copyright go to Footer Tab Under SEO DesignFooterFooter Settings
For Changing Footer Background Color and other attributes
Go to SEO DesignStyles Footer
(a)
(b)
Note:For Footer Widget Areas Styling Settings
Set Widgets Alignment, Equal Height Options and Custom Background for each area or just leave it transparent with current body background. Furthermore, customize widgets per area...
