How to change CSS in Customizer to delete "Category"

  • Author
    Posts
  • #107398

    randygener
    Member
    Original poster

    Dear Mrinal and Philip,

    Good afternoon.

    My questions directly involve the 2 links below — all of the questions have to do with how to write the correct CSS for Customizer:

    (1) https://cultureofoneworld.org/category/criticism-without-borders/the-next-wave/

    (a) What is the correct CSS to use so that the word “Category: ” will go away. All I want it to say is “The Next Wave.” Please note that the category ID of 3935162 is correct. But why does the following CSS not work?

    .wf-active .category-3935162
    #page-header h1 {
    visibility: hidden;
    }

    .wf-active .category-3935162

    #page-header h1:before {
    font-size: 80%;
    content: ‘The Next Wave’;
    visibility: visible;
    color: navy;
    position: absolute !important;
    }

    (b) Can you see all those other words underneath? One set of words starts with “What’s happening now? What’s brand new? Who matters in the culture of one world?”

    Why do those very same words also appear in the Menu on a mobile phone?

    (2) https://cultureofoneworld.org/category/criticism-without-borders/think-differently/

    The same questions apply to this 2nd link.

    (a) What is the correct CSS to use so that the word “Category: ” will go away? All I want it to say is “Think Differently.”

    But in this case, the problem is that the words “Think Differently” disappear! CSS does not recognize the category ID of 1040560. How can I make the words re-appear? How do I re-write this CSS code?

    .wf-active .category-1040560
    #page-header h1 {
    visibility: hidden;
    }

    .wf-active .category-1040560 #page-header h1:before {
    font-size: 80%;
    content: ‘Think Differently’;
    visibility: visible;
    color: navy;
    position: absolute !important;
    }

    (b) Can you see all those extra words? (“What is good for business, for government or for artists is not necessarily good for society. The solution?”) I want the words on the page, but I do not want them to appear on the menu, especially on mobile phones. What to do?

    (3) In both cases above, would it be possible to use an image, a brand, an icon or a logo to always appear there in that space above (instead of using words like “The Next Wave” or “Think Differently”)?

    You see, I am imagining these two items to function similar to a section of a newspaper or a department in a magazine. I think that an icon or a small “section head” logo might apply to different sections, and the only places I can see where those might land are those empty spaces above the posts.

    I hope you can help offer insights.

    Randy

    The blog I need help with is: cultureofoneworld.org

    #107641

    mkrdip
    Theme Author

    Hi Randy.

    1) a) Use this:

    .wf-active .category-3935162 #page-header h1 {
        visibility: hidden !important;
    }
    
    .wf-active .category-3935162 #page-header h1:before {
        font-size: 80%;
        content: "The Next Wave";
        visibility: visible;
        color: navy;
        position: absolute !important;
    }

    b) Use this to hide them in mobile:

    @media only screen and (max-width: 640px) {
        .menu-item-description {
            display: none;
        }
    }

    2) a) Same as I did above. Please use CSS codes.
    b) 1 b) would work for this.

    3) HTML is not allowed in Category Description, so it’s currently not possible to add images. May you like to use specific Background images for the specific category using CSS?

    If you were in self-hosted WordPress, you could have used this to allow HTML in categories.

    Hope this helps.

    #107708

    randygener
    Member
    Original poster

    This CSS you gave above does not work:

    .wf-active .category-3935162 #page-header h1 {
    visibility: hidden !important;
    }

    Category remains, as you can see here: https://cultureofoneworld.org/category/breaking-news/

    What to do?

    #107713

    mkrdip
    Theme Author

    The Category ID changed. The ID for above link is 4553. So, CSS is:

    .wf-active .category-4553 #page-header h1 {
        visibility: hidden !important;
    }

    Cheers.

    #107714

    randygener
    Member
    Original poster

    I am sorry, friend. The CSS still does not work, even with the Category ID of 4553.

    May we please try for a different CSS code?

    #107715

    randygener
    Member
    Original poster

    Hello again, I found the solution. It was not the category ID. You forgot to include that first line. It takes 2 lines to kick category out.

    .wf-active .category-4553
    #page-header h1 {
    visibility: hidden;
    }

    .wf-active .category-4553
    #page-header h1:before {
    content: “Breaking News”;
    font-size: 100%;
    visibility: visible;
    color: navy;
    position: absolute !important;
    }

    Thank you. Let’s consider this closed.

    #107716

    randygener
    Member
    Original poster

    Hello again, I found the solution. It was not the category ID. You forgot to include that first line. It takes 2 lines to kick category out.

    .wf-active .category-4553
    #page-header h1 {
    visibility: hidden;
    }

    .wf-active .category-4553
    #page-header h1:before {
    content: “Breaking News”;
    font-size: 100%;
    visibility: visible;
    color: navy;
    position: absolute !important;
    }

    Thank you. Let’s consider this closed.

The topic ‘How to change CSS in Customizer to delete "Category"’ is closed to new replies.