Template - All CSS 2

[gavjof]

Hi all,

New Template - All CSS 2  (with horizontal drop-down menu)


Similar to the allcss template, this template is all done with CSS, no images included - think of it as a bare-bones design. ;0)

The key feature is the support of a horizontal drop-down with up-to 3 levels. You just need to keep your top-level links to a minimum of perhaps 8-9 or else they will wrap and ruin the design. :0\

The colours used are just simple shades of grey to allow you to customise it to suit your own needs. I like grey what can I say. Feel free to take it and make it your own.

All markup should validate correctly to XHTML and CSS standards as well as conform to the DDA Priority 2 requirements set out by the WCAG.

To use the template you will need to install the show_menu2 module. See http://code.jellycan.com/show_menu2/ for more information on show_menu2.

I've tested it in IE7, FF 2, Opera 8.54 and IE6 (which needed some hacks to work as usual).
Let me know if you find any more bugs.

<rant>
I don't care if you find any using IE on the MAC - please stop using this out of date browser :0p
</rant>

[gelöscht durch Administrator]

[DGEC]

This is the kind of thing I like to see!
Functional and standards-based coding, which can be easily customized.
And tested.

I'm a bit confused though. Did you update it today?  I downloaded one last week called allcss2 as well, but I can't find it anywhere else in the forum on addsons.

I'd upload it to see if there's any difference but I'm having login problems.

[gavjof]

Yeah, You helped me track down the ie6 issues:
http://forum.WebsiteBaker.org/index.php/topic,5321.msg33929.html#msg33929

This new version now looks fine in ie6 (as far as I know) :0)

[ruebenwurzel]

Hello,

will have a look to this template later and if it is ok we will add it to the addons page.

Matthias

Edit:

Added it to the addons page

http://addons.WebsiteBaker.org/pages/templates.php?template=allcss2

[gavjof]

Nice work! Cheers

[bgg]

Hi G:

Thanks for your nice template. I am playing with your template at: http://wb.asiasrc.org

What I want to achieve these:

• Breadcrunbs: DONE
• List of Sublinks on each main pages: DONE
• Submenu on the left block: working
• Style switcher: atleast 2 sets of font size - large/small texts -- trying .. any idea?
• sitewide fixed boxes: on the left block all pages... any idea?

Thanks

Babul

[kweitzel]

Hi bgg,

at least for the style seitcher you'll need to research and programm a bit. A good starting point for this is this thread here: http://forum.WebsiteBaker.org/index.php/topic,4887.0/topicseen.html

The second issue, "sitewide fixed boxes" ... it depends on your definition of this term. Do you want to have a functionality where you have a WB page which is displayed in all other WB subpages as a content block (Global Blocks) or is it something else?

cheers

Klaus

[bgg]

Hi Klaus,

Thanks. I will work on the style switcher and will let you know...

The content box: I want one or mroe content boxes on in all the pages!
these may contain some existing WB things such as

1. Root menu
2. last 10 news items
4. last 10 forum posts
5. one random image from gallery
6. Latest events: list of events from the events section
7. a calendar: dates linking to events!

May be all these things will coem in the homepage.. and few will be shown in the other pages.

Currently the searchbox is shown in all the pages.

Perhaps I can hardcode few things in the template itself.

Thanks

Babul

[kweitzel]

You'll have to, but some scripts are available ...

1) Root Menu - normal menu call
2) look for script "Display news anywhere"
3) not yet done
4) Snippet Module Random Image
6) people in Germany are working on a script
7) see above

They can all be hardcoded into the template or included via "php - inlude" and/or curl.

cheers

Klaus

[gavjof]

Hi,

• Submenu on the left block: working
• Style switcher: atleast 2 sets of font size - large/small texts -- trying .. any idea?
• sitewide fixed boxes: on the left block all pages... any idea?
• a calendar: dates linking to events!

1. Have you moved your submenu from the left? as I can see it in the main content block.

2. Not thought about the style switching yet, although I've seen examples around that use js.
Have a look on here, I'm sure it's here someewhere: Web Developers Handbook

3. I presume you're talking about the fixed box pulling data from baker, as this would be easy to do in just the template? If the content is different on each page then you can add another content block. See this post: Multiple Blocks/ Menus

4. There's a few Calendar's on the Add-ons directory. Give them a whirl and see if you like any.

Currently the searchbox is shown in all the pages.

why not try

Code: [Select]

<?php
// code used to show search on homepage only
if (MENU_TITLE == "Home") { ?>
<div id="searchbox">***Search goes here***</div>
<?php } // code used to show search on homepage only ?>

Cheers gav

[Nobody]

Really nice template - I want touse it for a site 

But I have a question: Where I can change the size of the menue? Look at my site:
http://www.sv-fitness.de
The letters A-Z should be in one line.
Either every cell menu (A-Z) should be smaller or the complete menu size should be sized up. Where I can do the things in the screen.css?

Greetz
Sebastian

[gavjof]

You could always increase the width on #main from 750px.

The links have no width really, they just get some padding around the content:
See line 207...

Code: [Select]

#nav ul li a {display: block; background: #666; padding: 5px 10px; ....


[Nobody]

And if I change this line:
#main from 750px
What I have to change, too? Is there anything to change or is it only #main?

[gavjof]

Have a try. It depends on what resolution you're aimed for (with fixed width designs).

#main is the container div that holds all of the other content apart from '#extras' which sits outside this box and holds the footer details.

[BerndJM]

Hi Sebastian,
change the padding from 10px to 9px:

Code: [Select]

#nav ul li a {display: block; background: #666; padding: 5px 9px; padding-bottom: 4px; border-left: 1px solid #000; border-right: 1px solid #000; color: #fff; text-decoration: none;}this will do the trick

Greets Bernd

[bgg]

How can I add one more (4th level submenu) drop-down level into the horizontal menu. right now it supports 3 levels only.

[gavjof]

How can I add one more (4th level submenu) drop-down level into the horizontal menu. right now it supports 3 levels only.

Try duplicating the CSS code in "screen.css" and add further styles for ul ul ul or whatever.

Give this a whirl and let me know if it works:

Code: [Select]

/* Show and hide */
#nav .menu li:hover ul, #nav .menu li a:focus ul, #nav .menu li.subMenu ul {display: block;} /* show  2nd on hover */
#nav .menu li ul ul, #nav .menu li ul ul ul  { display: none;} /* hide  3rd  & 4th by default */

/* hide 3rd & 4th menus when hovering 1st/2nd  */
#nav .menu li:hover ul ul, /*3rd from 1st */
#nav .menu li:hover ul ul ul, /*4th from 1st */
#nav .menu li li:hover ul ul  /*4th from 2nd */ {display: none;}

/* show  2nd & 3rd & 4th on hovers */
#nav .menu li:hover ul, /* Show 2nd from 1st hover  */
#nav .menu li li:hover ul, /* Show 3rd from 2nd hover  */
#nav .menu li li li:hover ul /* Show 4th from 3rd hover  */ {display: block;}

/* 3rd Child Menu Appreances */
#nav .menu li ul li ul li a { width: 11.5em; padding: .6em .1em .6em .4em; background: #c6c6c6; color: #fff; }

/* 4th Child Menu Appreances */
#nav .menu li ul li ul li ul li a { width: 11.5em; padding: .6em .1em .6em .4em; background: #c3c3c3; color: #fff; }

I've also added more comments so it's hopefully easier to track :0)

[kweitzel]

additionally you need to set the "allowed page level" in the settings of our WB installation (I think ou need to sow the advanced option for that).

cheers

Klaus

[kweitzel]

Due to the release date, this template has been entered into the template contest:

http://forum.WebsiteBaker.org/index.php/topic,5594.0.html

cheers

Klaus

[gavjof]

wb t-shirts ?? sweet!

[DGEC]

Another IE twitch I found:

If the LEFT column will cause a slight bump in the positioning of the text in the CONTENT area.

I noticed it with an UL list that passed the bottom edge of the news box.  After the box, the bullets slight left, JUST enough to be annoying.
Eh??? Checked the page source... no different code between those LI's. 
Then I realized that it was on a level with the bottom of the news box. Smoking CSS in IE gun.

Check that list on PIE again. I think it's something about margins or padding. Might be the floats.

[ruebenwurzel]

Hello,

think this is a well know IE Issue. If you have a containerbased template (div containers like AllCss use) IE cannot display tables with a width of 100%. Using this moves the content down under the menu (in AllCss template). To solve this simply set the width to 98%.

Matthias

[gavjof]

Yes, Matthias is correct. I usually have to change the width of tables on the settings pages for the news/form page since the width="100%" pushs the content around.

You could always add the following to your screen.css file:

Code: [Select]

#content table {
 width: 90%;
 margin-left:auto;
 margin-right:auto;
}


[DGEC]

Oh yes.  I remember about that table issue now.  But, if that's it, it's not an obvious fix to me.

The table involved is the one automatically created in the current standard news module. For this template, and any others that operate in a similar manner, all the supplied table widths seem to be 98%, so it should be okay. Just in case, I dropped all 3 to 90%, no joy.

Hmm... The FOOTER settings show 98% too but the previous/next page links add up to 100%. I think that's 100% of the row size, which is 98% of the DIV... Yup, tried changing that, doesn't help.

The template's screen.css has content container tables set to 90% as well. 

Code: [Select]

* html #contentContainer #content table {width: 90%;} /* ie6 fix to stop tables being pushed below floats */
That's what you were talking about in the previous message, wasn't it Gav? I tried adding the exact code you put there, but it didn't make any difference.

The only change I made to any defaults was to include the news block.

Code: [Select]

<?php display_news_items();  ?>I wasn't sure if I had to nest another DIV, so I tried it with & without. No difference.

Something else must complicating things!  I checked the HTML of the content again, pure & simple UL.

[ruebenwurzel]

Hello,

double check the divs in your template and the related css. Try learning about this from internet or books. Don't understand me wrong, but this forum her shoud be a forum for WB issues, your issues can be solved with standard html and css wich website developpers should be able to know what it is. 

Matthias