Recent Post | Hosting Debloga

Stylesheets

Here’s the list of the stylesheets used. Both are located in the [PLUGIN FOLDER]/CSS directory.

File Name	Description
`admin.css`	This is the stylesheet used to style all the admin parts of the Special Recent Posts PRO Edition.
`layout.css`	Here you can find all the CSS rules that apply throughout the entire SRP front-end layouts.

How SRP renders your posts

By default, Special Recent Posts PRO Edition uses the wonderful CSS FlexBox Module to render responsively all the different layouts with proper alignments.
There are tons of options to modify quite everything about your posts layout, but if you need something more, you have to apply some CSS code.
Follow the instructions below to know how. (And if you feel brave enough to mess around with CSS, here’s a complete guide to Flexbox.)

The Default Post Layout

By default, SRP lets you change quite everything about the post layout like positioning the post title above the thumbnail, or even the thubnail above everythig else.
Everything has just an option in the relative widget panel.

But if you wish more customization, then you have to write some CSS code.
Here below you can find the list of the needed CSS classes to target when customizing your own layout.

The CSS Classes List

/**
 * --------------------------------
 * THE WIDGET TITLE
 * This is the class that holds the title of the widget.
 * Usually you don't have to edit this element because is already done by WordPress.
 * --------------------------------
*/
.srp-widget-title {}

/**
 * --------------------------------
 * THE WIDGET CONTAINER
 * This is the class that holds the entire widget container.
 * --------------------------------
*/
.srp-widget-container {}


/**
 * --------------------------------
 * THE SINGLE POST
 * This is the class that holds the entire single post container.
 * Use this class to apply margins or padding between each post entry.
 * --------------------------------
*/
.srp-widget-singlepost {}

/**
 * --------------------------------
 * THE THUMBNAIL BOX
 * --------------------------------
*/

// This is the box that contains the thumbnail.
.srp-thumbnail-box {}

// This is the thumbnail link.
.srp-post-thumbnail-link {}

// This is just the thumbnail image.
.srp-thumbnail-box img {}

/**
 * --------------------------------
 * THE POST META BOXES
 * --------------------------------
*/

// The post title.
.srp-post-title {}

// The post title link.
.srp-post-title-link {}

// The post author text.
.srp-post-author {}

// The post author URL Link.
.srp-post-author-url {}

// The post date text.
.srp-post-date {}

// The post category text.
.srp-post-category {}

// The post comments text.
.srp-post-comments {}

// The post comments link.
.srp-post-comments-link {}

// The post content text.
.srp-post-content {}

// The post tags.
.srp-post-tags {}

/**
 * --------------------------------
 * THE POST TITLE
 * --------------------------------
*/
.srp-post-title {}

// The post title link.
.srp-post-title-link {}

/**
 * --------------------------------
 * THE POST CONTENT
 * --------------------------------
*/

// The post stringbreak link.
.srp-post-stringbreak-link {}

// The post stringbreak image.
.srp-post-stringbreak-image {}

// The post stringbreak image link.
srp-post-stringbreak-link-image {}

So for example, if we want to reset the amount of space between the Post Title and the list of Post Meta we’ll write as follows:

.srp-post-title {
    margin: 0;
}

Another example: change the post title font size, its colour and add a little extra amount of space below:

.srp-post-title {
    font-size: 18px;
    color: #000;
    margin-bottom: 10px;
}

Wanna remove that gray line between each post?

.srp-widget-singlepost {
   border-bottom: none;
}

NOTE!
These are only simple examples of how to style your posts with SRP PRO. For more complex rules however, a good knowledge of HTML and CSS is recommended to know what you’re doing.

Special Recent Posts PRO Edition comes with great feature that lets users to insert the widget in all non-widget handled parts of their WordPress theme.

Now you don’t have to care anymore about manually building your own shortcode or PHP code, because everything is processed and generated by the “CODE GENERATOR” section in the widget panel. Just copy & paste the generated code into one of your WordPress pages or PHP templates.

The Code Generator Section

The Code Generator area in the widget settings.

Introduction

How it works

Installation & Setup

Requirements

Layouts & CSS Styles customization and highlights

Stylesheets

How SRP renders your posts

The Default Post Layout

The CSS Classes List

Shortcodes Usage / PHP Code