[Release] phpBB3 - MyGreen

[Matti]

Theme Name: Mygreen
Forum Version : phpBB3
Template Usage: Yes (2 Templates)
Javascript Usage: Yes
Description Mygreen A simple fixed-width bold green and modern phpBB theme which can be used by all sort of community users, some cool features of this theme which looks really nice. Some of the features of this theme are

Theme Features
- Text logo
- Images used of the default phpBB3 Icons.
- Clean design with blend of green and gray
- Fresh, minimalist design.
- The board statistics has had a massive improvement to bring a brand new style.
- Clean CSS for ease of editting.
- CSS Animations.
- Fixed & Beautiful Header
- Icons provided by Font-Awesome.
- Fonts provided by Google Fonts.




Skin Information:

Step 1:

Yo apply this theme to your forum you must go to your Administration Panel Display --> Skins -> Choose a theme Default skin of the version must be phpBB3

Step 2:

Add the Following CSS to your CSS Stylesheet

Code:

body {
    background-color:
rgb(225, 225, 225);
color:
    #536482;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 10px;
    height: auto;
    padding: 10px 0;
}
#wrap {
    background-color:
rgb(253, 253, 253);
border-bottom: 4px solid
rgb(56, 142, 60);
margin: 0 auto;
max-width: 1150px;
padding: 10px 20px;
border-top: 4px solid
    rgb(56, 142, 60);
box-shadow: 0 1px 4px
    #c2c2c2;
}
#search-box, ul.linklist li a img,.navbar .corners-top, .navbar .corners-bottom,.headerbar .corners-top,.headerbar .corners-bottom {
    display: none;
}
.headerbar {
    background: linear-gradient(to bottom,
rgb(56, 142, 60) 0%,
rgb(30, 91, 33) 100%);
margin-bottom: 10px;
padding: 0 5px;
height: 130px;
margin-top: -10px;
box-shadow: 0 0 2px 0
rgba(0,0,0,0.14),0 2px 2px 0 rgba(0,0,0,0.12),0 1px 3px 0
    rgba(0,0,0,0.2);
}
a#logo {
    color:
    #fff;
}
#logo {
    font-family: Exo;
    font-size: 60px;
    font-weight: bold;
text-shadow: 0px 0px 3px
    rgba(0,0,0, 0.5);
}
#page-header .navbar {
    background:
transparent;
    margin-top: -69px;
}
ul.navlinks {
    border-bottom: 0 solid
    #fff;
    font-weight: 700;
    text-align: center;
}
#page-header ul.navlinks a:hover {
    color:
    #fff;
}
ul.navlinks a {
    color: rgba(255,255,255,0.7);
    display: inline-block;
    font-family: "Open Sans",sans-serif;
    font-size: 14px;
    height: 45px;
    line-height: 45px;
    padding: 0 8px;
text-shadow: 0px 0px 3px
    rgba(0,0,0, 0.5);
}

.mainmenu {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
}

.mainmenu::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 51%;
    right: 51%;
    bottom: 0;
    background:
    #eaa830;
    height: 4px;
    -webkit-transition-property: left, right;
    transition-property: left, right;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    border-radius: 4px;
}
.mainmenu:hover::after {
  left: 0;
  right: 0;
}

#page-footer .navbar {
    background:
#f5f5f5;
border: 1px solid
    #e3e3e3;
    border-radius: 3px;
    margin: 5px 0;
    padding: 5px;
}


.forabg .header, .forumbg .header {
    background: linear-gradient(to bottom, rgb(56, 142, 60) 0%,rgb(16, 77, 18) 100%);
margin: -5px -5px 10px;
border: 0px solid
#fff;
    border-bottom-color: rgb(255, 255, 255);
    border-bottom-style: solid;
    border-bottom-width: 0px;
padding: 5px;
position: relative;
border-bottom: 3px solid rgb(56, 142, 60);
}
.table-title h2:first-child::before {
    border-left: 9px solid
    rgb(56, 142, 60);
    content: "";
    display: inline-block;
    height: 15px;
    margin-right: 5px;
    line-height: 22px;
    position: relative;
    top: 2px;
    width: 0;
}
.table-title, .table-title h2 {
    color:
    rgb(248, 248, 248);
    display: inline;
    font-size: 14px;
    font-family: 'Open Sans',sans-serif;
    text-transform: none;
text-shadow: 0px 0px 3px
    rgba(0,0,0, 0.5);
}

.forabg, .forumbg {
    background:
rgb(249, 249, 249);
box-shadow: 0 4px 15px 0
rgba(88,106,153,0.2);
border-radius: 3px;
margin-bottom: 30px;
overflow: hidden;
border: 0px solid
    #fff;
}
ul.forums {
    background-color:
    rgb(249, 249, 249);
    background-image: none;
}
.forabg .row, .forumbg .row {
    background: rgb(253, 253, 253);
    border-bottom: 1px solid rgb(225, 225, 225) !important;
    margin-left: 5px;
    margin-right: 5px;
    position: relative;
}
ul.forums dd {
    border-color:
    #fff;
    border-left-style: solid;
    border-left-width: 0px;
}
li.row {
 border-top: 0px solid #ffffff;
 border-bottom: 0px solid #ffffff;
 }
li.row:hover {
 background-color: rgb(249, 249, 249);
 }
dl.icon {
    background-position: -80px 50% !important;
}
.nodeIcon {
    margin: -30px 0 0 0px;
    float: left;
    font-size: 18px;
    color:
#e8e8e8;
background:
    rgb(56, 142, 60);
    padding: 8px;
    border-radius: 50%;
    opacity: 0.7;
}
.nodeIcon.new {
      background:
    rgb(56, 142, 60);
    opacity: inherit;
}
.nodeIcon_t {
    color:
    rgb(185, 185, 185);
    float: left;
    font-size: 26px;
    margin: -14px 0 0 -35px;
    position: relative;
}
.nodeIcon_t.new {
    color:
    rgb(56, 142, 60);
}
.post .corners-top,.post .corners-bottom {
    display: none;
}
.post {
    background-color: rgb(245, 245, 245) !important;
    border: 1px solid rgb(222, 222, 222);
    margin-bottom: 10px;
    padding: 10px;
}
.postprofile {
    background: rgb(254, 254, 254);
    border: 1px solid rgb(222, 222, 222);
    border-radius: 3px;
    color: #536482;
    display: inline;
    float: left;
    margin: 5px auto;
    min-height: 80px;
    overflow-wrap: break-word;
    padding: 5px;
    position: relative;
    width: 18%;
}
a.forumtitle,a.topictitle {
    color:
    rgb(20,20,20);
    font-family: 'Open Sans',sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}
a.forumtitle:hover,a.topictitle:hover {
 color: rgb(56,142,60);
 text-decoration: none;
 }
.new-topic, .new-reply,.topic-locked {
    background-color:
#247423;
padding: 8px 8px;
color:
    #fff;
    border-radius: 3px;
    font-size: 13px;
    font-weight: bold;
text-shadow: 0px 0px 3px
    rgba(0,0,0, 0.5);
}
.topic-locked {
    background-color:
    #c45454;
}
#page-header a.mainmenu::before {
    color: rgba(255,255,255,0.7);
    content: "";
    font-family: FontAwesome;
    font-weight: 400;
    margin-right: 5px;
}
#page-header a.mainmenu[href="/"]::before {
    content: "";
}
#page-header a.mainmenu[href="/faq"]::before {
    content: "";
}
#page-header a.mainmenu[href="/search"]::before {
    content: "";
}
#page-header a.mainmenu[href="/memberlist"]::before {
    content: "";
}
#page-header a.mainmenu[href="/groups"]::before {
    content: "";
}
#page-header a.mainmenu[href="/profile?mode=editprofile"]::before {
    content: "";
}
#page-header a.mainmenu[href="/privmsg?folder=inbox"]::before {
    content: "";
}
#page-header a.mainmenu[href="/register"]::before {
    content: "";
}
#page-header a.mainmenu[href="/login"]::before {
    content: "";
}
#page-header a.mainmenu[href^="/login?logout=1"]::before {
    content: "";
}
.collapsethis {
    box-shadow: 0 0 0 1px
rgba(68,68,68,0.1);
background:
    #f5f5f5;
    border-radius: 5px 5px 3px 3px;
    padding: 10px;
}
.cathead {
    background: linear-gradient(to bottom, rgb(56, 142, 60) 0%,rgb(16, 77, 18) 100%);
  margin: -10px -10px 10px;
padding: 11px;
box-shadow: inset 0 -3px 0
rgba(0,0,0,.1);
border-radius: 3px 3px 0 0;
color:
    #fff;
    font-weight: normal;
    font-family: "Open Sans",sans-serif;
    font-size: 15px;
}
.cathead::before {
    content: "\f0c9";
    margin-right: 8px;
    font-family: FontAwesome;
}

Step 3:

The Templates:

Replace ALL OF index_body WITH THE FOLLOWING:

Code:

{JAVASCRIPT}
<!-- BEGIN switch_user_logged_in --><p class="right rightside">{LAST_VISIT_DATE}</p><!-- END switch_user_logged_in -->
<p>{CURRENT_TIME}</p>
{CAT_NAME}
<br class="clear" />

<!-- BEGIN switch_user_login_form_header -->
<div class="panel">
 <div class="inner"><span class="corners-top"><span></span></span>
 <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
 <div class="user_login_form center">
 <label>{L_USERNAME} : <input class="post" type="text" size="10" name="username" /></label> 
 <label>{L_PASSWORD} : <input class="post" type="password" size="10" name="password" /></label> 
 <label>{L_AUTO_LOGIN} : <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label> 
 {S_HIDDEN_FIELDS}<input class="mainoption button1" type="submit" name="login" value="{L_LOGIN}" />

                <!-- BEGIN switch_social_login -->
                <div class="social_btn">
                    <!-- BEGIN fb_connect -->
                    <div class="fb-login-button"></div>
                    <!-- END fb_connect -->
                    <!-- BEGIN topicit_connect -->
                    <div class="ti-connect"></div>
                    <!-- END topicit_connect -->
                </div>
                <!-- END switch_social_login -->
 </div>
 </form>
 <span class="corners-bottom"><span></span></span></div>
</div>
<!-- END switch_user_login_form_header -->

<!-- BEGIN message_admin_index -->
 <div class="panel introduction">
 <div class="inner"><span class="corners-top"><span></span></span>
 <!-- BEGIN message_admin_titre -->
 <div class="h3">{message_admin_index.message_admin_titre.MES_TITRE}</div>
 <!-- END message_admin_titre -->

 <!-- BEGIN message_admin_txt -->
 <div class="mes-txt">{message_admin_index.message_admin_txt.MES_TXT}</div>
 <!-- END message_admin_txt -->
 <span class="corners-bottom"><span></span></span></div>
 </div>
<!-- END message_admin_index -->

{CHATBOX_TOP}
{BOARD_INDEX}

<!-- BEGIN disable_viewonline -->

<div class="collapsethis">
       <div class="cathead">
            Forum statistics
           </div>
        <div class="statspanel status">
              <p>{TOTAL_USERS_ONLINE}<br />
{RECORD_USERS}

<br />
{LOGGED_IN_USER_LIST}

{L_ONLINE_USERS}
{L_CONNECTED_MEMBERS}<br />
{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}

<br />
<em>{LEGEND} : {GROUP_LEGEND}</em>

</p>    
           </div>
       <br />
        <div class="statspanel iuser">
  {TOTAL_POSTS} • {TOTAL_USERS} • {NEWEST_USER}
           </div>
      
   </div>

 <!-- BEGIN switch_chatbox_activate -->
 <div class="h3"><a href="{S_JOIN_CHAT}" target="ChatBox">{CHATBOX_NAME}</a></div>
 <div class="page-bottom">
 {TOTAL_CHATTERS_ONLINE} : 
 {CHATTERS_LIST}<br />
 </div>
 <!-- BEGIN switch_chatbox_popup -->
 <div id="chatbox_popup"></div>
 <script type="text/javascript">
 insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
 </script>
 <!-- END switch_chatbox_popup -->
 <!-- END switch_chatbox_activate -->
<!-- END disable_viewonline -->

{CHATBOX_BOTTOM}

<!-- BEGIN switch_user_login_form_footer -->
<div class="panel">
 <div class="inner"><span class="corners-top"><span></span></span>
 <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
 <div class="user_login_form center">
 <label>{L_USERNAME} : <input class="post" type="text" size="10" name="username" /></label> 
 <label>{L_PASSWORD} : <input class="post" type="password" size="10" name="password" /></label> 
 <label>{L_AUTO_LOGIN} : <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>&nbsp;
 {S_HIDDEN_FIELDS}<input class="mainoption button1" type="submit" name="login" value="{L_LOGIN}" />

                <!-- BEGIN switch_social_login -->
                <div class="social_btn">
                    <!-- BEGIN fb_connect -->
                    <div class="fb-login-button"></div>
                    <!-- END fb_connect -->
                    <!-- BEGIN topicit_connect -->
                    <div class="ti-connect"></div>
                    <!-- END topicit_connect -->
                </div>
                <!-- END switch_social_login -->
 </div>
 </form>
 <span class="corners-bottom"><span></span></span></div>
</div>
<!-- END switch_user_login_form_footer -->

<br style="clear:both" />

<!-- BEGIN switch_legend -->
<ul id="picture_legend">
 <li><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" />{L_NEW_POSTS}</li>
 <li><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" />{L_NO_NEW_POSTS}</li>
 <li><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" />{L_FORUM_LOCKED}</li>
</ul>
<!-- END switch_legend -->

{AUTO_DST}


Replace ALL OF overall_header WITH THE FOLLOWING:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Courgette' rel='stylesheet' type='text/css'>
      <link href="http://fonts.googleapis.com/css?family=Monoton" rel="stylesheet" type="text/css">
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
     <script type="text/javascript" src="http://onehackoranother.com/projects/jquery/tipsy/javascripts/jquery.tipsy.js"></script>

       <link href='http://fonts.googleapis.com/css?family=Arimo:400,400italic,700,700italic|Arvo:400,400italic,700,700italic|Open+Sans+Condensed:300,700' rel='stylesheet' type='text/css'>  
          <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700|Exo:300,400,700' rel='stylesheet' type='text/css'>
          
 <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
 <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
 <meta http-equiv="content-script-type" content="text/javascript" />
 <meta http-equiv="content-style-type" content="text/css" />
 <!-- BEGIN switch_compat_meta -->
 <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
 <!-- END switch_compat_meta -->
 <!-- BEGIN switch_canonical_url -->
 <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
 <!-- END switch_canonical_url -->
 {META_FAVICO}
 {META}
 {META_FB_LIKE}
 <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
 {T_HEAD_STYLESHEET}
 {CSS}
 <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
 <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
 <script src="{JQUERY_PATH}" type="text/javascript"></script>
 <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
    {RICH_SNIPPET_GOOGLE}

 <!-- BEGIN switch_fb_login -->
 <script src="https://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
 <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
 <!-- END switch_fb_login -->

 <!-- BEGIN switch_ticker -->
 <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" />
 <script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
 <!-- END switch_ticker -->

 <!-- BEGIN switch_ticker_new -->
 <script src="{JS_DIR}jquery/jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
 <script type="text/javascript">//<![CDATA[
 /* Definir le sens de direction en fonction du panneau admin */
 var tickerDirParam = "{switch_ticker.DIRECTION}";
 var slid_vert = false;
 var auto_dir = 'next';
 var h_perso = parseInt({switch_ticker.HEIGHT});

 switch( tickerDirParam )
 {
 case 'top' :
 slid_vert = true;
 break;

 case 'left':
 break;

 case 'bottom':
 slid_vert = true;
 auto_dir = 'prev';
 break;

 case 'right':
 auto_dir = 'prev';
 break;

 default:
 slid_vert = true;
 }

 $(document).ready(function() {

 $('#fa_ticker_content').css('display','block');

 var width_max = $('ul#fa_ticker_content').width();
 var width_item = Math.floor(width_max / {switch_ticker.SIZE});

 if (width_max > 0)
 {
 $('ul#fa_ticker_content li').css('float','left').css('list-style','none').width(width_item).find('img').each(function () {
 if ($(this).width() > width_item)
 {
 var ratio = $(this).width() / width_item;
 var new_height = Math.round($(this).height() / ratio);
 $(this).height(new_height).width(width_item);
 }
 });

 if (slid_vert)
 {
 var height_max = h_perso;

 $('ul#fa_ticker_content li').each( function () {
 if ($(this).height() > height_max)
 {
 height_max = $(this).height();
 }
 } );

 $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
 $('ul#fa_ticker_content li').height(height_max);
 }


 $('#fa_ticker_content').jcarousel({
 vertical: slid_vert,
 wrap: 'circular',
 auto: {switch_ticker.STOP_TIME},
 auto_direction: auto_dir,
 scroll: 1,
 size: {switch_ticker.SIZE},
 height_max: height_max,
 animation: {switch_ticker.SPEED}
 });
 }
 else
 {
 $('ul#fa_ticker_content li:not(:first)').css('display','none');
 $('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
 }
 });
 //]]>
 </script>
 <!-- END switch_ticker_new -->

 <script type="text/javascript">//<![CDATA[
 $(document).ready(function(){
 <!-- BEGIN switch_enable_pm_popup -->
 pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
 if(pm != null) { pm.focus(); }
 <!-- END switch_enable_pm_popup -->
 <!-- BEGIN switch_report_popup -->
 report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
 if(report != null) { report.focus(); }
 <!-- END switch_report_popup -->
 <!-- BEGIN switch_ticker -->
 $(document).ready(function() {
 Ticker.start({
 height : {switch_ticker.HEIGHT},
 spacing : {switch_ticker.SPACING},
 speed : {switch_ticker.SPEED},
 direction : '{switch_ticker.DIRECTION}',
 pause : {switch_ticker.STOP_TIME}
 });
 });
 <!-- END switch_ticker -->
 });

 <!-- BEGIN switch_login_popup -->
 var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
 <!-- END switch_login_popup -->

 <!-- BEGIN switch_login_popup -->
 $(document).ready( function() {
 $(window).resize(function() {
 var windowWidth = document.documentElement.clientWidth;
 var popupWidth = $("#login_popup").width();
 var mypopup = $("#login_popup");

 $("#login_popup").css({
 "left": windowWidth/2 - popupWidth/2
 });
 });
 });
 <!-- END switch_login_popup -->
 //]]>
 </script>
 {GREETING_POPUP}
 <style type="text/css">
 #page-footer, div.navbar, div.navbar ul.linklist {
 display: block !important;
 }
 ul.linklist li.rightside, ul.linklist li.rightside a.copyright {
 display: inline !important;
 }

 <!-- BEGIN switch_ticker_new -->
 .jcarousel-skin-tango .jcarousel-item {
 text-align:center;
 width: 10px;
 }

 .jcarousel-skin-tango .jcarousel-item-horizontal {
 margin-right: {switch_ticker.SPACING}px;
 }

 .jcarousel-skin-tango .jcarousel-item-vertical {
 margin-bottom: {switch_ticker.SPACING}px;
 }
 <!-- END switch_ticker_new -->
 </style>
 {HOSTING_JS}
 <!-- BEGIN google_analytics_code -->
 <script type="text/javascript">
 //<![CDATA[
 var _gaq = _gaq || [];
 _gaq.push(["_setAccount", "{G_ANALYTICS_ID}"]);
 _gaq.push(["_trackPageview"]);
 _gaq.push(['_trackPageLoadTime']);

 <!-- BEGIN google_analytics_code_bis -->
 _gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']);
 _gaq.push(['b._trackPageview']);
 <!-- END google_analytics_code_bis -->

 (function() {
 var ga = document.createElement("script"); ga.type = "text/javascript"; ga.async = true;
 ga.src = ("https:" == document.location.protocol ? "https://ssl" : "http://www") + ".google-analytics.com/ga.js";
 var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ga, s);
 })();
 //]]>
 </script>
 <!-- END google_analytics_code -->
</head>
<div id="page-header">
 <div class="headerbar">
 <div class="inner"><span class="corners-top"><span></span></span>

 <div id="logo-desc">
                          <a id="logo" href="/">My Green</a>
 <!-- BEGIN switch_h1 -->
 <div id="site-title">{switch_h1.MAIN_SITENAME}</div>
 <!-- END switch_h1 -->
 <!-- BEGIN switch_desc -->
 <p>{switch_desc.SITE_DESCRIPTION}</p>
 <!-- END switch_desc -->
 </div>

 <span class="corners-bottom"><span></span></span></div>
 </div>
<body id="phpbb">
<!-- BEGIN hitskin_preview -->
<div id="hitskin_preview" style="display: block;">
 <h1><img src="https://2img.net/i/fa/hitskin/hitskin_logo.png" alt="" /> <em>Hit</em>skin.com</h1>
 <div class="content">
 <p>
 {hitskin_preview.L_THEME_SITE_PREVIEW}
 <br />
 <span>{hitskin_preview.U_INSTALL_THEME}<a href="https://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
 </p>

 </div>
</div>
<!-- END hitskin_preview -->

<!-- BEGIN switch_login_popup -->
<div id="login_popup" style="z-index: 10000 !important;">
 <div class="h3">{SITENAME}</div>
 {LOGIN_POPUP_MSG}
 <div id="login_popup_buttons">
 <form action="{S_LOGIN_ACTION}" method="get">
 <input type="submit" class="button1" value="{L_LOGIN}" />
 <input type="button" class="button1" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
 <input id="login_popup_close" type="button" class="button2" value="{L_DONT_DISPLAY_AGAIN}" />
 </form>
 </div>
</div>
<!-- END switch_login_popup -->

<div class="conteneur_minwidth_IE">
<div class="conteneur_layout_IE">
<div class="conteneur_container_IE">
<div id="wrap"><div class="pagewrap">
 <a id="top" name="top" accesskey="t"></a>
 {JAVASCRIPT}

 

 <div class="navbar">
 <div class="inner"><span class="corners-top"><span></span></span>

 <ul class="linklist navlinks{NAVBAR_BORDERLESS}">
 <li>{GENERATED_NAV_BAR}</li>
 </ul>

 <!-- BEGIN switch_search_box -->
 <div id="search-box">
 <form method="get" action="{ACTION_SEARCH}" id="search">
 <p class="nomargin"><input type="text" name="search_keywords" id="keywords" maxlength="128" class="inputbox search" value="{L_SEARCH}..." onclick="if (this.value == '{L_SEARCH}...') this.value = '';" onblur="if (this.value == '') this.value = '{L_SEARCH}...';" />
 {JS_SESSION_ID_INPUT}
 <input class="button2" type="submit" value="{L_SEARCH}" /></p>
 </form>
 </div>
 <!-- END switch_search_box -->

 <span class="corners-bottom"><span></span></span></div>
 </div>

 <!-- BEGIN switch_ticker_new -->
 <div id="fa_ticker_blockD" style="margin-top:4px;">
 <div class="module">
 <div class="inner">
 <span class="corners-top"><span></span></span>
 <div id="fa_ticker_container">
 <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none">
 <!-- BEGIN ticker_row -->
 <li>{switch_ticker.ticker_row.ELEMENT}</li>
 <!-- END ticker_row -->
 </ul>
 </div>
 <span class="corners-bottom"><span></span></span>
 </div>
 </div>
 </div>
 <!-- END switch_ticker_new -->

 <!-- BEGIN switch_ticker -->
 <div id="fa_ticker_block" style="margin-top:4px;">
 <div class="module">
 <div class="inner">
 <span class="corners-top"><span></span></span>
 <div id="fa_ticker_container">
 <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
 <div class="fa_ticker_content">
 <!-- BEGIN ticker_row -->
 <div>{switch_ticker.ticker_row.ELEMENT}</div>
 <!-- END ticker_row -->
 </div>
 </div>
 </div>
 <span class="corners-bottom"><span></span></span>
 </div>
 </div>
 </div>
 <!-- END switch_ticker -->
 </div>

 <div id="page-body">

 <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
 <div id="outer-wrapper">
 <div id="wrapper">
 <div id="container">
 <div id="content">

 <div id="{ID_LEFT}">
 <!-- BEGIN giefmod_index1 -->
 {giefmod_index1.MODVAR}
 <!-- BEGIN saut -->
 <div style="height:{SPACE_ROW}px"></div>
 <!-- END saut -->
 <!-- END giefmod_index1 -->
 </div>

 <div id="main">
 <div id="main-content">

Step 4:

Add the Javascript for Icons Go to Javascript codes management Create a new javascript and add the following code:
Title * : Forum Icons
Placement : In all the pages

Code:

$(function() {
  $('.forabg dl[style*="https://2img.net/i/fa/prosilver/forum_read.gif"]').find('.dterm ').append('<span class="nodeIcon"><i class="fa fa-comments"></i></span>');
});
$(function() {
  $('.forabg dl[style*="https://2img.net/i/fa/prosilver/forum_read_category.gif"]').find('.dterm ').append('<span class="nodeIcon"><i class="fa fa-comments"></i></span>');
});
$(function() {
  $('.forabg dl[style*="https://2img.net/i/fa/prosilver/forum_read_locked.gif"]').find('.dterm ').append('<span class="nodeIcon lock"><i class="fa fa-comments"></i></span>');
});
$(function() {
  $('.forabg dl[style*="https://2img.net/i/fa/prosilver/forum_unread.gif"]').find('.dterm ').append('<span class="nodeIcon new"><i class="fa fa-comments"></i></span>');
});
$(function() {
  $('.forabg dl[style*="https://2img.net/i/fa/prosilver/forum_unread_category.gif"]').find('.dterm ').append('<span class="nodeIcon new"><i class="fa fa-comments"></i></span>');
});

 
$(function() {
  $('.forumbg dl[style*="https://2img.net/i/fa/prosilver/topic_read.gif"]').find('.dterm ').append('<span class="nodeIcon_t"><i class="fa fa-comments"></i></span>');
});
$(function() {
  $('.forumbg dl[style*="https://2img.net/i/fa/prosilver/topic_unread.gif"]').find('.dterm ').append('<span class="nodeIcon_t new"><i class="fa fa-comments"></i></span>');
});

$(function() {
  $('.forumbg dl[style*="https://2img.net/i/fa/prosilver/sticky_read.gif"]').find('.dterm ').append('<span class="nodeIcon_t"><i class="fa fa-thumb-tack"></i></span>');
});
$(function() {
  $('.forumbg dl[style*="https://2img.net/i/fa/prosilver/sticky_unread.gif"]').find('.dterm ').append('<span class="nodeIcon_t new"><i class="fa fa-thumb-tack"></i></span>');
});

$(function() {
  $('.forumbg dl[style*="https://2img.net/i/fa/prosilver/announce_read.gif"]').find('.dterm ').append('<span class="nodeIcon_t"><i class="fa fa-bullhorn"></i></span>');
});
$(function() {
  $('.forumbg dl[style*="https://2img.net/i/fa/prosilver/announce_unread.gif"]').find('.dterm ').append('<span class="nodeIcon_t new"><i class="fa fa-bullhorn"></i></span>');
});

$(function() {
  $('.forumbg dl[style*="https://2img.net/i/fa/modernbb/folder_global_announce.png"]').find('.dterm ').append('<span class="nodeIcon_t"><i class="fa fa-exclamation-circle"></i></span>');
});
$(function() {
  $('.forumbg dl[style*="https://2img.net/i/fa/modernbb/folder_global_announce_new.png"]').find('.dterm ').append('<span class="nodeIcon_t new"><i class="fa fa-exclamation-circle"></i></span>');
});

$(function() {
  $('.forumbg dl[style*="https://2img.net/i/fa/prosilver/topic_read_locked.gif"]').find('.dterm ').append('<span class="nodeIcon_t"><i class="fa fa-lock"></i></span>');
});
$(function() {
  $('.forumbg dl[style*="https://2img.net/i/fa/prosilver/topic_unread_locked.gif"]').find('.dterm ').append('<span class="nodeIcon_t lock"><i class="fa fa-lock"></i></span>');
});


$(function() {
  $('.forumbg dl[style*="https://2img.net/i/fa/prosilver/topic_read_hot.gif"]').find('.dterm ').append('<span class="nodeIcon_t"><i class="fa fa-star"></i></span>');
});
$(function() {
  $('.forumbg dl[style*="https://2img.net/i/fa/prosilver/topic_unread_hot.gif"]').find('.dterm ').append('<span class="nodeIcon_t new"><i class="fa fa-star"></i></span>');
});

$(function() {
  $('.buttons img[src="https://2img.net/i/fa/prosilver/button_topic_new_en.png"]').replaceWith('<div class="new-topic"><i class="fa fa-plus"></i> New Topic</div>');
});

$(function() {
  $('.buttons img[src="https://2img.net/i/fa/prosilver/button_topic_reply_en.png"]').replaceWith('<div class="new-reply"><i class="fa fa-comment"></i> Post Reply</div>');
});

$(function() {
  $('.buttons img[src="https://2img.net/i/fa/prosilver/button_topic_locked_en.png"]').replaceWith('<div class="topic-locked"><i class="fa fa-lock"></i> Topic Locked</div>');
});

Hope you like it and if you see any error or bug, please report them in the correct section.

Regards,
FM Skins Team