Live Content 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 Content themes are located at /DesktopModules/LiveContent/Themes and each folder represents a seperate theme.
Let's Create a New Theme
Copy an existing theme folder (such as General) 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.
Important
The final step to ensure that you're newly created theme works is to edit the style.css located at /DesktopModules/LiveContent/Themes/MyTheme/Style/Style.css and ensure that all css declarations begin with .mytheme
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:
|
1
2
3
4
5
6
7
8
9
10
|
.general {
margin-bottom: 20px;
padding: 15px 15px 0;
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-top: 10px;
}
|
The above markup would change to:
|
1
2
3
4
5
6
7
8
9
10
|
.mytheme {
margin-bottom: 20px;
padding: 15px 15px 0;
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-top: 10px;
}
|
You will also need to replace general class with mytheme class in Master.htm, Element.htm (/DesktopModules/LiveContent/Themes/MyTheme/Template/)
Example (Master.htm
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<div class="general generaltheme-background">
<div class="sort">
[Widget:recent] [Widget:most_viewed] [Widget:highest_rated] [Add]
</div>
<div class="clear_both">
</div>
[Elements]
<div class="clear_both">
</div>
<div class="paging">
[Pager]
</div>
</div>
|
The above markup would change to:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<div class="mytheme mytheme-background">
<div class="sort">
[Widget:recent] [Widget:most_viewed] [Widget:highest_rated] [Add]
</div>
<div class="clear_both">
</div>
[Elements]
<div class="clear_both">
</div>
<div class="paging">
[Pager]
</div>
</div>
|
Example (Element.htm)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<div class="general">
<article class="blog-post element_desc">
<div class="element-wrapper">
<div class="meta">
<div class="date">
<span class="day">[Element:createdon_day]</span>
<span class="month">[Element:createdon_monthMMM]</span>
</div>
<div class="blog-type">
<span class="year">[Element:createdon_year]</span>
</div>
</div>
<div class="post-content">
<div class="post-title">
<h3>[Element:title]</h3>
<div class="tags">
<span><em class="fa fa-tags"></em>[Element:tags]</span>
<span><em class="fa fa-users"></em>[Element:categories]</span>
<span><em class="fa fa-comments"></em>[Comment:count]</span>
</div>
</div>
</div>
</div>
<div class="elements">
[Element]
</div>
<hr>
<div class="rating">[Element:rating]</div>
<div class="social_network">[Element:social_network]</div>
<div class="general-caption">
[Element:caption]
</div>
</article>
<div class="comment-wrapper">
[Element:comment] [Element:comment_data]
</div>
<div class="comment-login">
[Element:CommentRequireLogin]</div>
</div>
<strong>
</strong>
|
The above markup would change to:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
<div class="mytheme">
<article class="blog-post element_desc">
<div class="element-wrapper">
<div class="meta">
<div class="date">
<span class="day">[Element:createdon_day]</span>
<span class="month">[Element:createdon_monthMMM]</span>
</div>
<div class="blog-type">
<span class="year">[Element:createdon_year]</span>
</div>
</div>
<div class="post-content">
<div class="post-title">
<h3>[Element:title]</h3>
<div class="tags">
<span><em class="fa fa-tags"></em>[Element:tags]</span>
<span><em class="fa fa-users"></em>[Element:categories]</span>
<span><em class="fa fa-comments"></em>[Comment:count]</span>
</div>
</div>
</div>
</div>
<div class="elements">
[Element]
</div>
<hr>
<div class="rating">[Element:rating]</div>
<div class="social_network">[Element:social_network]</div>
<div class="general-caption">
[Element:caption]
</div>
</article>
<div class="comment-wrapper">
[Element:comment] [Element:comment_data]
</div>
<div class="comment-login">
[Element:CommentRequireLogin]</div>
</div>
|
That's it! Your new theme is ready
We can now select the new theme from Manage > Basic
