Archived topic
Changing the size, font, color and weight in widget of left sidebar
18 replies · Started by Claudio on March 10, 2022
Hi,
We were previously discussing in this topic:
https://generatepress.com/forums/topic/changing-the-title-size-and-weight-in-left-sidebar-only/#post-2149389
Please see my site URL where the sidebar with categories widget appears in Private Info area. I have a Filter Everything plugin widget with a filter I created in that sidebar.
So what I wanted is to be able to control the spacing between the titles and each of the individual attributes in the sidebar, as well as fonts and colors.
In simple CSS I have the code below, which successfully changes the titles but not the individual attributes:
#left-sidebar .inside-left-sidebar > aside:nth-child(1) .wp-widget-group__inner-blocks{
color: rgb(0,255,0);
font-size: 25px;
font-weight: 500;
}
#left-sidebar .inside-left-sidebar > aside:nth-child(1) .widget-title {
color: rgb(0,255,0);
font-size: 25px;
font-weight: 500;
}Thanks, awaiting reply.
I forgot to mention, browser and site cache was cleared, cache disabled from the hosting. Still, the attributes displayed by the widget are not being modified despite the CSS.
Using GP Premium Version 2.1.2
Hi there,
remove your current CSS and try this:
/* WPC filter title styles */
.widget-area .widget div.wpc-filter-title {
color: #f00;
font-size: §8px;
font-weight: 600;
margin-bottom: 20px;
}
/* WPC filter input label styles */
.widget-area li.wpc-term-item a,
.widget-area li.wpc-term-item label {
color: #00f;
font-size: 13px;
line-height: 2em;
}Hi David,
Thank you for your fast reply. That code did the trick! Thank you very much. I'll play around with sizes and colors.
Will this CSS styling still work on another WPC filter? For example, I'm planning to use the same plugin to create another filter (they call it "Filter Sets" that will only work on certain pages (Ex. If in a "rings" category page, the category wpc-filter-title and content will not show).
Thanks.
Yes that code should work with any of those filters as long as they are added to a widget area.
If it don't work then let us know and we can take a look
Ok, understood.
One more thing: There is a setting in the plugin that tells the allowed max height in pixels for each individual section. If, for example, I set it to 100 and there are more items listed in each section a scroll bar appears. But if set to a height in pixels larger than what the number of rows occupies, then there is no scroll bar shown.
I already disabled the CSS, and checked, that functionality mentioned above works, but it is lost while the CSS is active.
Any ideas on how to fix it?
Hmmm.. I can't see what the CSS I provided would do to affect that.
Can you keep the CSS and enable that option and then share a link where I can see the problem
OK, CSS enabled, problem is showing now (unnecessary scroll bar). URL in the Private info section.
After enabling the CSS code, I tried changing that setting (pixels height that enables or disables the scrollbar) in the plugin, cleared the cache but problem persists. Thanks.
The cause of the scroll bar is this line of CSS which is added by the filter everything plugin:
https://www.screencast.com/t/OgV2qTwxu
You can add this CSS to override it:
.widget-area .wpc-filters-section:not(.wpc-filter-post_meta_num,.wpc-filter-layout-dropdown) .wpc-filter-content:not(.wpc-filter-has-hierarchy) ul.wpc-filters-ul-list {
overflow-y: visible;
}Hi Ying,
Thank you for that, however it removes the scroll bar from all the sections, causing them to go beyond and thru the footer. I left the CSS activated so you can see how it renders. I want it to only remove the scroll bar from the sections where its not necessary, ie. the sections where the height in pixels of the section contents is less than 500 pixels.
the sections where the height in pixels of the section contents is less than 500 pixels.
Can you tell me what are the filter names of the "height in pixels" sections?
Hi Ying,
I unfortunately do not know them. If you look at my sidebar filter area on my website, currently the sections where the scroll bar is not necessary are the CATEGORY, EARRINGS TYPE and FINISH (these are all less then 500 pixel high). The scroll bar should appear on MATERIAL and THEME sections since they are more than 500 pixels high.
I might have more sections added in the future, so the CSS code should not reply on the sections name but its max-height.
Note: I password protected the site. See private info area for credentials.
I just found a weird piece of CSS on your site which is causing the issue:
https://www.screencast.com/t/zFlXlGvSY3hC
It's the CSS from GP theme, but the original CSS doesn't have the space between the widget and :last-child.
Have you accidently modified the CSS?
Can you try removing GP theme and re-install it to be sure all the theme files are correct?
Let me know :)
Hello Ying,
Hmm, no I have not modified the CSS of the theme nor messed up with any of he the theme files. Whenever I add CSS I use SIMPLE CSS, I only have 16 lines of code there more or less.
OK, yes, I can remove the GP Premium theme and re-install it. Will I loose any work done in the customizer? Menus? GP Elements? Forms?
Hmm, no I have not modified the CSS of the theme nor messed up with any of he the theme files.
Might've been cache plugin.
Will I loose any work done in the customizer? Menus? GP Elements? Forms?
No, the changes will be saved in database, you won't lose them even delete the theme.
You just need to remove GP theme, not GP premium plugin.
