37 replies to this topic

[Broni]

20. New content bar

IPB 3.1.x



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



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



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

IPB 3.2.x

Changes already inherited from previous edits.

[Broni]

21. User navigation bar drop-down menu

IPB 3.1.x



Find:

#user_navigation ul#user_link_menucontent {
background: #d5dde5;

Replacing #d5dde5 with #CDB38B (navajowhite3):



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



To change it, find:

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

Changing #528f6c to #B0171F (indianred):



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

IPB 3.2.x

Find and change all 3 colors in red:

Quote

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

[Broni]

22. My Profile

IPB 3.1.x

All looks good, except for:



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



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

IPB 3.2.x

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



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:

Quote

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

Quote

.general_box h3 {
font: normal 14px helvetica, arial, sans-serif;
padding: 8px 10px;
background: #DBE2EC;
color: #204066;
}

[Broni]

23. My Settings

IPB 3.1.x

We have to change four colors here:



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



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:



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



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




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



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

IPB 3.2.x

All changes are already in place after applying previous edits.

[Broni]

24. Messenger

IPB 3.1.x

Couple of colors to change here:



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



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




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

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

IPB 3.2.x

All changes are already in place after applying previous edits.

[Broni]

25. Manage Friends

IPB 3.1.x

Only some button colors need to be adjusted here:



In ipb_styles.css find:

.user_controls li a {
display: inline-block;
background-color: #d5dee5;

Changing #d5dee5 to #C76114 (rawsienna):




Manage Ignored Users page looks fine.

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

IPB 3.2.x

All changes are already in place after applying previous edits.

[Broni]

26. Miscellaneous

A. Info mark

IPB 3.1.x



To remove it, still in ipb_styles.css find:

/* MESSAGE STYLES */
 
.message {
background: #f1f6ec url(http://www.smartestcomputing.us.com/public/style_images/test2-images/information.png) no-repeat 8px 10px;

Delete url({style_images_url}/information.png) no-repeat 8px 10px part and the info mark will be gone.

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

IPB 3.2.x

Doesn't apply


B. Message box border

IPB 3.1.x



In a very same section:

/* MESSAGE STYLES */
 
.message {
background: #f1f6ec url(http://www.smartestcomputing.us.com/public/style_images/test2-images/information.png) no-repeat 8px 10px;
padding: 10px 10px 10px 30px;
border: 1px solid #b0ce94;

changing default border color from #b0ce94 to #C73F17 (chili powder):



You can also make that border thicker by changing 1px to whatever you want, say 3px in this example:



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

IPB 3.2.x

Change color in red:

Quote

.message.unspecific {
background-color: #f3f3f3;
border-color: #d4d4d4;
color: #515151;
margin: 0 0 10px 0;
clear: both;
}

C. Page numbers

IPB 3.1.x



Find:

ul.pagination li {
background: #fff;

Changing #fff to #CDAF95 (peachpuff3):



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

IPB 3.2.x

1. Change color in red:

Quote

.pagination .pages li.active {
background: #7BA60D;
color: #fff;
font-weight: bold;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
padding: 1px 5px;
}

2. You have apply another edit to change << >> next prev last buttons background color. Change color in red:

Quote

.pagination .back a,
.pagination .forward a {
display: inline-block;
padding: 0px 6px;
height: 20px;
background: #eaeaea;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
text-transform: uppercase;
color: #5a5a5a;
font-size: 11px;
font-weight: bold;
}

3. And another change for so called mini pagination. Change color in red:


ul.mini_pagination li a {
background: #fff;
border: 1px solid #d3d3d3;
padding: 1px 3px;
}



D. Topic prefix

IPB 3.1.x



Find:

/* Topic prefix */
.topic_prefix {
background-color: #daede2;

Changing #daede2 to #C76114 (rawsienna):



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

IPB 3.2.x

Add line in red:

Quote

.ipsBadge {
display: inline-block;
height: 16px;
line-height: 16px;
padding: 0 5px;
font-size: 9px;
font-weight: bold;
text-transform: uppercase;
color: #fff;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;


background: ???
}

E. My Profile "Update" button

IPB 3.1.x



Find:

.message.user_status #update_status {
background: #243f5c;

Changing #243f5c to #B0171F (indianred):



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

IPB 3.2.x

Doesn't apply.


F. "Find Posts" message border

IPB 3.1.x



Find:

.message.unspecific {
background-color: #CDAA7D;
border-color: #d4d4d4;

Changing #d4d4d4 to #C76114 (rawsienna):



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

IPB 3.2.x

Doesn't apply.


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

This is pretty much, I can think of regarding colors. If you need to change some other color, I missed in my tutorial, please feel free to start a new topic in IPB 3.0 skinning and editing forum and I'll try to answer your question. You'll need to register though

[Broni]

SECTION 2 - text and fonts


1. General info

Text

There are number of text editing scripts, but for the simplicity and for what is mostly used on IPB board, we'll focus on most common formattings.

[indent] text color
[/indent] in IPB CSS files, you'll see entries like:
color:#00ff00

[indent]text decoration
[/indent] in IPB CSS files, you'll see entries like:
text-decoration:none
text-decoration:underline

All codes are listed below:




Font

Again, most popular formatting, you'll see are:

[indent]font size
[/indent] in IPB CSS files, you'll see entries like:
font-size:2.5em

(to avoid the resizing problem with Internet Explorer, em is used, instead of pixels(px)

1em is equal to the current font size. The default text size in browsers is 16px; so, the default size of 1em is 16px)

[indent]font style
[/indent] in IPB CSS files, you'll see entries like:
font-style:normal
font-style:italic

[indent]font weight
[/indent] in IPB CSS files, you'll see entries like:
font-weight: normal
font-weight: bold

Full table can be seen below:

[Broni]

2. Admin bar and Primary nav bar

IPB 3.1.x



As you can see there are all kind of different font and colors there.
Let's start with white fonts.
Again, we're in ipb_styles.css file.
A lot of white text in different board sections is controlled by this:

/* White links */
#admin_bar a, #stat_links a,
#primary_nav ul li.active, #primary_nav ul li a:hover, #primary_nav ul li.active a,
#user_navigation.not_logged_in, #user_navigation.not_logged_in a,
#user_navigation #user_link, #user_navigation #new_msg_count,
#user_navigation ul, #user_navigation ul#user_link_menucontent, #user_navigation ul#user_link_menucontent a:hover,
#search .submit_input, .message.user_status #update_status,
table.ipb_table th a, .topic_buttons li a, .topic_buttons li span,
.message.user_status #update_status, .tab_bar li.active, .tab_bar li.active a,
.members li.positive a, .members li.negative a, #footer_utilities a, a.input_submit:hover {
color: #fff; <-----------
text-decoration: none;

Let's change #fff to mediumblue(SVG) #0000CD and see what happens:



We still need to change Mod Tools color.

Find:

#admin_bar {
background: #C73F17 url(http://www.smartestcomputing.us.com/public/style_images/test2-images/gradient_bg.png) repeat-x 50%;
color: #d2d2d2;
font-size: 0.8em;
padding: 7px;
height: 14px;

Changing #d2d2d2 to navy(16 SVG) #000080:



Since I wear eye glasses (:)), that font is little bit to small for me, so lets change font size from 0.8em to 0.9em:




Now, few changes to Primary nav bar.

Find:

#primary_nav ul li a {
color: #9bb2c8;
text-decoration: none;

Changing #9bb2c8 to darkblue(SVG) #00008B:



...and for a good measure, let's make that text bold; the above code will look like this:

#primary_nav ul li a {
color: #00008B;
text-decoration: none;
font-weight: bold; <---added

Next change goes for Advanced search link.

Find:

#search a {
color: #556b85;
margin: 5px 7px;

Changing #556b85 to midnightblue(Safe Hex3) #000033:



Very last change in this section goes to Sign out and Help in User navigation bar.

Find:

#user_navigation ul a {
color: #d5dde5;

Changing #d5dde5 to navy(16 SVG) #000080:



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

IPB 3.2.x

In this version we have 4 different font colors in admin and primary bars:



Following are font color locations....

- admin bar:

Quote

#admin_bar a { color: #8a8a8a; }

- user bar:

Quote

#user_navigation a { color: #fff; }

- active tab:

Quote

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

- regular tab:

Quote

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

[Broni]

3. Secondary navigation bar

IPB 3.1.x



Find:

#secondary_nav a {
color: #393939;
text-decoration: underline;
font-weight: bold;
font-size: 1em

In the above script, you can see another text formatting in action - text underlining: text-decoration: underline
I'll increase font size here from 1em to 1.2em and I'll change default color #393939 to navy(16 SVG) #000080:



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

IPB 3.2.x

In this version it's called breadcrumb
Font color has to be changed in two locations:

Quote

.breadcrumb {
color: #777;
font-size: 11px;
}

Quote

.breadcrumb a { color: #777; }

[Broni]

4. Maintitle

IPB 3.1.x



Find:

body .maintitle a {
color: #fff;

Changing #fff to mediumblue(SVG) #0000CD:



To change font size, weight etc., find:

/* Maintitle */
body .maintitle {
font-size: 17px;
font-weight: normal;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
padding: 8px !important;
margin: 0 !important;
overflow: hidden;

We'llexplain some other skinning elements, present in the above script, like rounded corners (sorry IE users, they won't work there), padding, margin, etc., little bit later.

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

IPB 3.2.x

Find it here:

Quote

.maintitle a { color: #fff; }

[Broni]

5. Main page columns titles

IPB 3.1.x



Find:

.header {
background: #C76114;
color: #1d3652;

Changing #1d3652 to cichlid #003EFF:



To change other aspects of that text, find:

table.ipb_table th,
div#current_calendar ol#week_view li.month_bar {
font-size: 0.85em;
font-weight: bold;
padding: 6px;

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

IPB 3.2.x

Not present.

[Broni]

6. Forums

IPB 3.1.x



Sections marked below are controlled by one script:



Find:

a {
color: #284b72;

Changing #284b72 to sign blue #003F87:



To change other settings for the above text, fid:

table.ipb_table h4,
table.ipb_table .topic_title {
font-size: 1.1em;
font-weight: normal;
display: inline;

Now, off to changing forum description (underneath "Welcome" word).

Find:

/* Description */
.desc, p.posted_info, .warn_panel strong {
font-size: 0.8em;
color: #606060;

Changing #606060 to picasso blue #0276FD:



...and to finish this section, last two sets of fonts are controlled by very same script:



Find:

body {
background: #E7C6A5;
color: #1c2837;
font: normal 13px arial, verdana, tahoma, sans-serif;
position: relative;

Changing #1c2837 to mediumblue(SVG) #0000CD:



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

IPB 3.2.x

In this version we have 4 different colors present:



1.

Quote

a {
color: #225985;
text-decoration: none;
}

2.

Quote

.desc, .desc.blend_links a, p.posted_info {
font-size: 12px;
color: #777777;
}

3.

Quote

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

4.

Quote

.desc.lighter, .desc.lighter.blend_links a {
color: #a4a4a4;
}

[Broni]

7. Statistics and Footer

IPB 3.1.x

As you can see below, many font colors got changed already, along with other changes, we made already. I marked fonts, which colors still need to be changed:



Section 1.
Find:

.statistics h2 span {
font-size: 0.8em;
font-weight: normal;
color: #425365;

Changing #425365 to picasso blue #0276FD:



As you can see, sections 2, 4, 5 and 6 have changed colors as well.

To change section 3, find:

a {
color: #003F87;

Changing #003F87 to navy(16 SVG) #000080:



Moving to section 7 now.

Find:

#stats .extra {
color: #a2a2a2;
font-size: 0.9em;

Changing #a2a2a2 to dodgerblue4 #104E8B:



Now, section 8.
Find:

#board_footer a {
color: #606060;

Changing #606060 to dodgerblue4 #104E8B, as well:



Section 9.

Find:

#footer_utilities {
background: #C73F17 url(http://www.smartestcomputing.us.com/public/style_images/test2-images/gradient_bg.png) repeat-x 50%;
color: #fff;
font-size: 0.8em;
padding: 4px 15px;
margin: 25px 15px 0 15px;

Changing #fff to navy(16 SVG) #000080:



Section 10.

Find:

#footer_utilities ul li:first-child {
color: #d5dde5;

Changing #d5dde5 to darkblue(SVG) #00008B:



...and the last section 11...

Find:

/* FOOTER */
#board_footer {
color: #606060;
font-size: 0.85em;
border-top: 1px solid #dedede;
padding: 8px 8px 15px 8px;
margin: 10px 15px 20px;
top: 20px;
clear: both;

Changing #606060 to picasso blue #0276FD:




So, we're pretty much done with text formatting.

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

IPB 3.2.x

We have 4 fonts here:



1.

Quote

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

2.

Quote

.desc, .desc.blend_links a, p.posted_info {
font-size: 12px;
color: #777777;
}

3 and 4.

Quote

a {
color: #225985;
text-decoration: none;
}

Footer.



1.

Quote

a {
color: #225985;
text-decoration: none;
}

2.

Quote

#copyright {
color: #848484;
text-align: right;
text-shadow: 0px 1px 0px #fff;
}

Note "text-shadow" which changes how the real font color looks.

3.
#ipsDebug_footer {
width: 900px;
margin: 8px auto 0px auto;
text-align: center;
color: #404040;
text-shadow: 0px 1px 0px #fff;
font-size: 11px;
}Note "text-shadow" which changes how the real font color looks.

[Broni]

SECTION 3 - other edits


1. Rounded corners

Note. CSS Rounded Corners support: Firefox 2-3, Safari, Chrome, Opera 9.5
Sorry, IE users :(

Let's explain the feature using maintitle bar:



Still in ipb_styles.css, find:

/* Maintitle */
 body .maintitle {
 font-size: 17px;
 font-weight: normal;
 -moz-border-radius: 5px 5px 0 0;
 -webkit-border-top-left-radius: 5px;
 -webkit-border-top-right-radius: 5px;
 padding: 8px !important;
 margin: 0 !important;
 overflow: hidden;

-moz-border-radius: 5px 5px 0 0; line controls rounded corners in Firefox.
5px 5px 0 0 numbers control 4 corners, starting with top left corner (5px)
Let's make them little bit more visible.
To do this, I'll change 5px curve to 10px:



But, we want to have all 4 corners rounded, don't we?
Let's change all 4 numbers to 10px, so the line in question looks like this:

-moz-border-radius: 10px 10px 10px 10px;

The result:




Now, I think, the design will look even better, if we slightly separate maintitle bar from forums header bar.
That's where next feature kicks in....

[Broni]

2. Margin

In the same script, we'll change:

margin: 0 !important;

to:

margin-bottom: 5px !important;

The result:



Full set of margin commands:

[Broni]

3. Padding

Staying with maintitle bar example, the padding defines the space between bar's text and bar's borders.
In our script:

padding: 8px !important;

padding is set to 8px in all directions, but each direction can be comtrolled separately.

All commands:



For instance, changing:

padding: 8px !important;

to:

padding-top: 20px !important

will make our maintitle bar looking like this:




The above completes skinning guide.
Some more info may be added, if needed.

[Broni]

4. Sidebar

IPB 3.2.x



1. Title bar background

Quote

.ipsSideBlock h3 {
font: normal 14px helvetica, arial, sans-serif;
color: #204066;
padding: 5px 10px;
background: #DBE2EC;
margin: -10px -10px 10px;
}

2. Body background

Quote

.ipsSideBlock {
background: #F7FBFC;
padding: 10px;
margin-bottom: 10px;
}