Ask the community

This is a community support forum where you can ask
questions and interact with other PremiumPress Customers.

Styling featured listings


  • George
    Newbie 26 points
    March 14, 2019 at 9:34 pm

    Hello,

    Is there a css selector that I can use to style featured listing to stand out from the crowd a bit more (in addition to the ribbon)
    For example: Giving the .bg-dark a different color that applies to only featured listings?

    Thanks in advance!

  • JamesD
    JamesD
    Super Guru 1,345 points
    March 14, 2019 at 10:54 pm

    Hello George,
    No type of settings that I’m aware of.

    Not sure I’m totally understanding what you’re trying to accomplish.
    Are you looking to re-style the ribbon or actually add a separate option that behaves like the ribbon?


  • George
    Newbie 26 points
    March 14, 2019 at 11:11 pm

    see attachment for what I am hoping to achieve

    Attachments:
    You must be logged in to view attached files.
  • JamesD
    JamesD
    Super Guru 1,345 points
    March 14, 2019 at 11:31 pm

    @George
    This should restyle/change the background color and text of ALL of the featured listing ribbons:

    .listing-grid-item.bg-dark .featured {
        background-color: #FFBE36 !important;
        color: #000 !important;
    }

    I should probably add that you could accomplish the same thing with the shorter method, but make sure it doesn’t effect anything else that may be using the class name .featured

    .featured {
        background-color: #FFBE36 !important;
        color: #000 !important;
    }

  • George
    Newbie 26 points
    March 14, 2019 at 11:40 pm

    Thanks, but I already have the ribbons customized.
    What I am looking for is the background color, as seen in the attachment, where the bottom color (bg.dark) would be gray on a regular listing but yellow on a featured listing. Does that make sense?
    It was something I was able to apply in the previous version of the theme, but I don’t seem to find the right css selectors to do it in V9.

  • JamesD
    JamesD
    Super Guru 1,345 points
    March 15, 2019 at 12:20 am

    Ok, would require some changes to make it look like that since it’s the background color of the box that’s currently colored grey and not just the bottom.

    Which child theme are you using?


  • George
    Newbie 26 points
    March 15, 2019 at 12:27 am

    All I need to change is the background at the bottom. The rest is applied as a border color using this code:
    .content .image {
    border-top-style: solid;
    border-left-style: solid;
    border-right-style: solid;
    border-color: #777777;
    border-width: 10px;
    }

    Child theme is 04. Anatoliy

  • JamesD
    JamesD
    Super Guru 1,345 points
    March 15, 2019 at 12:54 am

    Yes, I understand what you’re saying, but it’s not as simple or straightforward as you may think.

    Try this… open the content-listing.php file that you copied from the other post (starting around line #18).
    Look for this portion of code in the file:
    if(!is_numeric($starrating)){ $starrating = 0; }

    ?>
    <div class="col-md-4 col-sm-6">
    <div class="listing-grid-item bg-dark <?php if(get_post_meta($post->ID,'map-lat', true) != ""){ ?>map-item<?php } ?>" data-marker-id="<?php echo $post->ID; ?>">

    And replace it with:
    if(!is_numeric($starrating)){ $starrating = 0; }
    $css_class = (get_post_meta($post->ID,'featured',true) == "yes" || get_post_meta($post->ID,'featured',true) == 1)?'bg-success':'bg-dark';

    ?>
    <div class="col-md-4 col-sm-6">
    <div class="listing-grid-item <?= $css_class;?> <?php if(get_post_meta($post->ID,'map-lat', true) != ""){ ?>map-item<?php } ?>" data-marker-id="<?php echo $post->ID; ?>">

    Note: Change bg-success to the style class you want the background color to be. If you don’t have a class name with your color then just create one and use that name in the code above.

  • JamesD
    JamesD
    Super Guru 1,345 points
    March 15, 2019 at 1:28 am

    To change the font color, try this: .listing-grid-item.bg-success .text-uppercase { color: #000 !important; }
    Note: Replace the bg-success with the class name you’re using.


  • George
    Newbie 26 points
    March 15, 2019 at 4:51 am

    Not simple at all, I will try this and let you know how it goes. Whether I can get it to work or not, thank you so much for all the effort. I really appreciate it.

  • JamesD
    JamesD
    Super Guru 1,345 points
    March 15, 2019 at 5:28 am

    Well, if it helps I’ve made the changes to the attached file.
    Just unzip, double check for custom changes you’ve already made, then upload it into your child theme directory to replace the file.

    Attachments:
    You must be logged in to view attached files.

  • George
    Newbie 26 points
    March 15, 2019 at 5:53 am

    Sorry, by “not simple at all” I meant your solution required a lot of work on YOUR end.
    I had no problem implementing the code you gave me, but unfortunately it did not quite work. The color change worked like a charm, but the grid formatting broke.
    I think I’ll need to give up on this idea, but thanks a million for going way above and beyond in helping me out. Much appreciated!

  • JamesD
    JamesD
    Super Guru 1,345 points
    March 15, 2019 at 6:11 am

    @George

    The color change worked like a charm, but the grid formatting broke.

    I’m guessing there are other custom changes.

    Alrighty, good luck.


  • George
    Newbie 26 points
    March 15, 2019 at 6:14 am

    You’re right, there are quite a few custom changes.
    I should try on a fresh install, without any customizations.
    Thanks again!

  • JamesD
    JamesD
    Super Guru 1,345 points
    March 15, 2019 at 6:57 am

    You’re welcome. Feel free to let me know if you run into any problems you need help with.

Viewing 15 posts - 1 through 15 (of 15 total)