Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • August 7, 2018 at 11:15 am #994326
    Kesselhut

    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

    August 7, 2018 at 11:02 pm #994607
    Mike

    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

    August 9, 2018 at 6:50 pm #995657
    Kesselhut

    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 6 years, 3 months ago by Kesselhut.
    August 10, 2018 at 4:42 am #995797
    Mike

    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

    August 10, 2018 at 1:43 pm #995953
    Kesselhut

    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

    August 10, 2018 at 5:12 pm #996076
    Victoria

    Hi Henning,

    Best regards,
    Victoria

    August 20, 2018 at 9:51 am #999271
    Kesselhut

    Hi again,

    Please have a look at this page:

    Shopping-Entwicklung

    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

    August 20, 2018 at 1:13 pm #999336
    Mike

    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

    September 11, 2018 at 7:16 pm #1008531
    Kesselhut

    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

    September 11, 2018 at 7:33 pm #1008545
    Jordan Shannon

    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

    September 20, 2018 at 8:37 am #1012165
    Kesselhut

    Thanks Jordan,

    that fixed the problem, sorry for my late reply.

    September 20, 2018 at 1:55 pm #1012302
    Rikard

    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

    September 20, 2018 at 2:19 pm #1012319
    Kesselhut

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

    September 20, 2018 at 6:55 pm #1012430
    Jordan Shannon

    Hi,

    No problem I’m happy to help my friend!

    Best regards,
    Jordan Shannon

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