#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Posts
    6
    Rep Power
    0

    Question possible? internal reference among css styles


    I have been trying to determine the possibility [can it be done?] and method [wehat would the refherence look like?] of defining a color in one part of my css document and having other styles get their color values from that defenition. I'd prefer to do this without using multiple style sheets or nested styles.

    An example of what I'd like to do would be the following:

    .MainColor{#000000}

    .TableBorder{color: .MainColorValueGoesHere}

    I'd like to do this so I can set up three or four items similar to .Maincolor [to create a color scheme] and then have all my other styles get their color vales from those three or foeur items. This would allow me to change entire color scheme for my pages by just altering the 3-4 items.

    If anyone knows of alternate workarounds or can suggest a different approach, all help is greatly appreciated.
  2. #2
  3. ASP.Net MVP
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Aug 2003
    Location
    WI
    Posts
    4,378
    Rep Power
    1510
    I know what you're talking about. On my site I have a rounded border for the main content of each page, and I have it down to where I can change the color of the border by changing one number on the style sheet. It would be nice to be able to name that color something like BorderColor, and then later if I add other, similar features, or if I want to use the same color for other purposes, so be able to reference that definition. It probably can be done, but I don't know how to do it.
    Primary Forum: .Net Development
    Holy cow, I'm now an ASP.Net MVP!

    [Moving to ASP.Net] | [.Net Dos and Don't for VB6 Programmers]

    http://twitter.com/jcoehoorn
  4. #3
  5. This is only a test
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2003
    Location
    Off the air
    Posts
    2,893
    Rep Power
    153
    You could create a JS script to write out your stylesheet and set your colors through variables, so you only have to change the variable once...
  6. #4
  7. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Posts
    6
    Rep Power
    0

    ? on js suggestion


    Do you mean use JS to "write in" my values like so:

    javascript:

    function DisplayColor(i)
    {
    document.write(Color[i])
    }

    then in my css use:

    .MainColor{color: DisplayColor(i);}



    [I know the syntax is off, I haven't used js to "write" into a document in a while and need to lookup the syntax]

    So, the general idea is to set my color values in a js file/function then call those values within my css stylesheet. Correct?
  8. #5
  9. This is only a test
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2003
    Location
    Off the air
    Posts
    2,893
    Rep Power
    153
    Something like that, but you may have to actually document.write the entire stylesheet (or at least the styles you want to be able to use the variable with -- there's no reason not to have a separate non-variabled style sheet); I'm not sure if you'll be able to call a JS function from inside the style itself.

    Code:
    <script>
      myColor = cc0000
    
      document.write('<style>'
                   + '.style1 {background: ' + myColor + '}'
                   + '</style>'
                   );
    </script>
    Not the prettiest way to do it, but it should work.
  10. #6
  11. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Posts
    6
    Rep Power
    0

    thanks will consider


    I'll look over my current structure and see how hard it would be to implement it as js. I didn't want to use two styleshees, but found a very "clean' way of swapping the color schemes at:

    http://www.r7designer.com/news/dw_templates/000052.html

    Requires changing just one line in your page and the entire "color scheme" is updated. Nice and organized unfortunately I'll have to edit my main .css to remove all references to a second "color" .css.

    Still think there must be a way to reference a previous style, it would be a great help since most of my styles share two to three colors.
  12. #7
  13. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Posts
    6
    Rep Power
    0

    Still need workaround


    How can I set the color value of #999966 once and have my other styles [.masthead_livechattxt , .masthead_slogantxt , and .masthead_telephonetxt] "assume' their color from the initial defenition?

    .masthead_livechattxt {
    color: #999966;
    font: 14px Arial, Helvetica, sans-serif;
    text-align: center;
    }

    .masthead_slogantxt {
    color: #999966;
    font: bold 18px "Courier New", Courier, mono;
    }

    .masthead_telephonetxt {
    color: #999966;
    font: normal 16px Arial, Helvetica, sans-serif;
    padding-right: 8px;
    text-transform: none;
    }

IMN logo majestic logo threadwatch logo seochat tools logo