Build horizontal bar for the category name on the home

  • Author
    Posts
  • #137131

    gianlucarossi92
    Member
    Original poster

    I apologize if I still disturb, I would like to ask you if you can insert a red horizontal bar above each category of the home. The category title must be contained within the red bar. A bit like those red rectangles that helped me to insert images in “highlights”.

    Here’s how I would like the change: https://preview.ibb.co/fA8Wx0/BARRA-ROSSA.png

    Thank you so much. Ah, I forgot, I remind you if you can also answer me here: https://premium-themes.forums.wordpress.com/topic/link-to-the-category-from-bar-category-page-improvements/page/2/

    The blog I need help with is: intellettualemoderno.com

    #137133

    gianlucarossi92
    Member
    Original poster

    P.S: the red bar on “all” the names of the category

    #137147

    binarymoon
    Theme Author

    You don’t need to remind me. I know what I have and haven’t replied to and I always reply.

    add this:

    .sidebar-category-summaries .item h3 a {
        background: #c0392b;
        color:#ffffff;
        display: block;
        padding: 5px 10px;
    }
    .sidebar-category-summaries .item h3 {
        padding-right: 0;
    }

    delete this:

    .sidebar-category-summaries .item h3 a {
        color: #c0392b !important;
    }
    #137170

    gianlucarossi92
    Member
    Original poster

    “WOW”: beautiful effect. I am very satisfied, thank you :)

    Just one question: how can I reduce the space between the red bar and the posts …… and also reduce the space with the red bar below? (too much white space).

    Here’s what I say: https://imgur.com/a/BBhGkoD

    THANK YOU

    #137182

    binarymoon
    Theme Author
    .sidebar-category-summaries .item h3 {
    padding-top: 0;
    padding-bottom: 0;
    }
    .sidebar-category-summaries .item {
    margin-bottom: 30px;
    }

    Optional: The padding-top and padding-bottom could be merged with the padding-right instruction from the previous code.

    #137191

    gianlucarossi92
    Member
    Original poster

    No tried all the css but it does not work. I also tried to add the padding-top and padding-bottom to the previous code … but it also works.

    I tried, for example, a question the padding-top and the padding-bottom at 1000, but nothing changes.

    I do not understand what’s wrong.

    FROM RIGO 5 to 15 OF CSS there is this:
    .sidebar-category-summaries .item h3 a {
    background: # e20a16;
    color: #ffffff;
    display: block;
    padding: 4px 10px;
    }

    .sidebar-category-summaries .item h3 {
    padding-right: 0;
    }

    WHILE, FROM RIGO 80 to RIGO 87 there is this:
    .sidebar-category-summaries .item h3 {
    padding-top: 10px;
    padding-bottom: 10px;
    }

    .sidebar-category-summaries .item {
    margin-bottom: 12px;
    }

    #137192

    gianlucarossi92
    Member
    Original poster

    I decreased the space between a line and the post above …. but I can not decrease the space between the staff and the post below.

    Here is a picture of the problem, and also of the final result that I would like: https://imgur.com/a/n1PkGaV

    #137221

    binarymoon
    Theme Author

    I’ve just tried it again and the same code worked fine.

    To reduce the space as you have in the image, all you need is:

    .sidebar-category-summaries .item h3 {
    padding-bottom: 0;
    }
    #137222

    binarymoon
    Theme Author

    Note that you can reduce the gap further (entirely) with

    .sidebar-category-summaries .item h3 {
    margin-bottom: 0;
    }

    Also note that adding a value of 10000 will do nothing since there’s no unit. Unitless values only work for 0. You need to add a px, or em, or rem, or ch, or vh or some other unit (there’s loads of them). In this case px is easiest since it refers to pixels.

    So the value would be:

    .sidebar-category-summaries .item h3 {
    padding-bottom: 10000px;
    }
    #137227

    gianlucarossi92
    Member
    Original poster

    Now works. All solved, thanks, thanks, thanksssss of patience and kindness

The topic ‘Build horizontal bar for the category name on the home’ is closed to new replies.