stylesheet for bulletmenu...???

[ysf]

where can i find/edit the style for bulletmenu.....

[miketmc]

Hello,

is there anybody, who can give both of us a little help?

Where is to find CSS-Tag-Doku for bulletmenu?

It would be interessted for doing menus like described here --->http://css.maxdesign.com.au/listamatic/

(Link found on post from nils73)

BR
-miketmc

[nils73]

miketmc,

do you have a running installation of CMSMS with your site structure already initialized? If so, drop us a link and if I get the time I will be able to help you ... I am just interested, how many levels you have, i.e. 1, 1.1, 1.1.1, 1.1.1.1 ... cause this is important for the CSS.

Regards,
Nils

[miketmc]

nils73,

sorry, there is now running page until yet, because I´m planning the site and are looking to use "phplayers" or "bulletmenu" for the menu.

I always trie to have only a simple:

1
1.1
2
2.2
etc.

structur for my menue.


Regards,
miketmc

[jah]

I just modified the CSS of one of the listamatic menues. It should work for 2 levels with the standard bulletmenu (I did not style the separator so avoid that. Hopefully the separator will be changed in the next version of bulletmenu?).

This is the modified CSS and menu demo:
http://css.maxdesign.com.au/listamatic2/vertical09.htm

Try this:

Code: Select all

.bulletmenu
{
border: 1px solid #fff;
background-color: #26a;
font: 10px verdana,sans-serif;
width: 14em;
}

.bulletmenu ul
{
padding: 3px;
margin: 0px;

}

.bulletmenu ul li
{
list-style: none;
border: 1px solid #26a;
padding: 0px;
margin-left: 0px;
}

.bulletmenu ul a
{
color: #eee;
text-decoration: none;
display: block;
border-left: 1em solid #159;
border-bottom: 1px solid #159;
padding: 1px 4px 1px 8px;
}

.bulletmenu ul a:hover { border-color: #124; }

.bulletmenu ul ul
{
border: 0;
padding: 3px 4px;
margin-left: 20px;
}

.bulletmenu ul a:visited	
{
color: #eee;
}

.bulletmenu ul ul li a
{
border-left: 0.8em solid #26a;
}

Because of a bug in the current bulletmenu when you use {bulletmenu collapse="1"}, the submenu will appear when the first menu item  is selected.



Jon

[miketmc]

Jon,

GREAT! That´s what I´m looking for.

Thank you very much! 

-miketmc

[nils73]

thanks jah ... just one small addition / change:

Code: Select all

.bulletmenu a {
  color: #eee;
  text-decoration: none;
  display: block;
  border-left: 1em solid #159;
  border-bottom: 1px solid #159;
  padding: 1px 4px 1px 8px;
}

.bulletmenu a:hover, .bulletmenu a:focus { border-color: #124; }

.bulletmenu a:visited { color: #eee; }

That is, if all links in the menu (like here) share the same look. The deeper the cascade goes (the more parents you have) the more of the following you will need:

2 levels (i.e. 1.1)

Code: Select all

.bulletmenu ul ul li a { border-left: 0.8em solid #26a; }

3 levels (i.e. 1.1.1)

Code: Select all

.bulletmenu ul ul ul li a { border-left: 0.4em solid #FF0000; }

Regards,
Nils

[jah]

Thanks Nils. I'll add your change.

I think theese style issues are important for CMSMS. It should be easy for new users to apply a predefined style.

Maybe we could dedicate a location on the wiki for some readymade CSS?

Take the bulletmenu as an example. Wouldn't it be great to have a number of jpegs or working examples of the bulletmenu and the associated CSS?

The same for the other modules. I'm not an expert here but maybe some of you are?

We tend to say that it's just to grab the layout from anywhere out there but it is not that simple. At least it takes some time.

Jon

[nils73]

jah,

I wouldn't publish CSS as such on the wiki. During the past months I watched Drupal.org very closely because I think they have achieved quite a lot. However, Drupal still does not come up with valid source-code and ease of use. BUT: they have come up with a templating system (hey, CMSMS has one too ... it's Smarty) and all they do is to offer templates and stylesheets together. But isn't that ... HELL ... it is called schemes. ;o)

So how about Schemes? That is all one would need. All you need is the code for the default template (or if necessary for more templates) and the CSS beyond. Maybe - if neccessary - with an initial sql-dump. Right now I do not have the time to create a default scheme, but I would really like to create one. I am very busy finishing off my first CMSMS website that has to be highly accessible, useable and editable. Right now one module is still missing (Bookmarks ... damn bookmarks) and some features such as news are more or less a hack. When it's all done I will post the link on the forum to see what you all think.

And afterwards there will hopefully be some time for schemes ... if it comes to schemes at all. Any other ideas?

Regards,
Nils

[miketmc]

I would like to have some templates with different samples of CSS-Styled bulletmenus!

[nils73]

miketmc,

actually I think this is possible as well. Right now all you need to do is modify the CSS and grab some style-inspiration at Listamatic. At least this is what I would recommend. Not that difficult.

[miketmc]

nils73,

thanks for your reply. I´m not very good in CSS, but will do my best.

[nils73]

CSS is pretty easy to handle. Actually you need to understand the basics where you have

- elements (i.e. tags like p, div, etc.)
- ids (marked with a #)
- classes (marked with a .)

For example if all tags in your HTML should be red, you will have something like this in your stylesheet:

p { color: #FF0000; }

But you could still have a paragraph, all in black, if you assign a single class to it, like :

p.black { color: #000000; }

or simply

.black { color: #000000; }

see how I combined the element and the class in my second example? This way you can make sure, that the class "black" is only applied to paragraphs with the class "black" set. However you could still use the class "black" everywhere you would need black text.

There are quite a lot of CSS websites out there where you can learn a lot about how to code with HTML & CSS. Try Google on it ... ;o)

Regards
Nils


-

[miketmc]

nils73,

thanks for the "teaching of CSS"; I will have a look to it and seach for it in google

by
-miketmc