locked
Resetting css settings

    Question

  • Hello everybody,

    is it possible to reset all css settings to default as soon as a certain html page is accessed?
    Reason is, I'm changing the style for a listview for page 'page_2.html' like so

    #resultlist.win-listview 
    {
        height: 100%; 
        width: 100% ;
        border: 2px solid gray;
        overflow: auto;
    }
       
    .win-listview .win-surface {
        background-color: #000;
    } 
    
    .win-listview .win-container{
        padding: 20px;
        border: 1px solid gray; 
        background-color: #1d5e38;
    }
    

    Now if the users navigates back to page_1.html (which also got a listview) I want the styles to be set back to their Default values. Is there an easy way to do this or do I have to manually reset them to their default values (in page_1.css)? Thanks!

    Best Regards
    --Oliver.

    Wednesday, March 28, 2012 11:22 AM

Answers

  • Hi Oliver,

    Simply narrow the scope of the CSS rules so that it only changes the particular listview on your page.  You do not need to change it for all .win-listview. (http://www.w3.org/TR/CSS2/selector.html)

    You can select by type, id or class.  In your case for your page2 you could create something like this:

    <div class="myClass">

    ... ListView etc in here ...

    </div>

    and then your css could look something like this.

    .myClass .win-listview
    {
        height
    : 100%;
        width
    : 100% ;
        border
    : 2px solid gray;
        overflow
    : auto;
    }
      
    .myClass .win-listview .win-surface {
        background
    -color: #000;
    }

    .myClass .win-listview .win-container{
        padding
    : 20px;
        border
    : 1px solid gray;
        background
    -color: #1d5e38;
    }

    -Jeff


    Jeff Sanders (MSFT)

    Wednesday, March 28, 2012 1:44 PM
    Moderator

All replies

  • Hi Oliver,

    Simply narrow the scope of the CSS rules so that it only changes the particular listview on your page.  You do not need to change it for all .win-listview. (http://www.w3.org/TR/CSS2/selector.html)

    You can select by type, id or class.  In your case for your page2 you could create something like this:

    <div class="myClass">

    ... ListView etc in here ...

    </div>

    and then your css could look something like this.

    .myClass .win-listview
    {
        height
    : 100%;
        width
    : 100% ;
        border
    : 2px solid gray;
        overflow
    : auto;
    }
      
    .myClass .win-listview .win-surface {
        background
    -color: #000;
    }

    .myClass .win-listview .win-container{
        padding
    : 20px;
        border
    : 1px solid gray;
        background
    -color: #1d5e38;
    }

    -Jeff


    Jeff Sanders (MSFT)

    Wednesday, March 28, 2012 1:44 PM
    Moderator
  • Thanks Jeff, that did it! :-)
    Thursday, March 29, 2012 8:07 AM