Custom Code Used For This Design

Written by shapdemoswp

Published: 26 Aug 2015

Occasionally we need to use custom html to obtain the layouts shown on our demos. The code below is what was used on this theme. It is best to enter this code directly into the text tab of your editor.

Image and Content Fader Code:

Simply enter the images and into the default fields in the backend of the widget. This demo uses 895x494 images, but you can use any image size; just make sure they are all the same size. Features like size, zoom, slide effects, and others are controlled in the widget's backend. The custom html for each text area is shown below. The title setting should be turned off, it is used in the text area for this design instead. This widget is published to Top Row 1.1 on the demo, but can be published to most positions.

Code used for text area, again the title setting should be turned off:

<span class="iacf_text">
<span class="iacf_title">We Need Your Inspiration</span>
<span class="iacf_subtext">Guest Blogger Opportunities</span>
<a class="readon" href="http://www.shape5.com/demo/wp/blog-box//features/theme-specific-features">Read More</a>
</span>

Custom 1 Profile:

This is a text widget published to the Custom 1 position. The background of this area is controlled in the theme configuration under the Theme Specific tab.

Code used for this area:

<div class="profile">
<img src="http://shape5.com/demo/blog_box//images/profile.jpg" alt="">
<h3>Jasmine Rose</h3>
<span>Hi, I'm a student living in New York. This blog is to provide you with my daily ideas and share my personal style.</span>
<a class="social_icon ion-social-facebook"></a>
<a class="social_icon ion-social-twitter"></a>
<a class="social_icon ion-social-googleplus"></a>
<a class="social_icon ion-social-rss"></a>
</div>

Recent Photos:

This is a text widget published to the Custom 2 position, with the widget style Gradient. The Multibox script must be enabled in the theme configuration under the Javascripts tab.

Code used for this area:

Banner Ad:

This is a text widget published to the Custom 2 position.

Code used for this area:

Bottom About Area:

This is a text widget published to the Custom 3 position.

Code used for this area:

<div class="about_area">
<div class="about_area_left">
<img alt="" src="http://shape5.com/demo/blog_box//images/bottom_profile.jpg" class="profile">
<br>
<span class="highlight_font">Thanks for checking out my blog! Please come back soon for more interesting news!</span>
<br>
<img alt="" src="http://shape5.com/demo/blog_box//images/signature.png" class="signature">
<div style="clear:both;height:0px"></div>
</div>
<div class="about_area_right">
<span class="about_area_title">I‘m Jasmine<br>Let Me Tell You About Myself</span>
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec risus mi, ornare sit amet pellentesque non, tristique quis libero. Morbi in.
<br><br>
Quisque imperdiet accumsan dolor vel pretium. Nunc pellentesque enim metus. Integer non leo .
<div style="clear:both;height:0px"></div>
</div>
<div style="clear:both;height:0px"></div>
</div>

Bottom Logo:

This is a text widget published to the Bottom Menu position.

Code used for this area:

Author Signature:

This is a custom html that is used at the bottom of the blog articles.

Code used for this area:

<div class="guest_author">
<img alt="" src="http://shape5.com/demo/blog_box//images/guest_author.jpg">
<h3>Sarah Conlins</h3>
<span>Aliquam at malesuada mauris, ut pulvinar risus. Ut finibus ante sit amet neque iaculis viverra.
<br>
<a target="_blank" href="https://www.facebook.com/shape5.templates/">Follow me on Facebook</a>
</span>
<div style="clear:both;height:0px"></div>
</div>

Sample Mobile Sidebar Widget

Styles

Pages

Extensions

Features

Tutorials

Sample Mobile Sidebar Widget