Return to previous page

How to customize Widget styles and some questions

This topic has 17 replies, 2 voices, and was last updated 19 minutes ago ago by kmc

kmc

Participant

October 19, 2024 at 18:37

Hi there,

May I know how to customize the Widget styles, for example the page I attached has a widget sidebar with menus, I am not sure how to customize the font, font size and color, also the alignment, I want to leave some space to the left.

Another question is, I want to make some margin space on the left and right, for all single pages (not main page, not product categories and product pages) is there an easier way to do it? or I have to set every page one by one?

Please, contact administrator
for this information.

#419539 Copied Theme version: 9.4.1

16 Answers
Rose Tyler

Support staff

October 21, 2024 at 09:33
Hello,

Thank you for reaching out to us.

To customize the widget styles, such as font, font size, color, and alignment, you can use custom CSS code, for example, add the next code in Theme Options > Theme Custom CSS > Global:

.sidebar-position-left .sidebar-widget a, .sidebar-position-left .menu-element.menu-list .menu li ul a { font-size: 16px; /* Adjust the font size */ color: #333; /* Adjust the font color */ -webkit-text-fill-color: #333; text-align: left; /* Adjust the alignment */ padding-left: 10px; /* Add space to the left */ }

Regarding your second question about adding margin space to the left and right for all single pages, you can apply a global CSS rule to target all single pages at once, rather than setting it individually for each page. You can use the following CSS:

.container.content-page, .breadcrumb-trail .page-heading { padding-left: 30px; padding-right: 30px; }

Please let us know if you need further assistance.

Best Regards,
8Theme’s Team
#419677 Copied
kmc

Participant

October 21, 2024 at 10:08

Hi, for the sidebar, your code only applies to the sub menu items, please check my screenshot.

Files is visible for topic creator and
support staff only.

#419696 Copied
Rose Tyler

Support staff

October 21, 2024 at 10:48
Hello,

Please change the code to:

.sidebar-position-left .sidebar-widget a, .sidebar-position-left .menu-element.menu-list .menu li ul a { font-size: 14px !important; color: #333; -webkit-text-fill-color: #242222; padding-left: 5px; }

Best Regards,
8Theme’s Team
#419709 Copied
kmc

Participant

October 21, 2024 at 18:21

Hi, the padding-left: still only change the padding for the sub-menu side bar. See the link attached, I tried with 25px so it is obvious.

Please contact administrator
for this information.

#419807 Copied

Rose Tyler

Support staff

October 22, 2024 at 07:55

Hello,

Please try to use !important; – https://prnt.sc/aXTpxrGHuctA

Best Regards,
8Theme’s Team

#419869 Copied

kmc

Participant

October 22, 2024 at 08:50

It works well, thank you!

May I know what code I should add if I want to cutomize the SUB-menu’s font size and weight?

#419878 Copied
Rose Tyler

Support staff

October 22, 2024 at 09:32
Hello,

You’re welcome!

https://prnt.sc/JymH8haOg6vb

.sidebar-position-left .menu-list .menu .nav-sublist-dropdown ul > li a { font-size: 10px !important; font-weight: 900; }

Best Regards,
8Theme’s Team
#419897 Copied
kmc

Participant

October 22, 2024 at 11:24

THanks！

Last question, I tried to search about hiding specific Widget (like this sub menu) on mobile devices, not sure how to do it? And if there is also an option to hide all the sidebars on mobile device?

#419928 Copied
Rose Tyler

Support staff

October 22, 2024 at 12:20
Hello,

Custom CSS code can be used, for example:

@media only screen and (max-width: 480px) { .sidebar-mobile-bottom .sidebar { display: none; } }

Warm Regards,
The 8Theme Team
#419946 Copied
kmc

Participant

October 26, 2024 at 09:44

Thanks, this works great.

Another question, I find that when I add “product categories” widget as sidebar on categories page,
1. there is no option to remove the “uncategorized” category
2. how can I only display some of the categories and also set sequence which categories I want to display？

#420554 Copied

Rose Tyler

Support staff

October 26, 2024 at 12:11

Hello,

1/ Please read this article – https://www.8theme.com/documentation/xstore/troubleshooting/how-to-remove-the-uncategorized-category-from-wordpress/

2/ You can edit these settings – https://prnt.sc/j2QacEalq4K1

Warm Regards,
The 8Theme Team

#420574 Copied

kmc

Participant

October 26, 2024 at 18:44

Thank you for your reply, for No.2
1) how do I hide some categories even they are not empty?
2) how do I change the display sequence of the categories?

#420597 Copied
Rose Tyler

Support staff

October 28, 2024 at 08:49
Hello,

1/ By default, there are no such settings.
What exactly categories do you want to hide? Custom CSS code can be used, for example:

.etheme_sidebar-widgets-count-aside .cat-item-949 { display: none !important; }

2/ https://prnt.sc/sy7xGIhKWmxv
You can edit product categories under Dashboard > Product > Categories, where you can set the category order according to your needs. For a better reference, please watch this video: https://gyazo.com/1113977f1bea8e9e7b3434c47a452b8e

Warm Regards,
The 8Theme Team
#420661 Copied
kmc

Participant

February 6, 2025 at 14:12

For Question 1/, here is what I want

a) on the category page, the sidebard widget should only display the category and all its parent categories. Other categories under different parent category should not appear.

b) on the product page, the sidebard widget should also only display the category and all its parent categories. Other categories under different parent category should not appear.

c) there is another issue on product page, the menu is not expandable like on category page.

Please see images attached

Files is visible for topic creator and
support staff only.

#433536 Copied

Rose Tyler

Support staff

February 6, 2025 at 15:00

Hello,

Thank you for getting in touch with us.

1/ Appearance > Widgets > enable “Only show children of the current category” for the Product Categories widget.

2/ https://prnt.sc/YBZROwxGs47K – you are currently editing the single product template and we can’t check settings there.

Warm Regards,
The 8Theme Team

#433547 Copied

kmc

Participant

February 7, 2025 at 08:49

1) I tried but this doesn’t make any difference.

2) if I am at the 3rd level category, I would like to show it’s parent category (2nd level) and also it’s parent’s parent (1st level) category. However I don’t want to show other 1st level category that is not related.

3) Please try again.

#433633 Copied
Viewing 17 results - 1 through 17 (of 17 total)