EVICT ROMÂNIA

IT'S ALL ABOUT GAMING


Nu sunteti conectat. Conectati-va sau inregistrati-va

Butoane si link-uri header

In jos  Mesaj [Pagina 1 din 1]

1 Butoane si link-uri header la data de Sam Mar 10, 2018 9:51 pm

TyZu

avatar
Adminstrator
Salut.In tuturoialul acesta va voi arata cum va bagati ca in imagine



Pasi:

1.Panou de Administrare ~> Afisare ~> Templeat-uri ~> General ~> Index_body, sau Index_box, adăugați următoru cod:
Cod:
<div class="cards">
         <a class="card yellow-card" href="/LINK"><em class="fa fa-life-ring"></em>TEXT</a><a class="card red-card" href="/LINK"><em class="fa fa-bullhorn"></em>TEXT</a><a class="card green-card" href="/LINK"><em class="fa fa-comments"></em>TEXT</a>        
 <div class="clear">
                
 </div>
</div>
2.Panou de Administrare ~> Afisare ~> Imagini si culori ~> Culori ~> Foaie de stil CSS, adăugați următoarele cod-uri:
Cod:
/*card galben*/
.cards .card.yellow-card {
    background-color: #e6ad1d;
    border-bottom: 3px solid #c79616;
    text-shadow: 0 0 1px #c79616;
    margin-right: -0.5%;
}
.cards .card {
    box-sizing: border-box;
    float: left;
    font-family: sans-serif;
    font-size: 18px;
    padding: 20px 30px;
    width: 31% !important;
    color: white;
    margin-top: 5px;
}
Cod:
/*card roșu*/
.cards .card.red-card {
    background-color: #E54732;
    border-bottom: 3px solid #C62F1A;
    text-shadow: 0 0 1px #C62F1A;
    margin-left: 3.5%;
    width: 32%;
}
.cards .card {
    box-sizing: border-box;
    float: left;
    font-family: sans-serif;
    font-size: 18px;
    padding: 20px 30px;
    width: 31% !important;
    color: white;
    margin-top: 5px;
}
Cod:
/*card verde*/
.cards .card.green-card {
    background-color: #71be47;
    border-bottom: 3px solid #60a53a;
    text-shadow: 0 0 1px #60a53a;
    margin-left: 3.8%;
    width: 32.5%;
}
.cards .card:hover {
    opacity: .9;
}
.cards .card {
    box-sizing: border-box;
    float: left;
    font-family: sans-serif;
    font-size: 18px;
    padding: 20px 30px;
    width: 31% !important;
    color: white;
    margin-top: 5px;
}
3.Panou de Administrare ~> Afisare ~> Templeat-uri ~> General ~> Index_body, adăugați următoru cod:
Cod:
 <div class="maininformations">
               
 <div class="main-left">
               
 <h2>
        TEXT     
 </h2>
               
 <ul class="fa-ul">
               
 <li>
        <em class="fa-li fa fa-file-text-o"></em><a href="LINK">TEXT</a>       
 </li>
               
 <li>
        <em class="fa-li fa fa-search"></em><a href="/search">Funcția "<em><strong>Căutare</strong></em>"</a>       
 </li>
               
 <li>
        <em class="fa-li fa fa-info-circle"></em><a href="LINK">TEXT</a>       
 </li>
               
 <li>
        <em class="fa-li fa fa-users"></em><a href="LINK">TEXT</a>       
 </li>
               
 </ul>
               
 <ul class="fa-ul mini-screen display-none">
               
 <li>
        <em class="fa-li fa fa-file-text-o"></em><a href="LINK">TEXT</a>       
 </li>
               
 <li>
        <em class="fa-li fa fa-search"></em><a href="/search">Cautare</a>       
 </li>
               
 <li>
        <em class="fa-li fa fa-info-circle"></em><a href="LINK">TEXT</a>       
 </li>
               
 <li>
        <em class="fa-li fa fa-users"></em><a href="LINK">LINK</a>       
 </li>
               
 </ul>
               
 </div>
               
 <div class="main-right">
               
 <h2>
        TEXT     
 </h2>
               
 <ul class="main-news">
 
 <li>
        <span class="main-news-time"><em class="fa fa-clock-o"></em> DATA</span><span class="main-news-title"><a href="LINK"><em aria-hidden="true" class="fa fa-paper-plane"></em> TEXT</a></span>       
 </li>
 
 <li>
        <span class="main-news-time"><em class="fa fa-clock-o"></em> DATA</span><span class="main-news-title"><a href="LINK"><em aria-hidden="true" class="fa fa-envelope-o"></em> TEXT</a></span>     
 </li>
           
 <li>
        <span class="main-news-time"><em class="fa fa-clock-o"></em> DATA</span><span class="main-news-title"><a href="LINK"><em aria-hidden="true" class="fa fa-mobile"></em> TEXT</a></span>       
 </li>
               
 <li>
        <span class="main-news-time"><em class="fa fa-clock-o"></em> DATA</span><span class="main-news-title"><a href="LINK"><em aria-hidden="true" class="fa fa-tree"></em> TEXT</a></span>       
 </li>
               
 </ul>
               
 </div>
               
 <div class="clear">
               
 </div>
</div>
4.Panou de Administrare ~> Afisare ~> Imagini si culori ~> Culori ~> Foaie de stil CSS, adăugați următoarele cod-uri:
Cod:
.main-left {
    float: left;
    width: 31%;
}
.main-left, .main-right {
    border: 10px solid #369fcf;
    box-sizing: border-box;
    font-family: sans-serif;
    font-size: 14px;
    line-height: 25px;
    margin: 20px 0 0;
    min-height: 179px;
}
.main-right {
    float: right;
    width: 66%;
}
.main-left, .main-right {
    border: 10px solid #369fcf;
    box-sizing: border-box;
    font-family: sans-serif;
    font-size: 14px;
    line-height: 25px;
    margin: 20px 0 0;
    min-height: 179px;
}
.main-news-time {
    color: #555;
    float: right;
    font-size: .9em;
    display: inline-block;
    width: 25%;
    text-align: right;
    padding-right: 5px;
    box-sizing: border-box;
}

# Ca să funcționeze iconițele de la amândouă script-uri, urmați pasu de mai jos:
Panou de Administrare ~> Afisare ~> Templeat-uri ~> General ~> overall_header:
Cod:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

http://evict.forumgratuit.ro

Sus  Mesaj [Pagina 1 din 1]

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum