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!

Diferite coduri CSS pentru Invision

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

Vezi subiectul anterior Vezi subiectul urmator In jos

Tutorial Diferite coduri CSS pentru Invision

Mesaj Scris de Luky Lun Apr 19, 2010 10:57 pm

Diferite coduri CSS pentru Invision

Pentru a schimba un pic aspectul forumului urmareste acest tutorial!

Trebuie cunostinte generale CSS si HTML

La ChatBox


Schimbaţi culoarea de fundal la posturi:

     - Culoarea de fundal pentru linii impare (liniile 1, 3, 5, 7 ...)

Cod:
.chatbox_row_1 {
background-color: #ecf3f7;
}

- Culoarea de fundal pentru linii pare (liniile 2, 4, 6, 8 ...)

Cod:
.chatbox_row_2 {
background-color: #e1ebf2;
}

Modificarea culorii lista membrilor online din chatbox:

Cod:
.memberlist_row_1 {
background-color: #ecf3f7;
}

Modificarea culorii titlul chatbox:

Cod:
.chatbox-title,.chatbox-title a.chat-title {
color: #ffffff !important;
}

Modificarea alinierii a titlului chatbox:

Cod:
.chatbox-title {
float: left;
margin: 0;
padding: 6px 5px 0 5px;
width: 15em;
}

Modificaţi dimensiunea fontului de mesaje din chatbox

Cod:
.chatbox {
font-size: 15px;
}

Mesaje


Schimbaţi culoarea de fundal al postului:

Cod:
.post-container {
background-color: #EE0030;
}

Modificarea culorii scrierea mesajelor, precum şi modele de mesaj:

Cod:
.post-container {
color: #EE0030;
}

Schimbaţi culoarea de fundal a unui mesaj:

Cod:
.postbody {
background-color: #EE0030;
}

Schimbarea profilurilor culoarea de fundal în posturi:

Cod:
.post {
background-color: #EE0030;
}

Modificarea aspectului de separare între două mesaje într-un subiect:

Cod:
.popmenubutton-new-out a {
background-color: #EE0030;
}

Schimbaţi culoarea de fundal a meniului (atunci când sunt deschise):


Cod:
.popupmenu li {
background-color: #F73100;
}

Modificări conturul meniul drop-down (atunci când sunt deschise):
Cod:
.popupmenu {
background-color: #FFFFFF;
}

Schimbaţi culoarea de fundal a barei care conţin link-uri "anterior Vezi topic ˇ Subiectul următor

Cod:
.topic-footer {
background-color: #EE0030;
}

Schimbaţi culoarea de fundal a barei de butoane care conţin moderator, şi permisele

Cod:
.bar {
background-color: #EE0030;
}

Schimbarea culorii textului din bara cu butoane de moderaţie şi a permiselor:

Cod:
.bar {
color: #EE0030;
}

Profil

Schimbaţi culoarea de fundal a profilului:

Cod:
.box-content.profile {
background-color: #EE0030;
}

Modificarea culorii de la bara care conţin numele de autor al unui mesaj pentru vizitatori.

Cod:
#profile-advanced-details .message-header {
background: #EE0030;}

Se determină poziţia numelui de autor, data şi ora, în acelaias bara.

Cod:
#profile-advanced-details .message-date {
float: left;
}

Se determină poziţia de link-uri "Ascunde" şi "Delete" într-un mesaj vizitator.
Cod:
#profile-advanced-details .message-footer {
text-align: left;
}

Determină mărimea din a doua coloană de profil avansate (coloana care conţine un avatar, gradul şi prieteni ...):

Cod:
#profile-advanced-right {
width: 120px;
}

Modificaţi aspectul titluri în fila Statistică al Profil avansate (subiecte, mesaje, informatii ...)

Cod:
#profile-advanced-details .stats-field legend {
font-weight: bold; color: #EE0030;
}

Modificaţi aspectul textului, în special în fila Statistici:

Cod:
#profile-advanced-details .stats-field ul {
text-indent: 10px;
padding: 0;
color: #EE0030;
}

La fel ca şi cea anterioară

Cod:
#profile-advanced-details .stats-field li {
color: #EE0030;
}

Mesaje private

Modificarea culorii fila deschise (Inbox, Sent mail, etc ..)

Cod:
ul.privmsg li {
background-color: #EE0030;
color: #fff;
}

În schimb acest cod de modificări de culoare de alte file, nedeschis:

Cod:
ul.privmsg li a {
background-color: #EE0030;
}

La FAQ

Modificări la cadrul care conţine răspunsul la o întrebare:

Cod:
dl.faq dd p {
border: 1px solid #EE0030;
}

Modificări la bara între două întrebări:

Cod:
dl.faq .question {
border-bottom: 1px solid #EE0030;
}

Lista de membri


Modificări cadru în jurul prezentarea unui profil:

Cod:
.member {
background-color: #fff;
border: 1px solid #EE0030;
}

Schimbare de fundal şi de frontieră din avatar din lista de membri:

Cod:
.member-list .popmenubutton .mini-avatar {
border: 1px solid #EE0030;
background-color: #EE0030;
}

Schimbarea culorii textului din caseta de profil (vizite recente, mesaje, diverse opţiuni de profil):


Cod:
.member p {
color: #EE0030;
}

Amendament la partea de jos a clasei membru (nu se concentreze parte de un profil de fond, ci una în spatele)

Cod:
div.borderwrap .member-list {
background-color: #EE0030;
}

Căutare

Schimbaţi culoarea de fundal:

Cod:
#search_menu {
background-color: #EE0030;
border: 1px solid #ffffff;
}

Schimbare o căutare de culoare de frontieră:

Cod:
#search_menu input.post {
border: 1px solid #EE0030;
}

Modificarea widget "Căutare" şi pagina "Căutare avansată":

Cod:
.advanced-search .search-footer {
background-color: #EE0030;
border-top: 1px solid #ffffff;
}

Sondaj

Schimbarea substanţa a sondajului, o dată votat:


Cod:
.polls {
background-color: #EE0030;
}

Schimbare opţiuni de culoare a sondajului:

Cod:
.polls dl {
color: #EE0030;
}

Smileys

Amendament la marginea cadrului conţin smileys atunci când compuneţi un mesaj

Cod:
.smiley-container {
border: 1px solid;
color: #EE0030;
}

Schimbaţi culoarea de fundal a meniului "Mai multe zambete"

Cod:
.smiley-selector {
background-color: #EE0030;
}

Modificarea culorii de contur a cutiei (care este scris HTML activat, codul BB este activat, etc.)

Cod:
#smiley-box {
background-color: #EE0030;
border: 1px solid #;
}

Trimite un mesaj


Modificarea culorii conturul caseta de text (cadrul care conţine butoanele de formatare)

Cod:
.messaging-box {
background-color: #EE0030;
border: 1px solid #;
}

Modificare marginea cutiei, astfel încât, prin extensie, în partea de jos a casetei, consultaţi Formatarea textului atunci când scrieţi un răspuns:

Cod:
.messaging-box textarea {
border: 2px inset #105289;
}

Bara de navigare


Culoare text, prin extensie este de formatare:

Cod:
#submenu ul li a {
color: #EE0030;
}

Modificări deasupra fundal cursorul peste un element din bara de navigare:

Cod:
#submenu ul li a:hover {
background-color: #EE0030;
}

Modificarea la bara de mai jos bara de navigare (conţinând "Conectat ca clienţi, etc ..)

Cod:
#userlinks {
background-color: #EE0030;
border-bottom: 1px solid #cadceb;
}

La fel de oaspeţi:

Cod:
#userlinks.not-connected {
background-color: #EE0030;
border-bottom: 1px solid #cadceb;
}

Modificarea culorii titlul în pagina de sumar:

Cod:
#navstrip {
color: #EE0030;
}

Banner


Schimbaţi culoarea de fundal în spatele banner-ul:

Cod:
div#logostrip {
background-color: #EE0030;
}


Module şi portal

Schimbare introduce conţine titlul de un widget:

Cod:
.module .maintitle {
padding: 100px;
}

Modificarea scris cu privire la titlul de widget-uri (de exemplu, formatare)

Cod:
.module .maintitle h3 {
float: none;
font-size: 1em;
color: #EE0030;
}

Schimbare widget-uri de text (dar nu, al legăturilor exclamatii):

Cod:
.module .box-content {
color: #EE0030;
}

Schimbare de natura poliţiei modulelor centrale ale portalului:

Cod:
.module .postbody {
padding: 0;
color: #EE0030;
}

Schimbarea de formatare a widget-uri subsol (de exemplu, "Comentarii: 0)

Cod:
.module .postbody .post-footer {
color: #EE0030;
}

Diverse

Modificaţi formatarea "Birthday" casuta "statistici" ...

Cod:
.formsubtitle {
padding: 5px;
color: #EE0030;
}

Modificaţi formatarea descrierea titlul de pe forum (de mai jos sau alături de banner)

Cod:
div#logostrip {
min-height: 70px;
color: #EE0030;
}

Modificaţi formatarea descrierea sub lozinca

Cod:
#site-desc {
margin: 8px;
color: #EE0030;
}

Modificaţi formatarea titlul de pe forum (de lângă sau de mai jos banner)

Cod:
div#logostrip #main-title h1 {
padding-top: 0;
color: #EE0030;
}

Extinderea caseta de intrare pentru e-mail de forma:

Cod:

textarea {
width:650px;
}



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

Luky
Membru onorific
Membru onorific

Mesaje : 3467
Varsta : 36
Localizare : Bucuresti
Data înscrierii : 27/12/2007
Mulțumiri : 25
Internet Explorer phpBB3

Luky a fost mulțumit de autorul acestui subiect.

Vezi subiectul anterior Vezi subiectul urmator Sus

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

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum