Mesto za vaše social profile

Pogledaj prethodnu temu Pogledaj sledeću temu Ići dole

Mesto za vaše social profile

Počalji od Mr.Pixy taj Ned Dec 18, 2011 5:37 am

Mesto za vaše social profile

Ukoliko želite da na vašem forumu budu social profili, ovo je pravi tut za vas! Pa da krenemo

Otvorite:

AP-->Display-->Colors-->CSS

I na kraj CSS-a
dodajte ovaj kod:
Kod:
.panel {
position: absolute;
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: absolute;
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(http://i45.servimg.com/u/f45/15/95/60/34/plus12.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: absolute;
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(http://i45.servimg.com/u/f45/15/95/60/34/plus12.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(http://i45.servimg.com/u/f45/15/95/60/34/minus12.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;
}

Sada dodajemo kod koji će označiti mesto tj. biće na indexu foruma

Kod koji ide AP-->Display-->Opšti--> i onda u hompage message:

Kod:
<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>

Sada smo dodali na početnu stranu vašeg foruma, ne na portal nego na index

Sada ćemo dodavati kod u javascript
Idite u
AP-->Modules-->Javascript codes management--> Create new javascript i podesite kao na slici:
[You must be registered and logged in to see this image.]

A u Javascript Code * dodajte ovo:

Kod:
$(document).ready(function(){
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});

Kada ste pritisnuli submit vratite se na Javascript codes management
I podesite
Enable Javascript code management : Da i pošaljite

[You must be registered and logged in to see this image.]

Krajnji rezultat je ovaj:

[You must be registered and logged in to see this image.]

A kada menjate... Sve to menjate u AP-->Display-->Opšti--> i onda u hompage message

Zvanični tutorijal se nalazi na help.forumotion.com
Ali ovo je izmenjena verzija tutorijala i zvanični za Design4 U

avatar
Mr.Pixy
Pomoćnik
Pomoćnik

Broj poruka Broj poruka : 538
D4U Novac D4U Novac : 421
Reputacija Reputacija : 2
Godina Godina : 20
Lokacija Lokacija : New Yourk
Poso/dokolice Poso/dokolice : Kodiranje,photosho,CECAAAA


Pogledaj profil korisnika http://www.tutorijali.netii.net

Nazad na vrh Ići dole

Re: Mesto za vaše social profile

Počalji od MRKO taj Ned Dec 18, 2011 6:39 am

Jesi li ti postavio ovu tabelu za d4u tut ili neko drugi?
avatar
MRKO
Administrator
Administrator

Broj poruka Broj poruka : 3710
D4U Novac D4U Novac : 5149
Reputacija Reputacija : 40
Godina Godina : 20
Lokacija Lokacija : drowned world


Pogledaj profil korisnika http://www.design4-u.net

Nazad na vrh Ići dole

Re: Mesto za vaše social profile

Počalji od Prince. taj Ned Dec 18, 2011 6:55 am

Ja ne kontam svrhu ovog al je interesantno Smile


[You must be registered and logged in to see this image.]
I LIVE TO LOVE
avatar
Prince.
Dizajner
Dizajner

Broj poruka Broj poruka : 1901
D4U Novac D4U Novac : 2116
Reputacija Reputacija : 3
Godina Godina : 21
Lokacija Lokacija : Stol'ca :P
Poso/dokolice Poso/dokolice : Umjetnost :)


Pogledaj profil korisnika http://we-are-teens.com/

Nazad na vrh Ići dole

Re: Mesto za vaše social profile

Počalji od Mr.Pixy taj Ned Dec 18, 2011 8:18 am

Ja sam postavio. A Man'dem ovo je za sve one admine koji imaju za svoj forum facebook stranice, youtube profile, twitter profile, formspring itd.
avatar
Mr.Pixy
Pomoćnik
Pomoćnik

Broj poruka Broj poruka : 538
D4U Novac D4U Novac : 421
Reputacija Reputacija : 2
Godina Godina : 20
Lokacija Lokacija : New Yourk
Poso/dokolice Poso/dokolice : Kodiranje,photosho,CECAAAA


Pogledaj profil korisnika http://www.tutorijali.netii.net

Nazad na vrh Ići dole

Re: Mesto za vaše social profile

Počalji od i love hm taj Pet Dec 30, 2011 10:03 am

zanimljivo
avatar
i love hm
Član
Član

Broj poruka Broj poruka : 162
D4U Novac D4U Novac : 46
Reputacija Reputacija : 0
Godina Godina : 21
Lokacija Lokacija : San Francisko U.S.A. bitches!!
Poso/dokolice Poso/dokolice : *nothing*


Pogledaj profil korisnika http://green-day-serbia.forumsr.net/

Nazad na vrh Ići dole

Re: Mesto za vaše social profile

Počalji od Sponsored content


Sponsored content


Nazad na vrh Ići dole

Pogledaj prethodnu temu Pogledaj sledeću temu Nazad na vrh


 
Dozvole ovog foruma:
Ne možete odgovarati na teme u ovom forumu