Dividers or sublists in nav:top boxes

Dividers or sublists in nav:top boxes

SomaDevelopers 12 Jan 2009 17:40

I've been having some issues with nav:top See HERE!, and so I think I might be doing things wrong. Is there an easy way to create dividers in the nav:top drop down boxes? I tried inserting horizontal lines and that just screwed everything up….

Re: Dividers or sublists in nav:top boxes

Phil Chett 12 Jan 2009 19:15

i just stuck a copy of your nav top in my site for testing just to see what was going on.
Anything that IS NOT a link appears to have a transparent background, hence your problem.

which is probably why the devs made this note

Please do not include anything other than links within the bullet list.
Do not go deeper than 1 level with nesting.

at the bottom of the nav top.

So that answers WHY your problem is occurring. So its not a bug.

As for a possible work round… i shall have a play later.

---

.Goal NHGC

Re: Dividers or sublists in nav:top boxes

Helmuti_pdorf 12 Jan 2009 19:31

What you can do is to insert an "autolink" instead of a single "header":
[# empty link] like the Headers of the menu-blocks… but shifted to te right side by one space in the bullet list and enclosed in the span or size tag:

* Soma Software

(mention the bullet is one space inside the start…)

* [[size 125%]][# Soma Software][[/size]]

EDIT1. This does not work as expected - the span / size tag inserts a little space line which stops the bullet list at the menu-pull down - hover the mouse over and you have no more chance to get the menu points under such a inserted (sized) autolink line.

Edit2:

A standard autolink works normal …. ( without any size span, or style attributes…)

means - what I would do ( and this works!)

• Gigabit Ethernet Interface
• Software
  • **SOMA SOFTWARE**
  • SOMA SOFTWARE
  • Audio Monitor
  • PyNet Event
  • Recorder
  • Streams
  • Synthetic Soma
  • Tracker
  • TSpikes
  • **SOMA LIBRARIES**
  • SOMA LIBRARIES
  • libsomanetwork
  • More Stuff

* [[[hardware:gigabit | Gigabit Ethernet Interface]]]
* Software
 * [[size 125%]]Soma Software [[/size]]
 * [[[software:Audio Monitor]]] 
 * [[[software:PyNet | PyNet Event]]]
 * [[[software:Recorder]]]
 * [[[software:Streams]]]
 * [[[software:Synthetic Soma]]]
 * [[[software:Tracker]]]
 * [[[software:TSpikes]]]
 * [[size 125%]] Soma Libraries [[/size]]
 * [[[software:libsomanetwork]]]
 * More Stuff

---

Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

Last edited on 12 Jan 2009 19:51 by Helmuti_pdorf + Show more

Re: Dividers or sublists in nav:top boxes

SomaDevelopers 12 Jan 2009 19:49

Hmm… that almost does it… can I just add a tag inside the size tag that sets the background to non-transparent?

Re: Dividers or sublists in nav:top boxes

Helmuti_pdorf 12 Jan 2009 19:55

Yes, of course, in the size / span tag you can use the style="background-color: white"

typical entry would bem font color=red instead of blue:
* [[span style="font-size:125%; background-color:white; color:red;"]]Soma Software[[/span]]
* Soma Software

EDIT:
==> 1. This works! ( have a look at my test site: http://helmuti-pdorf.wikidot.com/) menu "wikidot pages"

==> 2. but the background is transparent AT THE MOMENT THE TEXT ENDS in the menu-line!

I use too a border on my entries:
* [[span style="font-size:125%; background-color:white; color:red; border: 1px solid silver"]]Soma Software[[/span]]
* Soma Software
Could be I need more knowledge in CSS-style commands

---

Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

Last edited on 12 Jan 2009 20:13 by Helmuti_pdorf + Show more

Re: Dividers or sublists in nav:top boxes

SomaDevelopers 12 Jan 2009 20:14

Actually it works quite well, except the space between the end of the word and the end of the box has a transparent background….
Can I edit the CSS on the drop down box to NEVER have a transparent background ?

Re: Dividers or sublists in nav:top boxes

Helmuti_pdorf 12 Jan 2009 20:15

1. I can see you got it!
2. Yes, you need to "customize your theme" in such a way … please have a look on our howto's! or search for "css" in the search center!

There a re a lot of helps for this issue!

---

Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

Last edited on 12 Jan 2009 20:17 by Helmuti_pdorf + Show more

Re: Dividers or sublists in nav:top boxes

SomaDevelopers 12 Jan 2009 20:21

So I already have a semi-custom theme… I just don't what the css code corresponds to the menu…

Re: Dividers or sublists in nav:top boxes

SomaDevelopers 12 Jan 2009 20:24

Errr… I don't know what group/block/item (don't know what there called) code block to use to set the styles on the nav:top drop down boxes

Re: Dividers or sublists in nav:top boxes

Helmuti_pdorf 12 Jan 2009 20:26

As I remember - there is an extra part for the nav:top area ( container) existent in the css-themes.

Edit: I am not a CSS-guru - perhaps some other acn helo you with the nav.top blocks…

Edit2: I put "nav top css blocks" in the search bar at the top and got very interesting findings!

---

Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

Last edited on 12 Jan 2009 20:41 by Helmuti_pdorf + Show more

Re: Dividers or sublists in nav:top boxes

SomaDevelopers 12 Jan 2009 22:07

So I tried customizing the theme by explicitly stating the background color but the drop down box still came out as transparent… :-(

Re: Dividers or sublists in nav:top boxes

Phil Chett 13 Jan 2009 00:41

try

#top-bar li ul{background-color: #FFF;color:green}

---

.Goal NHGC

Re: Dividers or sublists in nav:top boxes

Ed Johnson 13 Jan 2009 01:17

Phil is on the right track, but you have to get a little deeper into the list items:

/* set drop-down background and text color */
#top-bar ul li.sfhover ul a{
background-color: #ff0000;
color:#00ff00;}

/* set individual menu items background and text color */
#top-bar ul li.sfhover ul li.sfhover a{
background-color: #00ff00;
color:#ff0000;}

I used ugly/extreme color choices to show how it works. You may need to add another pair of these and drop the "a" (anchor) on the end of both for items in your list that don't create links (anchors).

-Ed

---

Free Wikidot Applications · Your Shared Photo Gallery · Your Personal Blog

Re: Dividers or sublists in nav:top boxes

Ed Johnson 13 Jan 2009 02:21

This turned out to be a bit more complicated, but after playing some more, I came up with this.

• The code below sets the colors in your drop-down menu for items that are not linked (i.e. your divider items in the list). This allows you to set the color for your divider items differently from the rest of your menu and they will not change color when you hover over them (makes it obvious they are not a link).

#top-bar ul li.sfhover ul li {
     background-color: #ff0000;
     color:#00ff00;
}

• The code below sets the colors for linked items in your drop-down list when you are not hovering the mouse over them.

#top-bar ul li.sfhover ul a {
     background-color: #ff0000;
     color:#00ff00;
}

• The code below sets the color of the linked items in your drop-down list while you are hovering the mouse over them.

#top-bar ul li.sfhover ul li.sfhover a {
     background-color: #00ff00;
     color:#ff0000;
}

---

Free Wikidot Applications · Your Shared Photo Gallery · Your Personal Blog

Re: Dividers or sublists in nav:top boxes

Helmuti_pdorf 13 Jan 2009 06:26

Without any changes in the CSS theme you can do an easier way ( Sorry, Phil and Ed!) :

;padding-right:3em ( or 1em, 2 em how long the Block is…) to the right of the inserted bulleted text is "erasing" the background with spaces (and "background-color") …

Have a look on my test site: http://helmuti-pdorf.wikidot.com/pages-without-tags and click on "Wikidot pages"

You will see different "Text-Boxes" in red - with different padding-right length - for a better view I enclosed them in borders…

* [[span style="font-size:125%; background-color:white; color:red; padding-right:1em"]]Soma Software[[/span]]
* [[span style="font-size:125%; background-color:white; color:red; border: 1px solid silver;padding-right:3em"]]Soma Software[[/span]]

in Action:

• Soma Software
• Soma Software

Looks better now and I see no longer ( with the 3em spaces) any background..

---

Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

Re: Dividers or sublists in nav:top boxes

SomaDevelopers 13 Jan 2009 13:44

Helmuti,

I tried using:

* [[span style="font-size:125%; background-color:white; color:red; padding-right:1em"]]Libraries[[/span]]

and I got this:

The transparency starts when the word ends..

I'll try the other posters advise and then post back…

Last edited on 13 Jan 2009 13:44 by SomaDevelopers + Show more

Re: Dividers or sublists in nav:top boxes

SomaDevelopers 13 Jan 2009 14:09

Ed,

Thanks it worked! It took me a little while to figure out which code block corresponded to which segment of the menu box but it looks like everything is getting rendered correctly now!

Thank you all so much for your help!

Re: Dividers or sublists in nav:top boxes

Ed Johnson 13 Jan 2009 17:06

I've been playing a bit more with some of the settings and found that you can still have some issues if you fool around with the padding in the list items. When I get it all sorted out so I understand it a bit better, I'll post more details.

I want to thank you for your idea to have unlinked dividers in the menu! I like that idea to add a little "pizzazz" to our top bar menu items.

-Ed

---

Free Wikidot Applications · Your Shared Photo Gallery · Your Personal Blog