Appearance
Theme Options
In this settings page, you can configure the global appearance of the entire site.
Note
Due to browser caching, changes may not appear immediately after saving. Please press Ctrl+F5 to refresh the page.
Layout
Layout Settings
- Header Layout — Set the header layout of the site. Can also be created in ThemePluginPro > Layout > Header Layout
- Content Layout — Set the content layout of the site. Can also be created in ThemePluginPro > Layout > Content Layout
- Footer Layout — Set the footer layout of the site. Can also be created in ThemePluginPro > Layout > Footer Layout
Container Settings
- Container Layout — Set the theme display mode, boxed or wide
- Content Margin — Set the margin around the content area
- Container Width — Set the width of the content area, and you can also set responsive widths for different resolutions
Design
Body Background
Set the background color or background image of the theme.
Content Style
Set the text color, size, etc. of the content area.
H1 - H6 Style
Set the text color, size, etc. for headings 1 through 6.
Button Color
Set the button color.
Loading Style
A loading animation will be displayed when the page loads.
- Enable — Enable or disable the loading animation
- Background Color — Set the background color of the loading animation
- Color — Set the color of the loading indicator
- Loading Text — Set the loading text
Sticky Widget
The sticky widget will be displayed in the bottom right corner of the page.
- Enable Sticky Widget — Show or hide this widget
- Social Media Icons — Set the text and links for social media
- Back to Top — Show or hide the back to top icon
- Back to Top Text — Set the text displayed when hovering over the back to top icon
Page Title
- Enable Page Title — Enable or disable the page title
- Page Title Layout — Show or hide the page title area
Vertical Layout — The title and breadcrumb navigation are displayed in two rows.
Horizontal Layout — The title and description are displayed on the same row.
- Height — Set the height of the page title area
- Show Arrow — Show or hide the down arrow. Clicking the arrow will scroll the page to the content area
- Show Breadcrumb — Show or hide the breadcrumb navigation
- Scroll Text Animation — Show or hide the scroll text animation when scrolling the page
- Background Color — Set the background color of the page title area
- Background Image — Set the background image of the page title area
- Color Overlay — Show or hide the background overlay, which will appear above the page title. You can set the background color and its opacity
- Font Color — Set the text color of the page title area
- Font Size — Set the text size of the page title area
- Background Scope — Set the display scope of the background, whether to include the header area
Breadcrumb
- Show Breadcrumb — Show or hide the breadcrumb navigation area
- Position — Set the position of the breadcrumb navigation, inside or outside the page title
- Text Alignment — Set the alignment of the breadcrumb navigation: left, center, or right
- Layout — Set the width of the breadcrumb navigation area
- Background Color — Set the background color of the breadcrumb navigation area
- Spacing — Set the spacing around the breadcrumb text
- Show Border Line — Show or hide the divider line at the bottom of the breadcrumb navigation area
- Breadcrumb Style — Set the breadcrumb navigation style. There are 3 styles available
- Breadcrumb Accent Color — Set the accent color of the breadcrumb navigation
- Breadcrumb Color — Set the text color of the breadcrumb navigation
- Breadcrumb Font Size — Set the text size of the breadcrumb navigation
- Breadcrumb Line Height — Set the line height of the breadcrumb navigation text
Sidebar
- Enable — Enable or disable the sidebar
- Sidebar Position — Set the sidebar on the left or right side of the page
- Sidebar Width — The theme uses the Bootstrap framework, and the content area width is divided into 12 columns. You can set how many columns the sidebar occupies
- Sticky Sidebar — Enable or disable the sticky sidebar feature. When the content scrolls, the sidebar will remain fixed and not scroll with the content
- Sidebar Spacing — Set the spacing around the sidebar
Sidebar Menu
- Show Sidebar Menu — Enable or disable the sidebar menu
- Menu Level — Set the display level of the menu. Set to ALL to display all menu levels; set to 1 to display the menu under first-level menu items (excluding the first-level menu items themselves); set to 2 to display the menu under second-level menu items (excluding the second-level menu items themselves)
- Menu Color — Set the text color of the menu
- Menu Font — Set the font of the main menu text
- Menu Font Weight — Set the font weight of the main menu text
- Menu Font Size — Set the font size of the main menu text
- Menu Line Height — Set the line height of the main menu text
- Submenu Font — Set the font of the submenu text
- Submenu Font Weight — Set the font weight of the submenu text
- Submenu Font Size — Set the font size of the submenu text
- Submenu Line Height — Set the line height of the submenu text
- Current Menu Color — Set the text color of the selected menu item
Footer
- Footer Mode — Select the footer display mode. Scroll means the footer area scrolls with the page; Fixed means the footer area is fixed at the bottom of the page
Plugins
This theme integrates many jQuery plugins and CSS plugins. You can set whether to enable or disable these plugins. Disabling unused plugins on the site can improve loading speed.
- jQuery Libraries — Enable or disable jQuery plugins
- CSS Libraries — Enable or disable CSS plugins
Custom Code
You can add extra CSS and JS code to the theme in this section.