Theme Name: Elegant Theme
Forum Version : phpBB3
Template Usage: Yes (3 Templates)
Javascript Usage: Yes
Description Elegant is a Flat, Clean 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 + headr and body.
- Clean design with blend of blue 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: #ebebeb url(https://i.servimg.com/u/f26/14/73/12/96/body-b10.png);
    color: #536482;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 10px;
    height: auto;
    padding: 10px 0;
}
#wrap {
    background-color: rgb(254, 254, 254);
    border: 1px solid #DEDFE0;
    margin: 120px auto 10px;
max-width: 1180px;
padding: 10px 20px;
z-index: 999;
position: relative;
border-bottom: 3px solid
    #3498db;
    box-sizing: border-box;
}
dl.forum-icon::before {
    color: rgb(155, 155, 155);
    content: "\f086";
    font-family: FontAwesome;
    font-size: 28px;
    left: 7px;
    position: absolute;
}
.topHelper {
    background: #09304a url(https://i.servimg.com/u/f26/14/73/12/96/body-b10.png);
    position: absolute;
    width: 100%;
    height: 180px;
    top: -10px;
border-bottom: 3px solid
    #3498db;
}

#text_logo a {
    font-size: 50px;
    text-transform: uppercase;
    color: rgb(255, 255, 255);
    font-family: Signika, sans-serif !important;
text-shadow: 0 2px 3px
    #01102f;
}
#text_logo {
    display: block;
    line-height: 130px;
    height: 50px;
    max-width: 100%;
    text-align: center;
    color: rgb(196, 84, 84);
}

#page-footer .navbar {
    background-color:
#f5f5f5;
clear: both;
padding: 6px;
border: 1px solid
    rgb(222, 222, 222);
}

.table-title h2::before {
    content: "\f07b";
    margin-right: 8px;
    font-family: FontAwesome;
}
.cathead::before {
    content: "\f0c9";
    margin-right: 8px;
    font-family: FontAwesome;
}
#page-footer ul.linklist a {
    color: #909090;
}
li.footer-home::before {
    content: "\f015";
    font-family: FontAwesome;
    font-weight: 400;
    margin-right: 5px;
    color: rgb(222, 222, 222);
}
#page-header .navbar {
    background: #404040;
height: 45px;
margin: 0px -21px -30px;
position: relative;
top: -36px;
border-top: 3px solid
#3498db;
border-left: 3px solid
#3498db;
border-right: 3px solid
    #3498db;
}
#page-header ul.navlinks a:hover {
    background: rgba( 255,255,255,0.2 ) none repeat scroll 0 0;
}
ul.navlinks {
    border-bottom: 0 solid #fff;
    font-weight: 400;
    text-align: center;
}
ul.navlinks a {
    color: rgb(255, 255, 255);
    display: inline-block;
    font-family: "Open Sans",sans-serif;
    font-size: 15px;
    height: 45px;
    line-height: 45px;
    padding: 0 8px;
}
.lastpost-avatar img {
    border-radius: 2px;
    height: 25px;
    width: 25px;
    border: 1px solid #c4c4c4;
    padding: 2px;
    margin: 4px;
}
#search-box,
.headerbar .corners-bottom,
.headerbar .corners-top,
.navbar .corners-bottom,
.navbar .corners-top,
ul.linklist li a img,
.headerbar {
    display: none;
}
.forabg .header, .forumbg .header {
    background: #4993c5;
    color: #464646 !important;
    margin: -5px -5px 10px;
    padding: 8px 10px;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,.1);
    border-radius: 3px 3px 0 0;
}
.forabg, .forumbg {
    background:
#fff;
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.topiclist ok {
    display: block;
    font-style: normal;
    line-height: 1.5;
    font-size: 80%;
}
.forabg .row, .forumbg .row {
    background: #f9f9f9;
    border: solid 1px #E8E9EB !important;
    margin-bottom: 3px;
    position: relative;
}

.forabg ul, .forumbg ul {
    background: none;
}
li.row:hover{background: none}
.forabg .row dd, .forumbg .row dd {
    border: medium none !important;
}

.forabg a.forumtitle, .forumbg a.topictitle {
    font-family: 'Open Sans', sans-serif;
    color: rgb(70, 70, 70);
    font-weight: bold;
    font-size: 15px;
}
a.forumtitle:hover,.forumbg a.topictitle:hover {
    color:
    #3498db;
    text-decoration: none;
}
.new-topic, .new-reply, .topic-locked {
    background-color:
#369fcf;
border-radius: 4px;
padding: 6px 6px;
font-size: 14px;
color:
#fff;
border: 1px solid
#258cbb;
box-shadow: 0 1px 0
rgba(0, 0, 0, 0.05),
    rgba(255, 255, 255, 0.2) 0px 0px 0 1px inset;
 
}
.topic-locked {
    background-color:
#e03131;
border: 1px solid
    #e03131;
}

.cathead {
    background:
#4993c5;
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;
}
.statspanel {
    border: 1px solid #e1e1e1;
padding: 10px 10px 10px 20px;
background: no-repeat 10px 50%
    #FFFFFF;
        background-image: none;
    background-image: none;
    margin: 2px 0;
}
.collapsethis {
    box-shadow: 0 0 0 1px
rgba(68,68,68,0.1);
background:
    #f5f5f5;
    border-radius: 5px 5px 3px 3px;
    padding: 10px;
}
.iuser::before {
    content: "\f0c0";
    font-family: FontAwesome;
    margin-right: 10px;
    font-size: 20px;
    color:
    #3498db;
}

.new i {
    -webkit-animation-name: shake;
    animation-name: shake;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
}
@keyframes shake{0%,11%,100%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}2%,4%,6%,8%,10%{-webkit-transform:translate3d(-3px, 0, 0);transform:translate3d(-3px, 0, 0)}3%,5%,7%,9%{-webkit-transform:translate3d(3px, 0, 0);transform:translate3d(3px, 0, 0)}}

.nodeIcon {
    color: #3498db;
    float: left;
    font-size: 30px;
    height: 36px;
    margin: -30px 0 0 5px;
    position: relative;
    width: 36px;
}
 .new {
    color: #84c754 !important;
}
.nodeIcon_t {
    color: #3498db;
    float: left;
    font-size: 26px;
    margin: -14px 0 0 -35px;
    position: relative;
}
 .hotnew {
    color: #84c754 !important;
}
.hotnew i {animation:pulse 2.5s ease infinite}
@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.3)}70%{transform:scale(1)}90%{transform:scale(1.2)}100%{transform:scale(1)}}

.lock {
    color:
    #e9553c !important;
}
dl.icon {
    background-position: -80px 50%!important;
}
.forabg .header dt, .forabg .header h2, .forumbg .header .dterm, .forumbg .header dt {
    color: #fff;
    font-family: "Open Sans",sans-serif;
    font-size: 15px;
    font-weight: 400;
    text-transform: none;
}

.post {
    background-color: #f9f9f9 !important;
    border: 1px solid #DEDFE0 !important;
    margin-bottom: 10px;
    padding: 10px;
}
.module {
    background-color: rgb(255, 255, 255);
    color: rgb(113, 113, 113);
    margin-bottom: 4px;
    overflow: hidden;
    padding: 0 10px;
    border: 1px solid rgb(239, 239, 239);
}
.introduction .h3, .module .h3, .postbody .h3 {
    margin: -5px -10px 7px;
    background: rgb(51, 51, 51);
    color: rgb(222, 222, 222);
    text-transform: none;
    padding: 6px;
    border-bottom: 0px;
    font-size: 11px;
    font-weight: normal;
}


#page-header a.mainmenu::before {
    color: rgb(255, 255, 255);
    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: "";
}

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">
              <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>
     
        <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> 
            {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 index_box WITH THE FOLLOWING:

Code:

<ul class="linklist">
   <!-- BEGIN switch_user_logged_in -->
   <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a> • </li>
   <li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a> • </li>
   <!-- END switch_user_logged_in -->
   <li><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></li>
   <!-- BEGIN switch_user_logged_in -->
   <li class="rightside"><a href="{U_MARK_READ}" accesskey="m">{L_MARK_FORUMS_READ}</a></li>
   <!-- END switch_user_logged_in -->
</ul>

<!-- BEGIN catrow -->
   <!-- BEGIN tablehead -->
      <div class="forabg">
         <div class="inner"><span class="corners-top"><span></span></span>
         <ul class="topiclist">
            <li class="header">
               <dl class="icon">
                  <dd class="dterm"><div class="table-title">{catrow.tablehead.L_FORUM}</div></dd>
                  <dd class="topics">{L_TOPICS}</dd>
                  <dd class="posts">{L_POSTS}</dd>
                  <dd class="lastpost"><span>{L_LASTPOST}</span></dd>
               </dl>
            </li>
         </ul>
         <ul class="topiclist forums">
   <!-- END tablehead -->

   <!-- BEGIN forumrow -->
            <li class="row">
               <dl class="icon" style="background:url({catrow.forumrow.FORUM_FOLDER_IMG}) no-repeat scroll {catrow.forumrow.INC_LEVEL} 50%;">
                  <dd class="dterm">
                     <div style="display: block; margin : 0 {catrow.forumrow.INC_LEVEL_RIGHT} 0 {catrow.forumrow.INC_LEVEL_LEFT};">
                        <h{catrow.forumrow.LEVEL} class="hierarchy">
                        <a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a>
                        </h{catrow.forumrow.LEVEL}>
                        <br />
                        {catrow.forumrow.FORUM_DESC}

                        <!-- BEGIN switch_moderators_links -->
                           {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                        <!-- END switch_moderators_links -->
                        {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                        <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}
                     </div>
                  </dd>
                  <dd class="topics">{catrow.forumrow.TOPICS} <ok>Threads</ok></dd>
                  <dd class="posts">{catrow.forumrow.POSTS} <ok>Messages</ok></dd>
                  <dd class="lastpost">
                     <!-- BEGIN ads -->
                     <span class="AD_LastPA">
                                <span class="lastpost-avatar"><img src="{catrow.forumrow.ads.IMG}" alt="{catrow.forumrow.ads.TITLE}" /></span>
                                <span class="AD_LastInfos">
                                    <b><a href="{catrow.forumrow.ads.LINK}">{catrow.forumrow.ads.TITLE}</a></b><br />
                                    {catrow.forumrow.ads.DATE}<br />
                                    {catrow.forumrow.ads.LOCATION}
                                </span>
                     </span>
                            <!-- END ads -->
                     
                            <!-- BEGIN avatar -->
                            <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                            <!-- END avatar -->

                     <span>
                     <!-- BEGIN switch_topic_title -->
                     <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
                     <!-- END switch_topic_title -->
                     {catrow.forumrow.USER_LAST_POST}
                     </span>
                  </dd>
               </dl>
            </li>
   <!-- END forumrow -->

   <!-- BEGIN tablefoot -->
            </ul>

         <span class="corners-bottom"><span></span></span></div>
      </div>
   <!-- END tablefoot -->
<!-- END catrow -->

<!-- BEGIN switch_on_index -->
<ul class="linklist">
   <li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a> • </li>
   <li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a> •&nbsp;</li>
   <li class="last"><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
   <!-- BEGIN switch_delete_cookies -->
   <li class="rightside"><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a></li>
   <!-- END switch_delete_cookies -->
</ul>
<!-- END switch_on_index -->

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.7.0/css/font-awesome.min.css">
  <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="/css.php?css=public%3Anormalize.css%2Cpublic%3Acore.less%2Cpublic%3Aapp.less&s=7&l=1&d=1553130860&k=828439bc2bdde8dc9eb4757ec3c4330f925ea8a8" />

   <link rel="stylesheet" href="/css.php?css=public%3Anode_list.less%2Cpublic%3Anotices.less%2Cpublic%3Ashare_controls.less%2Cpublic%3Athxpress_xf.less%2Cpublic%3Aextra.less&s=7&l=1&d=1553130860&k=1d3eaaf9e8f08100ee331da968faf00b6f969164" />

<link href="//fonts.googleapis.com/css?family=Lato:400,700|Oswald:400,700|Creepster" rel="stylesheet" type="text/css">
   
   
    <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

          <style>
     
        @font-face {
          font-family: Signika-Light;
          font-weight: normal;
          font-style: normal;
          src:
            url(https://files.plyo.io/webu/fonts/signika-light.woff2) format('woff2'),
            url(https://files.plyo.io/webu/fonts/signika-light.woff) format('woff');
        }
     
        @font-face {
          font-family: Signika;
          font-weight: normal;
          font-style: normal;
          src:
            url(https://files.plyo.io/webu/fonts/signika.woff2) format('woff2'),
            url(https://files.plyo.io/webu/fonts/signika.woff) format('woff');
        }
     
    </style>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic' 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>
    <!-- BEGIN switch_recent_jquery -->
    <script src="{JS_DIR}jquery1.9/jquery-migrate-1.4.1.js" type="text/javascript"></script>
    <script src="{JQUERY_DIR}browser/v1.0/jquery.browser.min.js" type="text/javascript"></script>
    <script src="{JQUERY_DIR}support/jquery.support.js" type="text/javascript"></script>
    <!-- END switch_recent_jquery -->
   <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="{JQUERY_DIR}ticker/ticker.css" />
   <script src="{JQUERY_DIR}ticker/ticker.js" type="text/javascript"></script>
   <!-- END switch_ticker -->

   <!-- BEGIN switch_ticker_new -->
   <script src="{JQUERY_DIR}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[
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

        ga('create', '{G_ANALYTICS_ID}', 'auto');
        ga('send', 'pageview');
        ga('set', 'anonymizeIp', true);

        <!-- BEGIN google_analytics_code_bis -->
        ga('create', '{G_ANALYTICS_ID_BIS}', 'auto', 'bis');
        ga('bis.send', 'pageview');
        ga('bis.set', 'anonymizeIp', true);
        <!-- END google_analytics_code_bis -->
        //]]>
   </script>
   <!-- END google_analytics_code -->
</head>
<div class="topHelper">
  <div id="text_logo"><a href="/">
            <span></span>
            
            Elegant <span>Theme</span>
            
         </a></div>
   
    </div>
<body id="phpbb">
  <div id="bg"></div>
<!-- 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 id="container_before"></div>

<div id="container_after"></div>
   <a id="top" name="top" accesskey="t"></a>
   {JAVASCRIPT}

   <div id="page-header">
      <div class="headerbar">
         <div class="inner"><span class="corners-top"><span></span></span>

         <div id="logo-desc">
            <a href="{U_INDEX}" id="logo"><img src="{LOGO}" alt="{L_INDEX}" /></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>

      <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() {
  $('.pmlist dl[style*="https://2img.net/i/fa/prosilver/forum_read.gif"]').find('.forum-icon').append('<span class="nodeIcon"><i class="fa fa-comments"></i></span>');
});
$(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_unread.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 hotnew"><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-pencil"></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-reply"></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>');
});



$(function(){
$('.pmlist dl').closest('dl.icon').addClass('forum-icon');});

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

Regards,
FM Skins Team

I'm trying to use this skin, and I'm having an issue removing the "ELEGANT THEME" text at the header.

Additionally, rather than a Text Header how do I place a regular PNG banner there with the aesthetics of the template in tact.

https:// testforumlandofwoe. forumotion.com/