Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #994326

    Hi all,

    On the page I am working on right now I want to style elements in the sidebar.
    I have found the selector to change the css of all elements but I want just specific categories to look different.

    https://sand-enfold.hekeko.de/seite-entwicklung

    Can someone help out with some css tricks?
    Or is there more to be done?

    Thanks
    Henning

    #994607

    Hey Kesselhut,
    I took a look at your page and see you have items in your sidebar with a orange background color, I assume that these are the items you are referring to.
    Unfortunately I don’t see a category class on the items, and they all have the same classes, if they had different classes we could style them differently, perhaps you could manually add the classes.
    Or if their placement was always the same, such as the middle one, we could always style it differently.
    Can you explain a little more about what you want to do so we could assist.
    Perhaps including a admin login in the private content area would also help.

    Best regards,
    Mike

    #995657

    Hi Mike,

    sorry for the late reply.

    The items you referring to are exactly the ones which are to styled.
    These are posts which have different categories and I thought that they should have all different category classes.
    I just want certain posts which belong to the “highlight” category to look different (background-color, font-size..whatever)

    See the private content for login.

    Best regards,
    Henning

    • This reply was modified 5 years, 7 months ago by Kesselhut.
    #995797

    Hi,
    I took a look into your sidebar widgets and see you are using the “Latest News” widget, with multiple categories selected to show, one of them being the “highlight” category you wish to style differently. Unfortunately the “Latest News” widget doesn’t include the category class of the items it shows. I tried to find a function to have it include the categories, without success.
    But I did come up with a work around, you can add several “Latest News” widgets and choose which categories they show and how many posts the show, and for each of these widgets a unique ID is created, such as “#newsbox-2” which you can style.
    So if you want 3 different posts to show, each styled differently, you could add 3 “Latest News” widgets each displaying a different category.
    We would be happy to assist in creating the css to style these widgets differently.

    Best regards,
    Mike

    #995953

    Hi Mike,

    thanks for the help.
    The workaround did the trick. Now I can even change the position of the highlighted post on different pages in different sidebar layouts.
    If I have any further questions or problems occur I will be coming back at you. Maybe you can take a look and check if you git some enhancements.

    By the way, I tried to find the last “-” in the “.news-time” but could not find it. Do you know where I can get rid of this?

    Best regards,
    Henning

    #996076

    Hi Henning,

    Best regards,
    Victoria

    #999271

    Hi again,

    Please have a look at this page:

    The workaround works, but not as expected. Maybe you could take a look and fix the css.
    I want the Date and Headline to be “white” but I only manage to change the properties globally.

    Best regards
    Henning

    #999336

    Hi,
    For the “highlight” widget the date & headline are two different classes:

    
    #newsbox-3 a.news-link .news-headline
    #newsbox-3 a.news-link .news-time
    

    So the “#newsbox-3” is the widget, and the “a.news-link ” is the link that wraps the headline and date, but the “news-headline” is the headline & “news-time” is the date.

    We will put them together like this to make them both white:

    #newsbox-3 a.news-link .news-headline,#newsbox-3 a.news-link .news-time {
    color: #fff !important;
    }

    To use this code again for another widget, just change “#newsbox-3” to your new widget ID.
    I hope this helps explain it.

    Best regards,
    Mike

    #1008531

    Hi Mike,

    thanks for the great support.
    You really cleared things up.

    Now I am struggling again with the elements in the sidebar.
    I can’f figure out how to remove the “-” at the end of the date.
    I also want the spacing between the bold title and the cropped text to be much smaller but only find the margin which affects the whole page.

    Any idea?

    Greetings
    Henning

    #1008545

    Hi,

    Add this to quick css:

    #top .widget .news-time{
        width: 96px;
        overflow: hidden!important;
        white-space: nowrap;
    }
    
    #top .widget .newsbox .news-time{
        width: 101px;
        overflow: hidden!important;
        white-space: nowrap;
    }
    
    .news-excerpt p{
    margin-top:0px!important;
    }

    Best regards,
    Jordan Shannon

    #1012165

    Thanks Jordan,

    that fixed the problem, sorry for my late reply.

    #1012302

    Hi,

    Great, glad you got it working. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    #1012319

    Close it. Thank you
    If any further styling options occur I will be opening a new thread

    #1012430

    Hi,

    No problem I’m happy to help my friend!

    Best regards,
    Jordan Shannon

Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Styling a specific category’ is closed to new replies.