HTML / CSS Blog Website Template: Radial

Radial is a HTML Website Template made from our premium WordPress Theme that was just released last week. It is suited for personal or professional blog and portfolio sites.  It will showcase your products or services in a creative way.

The greatest feature on the home page is the recent posts / portfolio section. It will allow you to add several posts and portfolio projects to the front page in a unique way. It is designed so your visitors can see the description and images from the post on the fly without leaving the front page. Be sure to click on the posts to see this great feature in full.

Notification Bar in HTML template can be unique for each of the pages which gives you an opportunity to make a greater impact with it. Theme is well structured and is easy to modify. Images are stored in separate directories so you can keep a better track.

LIVE PREVIEW

See the Radial Creative WordPress Theme in live action!

Radial Site Template Features

• 2 built in sliders (Full width and Nivo)
• Google Web Fonts
• Unique Recent Posts / Portfolio Items widget on the front page
• CSS3 Features and Animations
• Detailed written help file
• Use your custom logo and favicon icon.
• 3 home page layouts (fullscreen & composition).
• 3 portfolio page layouts (2,3,4 columns)
• 6 page Templates
• 3 Post Templates (Standard, video, link)
• Filterable portfolio items.

HOW TO REGISTER ON OUR SUPPORT FORUMS

Support is handled via our Envato support forum. It is designed in a way so only Envato users that have bought some of our plugins or Themes can register. You have to use the purchase code in the process. This has been causing some problems so please check the screenshots below to see where to get the purchase code.

Click on the image for a larger preview!

After you click on the License Certificate you will then be able to see the code in the file which will look like in the screenshot below:

QUICK GUIDE

FILE STRUCTURE

Below is a file structure for different aspects of the HTML site.

CSS FILES

• style.css
• CSS/fadeRed.css
• CSS/greenBlue.css
• CSS/lightblue.css
• CSS/orange.css
• CSS/strongRed.css
• CSS/strongBlue.css
• CSS/lightBlue.css
• CSS/WithoutSidebarBorders.css

CSS is structured so you have one main file (style.css) and several others that define the leading color of the template. If you want to choose a different coloring scheme simply change the path to the styling file (all premade styling files are listed above) in HTML files:

Example:

FOLDERS

• css (This folder holds the CSS for all of the secondary styles)
• images (This folder holds all of the images used throughout the template. There are several subdirectories for different kinds of images: Blog, homeRecentPosts, NivoSlideshow, portfolio2, portfolio3 and portfolio4)
• home (This folder contains the HTML files for the recent posts / portfolio on the home page)
• js (This folder holds all of the JavaScript used throughout the template.)

PAGE TEMPLATES

Radial HTML Website Template comes with several premade page templates that are listed below.

HOME PAGE TEMPLATES

• index.html (Main home page with full width Slideshow) - Preview
• c(Home page with Nivo Slideshow) – Preview
• index_no_slider.html (Home page with Recent Posts) – Preview

GOOGLE WEB FONTS

The template uses Google Web Fonts for the title fonts. Font that is used in the preview is Oswald. Link to the font is done in HTML files in the header part:

To change the font simply replace Oswald with the font you want. You can see all the fonts that you can use in the Google Web Fonts Library.

SETTING UP THE HOME RECENT POSTS / PORTFOLIO PART

One of the leading features of our HTML template is the part below the slideshow and featured boxes. The recent posts / portfolio items section will allow your visitors to quickly check your latest news and products without leaving the home page. This widget can be found in three files: index.html, index_nivo.html and index_no_slider.html. HTML files used for the presentation of the posts and portfolio items are stored in the directory home. You will find 10 premade templates there to help you out.

ADDING NEW ITEMS TO THE HOME RECENT POSTS / PORTFOLIO PART

You can add either posts or portfolio items to this section. Below is a quide how to add them.

ADDING NEW POSTS

When you are adding new items to this section please note that the name of the ID of the post that you set in index.html (for instance id=”post_london”) has to be the same as the name of the HTML file in the home directory  without the post prefix (london.html). In case when you are adding posts use the following html code:

Class has to contain the post postfix and data category also equals post. Since the hover effect is different whether it is a post or a portfolio items this has to be set accordingly. For posts use this HTML code:

Example of the whole item:

ADDING NEW PORTFOLIO ITEMS

Everything is done the same apart from the -port postfix. ID of the portfolio item that you set in index.html (for instance id=”port_strawberry-port”) has to be the same as the name of the HTML file in the home directory  without the post prefix (strawberry-port.html). In case when you are adding portfolio items use the following html code:

Class has to contain the port postfix and data category also equals port. Since the hover effect is different whether it is a post or a portfolio items this has to be set accordingly. For posts use this HTML code:

Example for the whole portfolio item:

WEBSITE NAVIGATION

• All navigations are created by forming nested lists
• Navigations can be easily setup by copy/paste from the provided page templates
• The description text below the main titles is added with <span>Latest news</span>

Example:

SUPPORT

For support please visit our support portal and register as described above.