Advertise Here

Author Topic: Stylesheet Making Tips/Helpful Links  (Read 26538 times)

0 Members and 1 Guest are viewing this topic.

Offline simply sibyl

  • Helpers
  • *
  • Posts: 14347
  • On hiatus
    • View Profile
    • The Tent Dwellers

  • Total Badges: 31
    Badges: (View All)
    Level 6 Poll Voter Webmaster Arcade Highscore Windows User
Stylesheet Making Tips/Helpful Links
« on: July 03, 2007, 11:40:11 am »
This Thread is for Tips and Helpful Links for Making Stylesheets ONLY.  
Do NOT ask stylesheet questions in this thread and let's leave it for helpful things.
All other posts will be removed.
If you have a helpful tip, trick, or link feel free to use this thread to share it.


Stylesheets made by members and posted here at Support
You must give credit and a link back to the original author of a stylesheet if you do a remake or a conversion of a stylesheet or theme.
Stylesheet Authors Please Read


Guide for the Manage Styles section in Admin:
Admin CP Manage Styles Guide
w3schools is invaluable for learning css:
http://w3schools.com/css/default.asp
tizag has a very good css tutorial for the beginner
http://www.tizag.com/cssT/

Up to date stats on browser trends - resolutions - browsers - OS's
http://www.w3schools.com/browsers/default.asp

Color coded forum - see where each color is used:    
Its sole purpose is for you to look around and to be able to easily see where the areas are in the css.
You do not need to signup to use it.
Color Coded Stylesheet Help

Tutorial for the Default CSS:
Explanation of the Default css
Understanding the difference between Classes and IDs


Background Help:
How to put a background image on your forum
w3schools background css info
How to put an image on top of the background

How to use a different logo/banner with each stylesheet
Instructions Here

Center Forum /  Make exact width:
How to center the forum or make it an exact width

Browser Screen Resolution Checker
Check to see how your stylesheet will look with the viewer's monitor set to different screen resolutions.
http://www.markhorrell.com/tools/browser.html

Tab Help:
Change Tab Colors  (using color codes instead of images)
Explanation of the Default css

How to Change the News Fader Font and Link Colors:
Change News Fader Font and Link Colors

Color Code Sites:
http://html-color-codes.com/
http://www.december.com/html/spec/color.html
http://www.webmonkey.com/webmonkey/reference/color_codes/
http://www.computerhope.com/htmcolor.htm#03
http://instant-eyedropper.com/info/html_color_code/

Find Colors that Go well together with:
Color Blender

Select Colors from anywhere on the screen with:
Instant Eyedropper


How to change the color of the fonts/links  in the footer area

Quote
Bookmark this site! | Upgrade This Forum
SMF For Free - Create your own Forum

Powered by SMF | SMF © 2006, Simple Machines LLC

Add this to your css, change the color code to what you need.

Code: [Select]

#footerarea a:link, #footerarea a:visited
{
color:  #D9DBB5;
}




How to add a background image to the post editor

Look for this area in the css:

Code: [Select]
/* The main post box - this makes it as wide as possible. */
.editor

Replace that area with this   (replace the background color and IMAGE URL in the code with your own.  
"repeat" will repeat the image horizontally and vertically so it will cover the entire area.    Use repeat-x if you want it to repeat horizontally only.   Use repeat-y if you want it to repeat vertically only.    


Code: [Select]
/* The main post box - this makes it as wide as possible. */
.editor
{
width: 96%;
background: #ffffff url(IMAGE URL) repeat;
}


« Last Edit: May 10, 2011, 12:37:47 pm by simply sibyl »

Offline Celebrus

  • SMF For Free Hero
  • *
  • Posts: 941
    • View Profile
    • Vikhyat Korrapati

  • Total Badges: 16
    Badges: (View All)
    Topic Starter Combination Level 3 Level 2 Level 1
Re: Stylesheet Making Tips/Helpful Links
« Reply #1 on: April 22, 2008, 02:22:02 am »
http://browsershots.org/

"Test your web design in different browsers"

"Browsershots makes screenshots of your web design in different browsers. It is a free open-source online service created by Johann C. Rocholl. When you submit your web address, it will be added to the job queue. A number of distributed computers will open your website in their browser. Then they will make screenshots and upload them to the central server here. "

It basically takes screenshots of your web site in various browsers in various operating systems. It might be useful in seeing how your style performs under various circumstances.

Offline simply sibyl

  • Helpers
  • *
  • Posts: 14347
  • On hiatus
    • View Profile
    • The Tent Dwellers

  • Total Badges: 31
    Badges: (View All)
    Level 6 Poll Voter Webmaster Arcade Highscore Windows User
Re: Stylesheet Making Tips/Helpful Links
« Reply #2 on: June 15, 2008, 09:31:57 pm »
Doing a lot of css editing and tired of having to keep scrolling to the bottom of the page?

Put this in your footer:  <a name="bottom"></a>

Make a custom tab    (Admin > Manage Styles > Custom Tabs)
Title:     Down
URL:     #bottom

When you click the "down" tab it will take you to the bottom of the forum.
Its really helpful in Admin, when doing a lot of css editing as you can get to
the bottom of the screen quickly.

(actually its helpful in many places on the forum)
« Last Edit: June 15, 2008, 09:34:26 pm by simply sibyl »

Offline simply sibyl

  • Helpers
  • *
  • Posts: 14347
  • On hiatus
    • View Profile
    • The Tent Dwellers

  • Total Badges: 31
    Badges: (View All)
    Level 6 Poll Voter Webmaster Arcade Highscore Windows User
Re: Stylesheet Making Tips/Helpful Links
« Reply #3 on: November 29, 2008, 06:07:13 pm »
The CSS  (Cascading Stylesheet) is the code that defines all the colors, fonts, styles ect on your forum.  
Ive broken down the default css into sections, with explanations of each section, for you.    
My goal with this is not to teach you how to edit these areas -  it is to show you what each of these areas is for.

Best source for help with css:  http://www.w3schools.com/css/



/* Normal, standard links. */
a:link
{
   color: #476C8E;
   text-decoration: none;
}
a:visited
{
   color: #476C8E;
   text-decoration: none;
}
a:hover
{
   color: #000000;
   text-decoration: underline;
}

Defines the colors of the links on your forum.
In the example above the normal and visited links are color #476C8E.
When hovered over with the mouse they change to #000000 and are underlined.




/* Navigation links - for the link tree. */
.nav, .nav:link, .nav:visited
{
   color: #000000;
   text-decoration: none;
}
a.nav:hover
{
   color: #cc3333;
   text-decoration: underline;
}

Defines the colors and style of the navigation links.  (example below)
In the example above the navigation links are color #000000.
When hovered over with the mouse they change to #cc3333 and are underlined.





/* By default (td, body..) use verdana in black. */
body, td, th , tr
{
   color: #000000;
   font-size: small;
   font-family: verdana, sans-serif;
}

Defines the colors of the text such as on the board index, header and footers, and in the main body of text.




/* The main body of the entire forum. */
body
{
   background-color: #E5E5E8;
   margin: 0px;
   padding: 12px 30px 4px 30px;

}

Defines the background color,  margin, and padding.
This is where you would add a background image.
How to put a background image on your forum
You can also change the width of the forum.
Center your forum / make forum exact width       
w3schools css background info:   http://www.w3schools.com/css/css_background.asp




/* Input boxes - just a bit smaller than normal so they align well. */
input, textarea, button
{
   background-color: ;
   color: #000000;
   font-family: verdana, sans-serif;
}

Defines the text color and text sizes of your input boxes, text areas, and buttons. (example below)

You can change the color of those areas by adding a background color and borders.




input, button
{
   font-size: 90%;
}

Defines the font size for the input button




textarea
{
   font-size: 100%;
   color: #000000;
   font-family: verdana, sans-serif;
}

Defines the font size, color and family of the text in the text boxes (areas like the quick reply box, the post editor box, the header/footer,  admin notes area, etc.




/* Selects are a bit smaller, because it makes them look even better 8). */
select
{
   font-size: 90%;
   font-weight: normal;
   color: #000000;
   font-family: verdana, sans-serif;
}

Defines the text size, font and color for the select boxes. (the drop down menus)




/* Standard horizontal rule.. ([hr], etc.) */
hr, .hrcolor
{
   height: 1px;
   border: 0;
   color: #666666;
   background-color: #666666;
}

Defines the height, border, color, etc of the horizontal rules.
Horizontal rules are used in areas like at the top of posts,  just above the signature in a post,  and the horizontal lines in this guide, etc.




/* No image should have a border when linked */
a img
{
   border: 0;
}

Simple:   borders will not be put around linked images
If for some reason you want them bordered change it to:
border:  1px solid #000000;
Change 000000 to your preferred color




/* A quote, perhaps from another post. */
.quote
{
   color: #000000;
   background-color: #D7DAEC;
   border: 1px solid #000000;
   margin: 1px;
   padding: 1px;
   font-size: x-small;
   line-height: 1.4em;
}

Defines the text color, size, border color, background color of the quote boxes in posts.




/* A code block - maybe even PHP . */
.code
{
   color: #000000;
   background-color: #dddddd;
   font-family: "courier new", "times new roman", monospace;
   font-size: x-small;
   line-height: 1.3em;
   /* Put a nice border around it. */
   border: 1px solid #000000;
   margin: 1px auto 1px auto;
   padding: 1px;
   width: 99%;
   /* Don't wrap its contents, and show scrollbars. */
   white-space: nowrap;
   overflow: auto;
   /* Stop after about 24 lines, and just show a scrollbar. */
   max-height: 24em;
}

Defines the text color, text size, border color, background color, margin, padding, etc of the code boxes in posts.




/* The "Quote:" and "Code:" header parts... */
.quoteheader, .codeheader
{
   color: #000000;
   text-decoration: none;
   font-style: normal;
   font-weight: bold;
   font-size: x-small;
   line-height: 1.2em;
}

Defines the headers fpr the code and quote boxes (Where it says either Code: or Quote:




/* The main post box - this makes it as wide as possible. */
.editor
{
   width: 96%;
}

Defines the width of the main posting box.




/* Highlighted text - such as search results. */
.highlight
{
   background-color: yellow;
   font-weight: bold;
   color: black;
}

Defines the color, background color of the highlighted words in Search results




/* Alternating backgrounds for posts, and several other sections of the forum. */
.windowbg
{
   color: #000000;
   background-color: #ECEDF3;
}
.windowbg2
{
   color: #000000;
   background-color: #F6F6F6;
}
.windowbg3
{
   color: #000000;
   background-color: #E0E1E8;
}

Defines the font color and background color for several areas on the forum including alternating posts
(With some imagination you can add background images and bordering to these areas)




/* the today container in calendar */
.calendar_today
{
   background-color: #FFFFFF;
}

Defines the background color for the current day on the calendar




/* These are used primarily for titles, but also for headers (the row that says what everything in the table is.) */
.titlebg, tr.titlebg th, tr.titlebg td, .titlebg2, tr.titlebg2 th, tr.titlebg2 td
{
   color: black;
   font-style: normal;
   background: url(http://images.smfboards.com/Themes2/default/images/titlebg.jpg) #E9F0F6 repeat-x;
   border-bottom: solid 1px #9BAEBF;
   border-top: solid 1px #FFFFFF;
   padding-left: 10px;
   padding-right: 10px;
}
.titlebg, .titlebg a:link, .titlebg a:visited
{
   font-weight: bold;
   color: black;
   font-style: normal;
}

.titlebg a:hover
{
   color: #404040;
}
/* same as titlebg, but used where bold text is not needed */
.titlebg2 a:link, .titlebg2 a:visited
{
   color: black;
   font-style: normal;
   text-decoration: underline;
}

.titlebg2 a:hover
{
   text-decoration: underline;
}


Defines the background image, text color, text size/font , padding, etc of the titles for the table headers.
This includes areas such as the titles in the Info Center,  the titles at the top of the forum  (where the time is) and many other areas on the forum where those titles are used.



/* This is used for categories, page indexes, and several other areas in the forum.
.catbg and .catbg2 is for boardindex, while .catbg3 is for messageindex and display headers*/
.catbg , tr.catbg td , .catbg3 , tr.catbg3 td
{
   background: url(http://images.smfboards.com/Themes2/default/images/catbg.jpg) #88A6C0 repeat-x;
   color: #ffffff;
   padding-left: 10px;
   padding-right: 10px;
}
.catbg2 , tr.catbg2 td
{
   background: url(http://images.smfboards.com/Themes2/default/images/catbg2.jpg) #A1BFD9 repeat-x;
   color: #ffffff;
   padding-left: 10px;
   padding-right: 10px;
}
.catbg, .catbg2, .catbg3
{
   border-bottom: solid 1px #375576;
}
.catbg, .catbg2
{
   font-weight: bold;
}
.catbg3, tr.catbg3 td, .catbg3 a:link, .catbg3 a:visited
{
   font-size: 95%;
   color: white;
   text-decoration: none;
}
.catbg a:link, .catbg a:visited , .catbg2 a:link, .catbg2 a:visited
{
   color: white;
   text-decoration: none;
}
.catbg a:hover, .catbg2 a:hover, .catbg3 a:hover
{
   color: #e0e0ff;
}

Defines the background image, text color, text size/font , padding, etc of the Category Headers.
This includes areas such as the category headers page indexes, and several other areas in the forum





/* This is used for tables that have a grid/border background color (such as the topic listing.) */
.bordercolor
{
   background-color: #ADADAD;
   padding: 0px;
}

/* This is used on tables that should just have a border around them. */
.tborder
{
   padding: 1px;
   border: 1px solid #696969;
   background-color: #FFFFFF;
}

Defines the parameters for the borders around things.
The first section labeled ".bordercolor" specifies the borders around things such as posts in threads, and items on the menu in the admin center (see top picture).
The second section named ".tborder" is for the borders around things such as categories on the forum index, and just about every other place that has a border on the entire forum.




/* Default font sizes: small (8pt), normal (10pt), and large (14pt). */
.smalltext
{
   font-size: x-small;
   font-family: verdana, sans-serif;
}
.middletext
{
   font-size: 90%;
}
.normaltext
{
   font-size: small;
}
.largetext
{
   font-size: large;
}

Defines the default font sizes



The Tab Definitions in the css
I've divided the tab section of the css into a few parts to make this easier.


Definitions for the "main" tabs

Example:


This part specifies the font color, size, family, alignment, and text transformation for the main and main_active tabs.


/* definitions for the main tab, active means the tab reflects which page is displayed */
.maintab_first, .maintab_back, .maintab_last, .maintab_active_first, .maintab_active_back, .maintab_active_last
{
   color: white;
   text-transform: uppercase;
   vertical-align: top;
}
.maintab_back, .maintab_active_back
{
   color: white;
   text-decoration: none;
   font-size:  9px;
   vertical-align: top;
   padding: 2px 6px 6px 6px;
   font-family: tahoma, sans-serif;
}




This part defines the background images, and the width of the main tabs.

maintab_first.gif -  The left side
maintab_back.gif - Repeats across the bar
maintab_last.gif -   The right side

   


.maintab_first
{
   background: url(images/maintab_first.gif) left bottom no-repeat;
   width: 10px;
}
.maintab_back
{
   background: url(images/maintab_back.gif) left bottom repeat-x;
}
.maintab_last
{
   background: url(images/maintab_last.gif) left bottom no-repeat;
   width: 8px;
}




This part defines the background images, and the width of the main_active tabs

The main "active" tabs are usually a different color then the "main" tabs to show the page you are currently on

maintab_active_first.gif   -  The left side
maintab_active_back.gif  -  Repeats across the bar
maintab_active_last.gif   -   The right side

   


.maintab_active_first
{
   background: url(images/maintab_active_first.gif) left bottom no-repeat;
   width: 6px;
}
.maintab_active_back
{
   background: url(images/maintab_active_back.gif) left bottom repeat-x;
}
.maintab_active_last
{
   background: url(images/maintab_active_last.gif) left bottom no-repeat;
   width: 8px;
}




Defines the link colors, text-decoration, for the main and main_active tabs


/* how links behave in main tab. */
.maintab_back a:link , .maintab_back a:visited, .maintab_active_back a:link , .maintab_active_back a:visited
{
   color: white;
   text-decoration: none;
}

.maintab_back a:hover, .maintab_active_back a:hover
{
   color: #e0e0ff;
   text-decoration: none;
}




Definitions for the "mirror" tabs.

Example:


This part specifies the font color, size, family, alignment, and text transformation for the mirror and mirror_active tabs.


/* definitions for the mirror tab */
.mirrortab_first, .mirrortab_back, .mirrortab_last, .mirrortab_active_first, .mirrortab_active_back, .mirrortab_active_last
{
   color: white;
   text-transform: uppercase;
   vertical-align: top;
}
.mirrortab_back, .mirrortab_active_back
{
   color: white;
   text-decoration: none;
   font-size: 9px;
   vertical-align: bottom;
   padding: 6px 6px 2px 6px;
   font-family: tahoma, sans-serif;
}



This part defines the background images, and the width of the mirror tabs

mirrortab_first.gif -  The left edge of the tab bar
mirrortab_back.gif - Repeats across the bar
mirrortab_last.gif -   The right edge of the tab bar

   


.mirrortab_first
{
   background: url(images/mirrortab_first.gif) no-repeat;
   width: 10px;
}
.mirrortab_back
{
   background: url(images/mirrortab_back.gif) repeat-x;
}
.mirrortab_last
{
   background: url(images/mirrortab_last.gif) no-repeat;
   width: 6px;
}



This part defines the background images, and the width of the mirror_active tabs

mirrortab_active_first.gif -  The left side
mirrortab_active_back.gif - Repeats across the bar
mirrortab_active_last.gif -   The right side

   



.mirrortab_active_first
{
   background: url(images/mirrortab_active_first.gif) no-repeat;
   width: 6px;
}
.mirrortab_active_back
{
   background: url(images/mirrortab_active_back.gif) repeat-x;
}
.mirrortab_active_last
{
   background: url(images/mirrortab_active_last.gif) no-repeat;
   width: 8px;
}




This part defines the font color, size, family, alignment, and text transformation for the mirror and mirror_active tabs.


/* how links behave in mirror tab. */
.mirrortab_back a:link , .mirrortab_back a:visited, .mirrortab_active_back a:link , .mirrortab_active_back a:visited
{
   color: white;
   text-decoration: none;
}

.mirrortab_back a:hover, .mirrortab_active_back a:hover
{
   color: #e0e0ff;
   text-decoration: none;
}




Definitions for the AJAX notifier
Defines things like the background, font color, size, etc.  


/* The AJAX notifier */
#ajax_in_progress
{
   background: #32CD32;
   color: white;
   text-align: center;
   font-weight: bold;
   font-size: 18pt;
   padding: 3px;
   width: 100%;
   position: fixed;
   top: 0;
   left: 0;
}
« Last Edit: August 22, 2009, 12:40:28 pm by simply sibyl »

Offline Zion

  • SMF For Free Full Member
  • *
  • Posts: 104
    • View Profile

  • Total Badges: 11
    Badges: (View All)
    Topic Starter Combination Level 2 Level 1 100 Posts
Re: Stylesheet Making Tips/Helpful Links
« Reply #4 on: October 01, 2009, 02:09:52 am »
Nice work. Making a Stylesheet now :)
I'm Back and trying harder.

Offline Death 2 come

  • SMF For Free Newbie
  • *
  • Posts: 4
    • View Profile

  • Total Badges: 4
    Badges: (View All)
    Topic Starter Level 1 First Post One year Anniversary
Re: Stylesheet Making Tips/Helpful Links
« Reply #5 on: November 26, 2010, 12:27:58 pm »
Just a quick question. you know the where do i put them? because i really want to be able to put them in.

regards

Death 2 Come

Offline Seldom Fail

  • Helpers
  • *
  • Posts: 2082
  • Helping for 3 years! :)
    • View Profile
    • My Site!

  • Total Badges: 26
    Badges: (View All)
    Sixth year Anniversary Fifth year Anniversary Apple User Search Poll Voter
Re: Stylesheet Making Tips/Helpful Links
« Reply #6 on: November 26, 2010, 09:22:54 pm »
Just a quick question. you know the where do i put them? because i really want to be able to put them in.

regards

Death 2 Come

Admin CP > Manage Styles > Customize Images

Find the image you want that to replace and put that URL in the place of the URL that's already there.
<--- Donate to SMF For Free! :D

Offline Lolcopte

  • SMF For Free Newbie
  • *
  • Posts: 6
    • View Profile

  • Total Badges: 4
    Badges: (View All)
    Topic Starter Level 1 First Post Windows User
Re: Stylesheet Making Tips/Helpful Links
« Reply #7 on: January 10, 2014, 08:08:26 am »
Thanks for the info sibyl.

cheers :D

 

Related Topics

  Subject / Started by Replies Last post
4 Replies
16990 Views
Last post August 08, 2010, 09:54:09 pm
by Corinne