Design 4 U // Dizajn forum - Veb i grafički dizajn
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Mesto za vaše social profile

Ići dole

Mesto za vaše social profile Empty 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

Mr.Pixy
Mr.Pixy
Pomoćnik
Pomoćnik

Broj poruka Broj poruka : 538
D4U Novac D4U Novac : 421
Reputacija Reputacija : 2
Godina Godina : 22
Lokacija Lokacija : New Yourk
Poso/dokolice Poso/dokolice : Kodiranje,photosho,CECAAAA
Mesto za vaše social profile War1

http://www.tutorijali.netii.net

Nazad na vrh Ići dole

Mesto za vaše social profile Empty 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?
MRKO
MRKO
Administrator
Administrator

Broj poruka Broj poruka : 3710
D4U Novac D4U Novac : 5149
Reputacija Reputacija : 40
Godina Godina : 23
Lokacija Lokacija : drowned world
Mesto za vaše social profile War1

http://www.design4-u.net

Nazad na vrh Ići dole

Mesto za vaše social profile Empty 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
Prince.
Prince.
Dizajner
Dizajner

Broj poruka Broj poruka : 1901
D4U Novac D4U Novac : 2116
Reputacija Reputacija : 3
Godina Godina : 24
Lokacija Lokacija : Stol'ca :P
Poso/dokolice Poso/dokolice : Umjetnost :)
Mesto za vaše social profile War1

http://we-are-teens.com/

Nazad na vrh Ići dole

Mesto za vaše social profile Empty 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.
Mr.Pixy
Mr.Pixy
Pomoćnik
Pomoćnik

Broj poruka Broj poruka : 538
D4U Novac D4U Novac : 421
Reputacija Reputacija : 2
Godina Godina : 22
Lokacija Lokacija : New Yourk
Poso/dokolice Poso/dokolice : Kodiranje,photosho,CECAAAA
Mesto za vaše social profile War1

http://www.tutorijali.netii.net

Nazad na vrh Ići dole

Mesto za vaše social profile Empty Re: Mesto za vaše social profile

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

zanimljivo
i love hm
i love hm
Član
Član

Broj poruka Broj poruka : 162
D4U Novac D4U Novac : 46
Reputacija Reputacija : 0
Godina Godina : 23
Lokacija Lokacija : San Francisko U.S.A. bitches!!
Poso/dokolice Poso/dokolice : *nothing*
Mesto za vaše social profile War1

http://green-day-serbia.forumsr.net/

Nazad na vrh Ići dole

Mesto za vaše social profile Empty Re: Mesto za vaše social profile

Počalji od Sponsored content


Sponsored content


Nazad na vrh Ići dole

Nazad na vrh


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