Custom Ribbons

Sure thing, get ready for lengthy post!
This requires some html and css knowledge.

The steps I took are as follows:

– Created a ‘select’ field with a few options. E.g.: Special, Limited

– I then opened my ‘listing-listview.php’ template file.
If you are unsure how to edit template files see here: https://wpgeodirectory.com/docs/customizing-geodirectory-templates/

– In ‘listing-listview.php’ do the following:
1. Navigate to ‘do_action(‘geodir_after_badge_on_image’, $post); ?>’ underneath is a php tag ‘<?php } ?>’ and under that is a closing div tag ‘</div>’

– Between the ‘<?php } ?>’ and </div>’ tag add the following code:

<div class="ribbon">
    <span class="<?php echo get_post_field('geodir_variable_name', $post_id); ?>"><?php 
echo get_post_field('geodir_variable_name', $post_id); ?></span>
</div>

Change ‘geodir_variable_name’ with the HTML variable you defined for your select field. Keep in mind that geodirectory field names begin with ‘geodir_’. So for example if your HTML variable name is ‘ribbon_field’ you will put ‘geodir_ribbon_field’.

In the above code we are creating a div with the class of ‘ribbon’, inside that div we have a span whose class is the current value selected from the ‘select’ field. E.g. If the field has the value of Special, then the span class will also be special. This will allow us to target the assigned value and style is as a ribbon.
Inside the span we are also displaying the value of the field as text.

Now we need to go into our style sheet and add our styles. My styles are below, but you can change these as you like:

.ribbon {
    position: absolute;
    right:-5px;
    top:-5px;
    z-index:1;
    overflow:hidden;
    width:75px;
    height:75px;
    text-align: right;
}
.ribbon .Limited{
    font-size:10px;
    font-weight:bold;
    color:#FFF;
    text-transform:uppercase;
    text-align: center;
    line-height:20px;
    transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    width:100px;
    display:block;
    background-color:#d9534f;
    position:absolute;
    top:19px;
    right:-21px;
}
.ribbon .Limited::before {
    content:"";
    position:absolute;
    left:0px;
    top:100%;
    z-index:-1;
    border-left:3px solid #d43f3a;
    border-right:3px solid transparent;
    border-bottom:3px solid transparent;
    border-top:3px solid #d43f3a;
}
.ribbon .Limited::after {
    content:"";
    position:absolute;
    right:0px;
    top:100%;
    z-index:-1;
    border-left:3px solid transparent;
    border-right:3px solid #d43f3a;
    border-bottom:3px solid transparent;
    border-top:3px solid #d43f3a;
}
.ribbon .Special{
    font-size:10px;
    font-weight:bold;
    color:#FFF;
    text-transform:uppercase;
    text-align: center;
    line-height:20px;
    transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    width:100px;
    display:block;
    background-color:#449450;
    position:absolute;
    top:19px;
    right:-21px;
}
.ribbon .Special::before {
    content:"";
    position:absolute;
    left:0px;
    top:100%;
    z-index:-1;
    border-left:3px solid #388048;
    border-right:3px solid transparent;
    border-bottom:3px solid transparent;
    border-top:3px solid #388048;
}
.ribbon .Special::after {
    content:"";
    position:absolute;
    right:0px;
    top:100%;
    z-index:-1;
    border-left:3px solid transparent;
    border-right:3px solid #388048;
    border-bottom:3px solid transparent;
    border-top:3px solid #388048;
}

This is a nice chunk of css, but you can chop and change it as you please this is just an example.

Firstly, you can see that I have assigned styles to the div with the class Ribbon. After that you can see styles assigned to .ribbon .Limited and .ribbon .Special. This targets the spans inside the .ribbon class, which reflect values you assigned in your ‘Select’ field, thanks to the code we added in our listing-listview.php template.
The :before and :after class target the corners of the ribbons.

For each value inside ‘select’ you create a new css rule targeting that value and simply change the colours.

So if I were a add a new value inside the Select field called Featured and I wanted the ribbon to be blue I would need to add styles for ‘.ribbon .Featured’ as below:

.ribbon .Featured{
    font-size:10px;
    font-weight:bold;
    color:#FFF;
    text-transform:uppercase;
    text-align: center;
    line-height:20px;
    transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    width:100px;
    display:block;
    background-color:#0000ff;
    position:absolute;
    top:19px;
    right:-21px;
}
.ribbon .Featured::before {
    content:"";
    position:absolute;
    left:0px;
    top:100%;
    z-index:-1;
    border-left:3px solid #0033cc;
    border-right:3px solid transparent;
    border-bottom:3px solid transparent;
    border-top:3px solid #0033cc;
}
.ribbon .Featured::after {
    content:"";
    position:absolute;
    right:0px;
    top:100%;
    z-index:-1;
    border-left:3px solid transparent;
    border-right:3px solid #0033cc;
    border-bottom:3px solid transparent;
    border-top:3px solid #0033cc;
}

Rounding Up

Just a quick run down of the above:

1. Create a select field and assign the values
2. Edit the listing-listview.php adding the code provided (Changing ‘geodir_variable_name’ with your variable name). No need to remove or change existing code.
3. Add the css inside your stylesheet.
4. Good to go, if you add or change the Select field values simply update the css accordingly.
5. Now when the value on your custom ribbon select field is updated, it will appear as a css ribbon.

Quick tip: If you would like a ribbon to appear when a listing is posted, assign the Default value as the ribbon you would like to appear.

There may be another way of doing this, but this seems to work without editing existing code. You can also add background images in your css if you would rather use an image for your ribbon as opposed to purely css.

Sure no problem, if others can benefit from this thats fine by me. Still need to work on getting them on the listing detail page, that will be a bit more complicated