Customizing bulletmenu

[alfblack]

Greetings!

I am using bulletmenu. Works well. But I need to change the font color to white. To match my template .

I've browsed thru the function.bulletmenu.php file maybe I could figure out where to put in my html code but I cant find a logical good spot.

Code: Select all

 <font color="white">The font color should be white</font> 

I have seen the forum message about modifying bulletmenu with css but I dont understand css yet. maybe in the near future.

Can anybody advice? Or even better. Post a "patched" function.bulletmenu.php file with my desired effect? TIA!

Oh, currently installed is v0.10.3 Wil have to play around with the new one before the upgrade.

[westis]

Hi alfblack,

You shouldn't modify function.bulletmenu.php to change font colors etc. It's easy to do this with CSS. The bulletmenu is automatically wrapped in a div with class="bulletmenu". You could use this as a simple example:

Code: Select all

.bulletmenu ul
{
margin: 0;
padding: 0;  
list-style-type: none;  /* Using no bullets. Remove this if you want bullets */
font-family: verdana, arial, Helvetica, sans-serif;  /* What font to use */
}

.bulletmenu a, .bulletmenu a:link, .bulletmenu a:visited
{
color: #ffffff;       /* The color of links, white in this case */
text-decoration: none;  /* Links not underlined */
}

.bulletmenu a:hover
{
color: #ffffff;  /* Color when hovering, white in this case */
text-decoration: underline;  /* Underlining links when hovering */
}

.currentpage {
      font-weight: bold;  /* Making the link of the current page bold */
      }

This applies certain properties to the different parts of the unordered list that is what bulletmenu produces (ul, li + a for the links).

Put this in the stylesheet for your template or in a separate stylesheet that you attach to the template. Let me know if you need more help with this.

This is a good start for using CSS! CSS is a really powerful way to customize both the style and layout of your site.

There are plenty of tutorials to start learning CSS. Try for example any of the following:

http://www.w3.org/Style/Examples/011/firstcss
http://www.w3schools.com/css/
http://www.westciv.com/style_master/aca ... index.html
http://www.echoecho.com/css.htm

Hope this helps.

[alfblack]

Many thanks for the tips and pointers!

I find your template excellent. And may use that in developing my future ones.

My problem with CSS is that it's so powerful. So many artistic options! I learn best by example. This helps alot.

But I'm having problems making it work. I tried applying it to my template's stylesheet area. I even clicked on "Set all pages" to apply the template. It didnt work.

I put in..

Code: Select all

<style type="text/css">

</style>

on the top and bottom of this code. Nope, didnt work too.

Oh, these is the actual code I used (modified for my settings).

Code: Select all

.bulletmenu ul
{
margin: 0;
padding: 0; 
list-style-type: none;  /* Using no bullets. Remove this if you want
bullets */
font-family: verdana;  /* What font to use */
}

.bulletmenu a, .bulletmenu a:link, .bulletmenu a:visited
{
color: #ffffff;      /* The color of links, white in this case */
text-decoration: none;  /* Links not underlined */
}

.bulletmenu a:hover
{
color: #ffffff;  /* Color when hovering, white in this case */
text-decoration: underline;  /* Underlining links when hovering */
}

.currentpage {
      font-weight: bold;  /* Making the link of the current page bold */
      }

Also tried your actual code. No luck. Any chance my html template is conflicting with the css template? (I would guess no).

Very nice tutorial links there! I've tried to read some. But they were too long and over complicated. The first one really walks you thru.

EDIT:
I mean to say on the last part. I've read some css tutorials before but they were long. But the tutorial links you gave we're excellent!

[alfblack]

Yeh, I have even cleared cache on the CMS and on the browser. *sigh*

I am using NVU V1.PR. I see there is finally an update and will be installing to that. I also see it has a CSS editor.

I dont see it making any CSS data I think.

[westis]

Hi,

Have you added {stylesheet} between the tags in your template? What is your url? Then I could check the source code to find out what may be wrong.

[alfblack]

Adding the {stylesheet} tag worked like a charm. Doh! Thank you again my CSS master.

Hum.. It's finally white and the right font. But the levels are gone. The bullet menu was 3 levels deep on most entries. I've been reading CSS references and couldnt find the right "selector" ?

What is the ".bulletmenu" entry that will give me control over the other levels?

[westis]

Great that you got it working!

About multilevels, try add ul (unordered list) and li (list item), in the hierarchical order that you find them in the code (ul li or just li for the first level, ul ul li for the second level, as that level is an unordered list within a list item etc.).

.bulletmenu is the CSS way of writing class="bulletmenu". The dot means it's a class. If it's an id it would be #bulletmenu

A bit confusing perhaps... But try these selectors and add some style to them:

Code: Select all

.bulletmenu li { }

.bulletmenu ul ul li { }

.bulletmenu ul ul a, .bulletmenu ul ul a:link, .bulletmenu ul ul a:visited
{}

.bulletmenu ul ul ul li { }

.bulletmenu ul ul ul a, .bulletmenu ul ul ul a:link, .bulletmenu ul ul ul a:visited
{}

[Pj]

Hi,

I tried to edit the function itself.
I renamed it function.articlelist.php. That works, but I am not there yet...

My goal is to get an article list on a page, like {bulletmenu start_element="1" show_root_siblings="1"} does but without the parent showing.

As I am more a debugger than a programmer, I tried to hack some variables etc. But no luck.
The last loop combines all of both parent and sibblings, commenting them # makes all worse ofcourse.

Can anyone help me getting a sibblingslist?


Thank You,

Pj

[westis]

Pj,

Have you tried using the EllNav module for that? From what I understand of what you're trying to do I think you can do that with EllNav.

[Pj]

Perfect!

Thanks.

I have been going through some modules on the dev.site,  but it's hard to get a grasp of what modules are doing.
But I really like the forum and users. It's really nice to get answers real quick!
Hope I can be helpfull in the future.


Ciao
Pj

[westis]

Great, Pj!

Glad that did what you were looking for. EllNav is included in the core installation from 0.11, which will be released later today (it's also n the betas from beta5, I think).

[Pj]

Great an update.

It's a bit scary, I had an update on another forumsoftware just a few weeks ago. I made a lot of tweaks around it, and used the userdatabase of the forum on another part of the website. So after updating all got messed-up. My own fault, but it makes me a bit afraid of updates.

But updates are neccesary, so there we go...


Have fun
Pj

[Pj]

Hi Patricia,

Good suggestions. I used to use phpmyadmin to make sql dumps. Funny thing is that I allways had problems setting them back. I had to go manually through the sql.txt and remove some codes. Don't know which one anymore.
Ofcourse I keep a local copy of the files, but some rights and so have to be altered when putting the files back. Ofcourse my administration of which files have which rights is terrible.
I dream of a backupmod which would ftp from server to local, and back including the rights and hidden htacces and at the same time a db backup.

The bullet menu is exactly how I like it now!
On to the next problem or should I say challenge



see ya.

Pj