AcasaAcasa  FacebookFacebook  CalendarCalendar  FAQFAQ  CautareCautare  MembriMembri  GrupuriGrupuri  InregistrareInregistrare  ConectareConectare  



 
NewGames • Suntem in redeschidere!
NewGames • suntem in cautare de staff. Alatura-te si tu noua si ajuta-ne cu ceea ce poti ! Click aici

Distribuiţi|

Design elegant pentru citate

Vezi subiectul anterior Vezi subiectul urmator In jos
AutorMesaj
Administrator
avatar

Mesaje : 416
Varsta : 19
Localizare : Seini
MesajSubiect: Design elegant pentru citate Mier Apr 30, 2014 2:11 pm

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:

[Trebuie sa fiti înscris şi conectat pentru a vedea această imagine]

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:

[Trebuie sa fiti înscris şi conectat pentru a vedea această imagine]

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!
Sus In jos
Vezi profilul utilizatorului

Subiecte similare

-
t Cod HTML pentru Flashscore
Pagina 1 din 1

Permisiunile acestui forum:Nu puteti raspunde la subiectele acestui forum
 :: Suport / Personalizare & IT :: Tutoriale-
Copyright © 2014 - 2015 NEWGAMES.DUST.TV. Toate drepturile rezervate.