When working with Shortcodes, it is easy to think that the styling we defined here at Placester is your only choice. But you can create your own style templates which can be used with any shortcode.
Available Templates
To see what your choices are, start by looking at Shortcodes under the Placester plugin and then click on Shortcode Templates. If you haven’t created any new templates, you should see two templates for each shortcode type: one with a template ID of twentyten and another with a template ID of twentyeleven. You can use these as starting points for your own templates by clicking the Copy link.
Creating Templates
To create a new template, you have two choices: create a brand new one, or copy an existing one. To copy a template, visit the Shortcode Templates window and click Copy or Duplicate on any template. To create a new one, click the Create Shortcode Template link at the top.
After you click Create or Copy, enter a name for your template. You can then choose what type of template you are making. Your choices are each of the types of shortcodes.
The screen is now split into a few different sections. First you have the HTML which will be used for each listing. Below that is the CSS for the section. Of course you will also inherit CSS from the theme. Below that is any HTML you want to have appear before the listings. And finally there is a block for any content you want after the listings. To the right of each of the blocks is a list of Template Tags. These are all the tags that can be used in your HTML.
When you create a new template, you actually are copying a very basic template. You can choose to delete everything on the screen or just customize. If you have a specific design in mind, it may be easiest to just delete everything.
Now enter in your HTML and CSS. While the editor is functional, it may be more efficient to use an external editor to write up your HTML and CSS. Then when you have a working code block, copy and paste it into here.
Sample Template
As an example, here is some HTML and CSS you can paste into the appropriate blocks. Notice that the HTML is filled with template tags which provide the dynamic content for the listings.:
<div class=mw-listings>
<div class="left col-2-3">
<div class="card col-1-1">
<div class="address col-2-3"><a href="[url]">[address]</a></div>
<div class="mls col-1-3">
<span class="mls">MLS:<span class="mlsid">[mls_id]</span></span>
</div>
<div class="col-1-1"></div>
<div class="bed col-1-6"><span class="bedbathnum">[beds]</span> Beds</div>
<div class="bath col-1-6"><span class="bedbathnum">[baths]</span> Baths</div>
<div class="sqft col-1-3"><span class="bedbathnum">[sqft]</span> sqft</div>
<div class="fav col-1-3">[favorite_link_toggle]</div>
</div>
<div class="mw-desc">[desc]</div>
</div>
<div class="photo col-1-3">[image]</div>
</div>
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
}
[class*='col-'] {
float: left;
padding-right: 20px;
}
[class*='col-']:last-of-type {
padding-right: 0;
}
.grid {
width: 100%;
max-width: 640px;
min-width: 500px;
margin: 0 auto;
overflow: hidden;
}
.grid:after {
content: "";
display: table;
clear: both;
}
.grid-pad {
padding: 20px 0 0 20px;
}
.grid-pad > [class*='col-']:last-of-type {
padding-right: 20px;
}
.push-right {
float: right;
}
/* Content Columns */
.col-1-1 {
width: 100%;
}
.col-2-3{
width: 66.66%;
}
.col-1-3 {
width: 33.33%;
}
.col-1-6 {
width: 16.667%;
}
@media handheld, only screen and (max-width: 767px) {
.grid {
width: 100%;
min-width: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
[class*='col-'] {
width: auto;
float: none;
margin-left: 0;
margin-right: 0;
margin-top: 10px;
margin-bottom: 10px;
padding-left: 20px;
padding-right: 20px;
}
}
.mw-listings {
background-color: #eee;
font-family: "helvetica neue";
}
.card {
border: 1px solid #555;
background-color: white;
padding: 5px;
margin: 0 0 20px 0;
}
.line {
padding-bottom: 10px;
}
.address {
font-size: 110%;
font-weight: 500;
}
.bed, .bath, .sqft, .fav {
font-size: 80%;
}
.bedbathnum {
font-weight: 600;
font-size: 105%;
}
.mls {
padding-top: 7px;
vertical-align: bottom;
font-size:80%;
font-weight: 400;
}
.mlsid {
font-weight: 500;
}
.mw-desc {
font-weight: 400;
font-size: 95%;
padding: 20px 0;
}
/* format the pagination links */
.paginate_button,
.paginate_active {
padding-right: 1em;
}
.entry-content td{
border-top: 0 none;
padding: 0;
}
<div class="grid grid-pad">
</div>
Resulting Shortcode
When you use this template in a List of Listings shortcode, you should see something like the screenshot on the right. This is just a basic sample. We are sure you can come up with something else.
Comments