• Home
  • /Archive by category ' Theme / Skin Customizer '

Archive For: Theme / Skin Customizer

Create, Set, Edit Skins

Skin Customizer Screencast

Warning! Due to the WordPress customizer having a compatibility issue with Tabs and Accordion, do not try to customize a page with either of these present.

To customize or create a new skin, goto AppearanceThemesCustomizeSelect Skin Edit the Skin you want or create a new one.

 

How to customize a specific page:

wpid984-media_1367142648974.png

Login to WordPress, visit the page you wish to customize on the front end ( not within the admin ) → hover over the Site Name in admin menu ( top left ) → click customize.

Note! This option replaces the Skin Settings admin page in earlier versions of DynamiX.

 

Edit / Create Skin Preset

Select the Skin to Edit option to edit an existing Skin. Once selected the Skin automatically loads into the settings.

To create a new Skin, select the New button. You must enter a unique ID into the New Skin ID field.

Set Default Skin

This option allows you to set a default skin pre-set for the entire site. This option can be overriden within Post / Pages → Page / Post Skin Tab.

Duplicate Skin

To duplicate a skin, select the skin you wish to duplicate from the Select Skin to Edit select menu, once loaded click the Duplicate button → Enter a unique ID into the New Skin ID → click the Save button.

Read more →

Header

To edit the Header settings, goto WordPress → Dashboard → Appearance → Themes → Customize → Header

Minimum Header Height

Increase the header height by using this option, it sets a minimum height and not a static height, this way if the content exceeds the height it will automatically adjust itself.

Branding Display

Choose to hide the Branding / Logo, this is a global setting and affects the entire site.

Branding / Logo Alignment

Select the alignment of the branding - choose between Left, Right, Center.

 

Branding / Logo Top Margin

This option allows you to set a top margin value for the branding / logo, increase the value to push the logo down.

 

Menu Alignment

Select the menu alignment - choose between Left, Right, Center.

 

Menu Top Margin

This option allows you to set a top margin value for the menu, increase the value to push the menu down.

 

Branding Version

This option can be changed on each Skin and allows you to choose between a Primary and Secondary Branding / Logo ( ideal if you have a light and dark skin which require different logos ).

Divider Line Shade

wpid1061-media_1365318975969.png

This option sets the shade of the divider line within the header area. Depending on the background color, set the shade that suits best.

 

Background Layer

wpid1062-wpid-media_13653183484121.png

This area lets you control the header background ( layer one ), choose from the following options:

  1. Color: Set a solid color / gradient
  2. Image ( Positioned ): Set a positioned image, control the positioning and set a background color.
  3. Pattern: Set a pattern and background color

Read more →

Footer

To edit the Header settings, goto WordPress → Dashboard → Appearance → Themes → Customize → Footer

Divider Line Shade

wpid881-media_1365319109008.png

This option sets the shade of the divider line within the footer area. Depending on the background color, set the shade that suits best.

 

Forms Background and Border Colors

wpid882-media_1365319209464.png

Set the background and border colors for HTML Forms within the footer area. Use the color picker for each section to choose the color that suits your footer background.

Background Layer

wpid879-media_1365318348412.png

This area lets you control the footer background ( layer one ), choose from the following options:

  1. Color: Set a solid color / gradient
  2. Image ( Positioned ): Set a positioned image, control the positioning and set a background color.
  3. Pattern: Set a pattern and background color

Background Layer 2

wpid880-media_1365318831665.png

This area lets you control the footer background ( layer two - this layer sits on top of layer one ), choose from the following options:

  1. Color: Set a solid color / gradient
  2. Image ( Positioned ): Set a positioned image, control the positioning and set a background color.
  3. Pattern: Set a pattern and background color

Read more →

Sub-Menu

To edit the Header settings, goto WordPress → Dashboard → Appearance → Themes → Customize → Navigation

Sub-Menu Background and Border Color

wpid877-media_1365319454029.png

Set the background and border colors for Sub-Menu ( Drop Menu ) within the main navigation area. Use the color picker for each section to choose the color that suits best.

Left Align Sub-Menu

media_1386165928801.png

If you would like the Secondary Menu of the Sub-Menu to open out to the left instead of the right, you can add the class submenu-left to the end drop menu.

To enable CSS classes, go to Appearance > Menu > Screen Options (top right) > Tick CSS Classes.

Add submenu-left to Appearance > Menus > Menu Item > CSS Classes.

 

Read more →

Body

Edit the main area ( body ) via AppearanceThemes Customize → Edit the Skin you wish to customize via Skin Select → Switch to Body section

Body Skin Settings

wpid1065-media_1365316375717.png

Body Skin ( inner skin )

This option enables you to switch between light or dark body skin ( inner skin ).

 

Content Frame

This options globally controls the content frame ( wraps the main content with a border and background color ). To disable the content frame globally, set this option to disabled.

 

Content Frame Color

Set the color of the content frame using the color picker.

 

Content Frame Opacity

Set the opacity of the content frame using the slider bar. If your content frame appears transparent within the preview, ensure you drag this bar until a value appears in the adjacent box.

 

Divider Line Shade

wpid1064-media_1365317154721.png

This option sets the shade of the divider line within the main ( body ) area. Depending on the background color, set the shade that suits best.

 

Content Frame Border

Set the border color of the content frame using the color picker.

Background Layer

Choose from the following options:

  1. Color: Set a solid color / gradient
  2. Image ( Full Screen ): Set a full screen image
  3. Image ( Positioned ): Set a positioned image, control the positioning and set a background color.
  4. Pattern: Set a pattern and background color
  5. Video / Flash: Set a video / flash file
  6. Image / Video Cycle: Set a cycle of media ( animated background ) by selecting a datasource and entering the ID / name of the source you wish to use.

 

 

Read more →

Header Settings

To edit menu, branding alignment etc, goto WordPress → Dashboard → Customize This Theme → Header

Branding Version

This option can be changed on each Skin and allows you to choose between a Primary and Secondary Branding / Logo ( ideal if you have a light and dark skin which require different logos ).

Minimum Header Height

Increase the header height by using this option, it sets a minimum height and not a static height, this way if the content exceeds the height it will automatically adjust itself.

Branding Display

Choose to hide the Branding / Logo, this is a global setting and affects the entire site.

Branding / Logo Alignment

Select the alignment of the branding - choose between Left, Right, Center.

Branding / Logo Top Margin

This option allows you to set a top margin value for the branding / logo, increase the value to push the logo down.

Menu Alignment

Select the menu alignment - choose between Left,Right, Center.

Menu Top Margin

This option allows you to set a top margin value for the menu, increase the value to push the menu down.

Read more →

Font Colors

General, Header, Footer

Control the general, link, link:hover and heading font colors for the General, Header and Footer areas. Click into the box and a color picker will be displayed for you to choose the color you require.

Read more →

Font Settings

It's recommend to load existing skin pre-sets to see examples of use.

Font Sizes

Control the General, Heading and Menu font size.

Font Family

Control the Font Family for General, Headings, Menu.

The default Font type is set to Google, this option can be switched to Cufon within Theme Options → General Settings.

Read more →