Jump to content

Tutorial Skinning Ipb 3.1, 3.2, 3.3 & 3.4


Courage

Recommended Posts

  • Moderators

De la început vă spun că tutorialul este lung; de aceea, nu îl pot face pe tot deodată, aşa că o să postez aici când mai încep să fac câte ceva.

În caz că doriţi să faceţi modificări privind anumite culori din designul celor de la IP. Board, respectiv versiunile 3.1, 3.2, 3.3 şi 3.4 , aici vă voi explica cum să modificaţi uşor şi rapid, folosind codul HTML al culorii dorite.

Vreau să vă spun de la bun început că toate aceste modificări trebuiesc produse din AdminCP -> Look & Feel -> IP. Board (tema default oferită de IPB) sau alt skin folosit, dar nu garantez că veţi putea schimba tot -> tabul CSS -> ipb_styles.css

1. Background-ul paginii

IPB 3.1

BaFGE.png

Cum spuneam mai sus, înt tabul CSS, secţiunea ipb_styles.css: apăsăm CTRL + F şi căutăm:

/* ELEMENT STYLES */

body {

background: #fff;

Ce e scris cu #fff reprezintă culoarea actuală şi o putem schimba cu o altă culoare, după codul acestuia din codul HTML. Să zicem că eu vreau să o înlocuiesc cu "#f2f6fb". În acest caz, codul va deveni:

/* ELEMENT STYLES */

body {

background: #f2f6fb;

5UPZK.png

IPB 3.2, 3.3 şi 3.4:

aici este vorba despre 2 background-uri:

LnaW1.png

Background 1:

Schimbăm culoarea marcată cu roşu:

#content {

background: #fff;

padding: 10px 10px;

line-height: 120%;

-webkit-box-shadow: 0 5px 9px rgba(0,0,0,0.1);

-moz-box-shadow: 0 5px 9px rgba(0,0,0,0.1);

box-shadow: 0 5px 9px rgba(0,0,0,0.1);

}

Background 2:

html, body { /* Safari has trouble with bgcolor on body. Apply to html tag too. */

background-color: #d8dde8;

color: #5a5a5a;

}

  • Upvote 3
Link to comment
Share on other sites

  • Moderators

2. Maintitle Bars

IPB 3.1

O0PVQ.png

Căutăm aşa ceva:

body .maintitle {

background: #1d3652 url({style_images_url}/gradient_bg.png) repeat-x left 50%;

Şi schimbăm culoarea marcată cu roşu. Eu vreau de exemplu culoarea #2c5687. Aşadar, codul va arăta astfel:

body .maintitle {

background: #2c5687 url({style_images_url}/gradient_bg.png) repeat-x left 50%;

Rezultatul:

w8zCa.png

IPB 3.2, 3.3 şi 3.4:

.maintitle {

background: #2c5687 url({style_images_url}/maintitle.png) repeat-x top;

color: #fff;

padding: 10px 10px 11px;

font-size: 16px;

font-weight: 300;

-moz-border-radius: 4px 4px 0 0;

-webkit-border-top-left-radius: 4px;

-webkit-border-top-right-radius: 4px;

border-radius: 4px 4px 0 0;

-webkit-box-shadow: inset 0px 1px 0 #528cbc;

-moz-box-shadow: inset 0px 1px 0 #528cbc;

box-shadow: inset 0px 1px 0 #528cbc;

border-width: 1px 1px 0 1px;

border-color: #316897;

border-style: solid;

}

Ce e scris cu roşu schimbă cu codul culorii alese (codul din HTML, desigur), ştergem ce este cu albsatru (având grijă ca după codul culorii să avem ";", adică: #2c5687;).

De asemenea ar cam trebui să schimbăm şi codurile culorilor scrise cu verde.

  • Upvote 2
Link to comment
Share on other sites

  • Moderators

4. Rows

IPB 3.1

3BO4a.png

/* COLORS */

.row1, .row1 td, .post_block.row1 {

background-color: #fafbfc; /* Very light blue */

}

.row1 .altrow, .row1.altrow,

.personal_info, .general_box {

background-color: #eef3f8; /* Slightly darker than row1 */

}

.row2, .row2 td, .post_block.row2,

.message {

background-color: #f1f4f7; /* Light blue */

}

.row2 .altrow, .row2.altrow,

/* ul.post_controls,*/

ul.topic_moderation {

background-color: #e4ebf2; /* Slightly darker than row2 */

}

IPB 3.2, 3.3, 3.4

Aici sunt toate la fel, cu excepţia celor necitite.

.ipsBox_container {

background: #fff;

border: 1px solid #dbe4ef;

}

şi cele necitite:

.unread { background-color: #f7fbfc; }
  • Upvote 3
Link to comment
Share on other sites

  • Moderators

5. Footer

wQ3IZ.png

Să începem cu

bdNNn.png

Pentru a schimba fundalul, edităm ce e scris cu roşu (desigur, cu codul culorii echivalent în HTML):

/* Filter & moderation bars */

.filter_bar {

background-color: #1d3652;

Exemplu:

/* Filter & moderation bars */

.filter_bar {

background-color: #2c5687;

XTulh.png

Acum să trecem la bara cu utilităţi:

S6Ji8.png

Căutăm aşa ceva şi schimbăm ce e scris cu roşu:

#footer_utilities {

background: #192b40 url({style_images_url}/gradient_bg.png) repeat-x 50%;

Exemplu:

#footer_utilities {

background: #2c5687 url({style_images_url}/gradient_bg.png) repeat-x 50%;

dQjdt.png

Acum să schimbăm fundalul principal, care este acesta:

2IMve.png

Codul culorii este scris cu roşu:

/* General block */

.general_box {

background-color: #eef3f8;

Mai putem modifica culorile celor 4 "bare" de mai jos:

Cromp.png

prin

/* General block */

.general_box {

background-color: #eef3f8;

border: 1px solid #d5dde5;

border-bottom: 4px solid #d5dde5;

IPB 3.2, 3.3, 3.4

Aici lucrurile sunt ceva mai simple:

Pentru a schimba "Statistics" box background trebuie să adăugăm următoarea linie marcată cu roşu:

.statistics {

margin: 20px 0 0 0;

padding: 10px 0;

border-top: 3px solid #d8d8d8;

line-height: 1.3;

overflow: hidden;

background: #xxxxx;

}

  • Upvote 2
Link to comment
Share on other sites

  • 1 month later...
  • Moderators

Din păcate întâmpin nişte erori când instalez 3.1.4 pe localhost, aşa că voi continua cu 3.2, 3.3 şi 3.4 :D ... (oricum nu e o mare pierdere, deoarece 3.1 e folosit de puţine comunităţi)...

 

6. Mesaje

 

L1YjOay.png

 

1.

 

.post_block h3 {

background: #D8DDE8;

padding: 0 10px;

height: 36px;

line-height: 36px;

font-weight: normal;

font-size: 16px;

}

 

2. <- trebuie să adăugăm linia marcată cu roşu:

 

 

.author_info {

width: 155px;

float: left;

font-size: 12px;

text-align: center;

padding: 15px 10px;

background: ??;

}

 

 

3.  <- la fel ca la 2., trebuie sa adaugam linia marcata cu rosuu:

 

 

 

.post_body .post {

line-height: 1.6;

font-size: 14px;

background: ??;

}

 

 

4. <- adaugam linia marcasa cu rosu:

 

 

.signature {

clear: right;

color: #a4a4a4;

font-size: 0.9em;

border-top: 1px solid #d5d5d5;

padding: 10px 0;

margin: 6px 0 4px;

position: relative;

background: ??;

}

 

5. <- adăugam linia marcată cu roşu

ul.post_controls {

padding: 6px;

margin: 0 0 10px 0;

clear: both;

-moz-border-radius: 4px;

-webkit-border-radius: 4px;

border-radius: 4px;

background: ??;

}

 

7. (background "complet"):

 

 

.post_block {

background: #fff;

border-bottom: 1px solid #D6E2EB;

}

  • Upvote 2
Link to comment
Share on other sites

  • 1 month later...
  • 2 months later...
  • 7 months later...
  • 2 months later...
  • 2 years later...
Spoiler
On 12/16/2012 at 3:10 PM, Courage said:

De la început vă spun că tutorialul este lung; de aceea, nu îl pot face pe tot deodată, aşa că o să postez aici când mai încep să fac câte ceva.

 

În caz că doriţi să faceţi modificări privind anumite culori din designul celor de la IP. Board, respectiv versiunile 3.1, 3.2, 3.3 şi 3.4 , aici vă voi explica cum să modificaţi uşor şi rapid, folosind codul HTML al culorii dorite.

 

Vreau să vă spun de la bun început că toate aceste modificări trebuiesc produse din AdminCP -> Look & Feel -> IP. Board (tema default oferită de IPB) sau alt skin folosit, dar nu garantez că veţi putea schimba tot -> tabul CSS -> ipb_styles.css

 

1. Background-ul paginii

 

IPB 3.1

 

BaFGE.png

 

Cum spuneam mai sus, înt tabul CSS, secţiunea ipb_styles.css: apăsăm CTRL + F şi căutăm:

 

 

 

Ce e scris cu #fff reprezintă culoarea actuală şi o putem schimba cu o altă culoare, după codul acestuia din codul HTML. Să zicem că eu vreau să o înlocuiesc cu "#f2f6fb". În acest caz, codul va deveni:

 

 

 

5UPZK.png

 

IPB 3.2, 3.3 şi 3.4:

 

aici este vorba despre 2 background-uri:

 

LnaW1.png

 

Background 1:

 

Schimbăm culoarea marcată cu roşu:

 

 

 

Background 2:

 

 

 

Nu inteleg la al 2 BACKGROUND

Edited by gadeas
Adaugat spoiler

CSBZ RO !

Link to comment
Share on other sites

  • 10 months later...
  • 2 months later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.