Return to previous page

How to customize Widget styles and some questions

This topic has 14 replies, 2 voices, and was last updated 4 weeks ago ago by Rose Tyler

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

13 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
Viewing 14 results - 1 through 14 (of 14 total)