CSS Friendly Adapters

  • Thread starter Thread starter Mark B
  • Start date Start date
M

Mark B

Because I had an issue with a bug on the ASP.NET Menu Control I decided to
download and install the CSS Friendly Adapters.

Now however I have lost all formatting (colors, grey background gradient,
box highlight etc) from a Theme I had on the menu control and everything is
just plain text.

How do I get the menu control to look pretty again?
 
Because I had an issue with a bug on the ASP.NET Menu Control I
decided to download and install the CSS Friendly Adapters.

Now however I have lost all formatting (colors, grey background
gradient, box highlight etc) from a Theme I had on the menu control
and everything is just plain text.

How do I get the menu control to look pretty again?
Click to expand...

Create CSS that works with the adapter. The default implementation kind of
sucks, as it is very "class heavy", but it is far better than the tabled
nightmare created by the standard menu control.

I have been "threatening" to blog about my personal implementation of the
menu adapter. Not that I think it is perfect, but it gets rid of most of
the classes.

--
Gregory A. Beamer
MVP; MCP: +I, SE, SD, DBA

Twitter: @gbworld
Blog: http://gregorybeamer.spaces.live.com

******************************************
| Think outside the box! |
******************************************
 
And I'd still be very interested in seeing this... :-)
Click to expand...

I think I have the projects disk here at work, but I will have to check.
;-)
The CSS Friendly Adapters are better than the webcontrols that they
replace, but not by much...
Click to expand...

They are, in theory, much better. Unfortunately, whomever played with
the coding was focused too much on classes for my tastes. Having to
create class for each levl in the menu hierarchy is a pain, if you ask
me. Especialy when you can set up styles based on hierarchy. But it is a
huge improvement over tables, if you ask me.

--
Gregory A. Beamer
MVP; MCP: +I, SE, SD, DBA

Twitter: @gbworld
Blog: http://gregorybeamer.spaces.live.com

*******************************************
| Think outside the box! |
*******************************************
 
When you say "Create CSS that works with the adapter" can you please
elaborate for me (I'm a bit new to CSS)?

My original style sheet ("App_Themes\Down Gradient Silver
Verdana\StyleSheet.css") is shown below but none of the menu control
settings make any difference to the menu control after I got the
friendly adaptors. In fact before I installed them I removed the whole
section entitled "/*-- ASP Menu --*/" to try annd sequentially debug
the menu. In that case the menu displayed the same even though I
deleted that whole section -- maybe it was only using table styles as
listed there?

Anyway right now I am trying to do something to affect the menu bar
but so far I haven't been able to influence it at all. I have
right-clicked it in the the MasterPage and added a grey (#CCCCCC)
backcolor on in each of the GUI properties in VWD Express 2008. E.g.
The backcolor property for "DynamicMenuItemStyle",
"DynamicMenuItemStyle", "StaticMenuItemStyle" etc. Nothing has changed
- still just plain text with no spacing at all.

SNIPPED OUT STYLE SHEET FOR BREVITY
Click to expand...

When you add a menu control, you can set quite a few different
properties. When they are grouped, the lowest section allows you to add
classes to different elements in the menu. This grouping is named
Styles.

NOTE: If you have the Properties in alphabetical mode, you can click on
the left most icon and go to grouped mode.

The styles you can set are

Dynamic Hover
Dynamic Menu Item
Dynamic Menu
Dynamic Selected
Static Hover
Static Menu Item
Static Menu
Static Selected

and various level menu items.

You will have to play with the items to get the exact look you want, as
I don't have time to write a novel.

But, the general gist is the static menu is the item that is always
there (top level menu) and the dynamic menu is the drop down portion
under the static menu.

Hover is initiated when you mouse over. Selected is the item that the
user is currently looking at. Menu applies to the entire static or
dynamic menu and menu item applies to the actual item (link). You end up
playing with both of these to make elaborate menus.

The next step, if you want better CSS implementation, is the CSS
Friendly adapters, which I, once again, forgot to blog about, so Mark
will likely ding me again on this one. ;-)

I will have a blog entry soon on CSS and the ASP.NET menu, perhaps two
if I also create one on applying CSS to the normal ASP.NET menu control
without CSS Friendly adapters.

--
Gregory A. Beamer
MVP; MCP: +I, SE, SD, DBA

Twitter: @gbworld
Blog: http://gregorybeamer.spaces.live.com

*******************************************
| Think outside the box! |
*******************************************
 
With the help of a colleague here we've implemented the CSS friendly
adaptors for the site's main horizontal menu.

All OK so far but there are two final points we haven't yet been able to
figure out:

1) We want the 7 main top-level text items to have equal gaps after each
text item rather than occupy the same fixed width area for each.

2) If one of the text items is too long (in the sub-menu when it drops down
the page) the menu background (grey in our case) doesn't cover the whole
text and so the text sticks out "into no-man's land".

Do you know how we can fix these?
 
With the help of a colleague here we've implemented the CSS friendly
adaptors for the site's main horizontal menu.

All OK so far but there are two final points we haven't yet been able
to figure out:

1) We want the 7 main top-level text items to have equal gaps after
each text item rather than occupy the same fixed width area for each.

2) If one of the text items is too long (in the sub-menu when it drops
down the page) the menu background (grey in our case) doesn't cover
the whole text and so the text sticks out "into no-man's land".

Do you know how we can fix these?
Click to expand...


In CSS, you have floats, margins and padding that affect much of what
you are asking about here. If these are combined with width and height,
the box is bounded to a specific size. If not, they padd around the item
they are adding style to:

Here is a good intro:
http://www.yourhtmlsource.com/stylesheets/cssspacing.html

My suggestion is go out and look at free CSS templates out there until
you find one that has a menu similar to what you want. For example, you
can go here:

http://www.freecsstemplates.org/

Then download the zip and look at the template. It will be a bit
different from the CSS Friendly Adapters default implementation, as
Microsoft uses classes at each level, but there is a way to navigate
this minefield easily. Download Firefox browser and Firebug and use it
to select an element and see the CSS that is working on it. You can then
copy the working elements to the class Microsoft has set at the level
you wish to change.

Now for some particulars:

1 is caused by setting absolutely width rather than simply allowing the
element to float with some padding around it.

2 is probably caused by the same.

The cool thing about CSS is you can whack at it and then instantly
display in the browser by refreshing.

BTW, the Microsoft Expression Web tool has very neat CSS tooling. There
are some things I don't like about it, but CSS is a strong point. I
might not jump yet, unless MS has a free upgrade for anyone buying EW2
right now, as EW3 comes out soon.


--
Gregory A. Beamer
MVP; MCP: +I, SE, SD, DBA

Twitter: @gbworld
Blog: http://gregorybeamer.spaces.live.com

*******************************************
| Think outside the box! |
*******************************************
 
Back
Top