Results 1 to 7 of 7

Thread: Footer Customer Menu Styling

  1. #1
    Lianja MVP
    Join Date
    Feb 2012
    Location
    Berea, KY, USA
    Posts
    1,934

    Footer Customer Menu Styling

    I have a custom menu in a footer.

    |Choice1,Choice1

    I can use the HTML4.1 deprecated (and HTML5 unavailable) text tags to modify it:

    |<b><font color="red">Choice1</font></b>, (etc.)

    I can also use inline CSS styling:

    |<p style="display:block;background-color:#98bf21;font:bold;color:red;font-size:16px;">Choice1</p>, (etc.)

    So far so good (meaning: if I play with it enough I can get what I want, which is a couple of buttons for the footer menu).

    So, then I created a class with an id in a .css file:

    #footermenu
    {
    display:block;
    background-color:#98bf21;
    font:bold;
    color:red;
    font-size:16px;
    }

    I changed the menu to:
    |<p id="footermenu">Choice1</p>,etc.

    I tried putting the file with the definition in the Section Header CSS and the Page CSS Style, with no joy.

    Question: is there a way to attach a CSS style to the custom menu items? It could well be my scant knowledge of CSS that is making this not work.

    BTW: being able to play with this stuff right in the attributes dialog and seeing the results is really great.

    thanks,

    Hank

  2. #2
    Lianja Development Team barrymavin's Avatar
    Join Date
    Feb 2012
    Location
    UK, USA, Thailand
    Posts
    5,734
    Currently not. The menu in the section footer can be either hyperlinks or standard rollover buttons. There is no way to theme them beyond that.
    Principal developer of Lianja, Recital and other products

    Follow me on:

    Twitter: http://twitter.com/lianjaInc
    Facebook: http://www.facebook.com/LianjaInc
    LinkedIn: http://www.linkedin.com/in/barrymavin

  3. #3
    Lianja MVP
    Join Date
    Feb 2012
    Location
    Berea, KY, USA
    Posts
    1,934
    Quote Originally Posted by barrymavin View Post
    Currently not. The menu in the section footer can be either hyperlinks or standard rollover buttons. There is no way to theme them beyond that.
    And how would I have them show as "standard rollover buttons"?

    thanks,

    Hank

  4. #4
    Lianja Development Team barrymavin's Avatar
    Join Date
    Feb 2012
    Location
    UK, USA, Thailand
    Posts
    5,734
    They are by default. Just hover over the text and it changes color.
    Principal developer of Lianja, Recital and other products

    Follow me on:

    Twitter: http://twitter.com/lianjaInc
    Facebook: http://www.facebook.com/LianjaInc
    LinkedIn: http://www.linkedin.com/in/barrymavin

  5. #5
    Senior Member
    Join Date
    Feb 2012
    Posts
    1,207
    The hover over effect seems to get lost when I change the CSS styling of the menu (background), but retaines itself if you simply change the backcolor by using the . If you use an image as the background, the effect is also different.
    Attached are 3 images highligting the differences.
    The orange background = .background = "Orange", and the full hover effect is shown.
    The CSS uses the gradient background, but the hover effect is no longer visible.
    The grey backround is an image. There is a hover effect, but it is not the smooth effect as when using the .background = .

    Not very important at the moment, but worth mentioning.

    HerbName:  backcolor.jpg
Views: 56
Size:  16.8 KBName:  CSS.jpg
Views: 58
Size:  19.6 KBName:  picture.jpg
Views: 57
Size:  18.6 KB

  6. #6
    Senior Member
    Join Date
    Feb 2012
    Posts
    1,207
    Maybe I can get a tutorial on how to size uploaded images.
    Sorry about that.

    Herb

  7. #7
    Lianja MVP
    Join Date
    Feb 2012
    Location
    Berea, KY, USA
    Posts
    1,934
    Just a followup post for those who want to dynamically style their footermenu.

    1) .footermenu is the section attribute (not documented at the moment) to change.

    2) You can change it dynamically (e.g., in the delegate handling the menu selection), so long as you issue a .refresh() to the section.

    3) Classes can't be used at the moment, it appears, but as Barry has explained, the Class Selectors for CSS will be documented, and at that point it should be possible to create selectors for a given object, and switch them in less than 80 characters (anyone here besides me remember typing code onto 80-character cards? -- they were a joy compared to punch tape, right?).

    enjoy,

    Hank

Bookmarks

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
  •  
Journey into the Cloud
Join us