Bun venit pe PRO-LEAGUE.RO , pentru a avea un acces total la forum şi pentru a beneficia de :
    Navigarea pe un forum bine pus la punct şi fără nici un fel de întrerupere
    Privilegiul de a-ţi face noi prieteni şi de a învăţa lucruri noi
    Şansa de a face parte din staff şi dintr-o comunitate sigură
    Posibilitatea de a învăţa tot ceea ce nu cunoşti
    Şansa şi sprijinul de a-ţi dezvolta planurile în lumea internetului şi mai mult.

Te invitam să te înregistrezi acum pe forumul nostru, să ne cunoaştem şi să ne începem împreună aventura şi colaborarea pe internet !


 Pagina 1 din 1
[ View Topic Options ] [ ‹‹ | ›› ]
 Subiect: [Tutorial] Adaugare Forum Action
Data mesajului 30 Aug 2019, 19:45
Moderator global
Avatar utilizator
522
Acest tutorial este creeat personal de mine pentru informarea voastra.

Autor: Dkz- aka. Bogdan.

Forum actions este un mod in care arata mai multe informatii despre forum.

Pasul 1:

Intram in Panoul Administrativ, de acolo ne ducem la Styles si deschidem overall_header.html

Pasul 2:

Intre tag-urile adaugati:
Cod:
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>


Pasul 3:

Cautati si adaugati:
Cod:
<div class="panel">
<h3>Sliding Panel</h3>
<p>Here's our sliding panel/drawer made using jQuery with the toggle function and some CSS3 for the rounded corners</p>

<p>This panel could also be placed on the right. This could be particularly useful if, <a href="http://spyrestudios.com" title="SpyreStudios">like me</a>, you have a left-aligned website layout.</p>

<h3>A Little Something About Me</h3>
<img class="right" src="images/jon_image.jpg" alt="Jon Phillips" />
<p>My name's Jon, I'm a freelance designer, blogger, musician. I run SpyreStudios and I specialize in WordPress blogs, CSS, XHTML and PHP</p>

<div style="clear:both;"></div>

<div class="columns">
<div class="colleft">
<h3>Navigation</h3>

<ul>
<li><a href="http://spyrestudios.com/" title="home">Home</a></li>
<li><a href="http://spyrestudios.com/about/" title="about">About</a></li>
<li><a href="http://spyrestudios.com/portfolio/" title="portfolio">Portfolio</a></li>
<li><a href="http://spyrestudios.com/contact/" title="contact">Contact</a></li>
<li><a href="http://spyrestudios.com" title="blog">Blog</a></li>

</ul>
</div>

<div class="colright">
<h3>Social Stuff</h3>
<ul>
<li><a href="http://twitter.com/jophillips" title="Twitter">Twitter</a></li>
<li><a href="http://designbump.com/user/147" title="DesignBump">DesignBump</a></li>

<li><a href="http://digg.com/users/jophillips" title="Digg">Digg</a></li>
<li><a href="http://delicious.com/jon.phillips" title="Del.Icio.Us">Del.Icio.Us</a></li>
<li><a href="http://designmoo.com/users/jonphillips" title="DesignMoo">DesignMoo</a></li>
</ul>
</div>
</div>
<div style="clear:both;"></div>

</div>
<a class="trigger" href="#">infos</a>


Pasul 4:

In stylesheet.css adaugati:
Cod:
.panel {
position: fixed;
top: 50px;
left: 0;
display: none;
background: #000000;
border:1px solid #111111;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
width: 330px;
height: auto;
padding: 30px 30px 30px 130px;
filter: alpha(opacity=85);
opacity: .85;
}

.panel p{
margin: 0 0 15px 0;
padding: 0;
color: #cccccc;
}

.panel a, .panel a:visited{
margin: 0;
padding: 0;
color: #9FC54E;
text-decoration: none;
border-bottom: 1px solid #9FC54E;
}

.panel a:hover, .panel a:visited:hover{
margin: 0;
padding: 0;
color: #ffffff;
text-decoration: none;
border-bottom: 1px solid #ffffff;
}

a.trigger{
position: fixed;
text-decoration: none;
top: 80px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 15px;
font-weight: 700;
background:#333333 url(images/plus.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}

a.trigger:hover{
position: fixed;
text-decoration: none;
top: 80px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 20px;
font-weight: 700;
background:#222222 url(images/plus.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}

a.active.trigger {
background:#222222 url(images/minus.png) 85% 55% no-repeat;
}

.columns{
clear: both;
width: 330px;
padding: 0 0 20px 0;
line-height: 22px;
}

.colleft{
float: left;
width: 130px;
line-height: 22px;
}

.colright{
float: right;
width: 130px;
line-height: 22px;
}

ul{
padding: 0;
margin: 0;
list-style-type: none;
}

ul li{
padding: 0;
margin: 0;
list-style-type: none;
}

hr{
background-color: #333333;
height: 1px;
}









PRO-LEAGUE.RO - SEMNATURA
Imagine

Fight Like The Best Die Like The Rest





 
Afişează mesajele din ultimele:  Sortează după  
 [ 1 mesaj ] 

Cine este conectat

 

Utilizatorii ce navighează pe acest forum: Niciun utilizator înregistrat şi 2 vizitatori


Nu puteţi scrie subiecte noi în acest forum
Nu puteţi răspunde subiectelor din acest forum
Nu puteţi modifica mesajele dumneavoastră în acest forum
Nu puteţi şterge mesajele dumneavoastră în acest forum
Nu puteţi publica fişiere ataşate în acest forum

Căutare după:
Mergi la: