Advertise Here

Author Topic: Using the Graphic Sections of the CSS  (Read 1339 times)

0 Members and 1 Guest are viewing this topic.

Offline LaundryLady

  • Helpers
  • *
  • Posts: 3253
  • Internet Challenged
    • View Profile

  • Total Badges: 26
    Badges: (View All)
    Seventh year Anniversary Sixth year Anniversary Search Poll Voter Level 5
Using the Graphic Sections of the CSS
« on: May 08, 2007, 08:05:43 am »
Forum Url: http://thelaundryroom.smfforfree2.com
I understand most of the things enough to tweak colors etc, on the modify stylesheets.  The problem is with the graphics for the tabs on the menu bar.

How do you find the graphics and/or modify to be able to change colors?  This has me totally buffaloed right now.  I have not worked much with graphics other than to be able to acquire them from sites. 

I am working on making a Memorial Day stylesheet and was hoping to have it completed in time.

Sibyl, Oh Great Stylesheet Guru, do you have any help for this untutored one?


And I Play:  Mafia-Mandemz

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: Using the Graphic Sections of the CSS
« Reply #1 on: May 08, 2007, 08:47:43 am »
Forum Url: http://thelaundryroom.smfforfree2.com
I understand most of the things enough to tweak colors etc, on the modify stylesheets.  The problem is with the graphics for the tabs on the menu bar.

How do you find the graphics and/or modify to be able to change colors?  This has me totally buffaloed right now.  I have not worked much with graphics other than to be able to acquire them from sites. 

I am working on making a Memorial Day stylesheet and was hoping to have it completed in time.

Sibyl, Oh Great Stylesheet Guru, do you have any help for this untutored one?

I'll see if I can explain this without confusing you ;)
This is probably the most time consuming part of creating a new style, but it does make the style look much better if you create new tabs to match it.

The tabs you see at the top in the menu bar are the main tabs. 
They consist of 3 graphics.    maintab_first,  maintab_back, maintab_last

         

Notice that when you have clicked on HOME or PROFILE the tab changes color abit?
It is now using 3 different graphics.   
They are the main active tabs.
maintab_active_first,   maintab_active_back,  maintab_active_last

      

To change these you need to use a graphic program such as Paint Shop Pro, PhotoShop, The Gimp, etc.   
If the edges to them are rounded they will need to be saved as transparent gif's or you will get a little white corner on them  ;)

There are 6 more tabs you need to take care of when doing this.   
They are the Mirror tabs.    they are exactly the same as those I posted above, but they are flipped.
You will see them if you click on a Board name..  look to the far right.

I have found its easier to make the main tabs first. 
Then flip each one and save them and rename them to their respective mirror tab names.

Ill post the mirror tabs here though and their names.

mirrortab_first,  mirrortab_back, mirrortab_last

       
and the active tabs for the mirror tabs:

mirrortab_active_first, mirrortab_active_back, mirrortab_active_last

       

The font for these tabs is set to #FFFFFF (white) as it shows up well on them
Should you make tabs that you need/want a different font color on you will need to, in the css,
go thru the entire section for the tabs  (both main and mirror) and change the font colors.
« Last Edit: May 08, 2007, 08:49:15 am 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: Using the Graphic Sections of the CSS
« Reply #2 on: May 08, 2007, 09:03:36 am »
You can also do links, instead of tabs.
There are a few stylesheets in the stylesheets area that are done that way.. if you check crasy n' confused's rusted stylesheet you'll see what I mean.   Also my ss-space and chocolate stone stylesheets use the same effect.

Easiest way I can think of to explain how to do them that way is to grab one of the stylesheets that is done that way and study it  ;)    That is how I figured it out.


Sibyl, Oh Great Stylesheet Guru, do you have any help for this untutored one?

Thank you  lol 
far from a guru though..  I'm still figuring it all out myself and learn something new every time I do one
« Last Edit: May 08, 2007, 09:07:21 am by simply sibyl »

Offline LaundryLady

  • Helpers
  • *
  • Posts: 3253
  • Internet Challenged
    • View Profile

  • Total Badges: 26
    Badges: (View All)
    Seventh year Anniversary Sixth year Anniversary Search Poll Voter Level 5
Re: Using the Graphic Sections of the CSS
« Reply #3 on: May 08, 2007, 09:07:00 am »
Thanks a lot, I will work with this and see how far I get.  Will have to try and see if Paint Shop will ever install on my machine.  The paint program that came with my machine is not any good for much beyond simple stuff.


And I Play:  Mafia-Mandemz

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: Using the Graphic Sections of the CSS
« Reply #4 on: May 08, 2007, 09:20:58 am »
okay..   Ive heard good things about The Gimp from members at my own forum, as well as commets here.. so you could try that as well.     Good luck, and if you run into trouble ask away  ;)

 

Related Topics

  Subject / Started by Replies Last post
1 Replies
1996 Views
Last post May 12, 2007, 10:35:09 am
by simply sibyl
5 Replies
2304 Views
Last post July 17, 2007, 04:54:13 pm
by Kimmie
1 Replies
916 Views
Last post July 04, 2008, 05:49:02 pm
by simply sibyl
4 Replies
1121 Views
Last post September 11, 2008, 02:31:56 pm
by simply sibyl
10 Replies
4931 Views
Last post November 09, 2008, 08:13:54 pm
by Southeast_offroad