Butoane si link-uri header

Buna seara, as dori sa stiu si eu codurile de la "Asistență"  / "Anunțuri și actualizări" / "Discuții generale" cat si cele de la "Link-uri utile:" "Noutăti:" si as dori sa stiu unde se pun (daca in header sau nu). Multumesc frumos!

Poza:

Bună seara,

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>

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;
}

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>

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;
}

Notă: 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">

*** subiect editat

Numai bine!

Primul cod functioneaza perfect ("Asistență" / "Anunțuri și actualizări" / "Discuții generale") dar am probleme cu cel de al doilea ( "Link-uri utile:" "Noutăti:" ).

Trebuiesc editate linkurile cu numele : TEXT

Lucifer a scris:Trebuiesc editate linkurile cu numele : TEXT

Stiu asta... ma refeream la cu totul alt ceva, de exemplu nu apare acel background unde folosesc h2 (adica la Link-uri utilize / Fisiere PSD) si nici acel background pe "Funcția "Căutare" si "Contact", acel background mai "mort" ma refer, care se vede foarte putin.

in loc de h2 adauga 

Cod:

<div class="text">Continut</div>


<style>

.text{
font-size:20px;}
</style>

Panou de Administrare ~> Afisare ~> Imagini si culori ~> Culori ~> Foaie de stil CSS, adăugați următorele cod-uri:

Cod:

.main-left li:nth-child(2n+1), .main-right li:nth-child(2n+1) {
   background-color: #f6f6f6;
}

Cod:

.main-left>h2, .main-right>h2 {
    background-color: #369fcf;
    color: white !important;
    font-family: sans-serif;
    font-size: 18px;
    margin: 0;
    padding: 0 14px 8px;
}

mihai. a scris:Panou de Administrare ~> Afisare ~> Imagini si culori ~> Culori ~> Foaie de stil CSS, adăugați următorele cod-uri:

Cod:

.main-left li:nth-child(2n+1), .main-right li:nth-child(2n+1) {
   background-color: #f6f6f6;
}

Cod:

.main-left>h2, .main-right>h2 {
    background-color: #369fcf;
    color: white !important;
    font-family: sans-serif;
    font-size: 18px;
    margin: 0;
    padding: 0 14px 8px;
}

Multumesc frumos, rezolvat, se poate inchide!

Manea Andrei a scris:Multumesc frumos, rezolvat, se poate inchide!

cu plăcere!