37 replies to this topic

[Broni]

TABLE OF CONTENT:

SECTION 1 - Changing colors

1. Board background (3.1/3.2)
2. Maintitle bars (3.1/3.2)
3. Table column headers (3.1/3.2)
4. Rows (3.1/3.2)
5. Footer (3.1/3.2)
6. Posts (3.1/3.2)
7. Fast reply (3.1/3.2)
8. Full Editor (3.1/3.2)
9. Admin bar (3.1/3.2)
10. Primary navigation bar (3.1/3.2)
11. Branding background (3.1/3.2)
12. User navigation bar (3.1/3.2)
13. Moderation bars (3.1/3.2)
14. Quick Stats bars (3.1/3.2)
15. Primary navigation bar active and non-active tab (3.1/3.2)
16. Search bar (3.1/3.2)
17. Topic buttons (3.1/3.2)
18. Post buttons (3.1/3.2)
19. Use Full Editor button (3.1/3.2)
20. New content bar (3.1/3.2)
21. User navigation bar drop-down menu (3.1/3.2)
22. My Profile (3.1/3.2)
23. My Settings (3.1/3.2)
24. Messenger (3.1/3.2)
25. Manage Friends (3.1/3.2)
26. Miscellaneous (3.1/3.2):

A. Info mark

B. Message box border

C. Page numbers

D. Topic prefix

E. My Profile "Update" button

F. "Find Posts" message border

SECTION 2 - text and fonts


1. General info (3.1/3.2)
2. Admin bar and Primary nav bar (3.1/3.2)
3. Secondary navigation bar (3.1/3.2)
4. Maintitle (3.1/3.2)
5. Main page columns titles (3.1/3.2)
6. Forums (3.1/3.2)
7. Statistics and Footer (3.1/3.2)


SECTION 3 - other edits

1. Rounded corners (3.1/3.2)
2. Margin (3.1/3.2)
3. Padding (3.1/3.2)
4. Sidebar (3.2 only)

.......................................................................

Both pages attached in PDF format (zipped)

================================================================================================================================

NOTE
It is very advisable to include a comment, while you're making any changes. If something goes wrong, you'll know exactly what you changed.
You can include any comment in your skin script, if you wrap it in this:
/* comment */
Anything between /* */ is not executable.

Example:

/* ELEMENT STYLES */
 
body {
background: #C0C0C0; /* changed from #fff */<-----this is not executable comment

================================================================================================================================

PDF file (2 parts) can be downloaded from here: http://www.smartestc...nning-tutorial/
NOTE. Sign up required.

[Broni]

Most skin changes are done by editing ipb_styles.css file.

Log in to Administration Control Panel (ACP), click on Look & Feel tab.
Click on a skin, you want to edit, then CSS tab, and finally, click on ipb_styles.css.

SECTION 1 - Changing colors

In this example, we'll edit default IP. Board skin.
There are many pages, you can get new color codes from.
I use this one: http://www.december....c/colorhex.html
This simple page is also helpful: http://html-color-codes.com/

1. Board background

IPB 3.1.x



In ipb_styles.css file, find following section:

/* ELEMENT STYLES */
 
body {
background: #fff;

#fff (basic white) is your current background color.
Let's replace that background color with some other color.
I'll replace it with #C0C0C0 (silver).
The above code will look like this now:

/* ELEMENT STYLES */
 
body {
background: #C0C0C0;

Click Save button.

Go back to your board, reload the page, and you'll see this:




~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

IPB 3.2.x

In this version we're dealing with two backgrounds:
- body background
- content background



To change "body background" change the color marked in red:

Quote

html, body { /* Safari has trouble with bgcolor on body. Apply to html tag too. */
background-color: #d8dde8;
color: #5a5a5a;
}

To change "content background" change the color marked in red:

Quote

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

[Broni]

2. Maintitle bars

IPB 3.1.x



Find following section:

body .maintitle {
background: #1D3652 url(http://www.smartestcomputing.us.com/public/style_images/test2-images/gradient_bg.png) repeat-x left 50%;

The current color is #1D3652.
I'll change it to #C73F17 (chili powder).
Click Save button, go back to your board, refresh the page and the main page will look like this:




~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

IPB 3.2.x

In this section:

Quote

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

You have to remove whole "background" value and replace it with your color.

You'll also want to adjust two colors marked in green.

[Broni]

3. Table column headers

IPB 3.1.x



Find following section:

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

I'll change default #b6c7db color to #C76114 (rawsienna).

After changes:




~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

IPB 3.2.x

Those don't exist anymore in 3.2.x.
However we have ipsBox border:



Its color can be changed here:

Quote

.ipsBox { background: #ebf0f3; }

[Broni]

4. Rows

IPB 3.1.x



Find following section:

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

Each row contains two color sections.
After replacing default #fafbfc color (section1 of row1) with #CDAA7D (burlywood3), the board looks like this:



Now, I'll replace default #eef3f8 (section2 of row1) with #CDB38B (navajowhite3):



Replacing default #f1f4f7 (section1 of row2) with #CDAF95 (peachpuff3):



and, finally, replacing default #e4ebf2 (section2 of row2) with #CDB79E (bisque3):




~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

IPB 3.2.x

In 3.2.x all rows are of the same color (except for "unread" forum row - see below).

To change rows background travel here:

Quote

.ipsBox_container {
background: #fff;
border: 1px solid #dbe4ef;
}

To change "unread" forum row color go here:

Quote

.unread { background-color: #f7fbfc; }

[Broni]

5. Footer


IPB 3.1.x

After all the above changes, still, the footer area hasn't been touched:



Let's start with changing filter bar color:



Still in ipb_styles.css file, find the following section:

/* Filter & moderation bars */
.filter_bar {
background-color: #1d3652;

I'll change default color #1d3652 to the used already color, #C73F17 (chili powder):




Now, let's take care of footer utilities bar:



Find following section:

#footer_utilities {
background: #192b40 url(http://www.smartestcomputing.us.com/public/style_images/test2-images/gradient_bg.png) repeat-x 50%;

Changing default color #192b40 to #C73F17 (chili powder):




Next change will apply to the general box area of the footer:



Find following section:

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

Let's change default background color #eef3f8 to used before #CDB79E (bisque3):



Let's play little bit more and let's change also box' border:



Stay with very same section:

/* General block */
.general_box {
background-color: #eef3f8;
border: 1px solid #d5dde5;
border-bottom: 4px solid #d5dde5

"border: 1px solid #d5dde5;" line controls left, top and right borders of the box,
"border-bottom: 4px solid #d5dde5" controls bottom border

In the script listed above, let's change default border color, #d5dde5 for all 4 sides to #C76114 (rawsienna):




~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

IPB 3.2.x

In 3.2.x footer is more simple.

Filter bar doesn't exist as a separate bar as it's included in "Statistics" box.

To change "Statistics" box background you have to actually add an extra setting (line in red):

Quote

.statistics {
margin: 20px 0 0 0;
padding: 10px 0;
border-top: 3px solid #d8d8d8;
line-height: 1.3;
overflow: hidden;


background: ??
}

If you want to adjust top border color change the value in green.

Footer utilities bar got blended into body color, but it still exist, so if you want to change its background go here and add line in red:

Quote

#footer_utilities {
padding: 10px;
font-size: 11px;
position: relative;


background: ??
}

[Broni]

6. Posts

IPB 3.1.x

So far, topics colors didn't change much. Only topic's header color changed to be consistent with the board's main page:



Find:

}
 
.post_block h3 {
background: #d5dee5;
}

Let's change default color #d5dee5 to #C76114 (rawsienna):




Now, let's change default post background color.
Find:

/* Post background */
.post_block {
background: #fafbfc;

Replace #fafbfc with #CDB79E (bisque3):



We still need to take care of post's footer:



Find:

ul.post_controls {
background-color: #e4ebf3;

Let's change default #e4ebf3 to #CDAF95 (peachpuff3):



~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

IPB 3.2.x

In 3.2.x post section has more elements:



1. Post header:

Quote

.post_block h3 {
background: #D8DDE8;
padding: 0 10px;
height: 36px;
line-height: 36px;
font-weight: normal;
font-size: 16px;
}

2. Author info - you need to add line in red:

.author_info {
width: 155px;
float: left;
font-size: 12px;
text-align: center;
padding: 15px 10px;
background: ??
}

3. Post body - you have to add line in red:

Quote

.post_body .post {
line-height: 1.6;
font-size: 14px;
background: ??
}

NOTE 1. There is also a small bar above post body, which says "Posted <date> <time>".
To change that background color add line in red here:

Quote

.posted_info {
padding: 0 0 10px 0;
background: ??
}

NOTE 2. There is also some top padding (in green) and right margin (in red) there.
If you want to adjust those see here:

Quote

.post_body {
margin: 0 10px 0 185px;
padding-top: 15px;
}

4. Signature - add line in red.

Quote

.signature {
clear: right;
color: #a4a4a4;
font-size: 0.9em;
border-top: 1px solid #d5d5d5;
padding: 10px 0;
margin: 6px 0 4px;
position: relative;
background: ??
}

Note top padding (in green)

5. Post control bar - add line in red:

ul.post_controls {
padding: 6px;
margin: 0 0 10px 0;
clear: both;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
background: ??
}

[Broni]

7. Fast reply

IPB 3.1.x

This is, how it looks now:



To edit colors here, we need to edit different CSS file - ipb_editor.css

Find:

#ipboard_body .ips_editor .toolbar {
height: 30px;
background: #e4ebf2 url(http://www.smartestcomputing.us.com/public/style_images/test2-images/gradient_bg.png) repeat-x left 50%;

Let's replace default toolbar color, #e4ebf2 with #C76114 (rawsienna):



We'll change submit bar color now:



We have to go back to ipb_styles.css file.
Find:

body#ipboard_body fieldset.submit,
body#ipboard_body p.submit {
background-color: #d5dde5;

Changing default #d5dde5 to #C76114 (rawsienna):




~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

IPB 3.2.x

See next paragraph: Full Editor.
Changes applied to "Full Editor" apply to "Fast Reply" as well.

[Broni]

8. Full Editor

IPB 3.1.x

Full Editor has few more sections, we have to work on (poll, attachments, post options).
Let's start with two bars shown below:



Still in ipb_styles.css, find:

/* Bar */
.bar {
background: #d5dde5 url(http://www.smartestcomputing.us.com/public/style_images/test2-images/gradient_bg.png) repeat-x 50%;

Let's change default #d5dde5 to #C76114 (rawsienna):



Next - question wrap field:



Find:

.post_form #poll_wrap .question .wrap {
background-color: #e4ebf2;

Let's change #e4ebf2 to #CDAA7D (burlywood3):



Now, we'll change a whole Full Editor background as shown below:



Find:

/* Post screen background */
div.post_form fieldset {
background-color: #f1f4f7;

Changing #f1f4f7 to #CDAF95 (peachpuff3):



Finally, help message field:



Find:

.message.unspecific {
background-color: #f3f3f3;

Changing #f3f3f3 to #CDAA7D (burlywood3):



~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

IPB 3.2.x

In this version all edits are made in ipb_ckeditor.css file.

IMPORTANT!
No changes will hold until appropriate setting is deleted\commented out in following board file (accessed through FTP):
/public/js/3rd_party/ckeditor/skins/ips/editor.css

Let's say I want to change whole editor background (except for text area), so it looks like this:



1. First I go to /public/js/3rd_party/ckeditor/skins/ips/editor.css file and I comment out "background-color:

Quote

.cke_skin_ips .cke_wrapper
{
/*-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;*/
/*background-color: #d3d3d3;*/

NOTE. The above edit will NOT affect any other skins.

2. I go ACP>Look & Feel>your_skin>ipb_ckeditor.css and I change background color here:

Quote

.cke_skin_ips .cke_wrapper
{
padding: 0px 5px 0px 3px !important;
border: 2px solid #D5DDE5 !important;
background-color: ??? !important;
background-image: none !important;
}

You're done! Any other CSS changes to CKEditor must be done in a very same way.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
To change editor's sidebar titlebar color:



go back to ipb_styles.css file. Change your background here:

Quote

.bar {
background: ???;
padding: 8px 10px;
}

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

The very last change you want to make in that window is a change to "submit bar:



Still in ipb_styles.css file. Change your background here:

Quote

body#ipboard_body fieldset.submit,
body#ipboard_body p.submit {
background-color: #d1ddea;
}

[Broni]

9. Admin bar

IPB 3.1.x



Find:

#admin_bar {
background: #2e2e2e url(http://www.smartestcomputing.us.com/public/style_images/test2-images/gradient_bg.png) repeat-x 50%;

Changing default #2e2e2e to#C73F17 (chili powder):



~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

IPB 3.2.x

In this version you make changes here:

Quote

#header_bar {


background: url("http://www.smartestcomputing.us.com/public/style_images/master/user_navigation.png") repeat-x scroll center bottom #323232;
padding: 0;
text-align: right;
}

Remove a whole section listed in red, change color listed in green.

[Broni]

10. Primary navigation bar.

IPB 3.1.x



Find:

/* Navigation */
#primary_nav {
background: #192b40 url(http://www.smartestcomputing.us.com/public/style_images/test2-images/primarynav_bg.png) no-repeat;

Changing default #192b40 to #C76114 (rawsienna):



As you can see, only right part of the bar changed its color.
To make a whole bar uniform, find:

/* Navigation */
#primary_nav {
background: #C76114 url(http://www.smartestcomputing.us.com/public/style_images/test2-images/primarynav_bg.png) no-repeat;

and delete:

url(http://www.smartestcomputing.us.com/public/style_images/test2-images/primarynav_bg.png)

so it looks like this:

/* Navigation */
#primary_nav {
background: #C76114 no-repeat;

We have:




Now, I don't like that greenish border under primary navigation bar...
Find:

/* Navigation */
#primary_nav {
background: #C76114 no-repeat;
font-size: 0.95em;
border-bottom: 5px solid #528f6c;

I'll change its default #528f6c color to #C73F17 (chili powder):



~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

IPB 3.2.x

This version is much easier to edit.
Go here:

Quote

#primary_nav {
background: #204066;
font-size: 13px;
padding: 4px 0 0 0;
}

and edit color in red.

[Broni]

11. Branding background.

IPB 3.1.x



Find:

#branding {
background: #1d3652 url(http://www.smartestcomputing.us.com/public/style_images/test2-images/branding_bg.png) repeat-x top;

We have to delete a whole background value (#1d3652 url({style_images_url}/branding_bg.png) repeat-x top) and replace it with a color of our choice.
I'll select #CDAA7D (burlywood3), so the above code looks like this:

#branding {
background: #CDAA7D;

The result:



~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

IPB 3.2.x

Find:

Quote

#branding {
background: #0f3854 url({style_images_url}/branding_bg.png) repeat-x;
border-bottom: 1px solid #1b3759;
min-height: 64px;
}

Remove section in red, change color marked in green.

[Broni]

12. User navigation bar.

IPB 3.1.x



To change main background, find:

#user_navigation {
background: #2b4f74;

I'll change #2b4f74 to #C76114 (rawsienna):



...and we need to change that blue border...
In a same section:

#user_navigation {
background: #C76114;
font-size: 0.9em;
border-width: 0 2px 2px 2px;
border-style: solid;
border-color: #1c334e;

we'll change border-color: #1c334e to #C73F17 (chili powder):



The last part is user drop-down menu:



Find:

#user_navigation #user_link {
background: #1d3652 url(http://www.smartestcomputing.us.com/public/style_images/test2-images/th_bg.png) repeat-x 50%;

Replace a whole background value (#1d3652 url({style_images_url}/th_bg.png) repeat-x 50%) with your color.
I'll select #C73F17 (chili powder):




Finally, I really hate that bluish board background, so I'm changing it to palegoldenrod(SVG) #EEE8AA.
So, right now our main page looks like this:




Right now, we're pretty much done with the main page.
When we open any forum, we'll see, that some sections colors still need to be changed:



~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

IPB 3.2.x

In this version it doesn't exist as a separate bar.

[Broni]

13. Moderation bars

IPB 3.1.x



Find:

.moderation_bar {
background: #d5dde5;
}

Replacing default #d5dde5 with #C76114 (rawsienna):



~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

IPB 3.2.x

No additional changes are needed as all colors already changed after applying previous edits.

[Broni]

14. Quick Stats bars

IPB 3.1.x



Find:

.general_box h3 {
background: #d5dde5;
color: #1d3652;

Changing default #d5dde5 to #C76114 (rawsienna):



~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

IPB 3.2.x

While posting instructions for 3.1.4 version I didn't realize, that this is actually 3rd party hook, so it shouldn't be even present in this manual.

[Broni]

15. Primary navigation bar active and non-active tab

IPB 3.1.x



Find:

#primary_nav ul li.active {
background: transparent url(http://www.smartestcomputing.us.com/public/style_images/test2-images/tab_left.png) no-repeat top left;
font-size: 1.05em;
font-weight: bold;
padding: 0;
margin: -4px 0px auto 5px;
position: relative;
}
 
#primary_nav ul li.active a {
background: transparent url(http://www.smartestcomputing.us.com/public/style_images/test2-images/tab_right.png) no-repeat top right;
padding: 10px 15px 10px 10px;
margin-left: 6px;
display: block;

Replacing both background values (transparent url({style_images_url}/tab_left.png) no-repeat top left and transparent url({style_images_url}/tab_right.png) no-repeat top right) with #B0171F (indianred):



~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

IPB 3.2.x

In version 3.1.x only active tab had a different background color. Non-active tab background color was same as primary navigation bar background color.
In version 3.2.x non-active tabs have their own background colors.

1. To change active tab background change color in red:

Quote

#primary_nav .active a {
background: #fff;
color: #0b5794;
font-weight: bold;
margin-top: 0;
text-shadow: none;
}

2. To change non-active tab background color, change color in red:

Quote

#primary_nav a {
color: #c5d5e2;
background: #1c3b5f;
display: block;
padding: 6px 15px 8px;
text-shadow: 0px 1px 1px rgba(0,0,0,0.5);
}

[Broni]

16. Search bar

IPB 3.1.x



Find:

#search .submit_input {
background: #528f6c;

Changing default #528f6c to #B0171F (indianred):



~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

IPB 3.2.x

Search bar in this version looks little bit different.



1. To change greenish square button, change both values in red:

Quote

#search .submit_input {
background: #7ba60d url({style_images_url}/search_icon.png) no-repeat 50%;
text-indent: -3000em;
padding: 0; border: 0;
border: 1px solid #7ba60d;
display: block;
width: 26px;
height: 26px;
position: absolute;
right: 0; top: 0; bottom: 0;
-moz-border-radius: 0 3px 3px 0;
-webkit-border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
border-radius: 0 3px 3px 0;
-webkit-box-shadow: inset 0px 1px 0 rgba(255,255,255,0.2);
-moz-box-shadow: inset 0px 1px 0 rgba(255,255,255,0.2);
box-shadow: inset 0px 1px 0 rgba(255,255,255,0.2);
}

2. To change "selection" button ("Forums") background change color in red:

Quote

#search_options {
font-size: 10px;
height: 20px;
line-height: 20px;
margin: 3px 3px 3px 0;
padding: 0 6px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
background: #eaeaea;
display: inline-block;
float: right;
}

[Broni]

17. Topic buttons

IPB 3.1.x



Find:

.topic_buttons li {
background: transparent url(http://www.smartestcomputing.us.com/public/style_images/test2-images/topic_button_left.png) no-repeat top left;

and

.topic_buttons li a {
background: transparent url(http://www.smartestcomputing.us.com/public/style_images/test2-images/topic_button_right.png) no-repeat top right;

Changing both background values to #B0171F (indianred):



Now, those buttons change colors when you hover your mouse over them (default - darker blue to lighter blue).
We need to make a change, so when hovering, the color will change from #B0171F (indianred) to #C73F17 (chili powder).
Find:

.topic_buttons li:hover {
background: transparent url(http://www.smartestcomputing.us.com/public/style_images/test2-images/topic_button_left_hover.png) no-repeat top left;
}
.topic_buttons li:hover a {
background: transparent url(http://www.smartestcomputing.us.com/public/style_images/test2-images/topic_button_right_hover.png) no-repeat top right;
}

and change both background values to #C73F17 (impossible to provide any screenshot).

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

IPB 3.2.x

1. Find the following, remove section in blue and change both colors in red:

Quote

.topic_buttons li.important a, .topic_buttons li.important span, .ipsButton .important,
.topic_buttons li a, .topic_buttons li span, .ipsButton {
background: #212121 url({style_images_url}/topic_button.png ) repeat-x top;
border: 1px solid #212121;
border-width: 1px 1px 0 1px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: inset 0 1px 0 0 #5c5c5c, 0px 2px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: inset 0 1px 0 0 #5c5c5c, 0px 2px 3px rgba(0,0,0,0.2);
box-shadow: inset 0 1px 0 0 #5c5c5c, 0px 2px 3px rgba(0,0,0,0.2);
color: #fff;
text-shadow: 0 -1px 0 #191919;
font: 300 12px/1.3 Helvetica, Arial, sans-serif;
line-height: 30px;
height: 30px;
padding: 0 10px;
text-align: center;
min-width: 125px;
display: inline-block;
cursor: pointer;
}

3. To change "Follow/unfollow this topic" button background color find this and change all 3 colors indicated in red:

Quote

.ipsButton_secondary {
height: 22px;
line-height: 22px;
font-size: 12px;
padding: 0 10px;
background: #f6f6f6;
background: -moz-linear-gradient(top, #f6f6f6 0%, #e5e5e5 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f6f6), color-stop(100%,#e5e5e5)); /* webkit */
border: 1px solid #dbdbdb;
-moz-box-shadow: 0px 1px 0px rgba(255,255,255,1) inset, 0px 1px 0px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 1px 0px rgba(255,255,255,1) inset, 0px 1px 0px rgba(0,0,0,0.3);
box-shadow: 0px 1px 0px rgba(255,255,255,1) inset, 0px 1px 0px rgba(0,0,0,0.3);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
color: #616161;
display: inline-block;
white-space: nowrap;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
}

[Broni]

18. Post buttons

IPB 3.1.x



Find:

.input_submit {
background-color: #1d3652;

Changing default #1d3652 to #B0171F (indianred):



As you can see, it still shows some bluish border.
In the same section:

.input_submit {
background-color: #B0171F;
color: #fff;
border-color: #4f7298 #113051 #113051 #4f7298;

you can see, that the border is made out of two different colors: #4f7298 and #113051
To simplify things, we'll replace all 4 values with one - #C73F17 (chili powder):



The above button color also changes when hovered over it. By default it changes from darker to lighter blue.
We want it to be changing from #B0171F (indianred) to #C73F17 (chili powder).
Find:

.input_submit:hover {
background: #2e4968;

and change default #2e4968 to #C73F17 (no screenshot possible).

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

IPB 3.2.x



1. To change Post Fast Reply background remove section in blue and change both colors in red:

Quote

.input_submit {
background: #212121 url({style_images_url}/topic_button.png ) repeat-x top;
color: #fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: inset 0 1px 0 0 #5c5c5c, 0px 2px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: inset 0 1px 0 0 #5c5c5c, 0px 2px 3px rgba(0,0,0,0.2);
box-shadow: inset 0 1px 0 0 #5c5c5c, 0px 2px 3px rgba(0,0,0,0.2);
border-color: #212121;
}

2. To change More Reply Options background change both colors in red:

Quote

.input_submit.alt {
background: #e2e9f0;
border-color: #dae2ea;
color: #464646;
-moz-box-shadow: inset 0 1px 0 0 #eff3f8, 0px 2px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: inset 0 1px 0 0 #eff3f8, 0px 2px 3px rgba(0,0,0,0.2);
box-shadow: inset 0 1px 0 0 #eff3f8, 0px 2px 3px rgba(0,0,0,0.2);
}

NOTE. You may want to remove lines in blue as well (button's shadow).

[Broni]

19. Use Full Editor button

IPB 3.1.x



Let's look at a whole section concerning the above button:

.input_submit.alt {
background-color: #eef3f8;
border-color: #fafbfc #bfcbd8 #bfcbd8 #fafbfc;
color: #1d3652;
}
 
.input_submit.alt:hover {
background: #e4ebf2;
color: #1d3652;
}

Let's replace
- default background-color: #eef3f8 with #CDAA7D (burlywood3)
- both border-color: #fafbfc #bfcbd8 #bfcbd8 #fafbfc colors with #CDB38B (navajowhite3)
- hover background: #e4ebf2also with #CDB38B (navajowhite3):



~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

IPB 3.2.x

Addressed in previous paragraph.