Premium Theme Support › Pro Theme Design › Chronicle

Build horizontal bar for the category name on the home

  • Author
    Posts
  • #137131

    gianlucarossi92
    Member

    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

    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;
}
    • This reply was modified 3 years by  binarymoon.
    #137170

    gianlucarossi92
    Member

    “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

    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

    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

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

  • Author
    Posts

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