styling – XTRA Tutorials https://xtratheme.com/docs Documentation of XTRA WordPress Theme Tue, 03 Sep 2024 10:17:57 +0000 en-US hourly 1 https://wordpress.org/?v=6.8.2 Theme Options: Woo Product Styling https://xtratheme.com/docs/theme-options/theme-options-woo-product-styling/ https://xtratheme.com/docs/theme-options/theme-options-woo-product-styling/#respond Thu, 27 Jun 2024 12:08:44 +0000 https://xtratheme.com/docs/?p=2030

Description and Screenshot

Step 1
XTRA

WooCommerce Product Styling settings

Under Theme Options > WooCommerce Pro > Product Styling you can find and customize design of your WooCommerce product page. You can customize any parts image, title, add to cart button, wishlist, sale, price, and etc.

Theme options woo single styling
Tips

You may want to know …

  • Enable/Disable Features – If you want to enable or disable some product features such as hover zoom, slider, etc. then go to Theme Options > WooCommerce Pro > Product Settings
]]>
https://xtratheme.com/docs/theme-options/theme-options-woo-product-styling/feed/ 0
Theme Options: Woo Products Styling https://xtratheme.com/docs/theme-options/theme-options-woo-products-styling/ https://xtratheme.com/docs/theme-options/theme-options-woo-products-styling/#respond Thu, 27 Jun 2024 11:48:48 +0000 https://xtratheme.com/docs/?p=2013

Description and Screenshot

Step 1
XTRA

WooCommerce Products Styling settings

Under Theme Options > WooCommerce Pro > Products Styling you can find and customize design of your WooCommerce shop products archive pages. You can customize any parts images, title, add to cart button, quick view and wishlist, sale, price, and etc.

Theme options woo products styling
Tips

You may want to know …

  • Enable/Disable Features – If you want to enable or disable some products features such as quick view or wishlist, then go to Theme Options > WooCommerce Pro > Products Settings
]]>
https://xtratheme.com/docs/theme-options/theme-options-woo-products-styling/feed/ 0
Theme Options: Portfolio Styling https://xtratheme.com/docs/theme-options/theme-options-portfolio-styling/ https://xtratheme.com/docs/theme-options/theme-options-portfolio-styling/#respond Thu, 27 Jun 2024 08:51:52 +0000 https://xtratheme.com/docs/?p=1988

Description and Screenshot

Step 1
XTRA

Portfolio Styling settings

Under Theme Options > Portfolio > Portfolio Styling you can find and manage your portfolio archive styling and customize designs.

  1. Items Styling – Customize any part of portfolio items styling
  2. Read More Icon – Choose read more icon for portfolio items from icons library
  3. Read More Styling – Customize read more button and icon styles
Theme options portfolio styling
Tips

You may want to know …

  • Portfolio Template -If you want to change portfolio archive and taxonomy pages template, go to Theme Options > Portfolio > Portfolio Settings and find template option.
]]>
https://xtratheme.com/docs/theme-options/theme-options-portfolio-styling/feed/ 0
Theme Options: Blog Single Styling https://xtratheme.com/docs/theme-options/theme-options-blog-single-styling/ https://xtratheme.com/docs/theme-options/theme-options-blog-single-styling/#respond Thu, 27 Jun 2024 07:19:47 +0000 https://xtratheme.com/docs/?p=1951

Description and Screenshot

Step 1
XTRA

Blog Single Styling settings

Under Theme Options > Blog > Single Styling you can find and manage your blog single post styling, next and previous posts styling, Related posts and comments styling.

  1. Single Post Styling – Customize single post parts styling image, title, meta and icons.
  2. Next & Previous Posts – Customize Icon, Title and Subtitles of next & previous
  3. Related Posts and Comments – Customize design of related posts and comments
Theme options blog single styling
Theme options blog single styling 2
Tips

You may want to know …

  • Enable/Disable Features – If you can’t see or find some parts of single post, then go to Theme Options > Blog > Single Settings and enable them
]]>
https://xtratheme.com/docs/theme-options/theme-options-blog-single-styling/feed/ 0
Theme Options: Blog Styling https://xtratheme.com/docs/theme-options/theme-options-blog-styling/ https://xtratheme.com/docs/theme-options/theme-options-blog-styling/#respond Thu, 27 Jun 2024 06:16:59 +0000 https://xtratheme.com/docs/?p=1936

Description and Screenshot

Step 1
XTRA

Blog Styling settings

Under Theme Options > Blog > Blog Settings you can find and manage your blog posts settings, template, excerpt length, excerpt type, etc..

  1. StyleKits – Customize any part of blog archive styling for posts, title, image, etc.
  2. Read More Icon – Choose read more icon from icons library
  3. Others – Read more and pagination StyleKits, pagination will affects on all post types
Theme options blog styling
Tips

You may want to know …

  • Hover Icon – You can enable hover icon from Theme Options > Blog > Blog Settings
]]>
https://xtratheme.com/docs/theme-options/theme-options-blog-styling/feed/ 0
Theme Options: Colors & Styles https://xtratheme.com/docs/theme-options/theme-options-colors-styles/ https://xtratheme.com/docs/theme-options/theme-options-colors-styles/#respond Thu, 20 Jun 2024 12:10:53 +0000 https://xtratheme.com/docs/?p=1715

Description and Screenshot

Step 1
XTRA

Colors and Styles

Under Colors and Styling section you can change primary and secondary website colors, Change background color and any general styling.

  1. Accent Color – You can change all primary theme colors
  2. Secondary Color – You can change website secondary colors
  3. Dark Mode – If you want to turn your site to dark mode enable this option
  4. Styling – Only general styling options for body, buttons, images, etc.
  5. Widgets – Full styling options for sidebars and widgets
Colors and styles theme options
Tips

You may want to know …

  • Theme Colors – If your theme color is for e.g. red and you want to change it to green, it will replace all old red colors in your database with new color you selected.

  • Dark Mode – It will affect only on 70% of website and you need to change some other parts that have custom styles manually.

  • Boxed StyleKit – If you want to change boxed background, first enable it from
    Theme Options > General > Layout
]]>
https://xtratheme.com/docs/theme-options/theme-options-colors-styles/feed/ 0
How to Change Menu Color and Styling on Your Website? https://xtratheme.com/docs/how-to/how-to-change-menu-color-and-styling-on-your-website/ https://xtratheme.com/docs/how-to/how-to-change-menu-color-and-styling-on-your-website/#respond Wed, 19 Jun 2024 09:06:35 +0000 https://xtratheme.com/docs/?p=3042

Navigation Menu

Step 1
Step01

Go to Theme Options

If you move the mouse cursor over the menu you can see the gear icon will appear left top of menu, you can click on it and directly navigate to this element settings in the header.

Menu color 1

You can see the settings of Menu element below:

Menu color 2

Scroll down the left panel to find the Menu Styling section.

Click on Menu Stylekit to open the modal styling box, you can find all styling you need inside the Stylekit.

Menu color 3

For changing the menu’s Hover color & styles click on hover on top of Stylekit modal.

Menu color 4
Step02

Menu Shape

For changing the menu shape styles and effects, click on Shape Stylekit on the left panel to open the Stylekit modal.

Menu shape
Step03

Drop Down Menu

For changing the menu Drop down styles and colors, you can use Dropdown Stylekit for whole dropdown and Inner Menus Stylekit for each menu items.

Menu drop down
]]>
https://xtratheme.com/docs/how-to/how-to-change-menu-color-and-styling-on-your-website/feed/ 0
How to Customize Widget Styling Individually: A Step-by-Step Guide? https://xtratheme.com/docs/how-to/how-to-customize-widget-styling-individually-a-step-by-step-guide/ https://xtratheme.com/docs/how-to/how-to-customize-widget-styling-individually-a-step-by-step-guide/#respond Wed, 12 Jun 2024 19:27:36 +0000 https://xtratheme.com/docs/?p=2473

Description and Steps

Step 1
XTRA

Custom widget styling

If you have any available widget on your site pages, You can customize widget styling separatelly, For this purpose go to Theme Options > Widgets > Primary (According to your widget position), Then follow below shot:

Widget_styling
Tips

You may want to know …

  • Other solution – Go to Dashboard > Appearance > Widgets you can customize any widgets styling on active sidebars.
]]>
https://xtratheme.com/docs/how-to/how-to-customize-widget-styling-individually-a-step-by-step-guide/feed/ 0