Good art is a taste, good design is an opinion.


Come as guest, stay as family.
Board Index

Come as guest, stay as family.


You are not connected. Please login or register

Foto

[Usershared] Flatty punBB



View previous topic View next topic Go down Message [Page 1 of 1]

1
Offline

  Andrei34

Andrei34
Punbb Rookie
Punbb Rookie
Skin name:Flatty
Created by:me
Color Scheme:mostly blue
Template Modification( Yes or No):YES
Example (Images or demo)*:http://realmsnteste.forumgratuit.ro/
[Usershared] Flatty punBB HrtsfKe

overall_footer_end template:
Code:
<!-- BEGIN html_validation -->
<!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">
<body>
<div>
 <div>
 <div>
 <div>
 <div>
 <div>
 <ul>
 <li>
<!-- END html_validation -->
 </li>
 </ul>
 <!-- BEGIN switch_footer_links -->
 <ul>
 <li>
 <!-- BEGIN footer_link -->
 <!-- BEGIN switch_separator -->&nbsp;|&nbsp;<!-- END switch_separator -->
 {switch_footer_links.footer_link.FOOTER_LINK_SEPARATOR}<a name="bottom" class="copyright" href="{switch_footer_links.footer_link.U_FOOTER_LINK_HREF}" rel="{switch_footer_links.footer_link.FOOTER_LINK_REL}" target="{switch_footer_links.footer_link.FOOTER_LINK_TARGET}" title="{switch_footer_links.footer_link.L_FOOTER_LINK_TITLE}">{switch_footer_links.footer_link.L_FOOTER_LINK_TEXT}</a>
 <!-- END footer_link -->
 </li>
 </ul>
 <!-- END switch_footer_links -->
 </div>
 <br />
 <p class="center">
 <strong>{ADMIN_LINK}</strong>
 </p>
 </div>
 {PROTECT_FOOTER}
 </div>
 </div>
 </div>
</div>

<!-- BEGIN switch_facebook_login -->
<div id="fb-root"></div>
<script type="text/javascript">
    FB.init({
      appId      : {switch_facebook_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_facebook_login -->

<!-- BEGIN switch_facebook_logout_TMP -->
<script type="text/javascript">
//<![CDATA[
FB.Event.subscribe('auth.logout', function(response) {
 if ($('a#logout'))
 {
 var lien_redir = $('a#logout').attr('href');

 if ($('a#logout').attr('href') && $('a#logout').attr('href') != '')
 {
 document.location.href = 'http://{switch_facebook_logout.SERVER_NAME}/' + lien_redir;
 }
 }
});

$(document).ready( function() {
 $('a#logout').click( function() {
 FB.logout();
 } );
} );
//]]>
</script>
<!-- END switch_facebook_logout_TMP -->

<script type="text/javascript">
//<![CDATA[
 fa_endpage();
//]]>
</script><script type="text/javascript">
jQuery(function($) {
 $("#backtop").hide();
   $(window).scroll(function () {
    if ($(this).scrollTop() > 500) {
      $('#backtop').slideDown(180);
  } else {
  $('#backtop').slideUp(180);
  }
 });
  $('.back-top').on( "click", function () {
  $('html, body').animate({
  scrollTop: 0
  }, 800);
  return false;
  });
});
</script>
<div id="footer">
 <div class="uppermid">
 <div class="wrapper">
 <div class="footer-left">
 <div class="float_left">
 <div class="footer-logo float_left">
 <img src="http://hostingfg.esy.es/forum/images/flatty/mybbclear.png" alt="aboutus" />
 </div>
 <span style="font-size: 20px;">About Us</span>
 <br />
 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
 Lorem ipsum dolor sit amet.
 </div>
 </div>
 <div class="float_right">
 <div class="footer-menu">
 <div class="footer-head"><strong>Lorem ipsum</strong></div>
 <ul class="ft_menu">
 <li><a href="#"><i class="fa fa-link fa_xtra white"></i> Link 1</a></li>
 <li><a href="#"><i class="fa fa-link fa_xtra white"></i> Link 2</a></li>
 <li><a href="#"><i class="fa fa-link fa_xtra white"></i> Link 3</a></li>
 <li><a href="#"><i class="fa fa-link fa_xtra white"></i> Link 4</a></li>
 <li><a href="#"><i class="fa fa-link fa_xtra white"></i> Link 5</a></li>
 </ul>
 </div>
 <div class="footer-menu">
 <div class="footer-head"><strong>Lorem ipsum</strong></div>
 <ul class="ft_menu">
 <li><a href="#"><i class="fa fa-comments fa_xtra white"></i> Link</a></li>
 <li><a href="#"><i class="fa fa-home fa_xtra white"></i> Link</a></li>
 <li><a href="#"><i class="fa fa-search fa_xtra white"></i> Link</a></li>
 <li><a href="#"><i class="fa fa-life-ring fa_xtra white"></i> Link</a></li>
 <li><a href="#"><i class="fa fa-star fa_xtra white"></i>Link</a></li>
 </ul>
 </div>
 </div>
 </div>
 </div>
 <div class="lower">
 <div class="wrapper">
 
 <center><span id="copyright" style="text-align:center !important">
 Copyright RPG DYNASTY & PunBB.biz. Adaptat by Pray98mwazzt
                          </span></center>
 </div>
 </div>
</div>
</body>
</html>

overall_header:
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>
 <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}" />
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  {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>

 <!-- BEGIN switch_fb_login -->
 <script src="http://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() {

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

 if (width_max > 0)
 {
 $('#fa_ticker_content').css('display','block');

 $('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[
 jQuery().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 -->
 $(window).load(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 = false, 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}
 <!-- BEGIN switch_ticker_new -->
 <style>
 .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;
 }
 </style>
 <!-- END switch_ticker_new -->
 {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>

<body>
  <div id="header">
 <div id="logo">
 <div class="wrapper">
 <a href="#"><img src="http://hostingfg.esy.es/forum/images/flatty/logo.png" alt="Forums" title="Forums"></a>
 </div>
 </div>
 <div id="panchor" style="height: 0px;"></div>
 <div id="panel" class="">
 <div class="upper">
 <div class="wrapper">
 <!-- start: header_welcomeblock_guest -->
<!-- BEGIN switch_user_logged_out --><span class="float_left"></span>
<span class="float_left">
  <a href="/login" class="login bradius"><i class="fa fa-key fa_xtra" style="margin-top: -2px !important;"></i> Conecctare</a>
  <a href="/register" class="register bradius"><i class="fa fa-user-plus fa_xtra"></i>Inregistrare</a>
</span>
 <!-- END switch_user_logged_out -->
                                          <!-- BEGIN switch_user_logged_in -->
                                          <span class="float_left">
                                            <a href="/profile?mode=editprofile&page_profil=notifications" class="register bradius"><i class="fa fa-key fa_xtra" style="margin-top: -2px !important;"></i>Notificari</a>
                                            <a href="/privmsg?folder=inbox" class="register bradius"><i class="fa fa-user-plus fa_xtra"></i>Mesaje private</a>
                                                                                        <a href="/login?logout" class="register bradius"><i class="fa fa-user-plus fa_xtra"></i>Deconectare</a>
                                          </span> <!-- END switch_user_logged_in -->
 <script type="text/javascript">
 $("#quick_login input[name='url']").val($(location).attr('href'));
 </script>
<ul class="menu top_links">
  <li><a href="/"><i class="fa fa-home"></i> Portal</a></li>
  <li><a href="/forum"><i class="fa fa-comments"></i> Forum</a></li>
  <li><a href="/search"><i class="fa fa-search"></i> Cautare</a></li>
  <li><a href="/memberlist"><i class="fa fa-users"></i> Membri</a></li>
  <li><a href="/calendar"><i class="fa fa-calendar-check-o"></i> Calendar</a></li>
  <li><a href="/faq" class="help"><i class="fa fa-question-circle"></i> FAQ</a></li>
</ul>
 </div>
</div>
<div class="lower">
 <a class="buttons float_right"></a>
 <a class="clickedbuttons float_right"></a>
 
 <br class="clear">
</div>
<!-- end: header_welcomeblock_guest -->
 <!-- </div> in header_welcomeblock_member and header_welcomeblock_guest -->
 <!-- </div> in header_welcomeblock_member and header_welcomeblock_guest -->
 </div>
 </div>
 <!-- BEGIN hitskin_preview -->
 <div id="hitskin_preview" style="display: block;">
 <h1><img src="http://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="http://{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" class="module main" style="z-index: 10000 !important;">
 <div id="login_popup_title" class="main-head">
 <div class="h3">{SITENAME}</div>
 </div>
 <div class="main-content">
 {LOGIN_POPUP_MSG}
 <div id="login_popup_buttons">
 <form action="{S_LOGIN_ACTION}" method="get">
 <input type="submit" class="button2" value="{L_LOGIN}" />
 <input type="button" class="button2" 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>
 </div>
 <!-- END switch_login_popup -->

 <a id="top" name="top" accesskey="t"></a>

 <div class="minwidth_IE">
 <div class="layout_IE">
 <div class="container_IE">
 <div class="pun">
 

 <!-- BEGIN switch_ticker_new -->
 <div id="fa_ticker_block" style="padding-top:4px;">
 <div class="module main">
 <div class="main-content clearfix">
 <div id="fa_ticker_container">
 <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display: none;width: 100%;">
 <!-- BEGIN ticker_row -->
 <li>{switch_ticker.ticker_row.ELEMENT}</li>
 <!-- END ticker_row -->
 </ul>
 </div>
 </div>
 </div>
 </div>
 <!-- END switch_ticker_new -->

 <!-- BEGIN switch_ticker -->
 <div id="fa_ticker_block" style="padding-top:4px;">
 <div class="module main">
 <div class="main-content clearfix">
 <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>
 </div>
 </div>
 </div>
 <!-- END switch_ticker -->

 <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">

<!-- BEGIN html_validation -->
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
</body>
</html>
<!-- END html_validation -->

CSS code:
Code:
.stats_number {
    color: #bbb;
    display: block;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 16px;
    font-weight: 700;
    overflow: hidden;
    position: relative;
    text-align: center;
}.stats_number {
    color: #bbb;
    display: block;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 16px;
    font-weight: 700;
    overflow: hidden;
    position: relative;
    text-align: center;
}
table tr .tc3.col_stats {
  width: 20% !important;
}
table tr .tc2:empty {
  display: none;
}
.stats_number:first-of-type:after {
  content: 'topicuri';
  display: block;
  font-size: 11px;
  font-weight: 100;
  text-align: center;
  text-transform: uppercase;
}
.stats_number:last-of-type:after {
  content: 'mesaje';
  display: block;
  font-size: 11px;
  font-weight: 100;
  text-align: center;
  text-transform: uppercase;
}
.stats_number + br {
  display: none;
}
.stats_number {
  display: inline-block;
  margin: 0 8px;
}
.imgholder{
      position:relative;
      width:120px;
      height:120px;
      border-radius:100px;
      float:left;
      margin:40px 30px;
    }
    /* thumbnails style */
    .imgholder img{
      position:absolute;
      left:0;
      top:0;
      width:120px;
      height:120px;
      z-index:5;
      border-radius:100px;
      -moz-border-radius:100px;
      -webkit-border-radius:100px;
      opacity:0.3;
      filter: alpha(opacity = 30);
      box-shadow:0 0 5px #000;
      -moz-box-shadow:0 0 5px #000;
      -webkit-box-shadow:0 0 5px #000;
    
    transform: scale(0.5,0.5);
      -ms-transform: scale(0.5,0.5);
      -moz-transform: scale(0.5,0.5);
      -webkit-transform: scale(0.5,0.5);
    
    transition:
          opacity 1s,
          transform 1s ease-in-out 0.3s;
      -moz-transition:
          opacity 1s,
          -moz-transform 1s ease-in-out 0.3s;
      -webkit-transition:
          opacity 1s,
          -webkit-transform 1s ease-in-out 0.3s;
    }
    .imgholder:hover img{
      opacity:1;
      filter: alpha(opacity = 100);
      transform: scale(1,1);
      -ms-transform: scale(1,1);
      -moz-transform: scale(1,1);
      -webkit-transform: scale(1,1);
    }
    .imgholder figcaption{
      position:absolute;
      left:-5px;
      top:40%;
      width:130px;
      color:#004E87;
      font-weight:bold;
      text-shadow:-1px -1px 0 #fff;
      z-index:4;
    
    transition:
          top 0.5s ease-out;
      -moz-transition:
          top 0.5s ease-out;
      -webkit-transition:
          top 0.5s ease-out;
    }
    .imgholder:hover figcaption{
      top:120%;
    }
    /* decorations style */
    .imgholder .circle{
      position:absolute;
      border-radius:100px;
      -moz-border-radius:100px;
      -webkit-border-radius:100px;
    }
    .imgholder .outer1{
      top:-8px;
      left:-8px;
      width:120px;
      height:120px;
      z-index:2;
      border:8px solid;
      border-color:#DEEBFC;
      box-shadow:0 0 3px #AFD3FF;
      -moz-ox-shadow:0 0 3px #AFD3FF;
      -webkit-box-shadow:0 0 3px #AFD3FF;
      background: #ffffff;
      background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #e2efff 100%);
      background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(100%,#e2efff));
      background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
      background: -o-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
      background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
      background: radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2efff',GradientType=1 );
      transform:rotate(90deg);
      -ms-transform:rotate(90deg);
      -moz-transform:rotate(90deg);
      -webkit-transform:rotate(90deg);
      transition:
          transform 1.8s ease-in-out,
          box-shadow 1s ease-out,
          border-color 1.5s;
      -moz-transition:
          -moz-transform 1.8s ease-in-out,
          -moz-box-shadow 1s ease-out,
          border-color 1.5s;
      -webkit-transition:
          -webkit-transform 1.8s ease-in-out,
          -webkit-box-shadow 1s ease-out,
          border-color 1.5s;}
    .imgholder:hover .outer1{
      border-color:#0088EA #7FC9FF #0088EA #7FC9FF;
      box-shadow:0 0 10px #0285E2;
      -moz-box-shadow:0 0 10px #0285E2;
      -webkit-box-shadow:0 0 10px #0285E2;
      transform:rotate(-10deg);
      -ms-transform:rotate(-10deg);
      -moz-transform:rotate(-10deg);
      -webkit-transform:rotate(-10deg);}
    .imgholder .outer2{
      top:-18px;
      left:-18px;
      width:136px;
      height:136px;
      z-index:1;
      border:10px solid;
      border-color: #D6E5FC #9BC8FF #D6E5FC #9BC8FF;
      box-shadow:0 0 20px #8EB9FF;
      -moz-box-shadow:0 0 20px #8EB9FF;
      -webkit-box-shadow:0 0 20px #8EB9FF;
      opacity:0;
      filter: alpha(opacity = 0);
      transform: scale(1.3,1.3) rotate(180deg);
      -ms-transform: scale(1.3,1.3) rotate(180deg);
      -moz-transform: scale(1.3,1.3) rotate(180deg);
      -webkit-transform: scale(1.3,1.3) rotate(180deg);
      transition:
          opacity 0.5s,
          transform 0.7s ease-out;
      -moz-transition:
          opacity 0.5s,
          -moz-transform 0.7s ease-out;
      -webkit-transition:
          opacity 0.5s,
          -webkit-transform 0.7s ease-out;}
    .imgholder:hover .outer2{
      opacity:0.9;
      filter: alpha(opacity = 90);
      transform: scale(1,1) rotate(-10deg);
      -ms-transform: scale(1,1) rotate(-10deg);
      -moz-transform: scale(1,1) rotate(-10deg);
      -webkit-transform: scale(1,1) rotate(-10deg);}
ul#pun-legend{display:none}
div.main-head, div.main-foot {
  background:#2c82c9 !important;
 -moz-border-radius-topleft: 2px;
 -moz-border-radius-topright: 2px;
 -webkit-border-top-left-radius: 2px;
 -webkit-border-top-right-radius: 2px;
 -o-border-top-left-radius: 2px;
 -o-border-top-right-radius: 2px;
 -ms-border-top-left-radius: 2px;
 -ms-border-top-right-radius: 2px;
 border-top-left-radius: 2px;
 border-top-right-radius: 2px; }
  .pun-crumbs {
background : none 0% 0% repeat scroll rgb(239, 241, 243);
border : rgb(217, 219, 221) solid 1px;
border-radius : 5px 5px 5px 5px;
box-shadow : 0 0 3px rgba(109, 119, 237, 0.2);
clear : both;
font-size : 11px;
overflow : hidden;
margin : 0 1px 1em;
padding : 0.2em 1em;
}
.pun-crumbs p {
color : rgb(102, 102, 102);
font-size : 1.11em;
line-height : 1.5;
}
p.crumbs a {
background : url("http://i57.servimg.com/u/f57/14/89/34/10/second10.png") 100% center no-repeat scroll transparent;
color : rgb(117, 117, 117) !important ;
line-height : 30px;
padding : 10px 20px 10px 12px;
margin-left : -12px;
text-shadow : 0 1px 0 rgb(255, 255, 255);
}
p.crumbs a:hover {
background-position : 100% -1px;
border-radius : 3px 0 0 3px;
color : rgb(34, 34, 34);
text-shadow : 0 1px 0 rgb(255, 255, 255);
}
p.crumbs a:active {
background-position : 100% -86px;
border-radius : 3px 0 0 3px;
color : rgb(34, 34, 34);
text-shadow : 0 1px 0 rgb(255, 255, 255);
}
p.crumbs{display:inline !important;}
#panel .upper a.login,
#panel .upper a.lost_password {
 padding: 9px 14px 8px 12px;
    margin-left: 25px;
    font-weight: 300;
    background: #2C82C9; }

#panel .upper a.register {
 padding: 9px 14px 8px 12px;
    margin-left: 5px;
    font-weight: 300;
    background: #d98B3a; }

#panel .upper a.login:hover { background: #6e88ea; color: #333; }
#panel .upper a.register:hover { background: #fcb941; color: #444; }

#panel .lower ul.panel_links { float: right; }
#panel .lower ul.user_links { float: left; }

#panel .lower ul.user_links li a {
 padding: 0;
 padding-right: 5px;
 background-image: none; }

#panel .upper {
 background: #262E38;
 color: #fff;
 clear: both;
 padding: 1.7em 0px 1.8em; }

#panel .upper a:link,
#panel .upper a:visited,
#panel .upper a:active { color: #fff; }
#panel .upper a:hover { color: #dbd880; text-decoration: none; }

#panel .lower {
 background: #efefef;
 color: #999;
 border-bottom: 1px solid #e3e3e3;
 padding: 0.725em;
    padding-top: 0.875em; }

#panel .lower a:link,
#panel .lower a:visited,
#panel .lower a:hover,
#panel .lower a:active { color: #666; }

.float_left { float: left; }
.float_right { float: right; }


body {
line-height: 1.4;
 margin: 0;
 font-family: Sans-Serif, Arial, "Open Sans", Tahoma;
 font-size: 13px;
 overflow-y: scroll; }

a:link {
 transition: all 0.25s ease !important;
 -webkit-transition: all 0.25s ease !important;
 -moz-transition: all 0.25s ease !important;
 -o-transition: all 0.25s ease !important;
 -ms-transition: all 0.25s ease !important;
 color: #3c699c;
 text-decoration: none; }

a:visited {
 color: #0072bc;
 text-decoration: none; }

a:hover,
a:active { color: #00aced; }


.wrapper {
 width: 85%;
 min-width: 970px;
 max-width: 1500px;
 margin: auto auto; }
#logo {
 background: #eceef0 url(//hostingfg.esy.es/forum/images/flatty/hbg4.png) no-repeat 0% 5%;
 background-size: cover;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 -ms-background-size: cover;
 padding: 6em 0px 4.725em 0px; }


#content {
 width: auto !important;
 padding: 40px 10px;
 overflow: hidden;
 background: rgb(236, 238, 240); }

#footer { clear: both; }
#footer ul.menu {
 margin: 0;
 padding: 0;
 list-style: none; }

#footer ul.menu li {
 margin: 0 5px;
 display: inline; }

#footer .upper {
 background: #efefef;
 border-top: 1px solid #bbb;
 border-bottom: 1px solid #bbb;
 padding: 6px;
 font-size: 12px;
 overflow: hidden; }

#footer a:link,
#footer a:visited,
#footer a:hover,
#footer a:active { color: #777; }

#footer .upper .language {
 float: right;
 margin: -1px;
 margin-left: 15px; }

#footer .upper .language select { border-color: #ccc; }

#footer .upper .theme {
 float: right;
 margin: -1px;
 margin-left: 15px; }

#footer .upper .theme select { border-color: #ccc; }
#footer .upper ul.bottom_links {
 float: none;
 margin: 8px -4px 7px; }

#footer .uppermid {
 overflow: hidden;
 padding: 2.5em 0px 2.8em;
 color: #aaa;
 font-size: 13px;
 background: #071b1e; }

#footer .uppermid a:link,
#footer .uppermid a:visited { color: #676767; }
#footer .uppermid a:hover,
#footer .uppermid a:active { color: #555; }

#footer .lower {
 color: #888;
 padding: 3em 0px 2.1em;
 overflow: hidden;
 font-size: 12px;
 background: #282830; }

#footer .lower a:link,
#footer .lower a:visited { color: #676767; }
#footer .lower a:hover,
#footer .lower a:active { color: #555; text-decoration: none; }

#header ul.menu {
 text-align: right;
 margin: 0;
 padding: 0;
 list-style: none; }

#header ul.menu li {
 margin: 0 4px;
 display: inline; }

#header ul.menu li a {
 padding-left: 20px;
 display: inline-block;
 color: #fff;
 line-height: 16px;
 font-family: "Open Sans", Sans-serif, Arial; }

#logo ul.top_links {
 text-align: right;
 margin: -10px 5px 0 0; }

#panel .upper a.logout {
 font-weight: bold;
 background: url(images/headerlinks_sprite.png) right -80px no-repeat;
 padding-right: 20px;
 margin-left: 10px; }

#footer .lower #smedia {
 float: right;
 color: #999;
 margin-top: -7px; }

.footer-left {
 margin-top: 7px;
 float: left;
 width: 46%; }

.footer-logo {
 padding: 21px 25px 0px 0px;
 height: 110px; }

.footer-menu {
 float: right;
 margin-left: 11em; }

.footer-head {
 font-family: "Open Sans", Sans-Serif, Arial;
 font-size: 17px;
 color: #2980b9;
 text-transform: uppercase;
 padding-bottom: 10px;  }

.footer-menu:last-child { margin-left: 0em !important; }
.navigation {
 margin-bottom: 15px;
 color: #fff;
 border-radius: 1px;
 -webkit-border-radius: 1px;
 -moz-border-radius: 1px;
 -o-border-radius: 1px;
 -ms-border-radius: 1px;
 font-family: "Open Sans", Sans-Serif, Arial;
 font-size: 13px;
 background: #a19c69;
 padding: 1.175em 1.175em 1.075em 1.275em; }

.navigation a:link { text-decoration: none; color: #fff !important; }
.navigation a:visited { text-decoration: none; }

.navigation a:hover,
.navigation a:active { text-decoration: underline; }
.navigation a:focus { color: #ccc; }
.navigation .active i:before { content: "\f015"; color: #fff; }

.navigation .active {
 font-weight: 900;
 color: #fff;
 font-size: 13px; }


form#qjump{display:none !important;}

Please do not remove the copyright in the footer, else you'll be reported to FM. Cool

Powered by PunBB
Currently 0 users have thanked Andrei34 for this post:

2
Offline

  Shadow

Shadow
Administrator
Administrator
[sucesso="Skin Accepted"]We have reviewed your skin and decided to put it as a valid share, thank you for helping the PunBB Design.

Points are added accordingly to your account.[/sucesso]

Powered by PunBB
Currently 0 users have thanked Shadow for this post:

3
Offline

  Mimóza

Mimóza
Punbb Rookie
Punbb Rookie
This looks pretty good and trendy! With some customizations I can see myself using this. Very Happy Thanks! Very Happy

Powered by PunBB
Currently 0 users have thanked Mimóza for this post:

4
Offline

  aEEk.#

aEEk.#
Punbb Rookie
Punbb Rookie
look wonderful. but the rest of templates?

Powered by PunBB
Currently 0 users have thanked aEEk.# for this post:

5
Offline

  Ionutz

Ionutz
Punbb Rookie
Punbb Rookie
Nice !

Powered by PunBB
Currently 0 users have thanked Ionutz for this post:

6
Offline

  CyberCore12

CyberCore12
Newbie
Newbie
ty

Powered by PunBB
Currently 0 users have thanked CyberCore12 for this post:

7
Offline

  Abdalah tupe

Abdalah tupe
Punbb Rookie
Punbb Rookie
Could you add A worked example , PLz?

Powered by PunBB
Currently 0 users have thanked Abdalah tupe for this post:

8
Offline

  Jack Knows

Jack Knows
Punbb Rookie
Punbb Rookie
Nice job on the template edits for this skin.

Powered by PunBB
Currently 0 users have thanked Jack Knows for this post:

9
Offline

  WinaTickets

WinaTickets
Punbb Rookie
Punbb Rookie
tahnks Smile

Powered by PunBB
Currently 0 users have thanked WinaTickets for this post:

10
Offline

  Sponsored content



Powered by PunBB
Currently 0 users have thanked Sponsored content for this post:

View previous topic View next topic Back to top Message [Page 1 of 1]


Topic URL's

URL
BBcode
HTML

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