SobiPro Template Tutorial - Adding Special Offers Icon

Written by Robert Vining | 15 January 2012

One of our members here at Sobi Templates requested a feature for the SobiPro ST Resorts Template to allow users to add a Special Offer icon to the listings. With the XSLT code used in SobiPro templates, it's easy to add just such a feature. You could even add a 'New Listing' ribbon or if you wanted to get really tricky, you could add Featured Listings to the front page of your SobiPro directory. We'll save that for another tutorial. Let's get started on this one.

Finding a Free Corner Ribbon PSD

To begin with, we did a quick Google search for a corner ribbon in photoshop and found these great looking ribbons and banners already created in PSD format for us! Thanks to Webdevtuts for making these available for download, and absolutely free!

Adjusting the Color and Size in Photoshop

Our member wanted a green corner banner, so I adjusted the colors in photoshop and sized to to match the corner of the SobiPro template Vcard and saved it as a transparent PNG image.

Adding the Image to your Joomla Website

Next, I uploaded the image using the Joomla media manager to the sobipro directory. This will make the image reside in:

yoursite.com/images/sobipro

Create a New SobiPro Textarea Field

Now we need to create a new field for the Special Offer. Navigate to your SobiPro section using the SobiPro menu at the top of the admin screen. Once the Section screen opens, click the Section Configuration menu on the left, and click Field Manager.

Click the Add New icon up top and create a new field. Name it what you want, but the Alias needs to be field_special if you want the code below to work correctly. In Field Parameters on the right, set it to show Available in Both. Now set the Field Type to Text Area and click the Forward icon up top. When the screen refreshes, you are welcome to set the Options however you want, and click Save.

Making the Icon Appear in the Vcard

Now we can do a little editing in the templates and start to add some code. You don't necessarily have to use a custom SobiPro Template with the Fields added individually for this feature to work, but it sure makes for a nicer layout of your directory. A great starting point for any project is our ST Resorts SobiPro Template you see in the screenshot above.

Navigate to your SobiPro Section in your Joomla Administration area and click the Section Template menu on the left. We need to select the common folder and then click the vcard.xsl file. I've already written the XSLT code you will need to add, simply copy and paste the following code in your template near the top before the first div tag.

In the ST Resorts vcard.xsl template, you should see this code on or around line 10:

<div class="vc_outer">

Replace it with this code:

 
<xsl:if test="string-length(fields/field_special/data) > 0">
  <div class="vc_banner">
    <img class="vc_special" src="images/sobipro/special_ribbon.png" />
  </div>
</xsl:if>
<div class="vc_outer">
 

Next is the Detail View code. Click on the entry folder and select the details.xsl template. You will need to decide where you want this 'Special Offer' to show up, but I decided to put it right above the Tabs in the ST Resorts template so it's easy for visitors to see.

On or around line 99 you should see this code:

 
<div id="st_social">{loadposition social}</div>
<div style="clear:both;"></div>
 

Replace it with this:

 
<div id="st_social">{loadposition social}</div>
<div style="clear:both;"></div>
<div id="st_special">
  <h3 class="body_title">
    <xsl:value-of select="entry/fields/field_special/label" />
  </h3>
  <div class="body_text">
    <xsl:value-of select="entry/fields/field_special/data" disable-output-escaping="yes" />
  </div>
</div>
<div style="clear:both;"></div>
 

Now we will need to style the image in the Vcard with some CSS. If you are using the ST Resorts SobiPro Template, then the detail view will be styled already. We will need to adjust the margin and padding a bit though. Find the CSS file for your sobipro template and open it up. If you're using ST Resorts, it's st_resort.css inside the CSS folder.

On or around line 29 you should see this code:

 
/******* ST Resort Vcard Styles ********/
 

Add this below it:

 
#SobiPro div.vc_banner {
  text-align: right;
}
 
#SobiPro img.vc_special {
  margin-bottom: -99px;
  margin-right: -6px;
}
 

Now slide on down around line 322 and find this line:

 
/*********** ST Resorts Tab Style *************/
 

Add this code right above it:

 
#SobiPro div#st_special {
margin: 10px;
padding-bottom: 10px;
}
 

Final Result for the SobiPro Template Vcard and Detail view

Did you find this tutorial useful? Would you like to see more tutorials like this for SobiPro templates? Then share it with the world through the social media icons below, or leave us a comment and let us know your thoughts!

Thanks!
Robert Vining
Sobi Templates