Support Center

Create New Theme

Live Blog includes several themes out of the box. It's easy to create your own themes with basic HTML & CSS knowledge. We'll be happy to create a theme for you under our Premium Support option as well.

Although you can create a new theme from scratch, it's almost always easier to copy an existing theme and modify it. All Live Blog themes are located and each folder represents a seperate theme.

Step 1

DesktopModules > LiveBlog > Themes

Let's Create a New Theme

Copy an existing theme folder (such as Default) and rename it to MyTheme. You can use any theme name as long as it doesn't have any spaces or special characters in it.

Categories

Important: The final step to ensure that you're newly created theme works is to edit the style.css located at /DesktopModules/LiveBlog/Themes/MyTheme/Style/Style.css and ensure that all css declarations begin with .mytheme

Step 2

You must inherit all IDs, Classes, any other CSS Tags in your newly created Style.css from class .mytheme(where this is your new theme name in lowercase)

Example:

.default .post .header, .default .author{
border-color:#E4E4E4 #CCCCCC #BBBBBB; 
border-style:solid; 
border-width:1px; 
border-radius:4px; 
-moz-border-radius:4px; 
-webkit-border-radius: 4px; 
}

The above markup would change to:

.mytheme .post .header, .mytheme .author{
border-color:#E4E4E4 #CCCCCC #BBBBBB;
border-style:solid;
border-width:1px;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius: 4px;
}

Step 3

You will also need to replace default class with mytheme class in Master.htm, Post.htm and Author.htm (/DesktopModules/LiveBlog/Themes/MyTheme/Template/)

Example (Master.htm)

<div class="default">
    <div class="postleft">
        <div class="head">
            <h1 class="blogname">
                [BlogName]</h1>
            [Master:RssFeeds]</div>
        <h3 class="blogdescription">
            [BlogDescription]</h3>
        [Author]
        <br />
        [Posts] [Pager]
    </div>
    <div class="postright">
        [Categories] [Authors] [Calendar] [Archives] [Tags]
    </div>
</div>

The above markup would change to:

<div class="mytheme">
    <div class="postleft">
        <div class="head">
            <h1 class="blogname">
                [BlogName]</h1>
            [Master:RssFeeds]</div>
        <h3 class="blogdescription">
            [BlogDescription]</h3>
        [Author]
        <br />
        [Posts] [Pager]
    </div>
    <div class="postright">
        [Categories] [Authors] [Calendar] [Archives] [Tags]
    </div>
</div>

Example (Post.htm)

<div class="default">
    <div class="postleft">
        <div class="head">
            <h1 class="blogname">
                [BlogName]</h1>
            [Master:RssFeeds]</div>
        <h3 class="blogdescription">
            [BlogDescription]</h3>
        <br />
        <div class="post">
            <div class="header details">
                <div style="padding: 18px 18px 0">
                    <h1 class="heading">
                        [Post:title]</h1>
                    <div class="metadata">
                        On [Post:publishedon_monthname] [Post:publishedon_day], [Post:publishedon_year]
                        in [Post:categories] by [Post:author_firstname] [Post:author_lastname]
                    </div>
                    <div style="line-height: 18px">
                        [Post:summary] [Post:comments][Post:comments_data][Pager]
                    </div>
                </div>
                <div class="line">
                </div>
                <div class="footer">
                </div>
            </div>
            <div class="post-tags">
                Tagged with: [Post:tags]</div>
        </div>
    </div>
    <div class="postright">
        [Categories] [Authors] [Calendar] [Archives] [Tags]
    </div>
</div>

The above markup would change to:

<div class="mytheme">
    <div class="postleft">
        <div class="head">
            <h1 class="blogname">
                [BlogName]</h1>
            [Master:RssFeeds]</div>
        <h3 class="blogdescription">
            [BlogDescription]</h3>
        <br />
        <div class="post">
            <div class="header details">
                <div style="padding: 18px 18px 0">
                    <h1 class="heading">
                        [Post:title]</h1>
                    <div class="metadata">
                        On [Post:publishedon_monthname] [Post:publishedon_day], [Post:publishedon_year]
                        in [Post:categories] by [Post:author_firstname] [Post:author_lastname]
                    </div>
                    <div style="line-height: 18px">
                        [Post:summary] [Post:comments][Post:comments_data][Pager]
                    </div>
                </div>
                <div class="line">
                </div>
                <div class="footer">
                </div>
            </div>
            <div class="post-tags">
                Tagged with: [Post:tags]</div>
        </div>
    </div>
    <div class="postright">
        [Categories] [Authors] [Calendar] [Archives] [Tags]
    </div>
</div>

That's it! Your new theme is ready

We can now select the new theme from Manage Blog > Settings Basic 

Categories

Glad we could be helpful. Thanks for the feedback.

Sorry we couldn't be helpful. Your feedback will help us improve this article.

How helpful was this page?

  
Updated on Tue, 24 Apr 2018 by Ashish Pachori