Results 1 to 10 of 10
  1.    #1  
    Fellow devs,

    I would like to customize the look and feel of my app, including changing what color the groups show up as.

    I found that I can create a new PNG to use a the basis for the group and then tell my app to use it in CSS like this:

    .palm-group {
    margin: 7px;
    border-width: 40px 18px 18px 18px;
    -webkit-border-image: url(../images/palm-group-blue.png) 40 18 18 18 repeat repeat;
    }

    However, what if I want two options, where the user can select to have either blue groups or pink groups... like boy or girl.

    Can I place a variable in a CSS file? Can I modify the .palm-group CSS from my javascript?

    Thanks!
    Check out my apps at clearwaterapps.com
  2. #2  
    $('yourobject').addClassName('pink');
    danNielson.com - Slalom - twitter - facebook
    A posted thanks dies with the thread. Clicking the button lasts until the admins get bored with this site and throw it in the recycling bin.
  3.    #3  
    Quote Originally Posted by unfairSurprisery View Post
    $('yourobject').addClassName('pink');
    Thanks!

    I actually had to do $('myobject').removeClassName('palm-group') first because the .addClassName was also inserting a space.
    Check out my apps at clearwaterapps.com
  4.    #4  
    Actually, it looks like this only gets me part of the way there.

    This allows me to set the class for each element and I can create a blue and a pink class. However, then I need to manage each element in my scene individually.

    What I would really like to do is conditionally override the .palm-group CSS class.

    Kind like this (pardon me for putting an if statement in CSS)

    if(boy) {
    .palm-group {
    -webkit-border-image: url(../images/palm-group-blue.png) 40 18 18 18 repeat repeat;
    }
    else {
    .palm-group {
    -webkit-border-image: url(../images/palm-group-pink.png) 40 18 18 18 repeat repeat;
    }

    That way the whole class is overridden and I dont have to worry about elements.

    Make sense?
    Check out my apps at clearwaterapps.com
  5.    #5  
    Ok, here we go.

    I made multiple stylesheets with different overrides of .palm-group

    then in the scene you specify that sheet
    <link rel="stylesheet" type="text/css" href="stylesheets/blue.css" id='CSSlink' />

    then in the javascript you can change the active stylesheet
    $('CSSlink').href = 'stylesheets/pink.css';
    Check out my apps at clearwaterapps.com
  6. #6  
    Sorry, My suggestion was based on the assumption that you wanted 'boy' and 'girl' elements in the same scene...
    Also, using $$('') allows you to grab an entire group of items which you can iterate through to do something. For instance:
    Code:
    $$('.palm-group').each(function(item){
     item.addClassName('blue');
    });
    danNielson.com - Slalom - twitter - facebook
    A posted thanks dies with the thread. Clicking the button lasts until the admins get bored with this site and throw it in the recycling bin.
  7. #7  
    Oh, and you really shouldn't have to do the removeClassName you mentioned above. If it's adding whitespace then there's likely something else wrong with the code somewhere... Like maybe you're using a class that's already been declared somewhere(such as the WebOS global CSS files) but with a margin/padding/text-indent set.
    danNielson.com - Slalom - twitter - facebook
    A posted thanks dies with the thread. Clicking the button lasts until the admins get bored with this site and throw it in the recycling bin.
  8.    #8  
    Thanks for your help. I am new to the web languages, so these tips are helpful.

    $$("") seems like a good trick, but if I was overriding groups, radio buttons, and other widgets, is there any downside to using the approach I mentioned above (using separate stylesheets and then programmatically selecting one)?

    Otherwise, I guess I would only have to do one $$("") statement per widget type which is not bad.

    Thanks again!
    Check out my apps at clearwaterapps.com
  9. #9  
    I'd recommend using hierarchal CSS selectors rather than try to iterate over the elements. So, if you wanted to style the entire scene (named main, for example) a certain way, you could use the following.

    CSS
    Code:
    .main-scene.boy .myFields {
      color:rgb(0,0,255);
    }
    
    .main-scene.girl .myFields {
      color:rgb(255,200,200);
    }
    JavaScript
    Code:
    function updateTheme(newTheme) {
      if(newTheme == "boy") {
        $("mojo-scene-main").removeClassName("girl");
        $("mojo-scene-main").addClassName("boy");
      } else {
        $("mojo-scene-main").addClassName("girl");
        $("mojo-scene-main").removeClassName("boy");
      }
    }
    That allows you to share any CSS that is common between styles (e.g. font size) and only override theme-specific styles.
  10.    #10  
    Quote Originally Posted by ryanjduffy View Post
    I'd recommend using hierarchal CSS selectors rather than try to iterate over the elements. So, if you wanted to style the entire scene (named main, for example) a certain way, you could use the following.

    CSS
    Code:
    .main-scene.boy .myFields {
      color:rgb(0,0,255);
    }
    
    .main-scene.girl .myFields {
      color:rgb(255,200,200);
    }
    JavaScript
    Code:
    function updateTheme(newTheme) {
      if(newTheme == "boy") {
        $("mojo-scene-main").removeClassName("girl");
        $("mojo-scene-main").addClassName("boy");
      } else {
        $("mojo-scene-main").addClassName("girl");
        $("mojo-scene-main").removeClassName("boy");
      }
    }
    That allows you to share any CSS that is common between styles (e.g. font size) and only override theme-specific styles.
    Perfect!

    I did not understand how to use the hierarchal CSS selectors until you showed me that. I had seen it in the palm CSS code, but did not know how to read it.

    I got it working by overriding .palm-group like this:
    Code:
    .main-scene.girl .palm-group {
      margin: 7px;                                          
      border-width: 40px 18px 18px 18px;                              
      -webkit-border-image: url(../images/palm-group-pink.png) 40 18 18 18 repeat repeat;
    }
    I appreciate it!
    Check out my apps at clearwaterapps.com

Posting Permissions