PDA

View Full Version : Footer Customer Menu Styling



HankFay
2013-04-23, 20:59
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

barrymavin
2013-04-23, 21:15
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.

HankFay
2013-04-23, 21:28
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

barrymavin
2013-04-23, 21:42
They are by default. Just hover over the text and it changes color.

hmischel@diligentsystems.com
2013-04-24, 07:47
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.

Herb265266267

hmischel@diligentsystems.com
2013-04-24, 07:50
Maybe I can get a tutorial on how to size uploaded images. :)
Sorry about that.

Herb

HankFay
2013-04-24, 08:11
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