Forum gratuit: forum de suport al utilizatorilor
Doriți să reacționați la acest mesaj? Creați un cont în câteva clickuri sau conectați-vă pentru a continua.
Forum gratuit: forum de suport al utilizatorilor

Forum gratuit: ajutor și asistență pentru utilizatorii Forumgratuit. Creează și administrează un forum performant. Descoperă funcţionalităţile, tutorialele și ponturile de pe Forumul de suport!

Design elegant pentru citate

Forum gratuit: forum de suport al utilizatorilor ::  Despre Forumgratuit ::   :: Tutoriale

Vezi subiectul anterior Vezi subiectul urmator In jos

  • 0

Tutorial Design elegant pentru citate

Mesaj Scris de Zeus Vin Apr 04, 2014 2:51 pm

Design elegant pentru citate

Bun gasit,

In acest tutorial am sa va arat cum puteti realizat un aspect elegant pentru citatele forumului dvs. Tutorialul se aplica versiunilor de forum phpBB3, punBB si Invision, deci haideti sa incepem.  

Adaugati in:
Design elegant pentru citate Go-jum10Panou de administrare => Afisare => Imagini si culori => Culori => Foaie de stil css

Demonstratie punBB:
Design elegant pentru citate LrTmAGr

PunBB:
Cod:
/* Aspect citate pentru forumurile punBB */
.postmain blockquote{
background:none;
border:0!important;
position:relative;
overflow:hidden;
min-height:35px!important;
margin:10px 0;
padding:11px 0 6px 10px;
font-size:14px;
line-height:18px;
color:#504536;
font-family:Georgia;
font-style:italic;
}
.postmain blockquote div {
margin-top:7px;
margin-left:6px;
-moz-border-radius:8px;
-khtml-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
border:solid 1px #D5DEE5;
background:url(http://i58.servimg.com/u/f58/14/80/95/87/spback10.png) bottom left repeat-x #FFF;
max-width:91%;
padding:15px 20px 10px 23px;
position:relative;
}
.postmain blockquote div:before {
content:'';
background:url(http://i58.servimg.com/u/f58/14/80/95/87/openq10.png) top left no-repeat transparent;
position:absolute;
width:16px;
height:16px;
top:15px;
left:3px;
}
.postmain blockquote div:after {
content:'';
position:absolute;
z-index:100;
background:url(http://i58.servimg.com/u/f58/14/80/95/87/closeq10.png) top left no-repeat transparent;
width:16px;
height:16px;
right:4px;
bottom:4px;
}
.postmain blockquote div cite {
font-style:normal;
font-weight:700;
display:block;
font-size:13px;
color:#fff;
background:url(http://i58.servimg.com/u/f58/14/80/95/87/qhm10.png) top left repeat-x transparent;
height:32px;
position:absolute;
z-index:100;
top:-15px;
text-shadow:#000 1px 1px;
left:0px;
}
.postmain blockquote div cite:before {
content:'';
position:absolute;
z-index:-1;
background:url(http://i58.servimg.com/u/f58/14/80/95/87/qho10.png) no-repeat 0 0 transparent;
width:31px;
height:38px!important;
left:-13px;
top:0;
}
.postmain blockquote div cite:after {
content:'';
background:url(http://i58.servimg.com/u/f58/14/80/95/87/qhc10.png) no-repeat 0 0 transparent;
position:absolute;
right:-10px;
width:10px;
height:32px;
top:0;
}

Demonstratie invision si phpBB3:
Design elegant pentru citate EFQ46Ip

Invision:
Cod:
/* Aspect citate pentru forumurile invision */
blockquote{
background:none;
border:0!important;
min-height:35px!important;
padding:14px 30px 5px 8px;
font-size:14px;
line-height:17px;
color:#504536;
font-family:Georgia;
font-style:italic;
}
blockquote div {
border-radius:8px;
border:solid 1px #B38000;
background:url(http://i58.servimg.com/u/f58/14/80/95/87/7699510.jpg) bottom left repeat-x #FFFEF9;
max-width:92%;
padding:10px 20px 10px 20px;
position:relative;
}
blockquote div:before {
content:'';
background:url(http://i58.servimg.com/u/f58/14/80/95/87/openq12.png) top left no-repeat transparent;
position:absolute;
width:11px;
height:11px;
top:15px;
left:3px;
}
blockquote div:after {
content:'';
position:absolute;
z-index:100;
background:url(http://i58.servimg.com/u/f58/14/80/95/87/closeq12.png) top left no-repeat transparent;
width:11px;
height:11px;
right:4px;
bottom:2px;
}

blockquote div cite {
font-style:normal;
font-weight:700;
display:block;
font-size:13px;
color:#000;
background:url(http://i58.servimg.com/u/f58/14/80/95/87/qhm_210.png) top left repeat-x transparent;
height:32px;
position:absolute;
z-index:100;
top:-10px;
text-shadow:#fff 1px 1px;
left:27px;
}
blockquote div cite:before {
content:'';
position:absolute;
z-index:-1;
background:url(http://i58.servimg.com/u/f58/14/80/95/87/qho_210.png) no-repeat 0 0 transparent;
width:31px;
height:38px!important;
left:-31px;
top:0px;
}
blockquote div cite:after {
content:'';
background:url(http://i58.servimg.com/u/f58/14/80/95/87/qhc_210.png) no-repeat 0 0 transparent;
position:absolute;
right:-10px;
top:0px;
width:10px;
height:32px;
}

PhpBB3:
Cod:
/* Aspect citate pentru forumurile phpBB3 */
blockquote blockquote,blockquote blockquote
blockquote {
background:none;
border:0!important;
}
blockquote{
background:none;
border:0!important;
position:relative;
overflow:hidden;
min-height:35px!important;
margin:10px 0;
padding:14px 0 10px 8px;
font-size:14px;
line-height:18px;
color:#504536;
font-family:Georgia;
font-style:italic;
}
blockquote div {
margin-top:7px;
margin-left:6px;
-moz-border-radius:8px;
-khtml-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
border:solid 1px #B38000;
background:url(http://i58.servimg.com/u/f58/14/80/95/87/7699510.jpg) bottom left repeat-x #FFFEF9;
max-width:92%;
padding:10px 20px 10px 20px;
position:relative;
}
blockquote div:before {
content:'';
background:url(http://i58.servimg.com/u/f58/14/80/95/87/openq12.png) top left no-repeat transparent;
position:absolute;
width:11px;
height:11px;
top:15px;
left:3px;
}
blockquote div:after {
content:'';
position:absolute;
z-index:100;
background:url(http://i58.servimg.com/u/f58/14/80/95/87/closeq12.png) top left no-repeat transparent;
width:11px;
height:11px;
right:4px;
bottom:2px;
}
blockquote div cite {
font-style:normal;
font-weight:700;
display:block;
font-size:13px;
color:#000;
background:url(http://i58.servimg.com/u/f58/14/80/95/87/qhm11.png) top left repeat-x transparent; */
height:32px;
line-height:24px;
position:absolute;
z-index:100;
top: -18px;
text-shadow:#fff 1px 1px;
left:0px;
}
blockquote div cite:before {
content:'';
position:absolute;
z-index:-1;
background:url(http://i58.servimg.com/u/f58/14/80/95/87/qho11.png) no-repeat 0 0 transparent;
width:31px;
height:38px!important;
left:-13px;
top:0;
}
blockquote div cite:after {
content:'';
background:url(http://i58.servimg.com/u/f58/14/80/95/87/qhc11.png) no-repeat 0 0 transparent;
position:absolute;
right:-10px;
width:10px;
height:32px;
}

Si asta a fost tot!  Felicitari

Tutorial realizat de Zeus, actualizat de catre Petronel
Numai bine,
Echipa Forumgratuit
Zeus

Zeus
Membru onorific
Membru onorific

Mesaje : 4160
Varsta : 27
Localizare : Bucuresti, Romania
Data înscrierii : 19/02/2012
Mulțumiri : 644
Google Chrome phpBB3

https://github.com/zeusmaximus
Zeus a fost mulțumit de autorul acestui subiect.

Vezi subiectul anterior Vezi subiectul urmator Sus

- Subiecte similare

Forum gratuit: forum de suport al utilizatorilor ::  Despre Forumgratuit ::   :: Tutoriale

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum