SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member mouse77e's Avatar
    Join Date
    Sep 2006
    Location
    Reading
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Changing CSS style sheets.

    Changing CSS style sheets.

    Hello all, my humble little site is going through the changes that come with having an over imaginative web designer at the helm. Never a good idea I find but here’s what I need to know (pretty please)

    My site http://mouse.nodstrum.com/index.php has a function in the top right hand corner whereby you can swap between style sheets to increase or decrease the font sizes by clicking on the appropriate buttons. Now I want to add a way of changing the colour options to make it more accessible for the disabled, weather they are colour-blind or like myself Dyslexic. See MSN’s home page for example…

    Is there an easy way to do this without having 15 style sheets (3 font sizes by 5 colours)?

    Mouse
    Last edited by mouse77e; Sep 21, 2006 at 04:55. Reason: forgot to give examples
    Call me Mouse! I am putting together a community reunion site,

    http://mouse.nodstrum.com

  2. #2
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    UK
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can have multiple active stylesheets included at one time. So simply have a 'fonts' stylesheet and 'colours' stylesheet. One of the switchers alternates the fonts stylesheet and the other alternates the colours. Then you can mix and match.
    VayaDesign - Standards Based Web Development

  3. #3
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you can't get around having to use 15 stylesheets, you can at least cut down on duplication of code by importing pre-existing stylesheets, e.g. clicking on large blue might call a stylesheet that has this:

    @import "blue.css";
    @import "larger.css";

    EDIT: what Dom says makes much more sense. As long as the rules in the different stylesheets don't interfere with each other, you should be fine.

  4. #4
    SitePoint Member mouse77e's Avatar
    Join Date
    Sep 2006
    Location
    Reading
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahhh a light dawns BUT the text is coloured too... am i back to 15 sytle sheets...?
    Call me Mouse! I am putting together a community reunion site,

    http://mouse.nodstrum.com

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    UK
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There's no reason why you can't have this in 'colours stylesheet A' :

    Code:
    #content { 
         color: #CCC;
    }
    And this in 'font size stylesheet B':

    Code:
    #content { 
         font-size: 14px;
    }
    Just because both apply to #content does not mean they have to be lumped together. If you have 3 font sizes and 2 colour schemes you should have 5 'variable' stylesheets at the very most. No duplication is necessary in any of them.

    Equally those 5 files can all be pretty minimalistic as they will only refer to font sizes or colours. All of the core CSS (ie design elements, anything that is used 100% of the time regardless of user's preferences) would then go into a 'core.css' file.
    VayaDesign - Standards Based Web Development

  6. #6
    SitePoint Member mouse77e's Avatar
    Join Date
    Sep 2006
    Location
    Reading
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up AGGGGhhhhh why didnt i think of that????

    ok... looking and sounding more like a plan.... just have to build it then...

    Many thanks

    Mouse
    Call me Mouse! I am putting together a community reunion site,

    http://mouse.nodstrum.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •