Results 1 to 18 of 18
  1.    #1  
    Has anybody been able to use their own CSS to redefine buttons? To me, it does not seem as if the system operates as it is supposed to.

    Let me describe what I am doing, so hopefully somebody can point out the error. If I use...

    this.controller.setupWidget('btn4', {}, {buttonLabel: '4', buttonClass: 'small-button'});

    the display correctly shows Palm's 'small-button'. If I copy the small-button CSS to the application CSS file, rename .palm-button.small-button to .palm-button.keypad-button (no other changes) and use...

    this.controller.setupWidget('btn4', {}, {buttonLabel: '4', buttonClass: 'keypad-button'});

    the display reverts to the default button style, indicating that the keypad-button class is not found.

    I have also tried using a class named .keypad-button and class="keypad-class" in the HTML <div>.

    Any help appreciated. I am still on a very flat early section of the WebOS learning curve.
  2.    #2  
    Anybody got any thoughts?
  3. #4  
    If you defined it as class="keypad-class" in your div you could simply override the settings with .keypad-class{ whatever } in your css.
    WOG Dev - WebOS Group http://www.WebOSGroup.com
    PMP Dev - http://www.PimpMyPre.com
    Apps: WOG O.S.K., WOG Card Keeper, WOG Glowstick, WOG Kid Protect, PreLoad, PimpMySounds
  4.    #5  
    Quote Originally Posted by pimpmypre View Post
    If you defined it as class="keypad-class" in your div you could simply override the settings with .keypad-class{ whatever } in your css.
    That's what I expected to be able to do, but it did not seem to work. Have you successfully redefined any buttons? If so, I would be very interested to know what code you used. Thanks
  5. #6  
    Quote Originally Posted by johncc View Post
    That's what I expected to be able to do, but it did not seem to work. Have you successfully redefined any buttons? If so, I would be very interested to know what code you used. Thanks
    i could never get the mojo buttons to resize vertically... they always appear to be the same height... the width i was able to adjust. i tried putting the buttons in table cells and resizing the cells, but it didn't work either.

    i'd also be interested in seeing a good example of how to do this.
    My site: Shanerooni, LLC
    Follow me on Twitter
    My apps: GuessWhat? | MazeHunter3D | Small Wonders | PhakePhoney | AutismAware | PicSketcher | Cubix | QuickSolve | QuickSpell | QuickTrace | QuickWhack | QuickSuite | Soccer Shots | Ballooning |
    Cubix
  6. #7  
    I'll have to check with a guy I work with that did it - but I don't think he resized them vertically. I remember him showing me different widths and colors and I finally just made an image and put a listener on that.
    WOG Dev - WebOS Group http://www.WebOSGroup.com
    PMP Dev - http://www.PimpMyPre.com
    Apps: WOG O.S.K., WOG Card Keeper, WOG Glowstick, WOG Kid Protect, PreLoad, PimpMySounds
  7.    #8  
    Quote Originally Posted by pimpmypre View Post
    I'll have to check with a guy I work with that did it - but I don't think he resized them vertically. I remember him showing me different widths and colors and I finally just made an image and put a listener on that.
    Yes. Horizontal is not such a problem, but I would love to be able to reduce the vertical dimension. I would be interested to know what he did though.
  8. #9  
    So here is what I found out about resizing buttons. Yes there is away but it requires a few things. first you will need to edit some images then you will need to either edit the Mojo CSS or create a new widget for the buttons. the location of the images are here:

    /usr/palm/frameworks/mojo/submissions/200.18/images

    you will most likely will need to edit the file associated with the button you want to resize.

    then you will have to edit the CSS file located under:

    /usr/palm/frameworks/mojo/submissions/200.18/stylesheets

    determine which style sheet your button is associated with then edit to select the appropriate file and size to pull from the file(display size).

    I would not delete any of the default mojo css or images I would just copy and paste the existing files make your tweaks and rename the new button class and image so it does not mess up the rest of the functions that use those images and styles.

    I might be incorrect on some of this, like locations and specific files I just took a quick glance at it.

    hope this helps
  9. #10  
    When you create a Mojo widget, you put a div with an x-mojo-element in your html. What most people don't seem to understand, is that the setupWidget command redefines your div tag, adding in extra elements to create what you see as a single widget.
    If you have the SDK installed, you can get a general picture of how things are put together by looking at the CSS in C:\Program Files (x86)\Palm\SDK\share\refcode\webos-framework\330\stylesheets (This may be different depending on your environment, for instance if you have 32-bit windows then drop the (x86).
    Understanding how mojo widgets are pieced together can be a rather significant boon when trying to make them fit your desired layout.

    As to modifying the images, that shouldn't be necessary. Webkit supports border images and css image cropping. Take, for instance, the following line from global-buttons.css:
    Code:
      -webkit-border-image: url(../images/palm-button-medium.png) 0 17 104 17 repeat repeat;
    Those numbers after the url are telling the css engine to only use a certain portion of the image in question. As for the center of the buttons in the images, it's a simple gradient and should have no problem being stretched within reason.

    For a bit more about how css3 borders work you can check John Resig - border-image in Firefox
    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.
  10. #11  
    Oh, and one more thing. To everyone trying to just put a .myclass { height:100px; } thing in there, You have to create a higher selector value than the existing css definition. for instance, something like .myclass.palm-button-wrapper .palm-button { height: 100px; }. Each item in your selector adds to the specificity of your request and thus increases its priority. Ids (#myobject) are valued by far the highest, then names (@yourobject) then i believe attributes( [something=somewhat] ), then classes (.myclass) then tags ( div ). also, putting an !important on the end of your style setting( height: 100px !important; ) helps.
    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.
  11. gnunesjr's Avatar
    Posts
    17 Posts
    Global Posts
    19 Global Posts
    #12  
    My apologies in advance for being such a newbie...

    The proposed solutions discussed so far are too deep for me. I have not yet begun to understand CSS.

    But I did notice that the image directory has images for small buttons (34 pixels tall vs. 52). And global.css has an entry for .palm-button.small button.

    Can I use the small button in my app? Can anyone provide the code to do this? I have so far had no luck at simply guessing the class name.

    Alternatively, it would be absolutely heroic (or at least really helpful to those of us who like to learn by studying the examples of the masters) if someone would post a full on example app that displays a custom-sized button... (I'm looking at you, unfairSuprisery!)
  12. #13  
    Took a minute for me to figure that one out... Set small-button in the buttonClass property of your button model. Here's an example.
    Code:
    this.controller.setupWidget('button1',
      this.b1attr = {},
      this.b1modl = { buttonClass:'small-button', 'label': 'My Small Button' }
    );
    Hope it works for you and happy coding.
    Last edited by unfairSurprisery; 08/06/2010 at 12:39 AM. Reason: Internet connection glitched and cut my post...
    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.
  13. gnunesjr's Avatar
    Posts
    17 Posts
    Global Posts
    19 Global Posts
    #14  
    Quote Originally Posted by unfairSurprisery View Post
    Took a minute for me to figure that one out... Set small-button in the buttonClass property of your button model. Here's an example....
    Thanks! I appreciate the effort. I even got it to work once I figured out that I had to go whole hog in the HTML:
    Code:
    <div x-mojo-element="Button" id="button1"  class="buttonClass"><div>
    Can't use "palm-button" as the class, and have to include the x-mojo-element. Javascript and webOS are very flexible. It is not always clear to me what is required and what is optional...
  14. #15  
    Buttons are a pain in webOS to work with. I usually end up making an image and setting a listener on that. But it looks like I'll have to try out this new css, thanks for all the work you've done.
  15. gnunesjr's Avatar
    Posts
    17 Posts
    Global Posts
    19 Global Posts
    #16  
    In case anyone wants to revisit this, here is a summary of the cool info in this thread that will let you use small buttons. I used them to make an on-screen keypad.

    First, the HTML:
    Code:
    <div x-mojo-element="Button" id="oneButton" class="buttonClass"></div>
    As far as I can tell, the class must be "buttonClass". It would be nice to know how to declare your own class.

    Next, the javascript:
    Code:
    this.controller.setupWidget("oneButton",this.oneButtonAttribute = {},
    this.oneButtonClass = { buttonClass:'small-button', 'label': '1' });
    Finally, some CSS, down below. I found the code below in C:\Program Files\Palm\SDK\share\refcode\webos-framework\338\stylesheets\global-buttons.css and copied into my CSS file. Then I modified it to have black text, and to use my button image file.

    To make that image, I made a copy of C:\Program Files\Palm\SDK\share\refcode\webos-framework\338\images\palm-button-small.png, changed the colors to give me a blue theme, and saved the result (under a new name) in the images directory for my app.

    You will note that I did not change the default classes in the CSS. We are just overwriting the Palm defaults, rather than creating our own class. All my efforts to create my own class failed...

    There you have it. Kudos to elpollodiablo1 and unfairSurprisery for the heavy lifting. I'm just the secretary here.
    Code:
    .palm-button.small-button {
      margin: 3px 10px;
      height: 34px;
      padding: 0;
      font-size: 18px;
      text-align: center;
      text-transform: capitalize;
      color: #000;
      line-height: 36px;
      background: none;
      border-width: 0 16px;
      -webkit-box-sizing: border-box;
      -webkit-border-image: url(../images/ngc-button-small.png) 0 16 68 16 repeat repeat;
    }
    .palm-button.selected.small-button {
      -webkit-border-image: url(../images/ngc-button-small.png) 34 16 34 16 repeat repeat;
    }
    .palm-button.disabled.small-button {
      -webkit-border-image: url(../images/ngc-button-small.png) 68 16 0 16 repeat repeat;
    }
    Attached Images Attached Images
  16. #17  
    Since I saw this thread pop up again, I thought I'd also bring up the <button> tag... It's been around for a while and can be stretched and manipulated easily with css...

    Also, the 'class="buttonClass"' thing you got there, doesn't do anything. There is no css class anywhere in the global definitions or your presented css code for buttonClass. I haven't tried it in a while, but putting class="whatever" in your tag is supposed to have the same effect as putting buttonclass: "whatever" in your model. All it does is define a CSS class for the button to use. And there's more than just 'small-button' predefined, there's also 'flat' and the dark variants.
    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.
  17. gnunesjr's Avatar
    Posts
    17 Posts
    Global Posts
    19 Global Posts
    #18  
    You are so correct! I was convinced that I had tried changing the class= in the HTML, and that it had not worked correctly. But apparently not. Just now I completely eliminated the class="buttonClass" from the div for one of the buttons, and the code worked perfectly.

    Live and learn...

    Thanks!

Posting Permissions