Tutorial Skinning Ipb 3.1, 3.2, 3.3 & 3.4

Courage · December 16, 2012

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

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;

IPB 3.2, 3.3 şi 3.4:

aici este vorba despre 2 background-uri:

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;
}

Courage · December 16, 2012

2. Maintitle Bars

IPB 3.1

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:

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.

Courage · December 16, 2012

3. Table column headers

IPB 3.1

/* Table column headers */
.header {
background: #b6c7db;

3.2, 3.3, 3.4

Nu avem aşa ceva

Courage · December 16, 2012

4. Rows

IPB 3.1

/* 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; }

Courage · December 17, 2012

5. Footer

Să începem cu

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;

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

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%;

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

Codul culorii este scris cu roşu:

/* General block */
.general_box {
background-color: #eef3f8;

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

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;
}

Courage · January 27, 2013

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 ... (oricum nu e o mare pierdere, deoarece 3.1 e folosit de puţine comunităţi)...

6. Mesaje

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;
}

+th3#afk · March 8, 2013

unde e link ul original la acest tutorial?

Courage · March 8, 2013

Mă luam după un site, dar de ceva timp modific temele IPB singur, căutând culorile în ipb_styles.css + programul ColorCop

LorDLeThaL · June 3, 2013

Te poţi uita te rog şi peste

Time112 · January 29, 2014

Vane unu pentru PINNED sa putem schimba culoare !

ms

+MadFather · April 7, 2014

Sursa o gasiti aici : http://www.smartestcomputing.us.com/topic/37422-ipb-3-how-to-skinning/?p=139708

Cristian Ovidiu · January 28, 2017

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

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:

IPB 3.2, 3.3 şi 3.4:

aici este vorba despre 2 background-uri:

Background 1:

Schimbăm culoarea marcată cu roşu:

Background 2:

Nu inteleg la al 2 BACKGROUND

Edited January 28, 2017 by gadeas
Adaugat spoiler

OldMan · December 3, 2017

@Courage acelasi lucru trebuie facut si pe 4.2.x cu cele patru "bare" ?

Edited December 3, 2017 by OldMan

DeNyS. · December 3, 2017

On 3/12/2017 at 8:59 PM, OldMan said:

@Courage acelasi lucru trebuie facut si pe 4.2.x cu cele patru "bare" ?

Nu. Tutorialul ăsta este pentru 3.4.X --- pentru 4.X nu există tutoriale de skinning theme.

/* edit

@OldMan nu stiu, cauta pe google.

OldMan · December 4, 2017

18 hours ago, DeNyS. said:

Nu. Tutorialul ăsta este pentru 3.4.X --- pentru 4.X nu există tutoriale de skinning theme.

Mersi pentru raspuns, stii cumva unde as putea gasi un tutorial pentru treaba asta ?

Detecu · February 7, 2018

Foarte folositor.

Sign In

Tutorial Skinning Ipb 3.1, 3.2, 3.3 & 3.4

Recommended Posts

Courage

Courage

Courage

Courage

Courage

Courage

+th3#afk

Courage

LorDLeThaL

Time112

+MadFather

Cristian Ovidiu

OldMan

DeNyS.

OldMan

Detecu

Please sign in to comment

Recently Browsing 0 members

Activity

Browse

Important Information