Just done install Vanilla Forums on our subdomain and have finished for tweaking the default template which is BiterSweet theme.
We change the looks of BitterSweet theme to become more clean, minimalist and look almost “the same” with our main site (this site).
Is look pretty good after we remove some of “unnecessary” element on it. What we do is just tweak the CSS and HTML/.tpl code only. You can check the results here; https://forum.digimanx.com
If you like to create a forum under your main site subdomain as we do, we really suggest trying Vanilla forum, it simple easy, easy and it
However, Vanilla Forums also offering a “cloud” to host the forum for its premium member. But using it as a standalone forum application on your own host it comes as free open source forum software.
You can easily install Vanilla Forums on the sub
Here we like to share with you guys who wanted or already create a forum using Vanilla Forum on sub
Here is exactly what we have done with the little restoration of the BitterSweet template. By
Move The BitterSweet TopMenu below Head and Change Default Footer Asset
Yep! we move completely the Top Nav below the #Head and change its footer credit. Wait! moving footer credit? does it violate the license?
Nope! It is not. Even if you remove the Vanilla footer credit completely it doesn’t violate the terms. For more info, you can visit the forum who talk about it here: open.vanillaforums.com
You can do that by editing the default.master.tpl from cPanel. Just find inside your Vanilla forums > Themes > Views and remove the Top Nav section.
Below is the example of default.master.tpl of BitterSweet theme after we change the footer credit. You get the idea 🙂
Here we share the modified .tpl file for ya. Additionally, you can use HTMLedit plugins so you don’t have to change the default.master.
<!DOCTYPE html>
<html lang="{$CurrentLocale.Lang}">
<head>
{asset name="Head"}
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet">
</head>
<body id="{$BodyID}" class="{$BodyClass}">
<div id="Frame">
<div class="Top">
<div class="Row">
<div class="TopMenu">
<a href="https://digimanx.com/">Main Site</a>
<a href="https://digimanx.com/blog/">Blog</a>
<a href="https://digimanx.com/blogging-resource/">Resources</a>
<a href="https://digimanx.com/contact/">Contact</a>
<!--
You can add more of your top-level navigation links like this:
<a href="#">Store</a>
<a href="#">Blog</a>
<a href="#">Contact Us</a>
-->
</div>
</div>
</div>
<div id="Head" role="navigation">
<div class="Row">
<div class="SiteSearch" role="search">{searchbox}</div>
<div class="Logo"><a href="{link path="/"}">{logo}</a></div>
<ul class="SiteMenu">
{signinout_link}
{profile_link}
{custom_menu}
{inbox_link}
{activity_link}
{discussions_link}
{dashboard_link}
</ul>
</div>
</div>
<div class="BreadcrumbsWrapper">
<div class="Row">
{breadcrumbs}
</div>
</div>
<div id="Body">
<div class="Row">
<div role="complementary" class="Column PanelColumn" id="Panel">
{module name="MeModule"}
{asset name="Panel"}
</div>
<div class="Column ContentColumn" id="Content" role="main">{asset name="Content"}</div>
</div>
</div>
<div id="Foot" role="contentinfo">
<div class="Row">
<a href="{vanillaurl}" class="PoweredByVanilla">Powered by Vanilla</a>
{asset name="Foot"}
<p class="footer-widget">© 2018 Digimanx Forum. <a href="https://forum.digimanx.com/privacy">Privacy</a></p>
</div>
</div>
</div>
{event name="AfterBody"}
</body>
</html>
We also change the default fonts with Google Fonts (Open Sans). You can change it if you like. I put the style sheet right after the ‘head’ section.
How to Modify Vanilla Forum Default Template CSS?
And to modify the default CSS of BitterSweet theme we use CSSedit plugin that you can download here https://open.vanillaforums.com/addon/cssedit-plugin
To install the plugin simply upload it to Forum directory > Plugins using FileZilla.
Moving The #Head to Top Using CSS
After you install the CSS Edit plugin you can easily modify the CSS from the Vanilla Forums admin dashboard.
Basically, you can not modify the original
Modify The Mobile Default Look
Yeah! we also modify the mobile forum appearance, below is the screenshot after we do some tweak. We also tweak the mobile CSS code in the CSSedit plugin editor.
The Modified CSS Of BitterSweet Template
Okay! if you like our modified version of the BitterSweet template you can use it on your forum. Copy our modified of the
Additionally, you can change the color of the #Head section, fonts, link (a) color,
body,.SiteTitle,h1, h2, h3, h4, h5 {
font-family: 'Open Sans', sans-serif;
}
a {
color: #1D5689;
}
a:hover {
color: #003467;
}
body {
background: #fdfdfd;
}
/** Custom Master View Stuff **/
#Frame > .Top {
background: #e87777;
padding: 0 20px;
text-align: left;
line-height: 2.4;
}
.TopMenu {
background: transparent;
margin-top: 53px;
}
.TopMenu a {
padding: 7px;
font-size: 12px;
font-weight: 400;
color: #fff;
}
.TopMenu a:hover {
background: #555;
}
.Banner {
position: relative;
min-height: 98px;
text-align: left;
padding: 20px;
}
.SiteTitle {
font-size: 40px;
font-weight: bold;
line-height: 100px;
}
.SiteTitle a {
color: #000;
}
#Head .Logo {
position: absolute;
top: 6px;
}
#Head {
color: #000;
background: #fff;
opacity: 0.97;
padding: 0;
position: fixed;
top: 0;
left: 0;
width: 100%;
border-bottom:1px solid #ddd;
box-shadow: 0 3px 6px 0 rgba(0,0,0,0.16);
z-index: 9999;
}
#Head .SiteMenu a {
font-size: 12px;
color: #333;
padding: 15px 6px;
margin: 0 8px;
float:right;
text-transform: uppercase;
font-weight: 600;
}
#Head .SiteMenu a:first-child {
margin-left: 0;
}
#Head .SiteMenu a:hover {
color: #e85555;
background:#555;
box-shadow: 0 1px #aaa;
}
#Head .SiteSearch {
top: 12px; right: 4px;
}
#Head .SiteSearch .InputBox {
font-size: 12px; color: #aaa;
border: 1px solid #ddd;
border-radius:2px;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.12);
}
#Head .SiteSearch .InputBox:hover {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.19);
}
#Head .SiteSearch .Button {
top: 6px; box-shadow: none;
}
.BreadcrumbsWrapper {
font-size: 11px; border: 1px solid #ededed;
padding: 4px;
margin-bottom: 8px; color: #aaa;
background: #fff;
}
.Breadcrumbs a {
color: #999;
}
.Breadcrumbs a:hover {
color: #e85555;
}
/** Vanilla Contents **/
.PageDescription {
color: #333;
margin: 8px 0 -8px 0;
background: #f4f4f4;
padding: 6px;
border-left: 2px solid #e85555;
}
.HomepageTitle {
margin: 0 6px;
}
.HomepageTitle .AdminCheck {
padding: 0;
}
.Pager {
font-size: 18px;
}
.ProfileOptions {
font-weight: bold;
}
.DataTable td {
border-style: dotted;
}
.DataList > .Item {
border-style: dotted;
padding: 12px 8px;
}
.DataList .Item .Item {
border: none;
}
.DataList .Title,.DataList .Title a {
font-size: 18px;
color: #333;
}
.DataList .Title {
color: #777;
}
.Meta,.MItem,.MItem a {
color: #666;
}
.MItem a:hover {
color: #e85555;
text-decoration: underline;
}
.DataList .Title a:hover {
text-decoration: underline;
color: #e85555;
}
.MItem {
margin: 0 8px; padding: 0;
}
.MItem:last-child {
border: none;}
/* Big Button */
.ButtonGroup .Button, #Content input.Button, .Button {
background: #e87777;
border-color: #e85555;
color: #fff;
}
#Content .Button:hover {
background: #555;
border-color: #444;
}
#Panel .BigButton:hover {
background: #555;
border-color: #444;
}
.Button:focus,.Button:active {
background: #e85555;
}
#Panel .BigButton {
margin: 20px 0;
}
input.Button {
padding: 6px 12px;
}
.BoxFilter {
margin: 20px 0;
}
.Box {
color: #888;
margin: 0 0 30px;
}
.PanelInfo li {
font-weight: bold;
background: #f7f7f7;
padding: 2px 4px;
border-style: dotted;
}
.PanelInfo a {
color: #555;
font-weight: 400;
}
.PanelInfo a:hover {
text-decoration: underline;
color: #e85555;
}
.PanelInfo .Active a {
color: #e85555;
}
.Bullet {
color: #aaa;
}
#Foot {
border-top:1px solid #eee;
padding: 20px;
color:#aaa;
background: #333;
margin-bottom: -20px;
}
#Foot a:hover {
color: #e85555;
} .footer-widget {
color: #aaa;
font-size: 10px;
padding: 6px;}
/* Mobile */
.Banner {
position: relative;
min-height: 16px;
text-align: center;
padding: 0;
margin-bottom: 60px;
}
.MobileBanner {
text-align: center;
margin-top: 60px;
}
.Banner ul {
background-color: #fefefe;
opacity: 0.95;
position: fixed;
z-index: 9999;
padding: 0;
margin: 0;
width: 100%;
float: left;
line-height: 48px;
top: 0;
border-bottom: 1px solid #eee;
}
.Banner ul li {
display: block;
padding: 0;
margin: 0;
float: left;
}
.Banner ul li a {
font-weight: 600;
font-size: 12px;
color: #666;
display: block;
text-transform: uppercase;
background: #fff;
}
.Banner ul li a:first-child {
margin: 0 4px 0 8px;
}
.Banner ul li a:hover {
color: #fff;
background: #e85555;
}
#Content .BoxProfileFilter {
display: block;
}
.Photo img {
display: block;
border-radius: 50%;
border: 1px solid #fff;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1);
}
/** Misc **/
.ProfilePhotoLarge {
width: 205px;
}
.Banner ul li a.NewDiscussion,.Banner ul li a.NewConversation {
position: absolute;
top: 0;
right: 0;
padding: 2px 6px 4px;
display: block;
border-left: 1px solid #eee;
background: #e85555;
}
.Banner ul li.Connect,.Banner ul li.SignInItem {
float: right;
}
.Banner ul li.SignInItem a {
padding-left: 6px;
padding-right: 6px;
border-left: 1px solid #eee;
background: #e85555;
color:#fff;
}
.Banner ul li.Connect a {
line-height: 1;
padding: 3px 2px;
}
.Banner ul li a.NewDiscussion img, .Banner ul li a.NewConversation img {
vertical-align: middle;
}
.Banner ul li a span {
background: #f00;
border-right: 1px solid #a00;
border-bottom: 1px solid #a00;
color: #fff;
}
.FootMenu {
padding: 12px;
}
#Content {
padding: 8px;
background: #fff;
box-shadow: 0 2px 6px 0 rgba(0,0,0,0.1);
} #Panel {
width: 206px;
background: #fff;
padding: 8px;
box-shadow: 0 2px 6px 0 rgba(0,0,0,0.1);
}
So the Forums should look like this:
I hope you found this post useful 🙂
thanks you very much for sharing information
Hi Samy,
You’re most welcome 🙂