Posts:
100
Registered:
5-Mar-2009
|
|
|
|
Neptune - folder menu
Posted:
6 Jan 26, 23:41
|
|
|
|
I suppose this is a feature request ...
I'm using the folder menu feature in tuband.com/travel. The Travel album has 4 sub-albums covering approx. 5 years of travel photos. Is it possible to have a unique icon for those 4 sub-albums? If you visit that section of my site and open the folder menu, the top line is RETURN to the home page, 2nd line is return to Travel home (house icon), and the remainder of the entries use the triangle icon. It would be easier/quicker to locate the 4 main sub-folders if they had an icon different from the triangle, perhaps a circle.
The folder menu is a fantastic feature when there are so many albums inside the main - searching is a lot quicker.
|
|
|
Posts:
8,058
Registered:
31-Jan-2006
|
|
|
|
Re: Neptune - folder menu
Posted:
7 Jan 26, 00:16
in response to: jret
|
 |
Helpful |
|
|
Those little arrows aren't icons. They're a bit of CSS trickery. Believe it or not, they're a type of border!
https://css-tricks.com/snippets/css/css-triangle/
Dropping back to using the default HTML unordered list markers, like squares or circles, might not be too bad. Or, the triangles at that level could be made a different color, or a different size.
Lots of custom coding to make any of that happen, however. You'd have to hack the skin templates so that it applied a distinct CSS class to the bullet entries only for a specific level, then feed it some custom CSS instructions to make those look different. But the way the routine is currently sequenced, by the time the CSS selectors are being applied, the level information is no longer available. In other words, big changes. |
|
|
Posts:
8,058
Registered:
31-Jan-2006
|
|
|
|
Re: Neptune - folder menu
Posted:
7 Jan 26, 00:45
in response to: JeffTucker
|
|
|
|
|
|
But it's an interesting idea. What wouldn't be too awful to implement would be a setting for "arrow depth" - in other words, how many levels would display an arrow, with deeper levels dropping back to HTML standard, perhaps with the normal HTML progression - solid disc, open disc, solid square.
With just one layer of subfolders, it might look like the attached screenshot (not generated under program control, of course - just cobbled together by hand).
|
|
|
Posts:
100
Registered:
5-Mar-2009
|
|
|
|
Re: Neptune - folder menu
Posted:
7 Jan 26, 04:33
in response to: JeffTucker
|
|
|
Those little arrows aren't icons. They're a bit of CSS trickery. Believe it or not, they're a type of border!
https://css-tricks.com/snippets/css/css-triangle/
Dropping back to using the default HTML unordered list markers, like squares or circles, might not be too bad. Or, the triangles at that level could be made a different color, or a different size.
Lots of custom coding to make any of that happen, however. You'd have to hack the skin templates so that it applied a distinct CSS class to the bullet entries only for a specific level, then feed it some custom CSS instructions to make those look different. But the way the routine is currently sequenced, by the time the CSS selectors are being applied, the level information is no longer available. In other words, big changes.
Learned something new ... thanks. |
|
|
Posts:
100
Registered:
5-Mar-2009
|
|
|
|
Re: Neptune - folder menu
Posted:
7 Jan 26, 04:37
in response to: JeffTucker
|
|
|
But it's an interesting idea. What wouldn't be too awful to implement would be a setting for "arrow depth" - in other words, how many levels would display an arrow, with deeper levels dropping back to HTML standard, perhaps with the normal HTML progression - solid disc, open disc, solid square.
With just one layer of subfolders, it might look like the attached screenshot (not generated under program control, of course - just cobbled together by hand).
Screenshot is helpful. Triangles on the first level would be a visible assistance when searching the contents with a dot on everything else. Would maintain a reasonably clean look. |
|
|
Posts:
8,058
Registered:
31-Jan-2006
|
|
|
|
Re: Neptune - folder menu
Posted:
7 Jan 26, 15:47
in response to: jret
|
|
|
Learned something new ... thanks.
I've been using those CSS triangles for years, but if I were faced with an empty CSS file and had to recreate them from scratch, I probably couldn't do it.  |
|
|
Posts:
8,058
Registered:
31-Jan-2006
|
|
|
|
Re: Neptune - folder menu
Posted:
7 Jan 26, 15:53
in response to: jret
|
|
|
Triangles on the first level would be a visible assistance when searching the contents with a dot on everything else. Would maintain a reasonably clean look.
I agree - it looks cleaner - and upon reflection, I think I'll make it "triangles at level 1, filled circles at level 2, open circles at level 3, filled squares at level 4, filled circles at level 5, and open circles at level 6."
Six levels is the max, though for an album I don't think I'd ever go past three. I might reduce the max to five levels, while I'm at it - I don't know what possessed me to choose six in the first place. |
|
|
Posts:
100
Registered:
5-Mar-2009
|
|
|
|
Re: Neptune - folder menu
Posted:
7 Jan 26, 16:37
in response to: JeffTucker
|
|
|
Triangles on the first level would be a visible assistance when searching the contents with a dot on everything else. Would maintain a reasonably clean look.
I agree - it looks cleaner - and upon reflection, I think I'll make it "triangles at level 1, filled circles at level 2, open circles at level 3, filled squares at level 4, filled circles at level 5, and open circles at level 6."
Six levels is the max, though for an album I don't think I'd ever go past three. I might reduce the max to five levels, while I'm at it - I don't know what possessed me to choose six in the first place.
Yes, I think triangles at level 1 makes a lot of sense - different from the levels above (album home & site home) and also different from the levels below. It also occurs to me that the level 1 description would stand out even more if displayed in bold. The downside is it might make it look a bit tacky.
I got curious as to how many levels I was using. Initially I had checked 3 levels but realized that I was using at least 5 levels in one instance. Rebuilt/uploaded the travel gallery if you want to see the appearance.
tuband.com/travel/2004-2010/europe/paris/eiffel tower
I think I only have 2 instances of 4 levels and very few at 3 levels. The great majority are 2 levels.
I like your suggested sequence: triangles, circles, squares. Instead of repeating circles for levels 5/6, would it be possible to used a centered dot for level 5 & delete level 6? Agreed that 6 levels should not be needed.
G- |
|
|
Posts:
100
Registered:
5-Mar-2009
|
|
|
|
Re: Neptune - folder menu
Posted:
7 Jan 26, 16:44
in response to: JeffTucker
|
|
|
|
One more suggestion ...
It might be easier to read without line spaces between levels, especially going to circles & squares. Use a line space at the beginning of major divisions - the album (travel) and then the 4 sub-albums (folders). For me it makes more sense to keep the sub-levels visually attached to the folder they are in. Apologies for this suggestion - it's a holdover from many years of printing, editing, and producing programs and other printed listings.
|
|
|
Posts:
8,058
Registered:
31-Jan-2006
|
|
|
|
Re: Neptune - folder menu
Posted:
7 Jan 26, 17:25
in response to: jret
|
|
|
|
I'll tinker with it - it's always a bit of a wrestling match because the default behavior of unordered lists produces bullets that are wildly over-indented and too loosely spaced. Lots of padding and margin adjustments.... (This forum software commits the same sin.)
It's actually possible to use single characters for the markers. I've tried #, +, =, and >, all of which work pretty well - clearly different from the standard circles and squares. Other characters don't look good. So I might settle on one of those for level 5, rather than recycling the built-ins.
|
|
|
Posts:
8,058
Registered:
31-Jan-2006
|
|
|
|
Re: Neptune - folder menu
Posted:
8 Jan 26, 17:28
in response to: JeffTucker
|
|
Helpful |
|
|
|
|
I've ripped the guts out of the folder menu routines, so that it now uses different bullets at each of the five maximum levels. Initially, I've chosen disclosure-closed, disc, greater-than character, circle, hash tag character. See screenshot of the default.
But the beauty of this is that all of the list style types are controlled with very simple CSS, so you can customize to your heart's content. Taking it to extremes, consider this custom CSS: .ja-menul1 {list-style-type: upper-roman;}
.ja-menul2 {list-style-type: upper-alpha;}
.ja-menul3 {list-style-type: lower-roman;}
.ja-menul4 {list-style-type: lower-alpha;}
.ja-menul5 {list-style-type: hebrew;}
That produces what you see in the custom screenshot.
There's a whole raft of standard types, but you can also use single characters (which I've done at the third and fifth levels). Want an equals sign at the third level? .ja-menul3 {list-style-type: "= ";}
For alignment, it seems to need a space after the chosen character. Oh, and the class is .ja-menul3 - that's an "ell-3" for "level 3," not "13."
This seems to be the only truly complete list of the types:
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/list-style-type |
|
|
Posts:
8,058
Registered:
31-Jan-2006
|
|
|
|
Re: Neptune - folder menu
Posted:
8 Jan 26, 17:35
in response to: JeffTucker
|
|
|
|
|
|
I'm still debating how to handle the line-spacing. At present, each <ul> group ends with some bottom padding, to provide a space before it moves to the next level up. But it would be equally easy to do something like what you see in the spacing screenshot.
ETA: The alternate spacing with the default list styles, in "spacingwithdefault."
|
|
|
Posts:
100
Registered:
5-Mar-2009
|
|
|
|
Re: Neptune - folder menu
Posted:
8 Jan 26, 18:46
in response to: JeffTucker
|
|
|
I've ripped the guts out of the folder menu routines, so that it now uses different bullets at each of the five maximum levels. Initially, I've chosen disclosure-closed, disc, greater-than character, circle, hash tag character. See screenshot of the default.
But the beauty of this is that all of the list style types are controlled with very simple CSS, so you can customize to your heart's content. Taking it to extremes, consider this custom CSS: .ja-menul1 {list-style-type: upper-roman;}
.ja-menul2 {list-style-type: upper-alpha;}
.ja-menul3 {list-style-type: lower-roman;}
.ja-menul4 {list-style-type: lower-alpha;}
.ja-menul5 {list-style-type: hebrew;}
That produces what you see in the custom screenshot.
There's a whole raft of standard types, but you can also use single characters (which I've done at the third and fifth levels). Want an equals sign at the third level? .ja-menul3 {list-style-type: "= ";}
For alignment, it seems to need a space after the chosen character. Oh, and the class is .ja-menul3 - that's an "ell-3" for "level 3," not "13."
This seems to be the only truly complete list of the types:
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/list-style-type
Looks great ... and being able to "mod" the CSS is greatly appreciated. |
|
|
Posts:
100
Registered:
5-Mar-2009
|
|
|
|
Re: Neptune - folder menu
Posted:
8 Jan 26, 18:49
in response to: JeffTucker
|
|
|
|
Spacing looks good. Did you remove bottom padding and add top padding to the top level group?
Everything looks really good and IMHO is a nice improvement to the folder menu.
|
|
|
Posts:
8,058
Registered:
31-Jan-2006
|
|
|
|
Re: Neptune - folder menu
Posted:
8 Jan 26, 19:20
in response to: jret
|
|
|
Spacing looks good.
Which one, default or spacingwithdefault? I'm leaning towards the second options, which provides an extra line break only between the first-level folders - Folder One, Folder Two, and so on. Below that level, it's all single-spaced (though I do bump the line height a bit, without which they look crowded).
In either case, it's simple CSS, readily modified. In the second option, there's bottom padding only on menul2. In other words, when it's finished with the subfolders, it creates some space before the next item in the first level. |
|
|
|
Legend
|
|
Forum admins
|
|
|
Helpful Answer
|
|
Correct Answer
|
|
