- This topic has 11 replies, 3 voices, and was last updated 3 years, 9 months ago by
.
-
Posts
-
The problem that I’m having is on the Blog archive page. After copying the CSS code from the Geek theme to the test site the categories list stops displaying horizontally. In fact, when I inspect the code, I can’t find any reference to .gp-container.category-filter which is where I believe the styling should happen.
Any thoughts on why this is happening?
My system:
GeneratePress version 3.1.3 (theme)
GeneratePress Premium 2.1.2 (plugin)
GenerateBlocks version 1.5.4 (plugin)
WordPress 6.0.2
Running on Local. No other active plugins except the ones above.On MyGPressEx – Local
I’ve installed the Geek theme from the GeneratePress library.On JFS CSS test – Local
I’ve installed a copy of JFS. The production site is running WooCommerce. I have deactivated all plugins except the ones mentioned above.Here is the code that came with the Geek theme. I’ve added it to the JFS CSS test site.
/* GeneratePress Site CSS */
.dynamic-content-template:nth-child(even) .gb-grid-wrapper {
flex-direction: row-reverse;
}
.gb-button-wrapper .blog-term-button:last-child {
border-right-style: none;
margin-right:0;
}
.gb-container.category-filter .wp-block-categories-list{
list-style: none;
display: flex;
justify-content: space-around;
}
.gb-container.category-filter .wp-block-categories-list li.current-cat a {
color: var(–base-3);
}
@media (max-width: 768px) {
.gb-container.category-filter .wp-block-categories-list {
flex-direction: column;
}
}
/* End GeneratePress Site CSS */Customer Support
Hi Sue,
May you provide the link to the site in question?
You may use the Private Information field for this: https://docs.generatepress.com/?s=private+information
Here you go.
Sorry the last info was for the site that is working. Here is the info for the site that is not working.
You will need to add /blog on the link.
Customer Support
Hi there,
so you have a Block Element with the title and the category list inside.
If you select the top level Container Block, in Advanced > Additional CSS Class(es) add:category-filterThen you should see the effect
Wow, thank you so much.
I’d like to learn more about using CSS with GP, is there somewhere in the documentation that talks about programming with CSS?
Thanks again,
Do you know much about CSS and HTML ?
I know the basics of both and some JavaScript. I enjoy coding but don’t often have an opportunity to (GP makes styling so easy :-). When I have time in a project to work on something like this in I do. Do you know of any resources for learning more about CSS?
I appreciate you taking the time to ask me the question.
Thank you,
SueThere are lots of courses when it comes to writing Themes and Plugins, and their associated HTML, CSS and JS. Which is great for levelling up your HTML and CSS skills, but in most instances, like in this topic, the HTML is written by something else ( WordPress core, The Theme, a Plugin ). And that HTML is not visible in the WP Admin.
For that reason my biggest recommendation is to keep on using the Browser Developers Tools to inspect the HTML:
https://developer.chrome.com/docs/devtools/dom/
If we can read the HTML, and we can see its attributes (
class,id,href,data-attretc, ) then we can use them to write CSS. I learnt most of what i know from using the developers tools over and over again.Some useful things to know:
WordPress adds a lot of Classes to a lot of the HTML you see.
The two main functions it uses are:i)
body_classfor adding classes to the<body>tag
ii)post_classfor adding classes topostelements such as thearticlesin your post loop.https://www.screencast.com/t/po529188
The classes it adds are generally very high level descriptor classes. For example on the
bodyyou will see template classes such assingle-postorarchiveand on thepostyou may see an ID or acategory-term.These are all super handy for styling elements based upon those high level rules:
For example:
.single-post a { /* style for my single post links */ }or
article.category-idea .read-more { /* style the readmore link on posts with the category term idea */ }Themes and plugins add to the Body and the Post classes
WP provides Filter Hooks:
body_classandpost_classthat allow developers to add Classes to those elements.
GeneratePress as do other themes and plugins do use them.For example in the
<body>tag you will see classes likeno-sidebarorseparate-containerswhich are theme added classes that are directly related to your customizer choices.In most instances the classes the theme adds such as
separate-containersorheader-aligned-leftare constant, as in they are present on every page, post, archive. And the Theme uses them to simply load the styles based on your Customizer options.But some classes like
no-sidebarvsright-sidebarcan be used to style different posts, pages etc. for layouts you can set on individual posts.Reading CSS Selectors Right to left, and HTML from bottom to top
When we view a CSS selector eg.
.gb-container.category-filter .wp-block-categories-list li.current-cat aWe would read them from left to right. But browser reads them from right to left.
In this instance it checks anyaelement, and looks up its parent tree to see if its a child of a<li class="current-cat">, and if that element is a child of ofwp-block-categories-listand if that is a child of an element withclass="gb-container category-filter"See here on the original Geek Site:
https://www.screencast.com/t/GZvdPpC9uO
Also note in the Styles panel, there were several CSS styles adding
colorto that element, and the Top Most one is the CSS style that got applied because it has much greater specificity.The missing class
In the original issue, the problem as you identified was the missing
category-filterclass.
This had to be manually added to the relevant Block in the editor. But we could also have added it here – in the yellow box:https://www.screencast.com/t/u20TX2GD
As following the right to left logic and down to up reading, the CSS selector would still have been true.
So why do we add that
category-filterselector. Simply so that thewp-block-categories-listwill receive our custom CSS if it is inside a gb-container with a specific class. Meaning you can use the Category List Block elsewhere and keep its default styles.Over specification
if we look at this CSS rule, its really over specific:
.gb-container.category-filter .wp-block-categories-list li.current-cat a { color: var(–base-3); }It could have been:
.category-filter .wp-block-categories-list .current-cat a { color: var(–base-3); }And that would still work, if you follow the above right to left, bottom to top logic.
But as much as we want to keep code small, the unnecessary class and tags help identify what they do.eg. the
gb-prefix we use for all our GenerateBlocks auto generated classes. Sogb-container.category-filtershows we have an Additional CSS class adde to a GB Container BlockLikewise the
liinli.current-cattells us we should look for a list item.So sometimes verbose selectors are very handy 🙂
Does that help ?
This is terrific. Thank you so much!
Sue
Awesome – glad to be of help!
- You must be logged in to reply to this topic.
