Styling featured listings

WordPress Business Themes Forums Responsive Themes Directory Theme Styling featured listings

Discontinued - The forum content is out of date. For theme support please use our support desk here.

Styling featured listings

March 14, 2019
 George

  • George
    Newbie 27 points

    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!

    March 14, 2019 at 9:34 pm
  • JamesD
    JamesD
    Super Guru 1,351 points

    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?

    March 14, 2019 at 10:54 pm

  • George
    Newbie 27 points

    see attachment for what I am hoping to achieve

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

    @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;
    }
    March 14, 2019 at 11:31 pm

  • George
    Newbie 27 points

    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.

    March 14, 2019 at 11:40 pm
  • JamesD
    JamesD
    Super Guru 1,351 points

    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?

    March 15, 2019 at 12:20 am

  • George
    Newbie 27 points

    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

    March 15, 2019 at 12:27 am
  • JamesD
    JamesD
    Super Guru 1,351 points

    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.

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

    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.

    March 15, 2019 at 1:28 am

  • George
    Newbie 27 points

    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.

    March 15, 2019 at 4:51 am
  • JamesD
    JamesD
    Super Guru 1,351 points

    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.
    March 15, 2019 at 5:28 am

  • George
    Newbie 27 points

    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!

    March 15, 2019 at 5:53 am
  • JamesD
    JamesD
    Super Guru 1,351 points

    @George

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

    I’m guessing there are other custom changes.

    Alrighty, good luck.

    March 15, 2019 at 6:11 am

  • George
    Newbie 27 points

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

    March 15, 2019 at 6:14 am
  • JamesD
    JamesD
    Super Guru 1,351 points

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

    March 15, 2019 at 6:57 am
Viewing 15 posts - 1 through 15 (of 15 total)

Didn't find what you were after?

Chat with us now

or contact our support team