Welcome to FrostStudio, you should start by reading our rules

Frost Studio Footer Style [ phpBB3 ]

View previous topic View next topic Go down

avatar

Fate
Developer

Posts : 18
Reputation : 0

Post by Fate on Mon Feb 13, 2017 10:18 pm

Let's talk about our Footer and how we made it. Now, the idea behind its quite simple. Let's add some divs to create table styles and some CSS and boom, that's the whole work we did. As simple as it is, the small features make the design more interesting ( we will not show you how we did that, we will give you the skeleton of our index_box and you have to work with it )




So, if you want to install those, this is the right place.

Let's go to Administration Panel -> Display -> Templates -> General -> index_box. It is very important to have the basic Template so if you have an edited one, press the red X button and we can start working.

Now, you need to delete everything from inthere, and replace with this

Code:
{JAVASCRIPT}
<!-- BEGIN switch_user_logged_in --><p class="right rightside">{LAST_VISIT_DATE}</p><!-- END switch_user_logged_in -->
<p>{CURRENT_TIME}</p>
<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_fb_connect -->
            <span class="fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
            <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
            <!-- END switch_fb_connect -->
         </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}
<div class="FateWIO">
<!-- BEGIN disable_viewonline -->

   <!-- BEGIN switch_viewonline_link -->
   <div class="whoison"><a href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></div>
   <!-- END switch_viewonline_link -->

   <!-- BEGIN switch_viewonline_nolink -->
   <div class="whoison">{L_WHO_IS_ONLINE}</div>
   <!-- END switch_viewonline_nolink -->

<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 class="clear"></div>

   <!-- BEGIN switch_statistics_link -->
   <div class="fatestats   "><a href="{U_STATISTICS}" rel="nofollow">{L_STATISTICS}</a></div>
   <!-- END switch_statistics_link -->

   <!-- BEGIN switch_statistics_nolink -->
   <div class="fatestats">{L_STATISTICS}</div>
   <!-- END switch_statistics_nolink -->

<p class="page-bottom">
{TOTAL_POSTS}
</p>
<p class="page-bottom">
{TOTAL_USERS}
</p>
<p class="page-bottom">
{NEWEST_USER}
</p>
   
<!-- END disable_viewonline -->

</div>

{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_fb_connect -->
            <span class="fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
            <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
            <!-- END switch_fb_connect -->
         </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}

<!-- BEGIN switch_fb_index_login -->
<div id="fb-root"></div>
<script>
    FB.init({
      appId      : {switch_fb_index_login.FACEBOOK_APP_ID},
      cookie    : true,
      xfbml      : true,
      oauth      : true,
      version    : 'v2.3'
    });

  (function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</script>
<!-- END switch_fb_index_login -->

So, we created three new divs whoison, fatestats, FateWIO and we have to design them right now. Let's go to our CSS Stylesheet and add this

Code:
.whoison, .fatestats{
    margin: 0 -21px;
    border: 1px solid gainsboro;
    padding: 15px 15px;
    margin-bottom: 15px;
    text-transform: uppercase;
    font-size: 15px;
    background: #eaeaea;
    box-shadow: 0 1px 0 white inset;
}

.FateWIO{
    border: 1px solid #d2d2d2;
    padding: 10px 20px;
    background: whitesmoke;
    border-radius: 3px;
    box-shadow: 0 2px 2px gainsboro;
}

.whoison > a, .fatestats > a{
  color: #666;
}

And that's all for the simple design. Now you can add some icons, inputs to remove things and you will get closer to our design.

In-Depth Small Tutorial.

So, as I said before, we created 3 new divs. The last one FateWIO is the main table and it starts from
Code:
<div class="FateWIO">
<!-- BEGIN disable_viewonline -->

and ends
Code:

<!-- END disable_viewonline -->

</div>

I will work on a new tutorial about how Forumotion added PHP and how we can work with that, just from their basics.

Back to top Go down

View previous topic View next topic Back to top

Why our QuickReply?

  • Fastest Quick Reply
  • No BBCodes, which keep forum simple
  • Simple and professional design
  • Awesome Send and Preview Buttons

Permissions in this forum:
You cannot reply to topics in this forum