Design elegant pentru citate

Vezi subiectul anterior Vezi subiectul urmator In jos

Tutorial Design elegant pentru citate

Mesaj Scris de Zeus la data de Vin 4 Apr - 14:51

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:
Panou de administrare => Afisare => Imagini si culori => Culori => Foaie de stil css

Demonstratie punBB:


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:


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 scris de spiridus, tradus de Zeus in limba romana.

Copyright ˆ Forumgratuit.ro Nici o parte a acestui tutorial nu poate fi reprodusa, transmisa sau stocata in orice forma fara acordul scris al detinatorului dreptului de autor, in conformitate cu articolul L122-1 apartinand ICC.
avatar
Zeus
Administrator
Administrator

masculin

Mesaje : 4103
Localizare : Bucuresti, Romania
Data înscrierii : 19/02/2012
Multumiri : 625
Niciun avertisment

https://github.com/zeusmaximus

Sus In jos

Vezi subiectul anterior Vezi subiectul urmator Sus

- Subiecte similare

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum