[Resolved] CSS code from the Geek theme doesn’t work when I copy it to use on another site

Home Forums Support [Resolved] CSS code from the Geek theme doesn’t work when I copy it to use on another site

Home Forums Support CSS code from the Geek theme doesn’t work when I copy it to use on another site

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #2335288
    Sue

    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 */

    #2335381
    Fernando
    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

    #2336992
    Sue

    Here you go.

    #2337006
    Sue

    Sorry the last info was for the site that is working. Here is the info for the site that is not working.

    #2337023
    Sue

    You will need to add /blog on the link.

    #2337026
    David
    Staff
    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-filter

    Then you should see the effect

    #2337042
    Sue

    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,

    #2337262
    David
    Staff
    Customer Support

    Do you know much about CSS and HTML ?

    #2337291
    Sue

    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

    #2337915
    David
    Staff
    Customer Support

    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 ?

    #2338347
    Sue

    This is terrific. Thank you so much!

    Sue

    #2338763
    David
    Staff
    Customer Support

    Awesome – glad to be of help!

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.