SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2001
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to switch between style sheets

    Hi, I have a webpage I am designing for which I want to use one style sheet for the wrapper (header, footer, and sidebar.. easy that's done) and another style sheet for the dynamically created body. Is there an easy way to switch between the two?

    Regards

  2. #2
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hello

    I might not understand what you are after. If you want to create the ability to switch between 2 different style sheets using javascript, this article may lend a hand. If I have missed the point alltogether, please post again.

  3. #3
    SitePoint Enthusiast nzgfxguru's Avatar
    Join Date
    Dec 2004
    Location
    New Zealand
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe put one of the stylesheets inline, in the <head> of your pages?

    I don't quite understand what you mean by switching...do you mean switching stylesheets while viewing the page?
    Julian Jackson
    Circle Design - Think outside the square.
    Knitnak, for fabulous handmade knitwear.

  4. #4
    SitePoint Zealot
    Join Date
    Feb 2001
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No what I want to do is use one style sheet for the static elements of a page which has a dynamic middle part (a photo gallery) for which I wish to use a completely seperate style sheet. This is the page if it helps: http://www.outcastriverguides.com/co...ls.php?album=2

    So essentially I want one style sheet referenced for everthing up the dynamic middle part of the page and then switch to a different style sheet for the middle and finally switch back to the original style sheet for the footer elements. If this is too difficult perhaps I can combine the two style sheets??

  5. #5
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Sorry I did misunderstand, just link to 2 different stylesheets from the head section.

    Code:
    <link rel="stylesheet" type="text/css" media="screen" href="layout.css" />
       <link rel="stylesheet" type="text/css" media="screen" href="dynamic.css" />
    Hope it helps

  6. #6
    SitePoint Zealot
    Join Date
    Feb 2001
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah that's exactly what I was getting at and it does help, but how do you actually do the switch between the two as needed?

  7. #7
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hello

    I am not sure what you mean by switch. I know what switch means, though I am not sure why you need to switch between the 2, don't you need the styles for both on the page at all times?

    Please explain and I will do my best to help

  8. #8
    Romans 12:2 codyrockx's Avatar
    Join Date
    Jul 2003
    Location
    Newberg, Oregon
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can't exactly switch between the style sheets how you are trying to. You would need to wrap the middle content in a div layer, or if it already is reference it as such. Using the id, for each class within the second style sheet, add #middleid to the front of the assignment.
    Code:
     #middleid span.text {
     ....
     }
    That way, it will only affect the elements wrapped within the "middleid" div layer. Then once you close that layer, it will continue to use the css styles from the previous sheet as long as you have set it as such.
    Codyrobert.com - Designer and Developer

  9. #9
    SitePoint Zealot
    Join Date
    Feb 2001
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm, I was hoping I could do this and get away without modifying the code in the middle dynamic body where the pictures are displayed.

  10. #10
    SitePoint Enthusiast ElQanah's Avatar
    Join Date
    Oct 2004
    Location
    Costa Rica
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if I get you right, you don't need to switch anything (that is not the word which would describe you I think you want to do). If the dynamic content will always have the same style for itself, what you do is creating a Div container like:
    Code:
       <div id=dynamic name=dynamic>
       your dynamic html, cf, asp, js or whatever here...
       </div>
    in your css do styling for #dynamic, i.e.
    Code:
      <style>
      /*your header and stuff*/
      h1 {bla bla}
      p {bla bla}
      /*then your container*/
      #dynamic h1 {more bla bla}
      #dynamic p {even more bla bla}
      </style>


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
  •