Thomas, Is there a way to define the menu class when webgen creates a menu that will use what I would define instead of the <div class="webgen- menu"><ul><li class="webgen-menu-submenu">. Or to just not even use those classes. I would like to be able to just use the menu block inside of a div tag and not have webgen insert the default classes. Not sure if this is possible, I tried playing around with the ruby file and haven''t been able to perfect it at all. Thanks, Sven
Am Sat, 16 Aug 2008 08:34:43 -0700 (PDT) schrieb Sven <sven.was.here at gmail.com>:> Is there a way to define the menu class when webgen creates a menu > that will use what I would define instead of the <div class="webgen- > menu"><ul><li class="webgen-menu-submenu">. Or to just not even use > those classes. I would like to be able to just use the menu block > inside of a div tag and not have webgen insert the default classes. > > Not sure if this is possible, I tried playing around with the ruby > file and haven''t been able to perfect it at all.Is there a specific reason for this? If you don''t set any CSS options on the CSS classes, the overall appearance won''t change. So webgen''s behaviour won''t affect the design of the page. -- Thomas
>> Is there a way to define the menu class when webgen creates a menu >> that will use what I would define instead of the <div class="webgen- >> menu"><ul><li class="webgen-menu-submenu">. Or to just not even use >> those classes. I would like to be able to just use the menu block >> inside of a div tag and not have webgen insert the default classes.> Is there a specific reason for this? If you don''t set any CSS options > on the CSS classes, the overall appearance won''t change. So webgen''s > behaviour won''t affect the design of the page.Funny, I wanted to ask the same question. I''m currently working on a website which needs different formatting for each menu depth level. Those are my thoughts on the subject: Take the following example hierarchy (in brackets are the webgen-created <li> class names). Division (webgen-menu) * FirstLevelA.dir (webgen-menu-submenu) * FirstLevelB.html () * FirstLevelC.dir (webgen-menu-submenu webgen-...-inhierarchy) |-SecondLevelA.dir (webgen-menu-submenu) |-SecondLevelB.html () |-SecondLevelC.dir (webgen-menu-submenu webgen-...-inhierarchy) |-ThirdLevelA.html (webgen-menu-item-selected) |-ThirdLevelB.html () |-ThirdLevelC.html () 1) The Division around the menu is unnecessary IMO. If you need two menus on your site (e.g. one just for the first level, another for the rest) and want to format them differently, you have to place the menu in different classes anyway. That would lead to two nested <div>''s. And in regard to Web Accessibility Standards, more descriptive division class names could be used (like "chapters" or "products"). 2) With webgens default class naming scheme (see above) it is a bit hard to format the items according to their menu depth level, because the depth of the item is not reflected in the class name. The scheme is fine for layouts with no formatting distinction between levels. In CSS it is principally possible to work around this, and I managed it, but the CSS code becomes a bit convoluted and hard to read. See the following CSS examples: To set the general format of ALL <a> in the menu: div.menu li a {} (A) To format the second menu level differently, one must write: div.menu li li a {} (B) and maybe UNSET some settings from (A), since they are inherited. So far so good. Now you want to emphasize the active subtree in the first level: div.menu li.webgen-menu-inhierarchy a {} (C) Unfortunately, this rule is more specific than (B), and will overwrite it. So, you will have to modify (B): div.menu li.webgen-menu-submenu li a {} (D) And so on. You get the idea. I thought about an alternative naming scheme. What about this: * FirstLevelA.dir (webgen-level1) * FirstLevelB.html (webgen-level1) * FirstLevelC.dir (webgen-level1 webgen-level1-inhierarchy) |-SecondLevelA.dir (webgen-level2) |-SecondLevelB.html (webgen-level2) |-SecondLevelC.dir (webgen-level2 webgen-level2-inhierarchy) |-ThirdLevelA.html (webgen-level3) |-ThirdLevelB.html (webgen-level3 webgen-level3-selected) This would allow for a simpler and non-conflicting CSS notation, e.g. formatting of the second level entries: div.menu li.webgen-level3 a {} But maybe this is an overkill and not suitable for most users. Regards, Michael
> Take the following example hierarchy (in brackets are the > webgen-created <li> class names). > > Division (webgen-menu) > * FirstLevelA.dir (webgen-menu-submenu) > * FirstLevelB.html () > * FirstLevelC.dir (webgen-menu-submenu webgen-...-inhierarchy) > |-SecondLevelA.dir (webgen-menu-submenu) > |-SecondLevelB.html () > |-SecondLevelC.dir (webgen-menu-submenu webgen-...-inhierarchy) > |-ThirdLevelA.html (webgen-menu-item-selected) > |-ThirdLevelB.html () > |-ThirdLevelC.html () > > 1) The Division around the menu is unnecessary IMO. If you need two > menus on your site (e.g. one just for the first level, another for > the rest) and want to format them differently, you have to place the > menu in different classes anyway. That would lead to two nested > <div>''s. And in regard to Web Accessibility Standards, more > descriptive division class names could be used (like "chapters" or > "products").You are right, the div around the menu isn''t strictly necessary. Would it be an option for you to make the class used by the div surrounding the menu configurable? Then everything would work the same as now (class defaults to webgen-menu) but you could change it to be more descriptive.> And so on. You get the idea. I thought about an alternative naming > scheme. What about this: > > * FirstLevelA.dir (webgen-level1) > * FirstLevelB.html (webgen-level1) > * FirstLevelC.dir (webgen-level1 webgen-level1-inhierarchy) > |-SecondLevelA.dir (webgen-level2) > |-SecondLevelB.html (webgen-level2) > |-SecondLevelC.dir (webgen-level2 webgen-level2-inhierarchy) > |-ThirdLevelA.html (webgen-level3) > |-ThirdLevelB.html (webgen-level3 webgen-level3-selected) > > This would allow for a simpler and non-conflicting CSS notation, > e.g. formatting of the second level entries: > > div.menu li.webgen-level3 a {} > > But maybe this is an overkill and not suitable for most users.I think that''s a good idea but I would keep the standard webgen-menu-submenu, ... classes sothat common styles can be applied more easily and irrespectively of the depth of the menu. Does anything speak against * making the div class configurable and * adding level specific classes to the li elements? The only thing I can think of is that the final HTML file gets bigger. -- Thomas
> You are right, the div around the menu isn''t strictly necessary. Would > it be an option for you to make the class used by the div surrounding > the menu configurable? Then everything would work the same as now > (class defaults to webgen-menu) but you could change it to be more > descriptive. >Yes, renaming would be an option. Or to keep things simple, to optionally switch off the div tags altogether.> I think that''s a good idea but I would keep the standard > webgen-menu-submenu, ... classes sothat common styles can be applied > more easily and irrespectively of the depth of the menu. > > Does anything speak against > * making the div class configurable and > * adding level specific classes to the li elements? > > The only thing I can think of is that the final HTML file gets bigger.The additional class names would make the average menu bigger in the order of only a few 100 bytes. If not defined in the CSS file, the "traditional" names and the "level-specific" names would behave completely indifferent to each other. So the user could simply choose in the CSS which naming scheme he/she wants to access. Michael
> > You are right, the div around the menu isn''t strictly necessary. > > Would it be an option for you to make the class used by the div > > surrounding the menu configurable? Then everything would work the > > same as now (class defaults to webgen-menu) but you could change it > > to be more descriptive. > > > Yes, renaming would be an option. Or to keep things simple, to > optionally switch off the div tags altogether.Yeah, that would be no problem, too. When the configuration option of the class name is set to nil, the div would be turned off.> > I think that''s a good idea but I would keep the standard > > webgen-menu-submenu, ... classes sothat common styles can be applied > > more easily and irrespectively of the depth of the menu. > > > > Does anything speak against > > * making the div class configurable and > > * adding level specific classes to the li elements? > > > > The only thing I can think of is that the final HTML file gets > > bigger. > The additional class names would make the average menu bigger in the > order of only a few 100 bytes. If not defined in the CSS file, the > "traditional" names and the "level-specific" names would behave > completely indifferent to each other. So the user could simply choose > in the CSS which naming scheme he/she wants to access.Good, then this gets into the next release. Thanks for your suggestions! -- Thomas
> > You are right, the div around the menu isn''t strictly necessary. > > Would it be an option for you to make the class used by the div > > surrounding the menu configurable? Then everything would work the > > same as now (class defaults to webgen-menu) but you could change it > > to be more descriptive. > > > Yes, renaming would be an option. Or to keep things simple, to > optionally switch off the div tags altogether.I have decided to completely remove the surrounding div tag sothat the output generation by the menu tag matches the output of the other tags.> > I think that''s a good idea but I would keep the standard > > webgen-menu-submenu, ... classes sothat common styles can be applied > > more easily and irrespectively of the depth of the menu. > > > > Does anything speak against > > * making the div class configurable and > > * adding level specific classes to the li elements? > > > > The only thing I can think of is that the final HTML file gets > > bigger. > The additional class names would make the average menu bigger in the > order of only a few 100 bytes. If not defined in the CSS file, the > "traditional" names and the "level-specific" names would behave > completely indifferent to each other. So the user could simply choose > in the CSS which naming scheme he/she wants to access.This is now also implemented but a little different. Each menu item li tag gets an additional webgen-menu-levelNUMBER class assigned now. There should be no need for also addding webgen-submenu-levelNUMBER since CSS class selectors can be combined. So you can do this: li.webgen-menu-level3.webgen-menu-item-selected -- Thomas
Thomas,
When creating a menu I get the following:
<div id="menu">
<ul>
<li class="webgen-menu-level1 webgen-menu-item-
selected"><span>Homepage</span></li>
<li class="webgen-menu-level1"><a
href="about.html">About</
a></li>
<li class="webgen-menu-level1"><a
href="contact.html">Contact</a></li>
</ul>
</div>
My question is that when webgen writes the selected node as in this
case Homepage, why does it not also write the <a> tag as well?
When I try to make a template work with webgen I am not successful
unless I manually add that <a> tag into the code and also insert a id
tag as well. This may partially be because I am not a CSS guru yet.
Do you have a work around for this or an idea to tweak the CSS?
Thomas, Here are two templates that I have been trying to perfect the menus with webgen. Sven -------------- next part -------------- An HTML attachment was scrubbed... URL: <http://rubyforge.org/pipermail/webgen-users/attachments/20080901/b13436ca/attachment-0001.html> -------------- next part -------------- A non-text attachment was scrubbed... Name: BluePigment1-0.zip Type: application/zip Size: 24468 bytes Desc: not available URL: <http://rubyforge.org/pipermail/webgen-users/attachments/20080901/b13436ca/attachment-0002.zip> -------------- next part -------------- A non-text attachment was scrubbed... Name: CoolWater1-0.zip Type: application/zip Size: 32295 bytes Desc: not available URL: <http://rubyforge.org/pipermail/webgen-users/attachments/20080901/b13436ca/attachment-0003.zip>
Am Mon, 1 Sep 2008 06:29:47 -0700 (PDT) schrieb Sven <sven.was.here at gmail.com>:> Thomas, > > When creating a menu I get the following: > > <div id="menu"> > <ul> > <li class="webgen-menu-level1 webgen-menu-item- > selected"><span>Homepage</span></li> > <li class="webgen-menu-level1"><a href="about.html">About</ > a></li> > <li class="webgen-menu-level1"><a > href="contact.html">Contact</a></li> > </ul> > </div> > > My question is that when webgen writes the selected node as in this > case Homepage, why does it not also write the <a> tag as well?It does not add an <a> tag because it is not necessary since the currently selected page is already visible. If you still want an <a> tag to the current page, just set the configuration option `website.link_to_current_page` to `true`.> When I try to make a template work with webgen I am not successful > unless I manually add that <a> tag into the code and also insert a id > tag as well. This may partially be because I am not a CSS guru yet. > > Do you have a work around for this or an idea to tweak the CSS?I don''t really know what you mean by that. Do you really mean an <id> tag or an id attribute? And why does the template not work? If you have problems styling the <span> like the <a> tag, just replicate all CSS styles where you use the <a> tag and use the <span> tag. If that doesn''t help, just mail me the template/css files you have problems with and I try to do my best. -- Thomas
Thomas,
Thanks again for throwing me a life vest!! The
`website.link_to_current_page` to `true` set in the config.yaml
worked!!! My other problem was with the CSS like you said to use the
class which I did, but I didn''t realize that I couldn''t have a
space
between the class and the id tag.
ie:
Before I was using a space between the id and class.
#nav ul li .webgen-menu-item-selected {
background: url(nav-current.jpg) no-repeat center bottom;
No space between the id and class.
#nav ul li.webgen-menu-item-selected {
background: url(nav-current.jpg) no-repeat center bottom;
I learned some more knowledge to add to my CSS skills and how to use
another command in webgen.
Thanks,
Sven
> Here are two templates that I have been trying to perfect the menus > with webgen.I will look at them when I have time. Adding new templates to or converting some templates for use with webgen is not the top priority right now, so it may take some time till they are converted for/added to the webgen. -- Thomas