Jump to content

Recommended Posts

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)




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

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:
NOTE. Sign up required.


Share this post


Link to post
Share on other sites
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

p4410876.gif

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:







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

Share this post


Link to post
Share on other sites
Broni   

2. Maintitle bars

IPB 3.1.x

p4410888.gif

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:

p4410889.gif


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

IPB 3.2-3.4

In this section:

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

Share this post


Link to post
Share on other sites
Broni   

3. Table column headers

IPB 3.1.x

p4410893.gif

Find following section:

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

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

After changes:

p4410895.gif


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

IPB 3.2-3.4

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

p4485659.gif

Its color can be changed here:

.ipsBox { background: #ebf0f3; }

Share this post


Link to post
Share on other sites
Broni   

4. Rows

IPB 3.1.x

p4410897.gif

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:

p4410900.gif

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

p4410901.gif

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

p4410903.gif

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

p4410904.gif


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

IPB 3.2-3.4

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

To change rows background travel here:

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

To change "unread" forum row color go here:

Share this post


Link to post
Share on other sites
Broni   

5. Footer


IPB 3.1.x

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

p4411123.gif

Let's start with changing filter bar color:

p4411147.gif

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):

p4411156.gif


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

p4411161.gif

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):

p4411169.gif


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

p4411183.gif

Find following section:

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

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

p4411189.gif

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

p4411196.gif

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):

p4411220.gif


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

IPB 3.2-3.4

In 3.2 and up 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):

.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:

Share this post


Link to post
Share on other sites
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:

p4411978.gif

Find:

}

.post_block h3 {
background: #d5dee5;
}

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

p4411983.gif


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

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

Replace #fafbfc with #CDB79E (bisque3):

p4411999.gif

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

p4412008.gif

Find:

ul.post_controls {
background-color: #e4ebf3;

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

p4412015.gif

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

IPB 3.2-3.4

In 3.2.x post section has more elements:

p4485660.gif

1. Post header:

.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:




Note top padding (in green)

5. Post control bar - add line in red:

Share this post


Link to post
Share on other sites
Broni   

7. Fast reply

IPB 3.1.x

This is, how it looks now:

p4412024.gif

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):

p4412029.gif

We'll change submit bar color now:

p4412380.gif

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):

p4412383.gif


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

IPB 3.2-3.4

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

Share this post


Link to post
Share on other sites
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:

p4412392.gif

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):

p4412395.gif

Next - question wrap field:

p4412400.gif

Find:

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

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

p4412405.gif

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

p4412418.jpg

Find:

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

Changing #f1f4f7 to #CDAF95 (peachpuff3):

p4412433.gif

Finally, help message field:

p4412432.gif

Find:

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

Changing #f3f3f3 to #CDAA7D (burlywood3):

p4412444.gif

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

IPB 3.2-3.4

In these versions 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:

p4486029.gif

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

.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&gt;Look &amp; Feel&gt;your_skin&gt;ipb_ckeditor.css and I change background color here:



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

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

p4486030.gif

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

Share this post


Link to post
Share on other sites
Broni   

9. Admin bar

IPB 3.1.x

p4412844.gif

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):

p4412848.gif

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

IPB 3.2-3.4

In these versions you make changes here:



#header_bar {


background: url(" 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.

Share this post


Link to post
Share on other sites
Broni   

10. Primary navigation bar.

IPB 3.1.x

p4412854.gif

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):

p4412856.gif

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:

p4412861.gif


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):

p4412871.gif

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

IPB 3.2-3.4

These versions is much easier to edit.
Go here:

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

and edit color in red.

Share this post


Link to post
Share on other sites
Broni   

11. Branding background.

IPB 3.1.x

p4412875.gif

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:

p4412878.gif

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

IPB 3.2-3.4

Find:

#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.

Share this post


Link to post
Share on other sites
Broni   

12. User navigation bar.

IPB 3.1.x

p4412879.gif

To change main background, find:

#user_navigation {
background: #2b4f74;

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

p4412883.gif

...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):

p4412887.gif

The last part is user drop-down menu:

p4412890.gif

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):

p4412894.gif


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:

p4412895.gif


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:

p4413131.gif

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

IPB 3.2-3.4

In these versions it doesn't exist as a separate bar.

Instead we have a "fly-out" menu when clicked on your name at the top right:

p22003244.gif

It's background is located here:

.ipsHeaderMenu {
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 70%, #ededed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(70%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */

padding: 10px;
-moz-border-radius: 0 0 6px 6px;
-webkit-border-bottom-right-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
border-radius: 0 0 6px 6px;
overflow: hidden;
width: 340px;
}

Share this post


Link to post
Share on other sites
Broni   

13. Moderation bars

IPB 3.1.x

p4413132.gif

Find:

.moderation_bar {
background: #d5dde5;
}

Replacing default #d5dde5 with #C76114 (rawsienna):

p4413136.gif

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

IPB 3.2-3.4

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

Share this post


Link to post
Share on other sites
Broni   

14. Quick Stats bars

IPB 3.1.x

p4413141.gif

Find:

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

Changing default #d5dde5 to #C76114 (rawsienna):

p4413144.gif

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

IPB 3.2-3.4

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.

Share this post


Link to post
Share on other sites
Broni   

15. Primary navigation bar active and non-active tab

IPB 3.1.x

p4413154.gif

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):

p4413156.gif

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

IPB 3.2-3.4

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-3.4 non-active tabs have their own background colors.

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

#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:


Share this post


Link to post
Share on other sites
Broni   

16. Search bar

IPB 3.1.x

p4413157.gif

Find:

#search .submit_input {
background: #528f6c;

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

p4413158.gif

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

IPB 3.2-3.4

Search bar in this version looks little bit different.

p4486042.gif

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

#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:


Share this post


Link to post
Share on other sites
Broni   

17. Topic buttons

IPB 3.1.x

p4413160.gif

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):

p4413161.gif

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-3.4

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

.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:

Share this post


Link to post
Share on other sites
Broni   

18. Post buttons

IPB 3.1.x

p4413163.gif

Find:

.input_submit {
background-color: #1d3652;

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

p4413168.gif

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):

p4413169.gif

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-3.4

p4486044.gif

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

.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:




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

Share this post


Link to post
Share on other sites
Broni   

19. Use Full Editor button

IPB 3.1.x

p4413170.gif

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):

p4413173.gif

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

IPB 3.2-3.4

Addressed in previous paragraph.

Share this post


Link to post
Share on other sites
Broni   

20. New content bar

IPB 3.1.x

p4413186.gif

Find:

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

and change whole background value to #C73F17 (chili powder):

p4413189.gif

We need to change that blue active tab to some other color.
Find:

.tab_bar li.active {
background-color: #243f5c;

Change default #243f5c to #B0171F (indianred):

p4413193.gif

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

IPB 3.23.4

Changes already inherited from previous edits.

Share this post


Link to post
Share on other sites
Broni   

21. User navigation bar drop-down menu

IPB 3.1.x

p4413547.gif

Find:

#user_navigation ul#user_link_menucontent {
background: #d5dde5;

Replacing #d5dde5 with #CDB38B (navajowhite3):

p4413548.gif

When you hover the mouse over one of menu items, the color changes to green:

p4413549.gif

To change it, find:

#user_navigation ul#user_link_menucontent a:hover {
background: #528f6c;

Changing #528f6c to #B0171F (indianred):

p4413551.gif

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

IPB 3.2-3.4

Find and change all 3 colors in red:

.ipsHeaderMenu {
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 70%, #ededed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(70%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
padding: 10px;
-moz-border-radius: 0 0 6px 6px;
-webkit-border-bottom-right-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
border-radius: 0 0 6px 6px;
overflow: hidden;
width: 340px;
}

Share this post


Link to post
Share on other sites
Broni   

22. My Profile

IPB 3.1.x

All looks good, except for:

p4413553.gif

To change those, we have to open another CSS file: ipb_profile.css

Find:

.personal_info li a {
background: #d5dde5;

Changing #d5dde5 to #CDAA7D (burlywood3):

p4413554.gif

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

IPB 3.2-3.4

In this version "My Profile" page is more complex:

p4486054.gif

1. To change tabs background color change color in red...

A. For non-active tabs:

.ipsVerticalTabbed_tabs li {
background: #f6f8fb;
color: #808080;
border-bottom: 1px solid #DBE4EF;
font-size: 13px;
}

B. For active tab:
.ipsVerticalTabbed_tabs li.active a {
width: 135px;
position: relative;
z-index: 8000;
border-right: 1px solid #fff;
background: #fff;
color: #353535;
font-weight: bold;
}

2. To change user latest status background you have to travel to ipb_profile.css file and change color in red:

#user_latest_status > div {
padding: 10px 15px;
background-color: #ebece5;
color: #343434;
font-size: 14px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
min-height: 45px;
word-wrap: break-word;
}

3. Back to ipb_styles.css file. To change title bar background color change color in red:


Share this post


Link to post
Share on other sites
Broni   

23. My Settings

IPB 3.1.x

We have to change four colors here:

p4413556.gif

We have to go back to ipb_styles.css file to change tab bar color (1).

Find:

/* Tab bars */
.tab_bar {
background-color: #e4ebf2;

Changing #e4ebf2 to #C76114 (rawsienna):

p4413557.gif

Now, the bottom bar (2).

Find:

.tab_bar.no_title {
background-image: url(http://www.smartestcomputing.us.com/public/style_images/test2-images/th_bg.png);
background-repeat: repeat-x;
background-position: bottom;
padding: 7px 15px 56px 15px;

Changing background-image: url({style_images_url}/th_bg.png) to background: #C76114:

p4413643.gif

The bar is too wide, so we have to adjust padding.
Changing 3rd number (56px) in padding: 7px 15px 56px 15px to 33px:

p4413645.gif

To change userCP menu colors (4), we need to open another CSS file, ipb_ucp.css
Find:

#usercp_menu li {
background-color: #e4ebf2;

Replacing #e4ebf2 with #CDB38B (navajowhite3):

p4413647.gif


Finally, we come to active tab color (3).
In the same file, find:

#usercp_menu li.active {
background-color: #528f6c;

Changing #528f6c to #B0171F (indianred):

p4413650.gif

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

IPB 3.2-3.4

All changes are already in place after applying previous edits.

Share this post


Link to post
Share on other sites
Broni   

24. Messenger

IPB 3.1.x

Couple of colors to change here:

p4413654.gif

To change colors of 3 buttons in group 1, open another CSS file: ipb_messenger.css
Find:

#folder_list .total {
background-color: #d5dde5;

Changing #d5dde5 to #CDAA7D (burlywood3):

p4413659.gif

To change the color of buttons in group 2, we go back to ipb_styles.css file.
Find:

ul.post_controls li {
background: transparent url(http://www.smartestcomputing.us.com/public/style_images/test2-images/post_button_left.png) no-repeat top left;
and
ul.post_controls a {
background: transparent url(http://www.smartestcomputing.us.com/public/style_images/test2-images/post_button_right.png) no-repeat top right;

Changing both background values to #C73F17 (chili powder):

p4413656.gif


Next two pages from User navigation bar drop-down menu, "Find Posts" and "Find Topics" look fine.

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

IPB 3.2-3.4

All changes are already in place after applying previous edits.

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.

  • Recently Browsing   0 members

    No registered users viewing this page.

×