Archived topic
CSS code from the Geek theme doesn't work when I copy it to use on another site
11 replies · Started by Sue on September 6, 2022
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 */
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.
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-filter
Then 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,
Sue
There 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-attr etc, ) 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_class for adding classes to the <body> tag
ii) post_class for adding classes to post elements such as the articles in your post loop.
https://www.screencast.com/t/po529188
The classes it adds are generally very high level descriptor classes. For example on the body you will see template classes such as single-post or archive and on the post you may see an ID or a category-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_class and post_class that 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 like no-sidebar or separate-containers which are theme added classes that are directly related to your customizer choices.
In most instances the classes the theme adds such as separate-containers or header-aligned-left are 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-sidebar vs right-sidebar can 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 a
We would read them from left to right. But browser reads them from right to left.
In this instance it checks any a element, 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 of wp-block-categories-list and if that is a child of an element with class="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 color to 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-filter class.
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-filter selector. Simply so that the wp-block-categories-list will 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. So gb-container.category-filter shows we have an Additional CSS class adde to a GB Container Block
Likewise the li in li.current-cat tells 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!
