Right-indenting left-nav links that wrap

ChancyRat · October 17, 2013

Moving this part to a thread on it's own subject. Yes, you nailed it exactly.
The pink shows two links that should left indent when wrapping.

While this is fixed could I also make the row height smaller? Not as much space between the lines? THANKS.

Also, I'm not sure what you mean by left indent. As in ... you want the 2nd line to be further to the right than the first line. So it would look something like:
Code:
Using a rattie shuttle with unsocializing rats
Instead of
Code:
Using a rattie shuttle with unsocializing rats
?

einat · October 17, 2013

Look here: http://www.dgrin.com/showthread.php?t=239756
Note that the code applies to a specific type of navbar. AFAIR, Hikin' Mike adjusted it for my accordion style.

ChancyRat · October 17, 2013

einat wrote: »

Look here: http://www.dgrin.com/showthread.php?t=239756
Note that the code applies to a specific type of navbar. AFAIR, Hikin' Mike adjusted it for my accordion style.

Thanks both of you very much.
I noticed comments about the plus and minus signs, and what I see is that:
1. The plus sign is very low down, almost on the bottom line. I can see the minus sign.
2. The plus sign is very sensitive. If the mouse is not dead square on it, I open the folder rather than opening the navbar sub-menu.

Any thoughts on left indenting the wrapping lines of long titles? I put pink on the bottom image to show the sections that should be further indented right.

einat · October 17, 2013

That's beyond me.
Which font are you using? I like it.

ChancyRat · October 17, 2013

einat wrote: »

That's beyond me.
Which font are you using? I like it.

Buda is the font.
I've got a bit of a quandry about it because while it showed fine at home, it didn't at work (with all browsers up to date).
I posted about it here: http://www.dgrin.com/showthread.php?t=241957.

I'm still not sure if the majority of the world will see Buda because of what happened to me at work.
Would you know if the google fonts are supposed to be fully operational for the world, automatically? Basically?

einat · October 17, 2013

ChancyRat wrote: »

Would you know if the google fonts are supposed to be fully operational for the world, automatically? Basically?

I had assumed they would work, but now that this is what's happenig to you, well... hmmmm...
Anyway, I don't have a clue.

leftquark · October 18, 2013

Chancy,
You still never answered the question: what do you mean by "left indenting". I'm so confused. They're aligned on the left. Do you want it so that if the text doesn't fit in the width of the navbar and it is wrapped to a 2nd line, to have that 2nd line be pushed in to the right?

If so, all you need to do is add this to your navbar code (I'm not sure where exactly, since you haven't unveiled yet):

    text-indent: -30px;/*this pulls the first line to the left*/
    padding-left:35px;/*this pushes the paragraph to the right*/

Basically what this does is it the fist line to be moved to the left by 30 pixels. Then the 2nd line (padding-left) pushes the whole thing to the right by 35 pixels. What you end up with is the first one to the left by 5 px.

It's possible to move the + icon up:

/* Move the "+" icon up on mobile devices so it aligns with the navbar */
.sm-page-widget-nav
.sm-accordion>.sm-accordion-item>.sm-accordion-item-action 
.sm-fonticon,
.sm-accordion .sm-fonticon { 
  top: -10px !important;
}

Note: I use this code to move the + icon on my MOBILE VERSION of my site. I haven't tested this on a non-mobile version so it may not work.

I hate the accordion, for what it's worth. It's a pain as you mentioned.

ChancyRat · October 18, 2013

Like blue means green, left means right

You still never answered the question: what do you mean by "left indenting". I'm so confused. They're aligned on the left. Do you want it so that if the text doesn't fit in the width of the navbar and it is wrapped to a 2nd line, to have that 2nd line be pushed in to the right?

If so, all you need to do is add this to your navbar code (I'm not sure where exactly, since you haven't unveiled yet):
Code:

text-indent: -30px;/*this pulls the first line to the left*/ padding-left:35px;/*this pushes the paragraph to the right*/

Basically what this does is it the fist line to be moved to the left by 30 pixels. Then the 2nd line (padding-left) pushes the whole thing to the right by 35 pixels. What you end up with is the first one to the left by 5 px.

I may have discovered a new form of dyslexia, and victimized you with it. Sorry about that.

I attach an image, because I see DG strips my space indents on plain text.

This is for the left navbar that shows on the home page only.
Given that, I don't know where the code that you provided above, goes.

Unfortunately, I have another problem that I'll post in the next post so I can again attach an image.

ChancyRat · October 18, 2013

A separate problem is that in the left navbar on the home page, the subcategories are not showing + signs so that I can open them to view the galleries.

I have these links and settings, which DO work on the top navbar (entire site except home page):

Main category link - set to not open folder contents
- Subfolder link- set to open folder contents
- Gallery
- Gallery

In this snapshot I put green pluses to show where they are missing. Pink is the indent right problem.

leftquark · October 18, 2013

So the "Aggressive Rats" and "Clicker Training Pet Rats" are folders and not galleries?

ChancyRat · October 18, 2013

leftquark wrote: »

So the "Aggressive Rats" and "Clicker Training Pet Rats" are folders and not galleries?

Yes.

snakeey11 · October 18, 2013

ChancyRat wrote: »

A separate problem is that in the left navbar on the home page, the subcategories are not showing + signs so that I can open them to view the galleries.

I have these links and settings, which DO work on the top navbar (entire site except home page):

Main category link - set to not open folder contents
- Subfolder link- set to open folder contents
- Gallery
- Gallery

In this snapshot I put green pluses to show where they are missing. Pink is the indent right problem.

It's possible this may change in the future, but at the moment, accordion-style menus are restricted to two levels (meaning any items below the second level will be saved with the content block but won't be shown on the published page). So, if you have a menu structure that has more levels than that, you'll need to change the menu to a vertical bar style, which will allow everything to show.

-Mike

ChancyRat · October 18, 2013

It's possible this may change in the future, but at the moment, accordion-style menus are restricted to two levels (meaning any items below the second level will be saved with the content block but won't be shown on the published page). So, if you have a menu structure that has more levels than that, you'll need to change the menu to a vertical bar style, which will allow everything to show.

-Mike

Oh, gotcha, thanks.... then, the only issue is the right-indenting for wrapping titles.

ChancyRat · October 18, 2013

I gave this code a go, tweaking the numbers, as the original suggestion caused problems.
It is in the CSS of my main theme, and the navbar appears on the home page only:

}
.sm-accordion > .sm-accordion-item .sm-accordion-item-label {
line-height: 28px !important;/*original 48px*/
text-indent: 0px; /*this pulls the first line to the right */
padding-left: -45px; /*this pushes the paragraph to the right */
}
.sm-user-ui .sm-fonticon-small,
.sm-user-ui .sm-fonticon-sml {
font-size: 28px;/*original 24px*/
}

This was the original code:

text-indent: -30px;/*this pulls the first line to the left*/
padding-left:35px;/*this pushes the paragraph to the right*/

I tried tweaking this -30 and 35, reversing the - and +, and also commenting out each of the lines, but none of these variations corrected the two pink sections in the image.

The two pink areas need to be indented further right (yes, really right). They are the 2nd and 3rd lines of links.
Otherwise they appear to be separate links.

leftquark · October 21, 2013

The following code will cost you $10. You can paypal it to me :P

/* Left indent and make the line spacing height smaller */
.sm-accordion-item-label {
  line-height: [COLOR="Red"]15[/COLOR]px !important;
  padding-top: [COLOR="red"]15[/COLOR]px;
  padding-bottom: [COLOR="red"]15[/COLOR]px;
  text-indent: -30px;
  padding-left: 35px;
}

A couple things to note:
- You'll need to customize the items in red based upon your text size. It may be too small of a number and you'll see your lines overlapping. Make it bigger to push the line height down.
- Changing the "line height" causes everything, including ones that fit in 1 row, to be much smaller. You have to add in the padding-top and padding-bottom to get the height of each accordion row to go back to what it was. Feel free to customize those as you require.

My original code for left indenting works perfectly. Please don't change it. Padding's cannot be negative, for what it's worth (margin's can).

ChancyRat · October 21, 2013

Thank you, I was just playing with the code you added to your customizations site, and not getting anything to work, when you posted this. Except, it's not working either, probably because I'm not explaining what I need well.

I did not change your code, although, there was another bit that had to do, I think, with enlarging the + and - signs? So here's what I have, below.

And the resulting image shows what's wrong. The 2nd and 3rd lines of a link are too far left. The pink should not stick out like that, but instead should be further indented right. I put blue bars to show where they should align.

I've read and re-read my use of left and right and think I got it all right.
I am so confused by what text-indent and padding-left mean, that no matter what values I assign, I can't get the right results. Thank you for explaining that negative values don't work in them.

/* Left indent and make the line spacing height smaller */
.sm-accordion-item-label {
line-height: 15px !important;
padding-top: 15px;
padding-bottom: 15px;
text-indent: -30px;
padding-left: 35px;
}
.sm-user-ui .sm-fonticon-small,
.sm-user-ui .sm-fonticon-sml {
font-size: 28px;/*original 24px*/
}

leftquark · October 21, 2013

ChancyRat wrote: »

Thank you, I was just playing with the code you added to your customizations site, and not getting anything to work, when you posted this. Except, it's not working either, probably because I'm not explaining what I need well.

I did not change your code, although, there was another bit that had to do, I think, with enlarging the + and - signs? So here's what I have, below.

And the resulting image shows what's wrong. The 2nd and 3rd lines of a link are too far left. The pink should not stick out like that, but instead should be further indented right. I put blue bars to show where they should align.

I've read and re-read my use of left and right and think I got it all right.
I am so confused by what text-indent and padding-left mean, that no matter what values I assign, I can't get the right results. Thank you for explaining that negative values don't work in them.

The code I gave you should work perfectly. I even created a test page to test it out. You must be doing something wrong. Can you send me the HTML for the page? Go to "View Source", copy the HTML code and email it to me in a text file. Make sure you do it for the page that you're having problems with otherwise I won't be able to fix it.

Simple searches on google should help you understand the CSS codes.

For example, a Google search on "CSS text-indent" gets the following:
"The text-indent property specifies the indentation of the first line in a text-block." or "The text-indent CSS property specifies how much horizontal space should be left before the beginning of the first line of the text content of an element". You can even see examples here: http://css-tricks.com/almanac/properties/t/text-indent/

The padding-left description leads to some useful links that show you how margins and paddings take effect. Imagine your area is a box. Margin's effect the outside of the box -- you can push the box left, right, up, down. Paddings effect the inside of the box. In your case the thing you're working on is the "element" (or element box. So if your text is "Rats that like to play" that's your element. http://www.htmldog.com/guides/css/beginner/margins/

Basically what the code does is as follows:
- "Padding-left: 35px" pushes the entire text 35 pixels to the right. It effects the first, second, third, fourth, fifth, etc lines. EVERYTHING is pushed to the right. What it's saying is if my element starts here, at this line: "|", make my element start 35pixels after that. So you'd have "| WHATEVER TEXT".

- "Text-indent: -30px" pushes the FIRST line to the right by -30pixels. Since it's negative 30 pixels it really means "push the FIRST line to the left by 30 pixels". When you use it in conjunction with the first one you end up with: "Push everything to the right 35 pixels, but push the FIRST line to the left by 30 pixels." ... If you assume the 1st line is 'normal' ... you now have in other words is "Push the 2nd, 3rd, 4th, etc lines to the right by 5 pixels".

I don't know what you're doing wrong so sending me the HTML should allow me to fix it.

leftquark · October 22, 2013

OK, getting your code certainly helped. I was having it apply the code to the first level and forgot that you wanted it only applied to the second level (after clicking the "+"). So here's the code to make it work how you want!

/* Add some space above and below each submenu link.
   Also cause line-wrapping to indent after the 1st line */
.sm-nav-item-sublevel {
  padding-top: 10px;
  padding-bottom: 10px;
  text-indent: -20px;
  padding-left: 20px;
}

/* Fix the line-height of the sub-links so that multiple rows are closer together */
.sm-nav-item-sublevel a {
  line-height: 25px !important;
}

/* Make the navbar have a hover color when the mouse goes over it */
/* Feel free to delete this if you don't like having hover color */
.sm-nav-item-toplevel a:hover, .sm-nav-item > a:hover {
  color: #FFA500 !important;
}

ChancyRat · October 22, 2013

leftquark wrote: »

OK, getting your code certainly helped. I was having it apply the code to the first level and forgot that you wanted it only applied to the second level (after clicking the "+"). So here's the code to make it work how you want!

/* Add some space above and below each submenu link.
   Also cause line-wrapping to indent after the 1st line */
.sm-nav-item-sublevel {
  padding-top: 10px;
  padding-bottom: 10px;
  text-indent: -20px;
  padding-left: 20px;
}

/* Fix the line-height of the sub-links so that multiple rows are closer together */
.sm-nav-item-sublevel a {
  line-height: 25px !important;
}

/* Make the navbar have a hover color when the mouse goes over it */
/* Feel free to delete this if you don't like having hover color */
.sm-nav-item-toplevel a:hover, .sm-nav-item > a:hover {
  color: #FFA500 !important;
}

Thanks - but -

Do I apply this in addition to leaving this code in place:

/* Left indent and make the line spacing height smaller */
.sm-accordion-item-label {
line-height: 15px !important;
padding-top: 15px;
padding-bottom: 15px;
text-indent: -30px;
padding-left: 35px;
}

ChancyRat · October 22, 2013

What's confusing me is that your code only talks about nav-bar, not accordion, which is what the old code described. And I also have a nav-bar at the top (for site wide), so I have 2 nav-bars.

leftquark · October 22, 2013

ChancyRat wrote: »

What's confusing me is that your code only talks about nav-bar, not accordion, which is what the old code described. And I also have a nav-bar at the top (for site wide), so I have 2 nav-bars.

Get rid of the old code. It will screw it all up if you don't.

We can restrict it to the left navbar only bad adding 1 extra set of restrictors (add ".sm-page-layout-region-left" before everything):

/* Add some space above and below each submenu link.
   Also cause line-wrapping to indent after the 1st line */
.sm-page-layout-region-left .sm-nav-item-sublevel {
  padding-top: 10px;
  padding-bottom: 10px;
  text-indent: -20px;
  padding-left: 20px;
}

/* Fix the line-height of the sub-links so that multiple rows are closer together */
.sm-page-layout-region-left .sm-nav-item-sublevel a {
  line-height: 25px !important;
}

/* Make the navbar have a hover color when the mouse goes over it */
/* Feel free to delete this if you don't like having hover color */
.sm-page-layout-region-left .sm-nav-item-toplevel a:hover, 
.sm-page-layout-region-left .sm-nav-item > a:hover {
  color: #FFA500 !important;
}

ChancyRat · October 22, 2013

I am such a troublemaker, I feel terrible this isn't working.
I changed the hover color (great idea), but that is all.
Here's the code I inserted, copied out of my CSS. And as you can see, the 2nd and 3rd lines of each link are not indented further right than the first line of the respective links.

.sm-page-layout-region-left
/* Add some space above and below each submenu link.
Also cause line-wrapping to indent after the 1st line */
.sm-page-layout-region-left .sm-nav-item-sublevel {
padding-top: 10px;
padding-bottom: 10px;
text-indent: -20px;
padding-left: 20px;
}
/* Fix the line-height of the sub-links so that multiple rows are closer together */
.sm-page-layout-region-left .sm-nav-item-sublevel a {
line-height: 25px !important;
}

leftquark · October 22, 2013

ChancyRat wrote: »

I am such a troublemaker, I feel terrible this isn't working.
I changed the hover color (great idea), but that is all.
Here's the code I inserted, copied out of my CSS. And as you can see, the 2nd and 3rd lines of each link are not indented further right than the first line of the respective links.

It looks like you entered the code wrong. You have an extra line at the top that I highlighted in red. Delete it

I tested my code on your site, so I know it works

:

[COLOR="Red"].sm-page-layout-region-left[/COLOR]
/* Add some space above and below each submenu link.
Also cause line-wrapping to indent after the 1st line */
.sm-page-layout-region-left .sm-nav-item-sublevel {
  padding-top: 10px;
  padding-bottom: 10px;
  text-indent: -20px;
  padding-left: 20px;
}
/* Fix the line-height of the sub-links so that multiple rows are closer together */
.sm-page-layout-region-left .sm-nav-item-sublevel a {
  line-height: 25px !important;
}

ChancyRat · October 22, 2013

Ahhh, wheeeeeeeee!

barb

Almost there!

I tweaked one setting as so, which came closer to what I want (see image) - I think it tweaked the horizontal line spacing between the subcategories and galleries under a main category.
But what do I tweak to reduce two areas:
- pink is horizontal blank space between categories
- green is horizontal blank space between category and the sub-items under it.

And then how can I make the hover effect bold on the text, in addition to the wonderful hover color code?

EDIT: forgot the code:

/* Add some space above and below each submenu link.
Also cause line-wrapping to indent after the 1st line */
.sm-page-layout-region-left .sm-nav-item-sublevel {
padding-top: 2px;
padding-bottom: 2px;
text-indent: -20px;
padding-left: 20px;
}
/* Fix the line-height of the sub-links so that multiple rows are closer together */
.sm-page-layout-region-left .sm-nav-item-sublevel a {
line-height: 25px !important;
}

/* Make the navbar have a hover color when the mouse goes over it */
/* Feel free to delete this if you don't like having hover color */
.sm-page-layout-region-left .sm-nav-item-toplevel a:hover,
.sm-page-layout-region-left .sm-nav-item > a:hover {
color: #19467D !important;

leftquark · October 22, 2013

ChancyRat wrote: »

But what do I tweak to reduce two areas:
- pink is horizontal blank space between categories
- green is horizontal blank space between category and the sub-items under it.

And then how can I make the hover effect bold on the text, in addition to the wonderful hover color code?

Here's the code. I couldn't get the bold to transition (fade in). It also makes some of the lines go from 3 to 4 lines and looks weird. I wouldn't recommend implementing the bold on hover.

/* Add some space above and below each submenu link.
Also cause line-wrapping to indent after the 1st line */
.sm-page-layout-region-left .sm-nav-item-sublevel {
  padding-top: 2px;
  padding-bottom: 2px;
  text-indent: -20px;
  padding-left: 20px;
}
/* Fix the line-height of the sub-links so that multiple rows are closer together */
.sm-page-layout-region-left .sm-nav-item-sublevel a {
  line-height: 25px !important;
}

/* Make the navbar have a hover color when the mouse goes over it */
/* Feel free to delete this if you don't like having hover color */
.sm-page-layout-region-left .sm-nav-item-toplevel a:hover, 
.sm-page-layout-region-left .sm-nav-item > a:hover {
  color: #19467D !important;
[COLOR="Red"]  font-weight: bold;[/COLOR]
}

[COLOR="red"]/* Make each top level menu item have less top and bottom padding */
.sm-accordion>.sm-accordion-item .sm-accordion-item-label {
  line-height: 20px !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

/* Move the + and - buttons up so they properly align */
.sm-page-widget-nav .sm-page-widget-nav-accordion .sm-accordion>.sm-accordion-item>.sm-accordion-item-action .sm-fonticon {
  top: -6px; !important;
}[/COLOR]

New stuff is in red. I added 2 new sections: the first makes the top level paddings smaller (less vertical space). Even though you made pink and blue marks in your previous post it's all the same issue -- too much padding on the bottom of the top menu link. I added a padding of 4px to the top and bottom because I thought that looked good. Feel free to tweak. I recommend keeping the padding-top and padding-bottom the same so that the text is properly centered. I set the line-height to 20px because that's the size of the font you use. If you change the font size you may want to change that "line-height".

In the 2nd set of new code I moved the + and - accordion buttons up ... changing the line height in the previous section screwed up the + and - buttons. Feel free to tweak the top: -6px; to whatever you need. Since it may be confusing, top means "Place this area <X> number of pixels from the top of the element." Basically that means "move it down by <X> pixels." By using a negative value, I'm telling it to move up by 6 pixels.

EDIT: As usual, either replace the previous code with this one, or add the parts in red.

ChancyRat · October 22, 2013

In the 2nd set of new code I moved the + and - accordion buttons up ... changing the line height in the previous section screwed up the + and - buttons. Feel free to tweak the top: -6px; to whatever you need. Since it may be confusing, top means "Place this area <X> number of pixels from the top of the element." Basically that means "move it down by <X> pixels." By using a negative value, I'm telling it to move up by 6 pixels.

/* Make each top level menu item have less top and bottom padding */ .sm-accordion>.sm-accordion-item .sm-accordion-item-label { line-height: 20px !important; padding-top: 4px !important; padding-bottom: 4px !important; }

I'm sure you're getting tired, I'm in disbelief at how complex this was.
But - I don't understand - "feel free to tweak the top"
What top?
-6 px? Is where?
Line height is in more than one place?

Yes, the + and -'s are still too low.

Otherwise this is GREAT.

leftquark · October 23, 2013

The second section of the new code (or the very last section if you're looking at the entire bit of code I gave you) starts with "Move the + and - buttons up so they properly align". I try to comment the code so you can understand what each section is doing. That's obviously the area of code you need to edit to make the + and - ones align. There's one line in there: "top: -6px !important". Which tells the + and - buttons to move up, from where they were, by 6 pixels. As you can see, they're still too low. 6 pixels wasn't enough. You prob. need something more like "top: -10px !important";

ChancyRat · October 23, 2013

leftquark wrote: »

The second section of the new code (or the very last section if you're looking at the entire bit of code I gave you) starts with "Move the + and - buttons up so they properly align". I try to comment the code so you can understand what each section is doing. That's obviously the area of code you need to edit to make the + and - ones align. There's one line in there: "top: -6px !important". Which tells the + and - buttons to move up, from where they were, by 6 pixels. As you can see, they're still too low. 6 pixels wasn't enough. You prob. need something more like "top: -10px !important";

Okay tell me I'm crazy but this code you refer to is not in the CSS.

No can find "move the + and -..." or "-6px..."

Honest!

leftquark · October 23, 2013

In post #25 ... the very last section of code. Did you make sure to scroll down in the code box? Perhaps the 6px is all you need, since it seems like you didn't include that part when you sent the sreenshot.

ChancyRat · October 23, 2013

leftquark wrote: »

The second section of the new code (or the very last section if you're looking at the entire bit of code I gave you) starts with "Move the + and - buttons up so they properly align". I try to comment the code so you can understand what each section is doing. That's obviously the area of code you need to edit to make the + and - ones align. There's one line in there: "top: -6px !important". Which tells the + and - buttons to move up, from where they were, by 6 pixels. As you can see, they're still too low. 6 pixels wasn't enough. You prob. need something more like "top: -10px !important";

leftquark wrote: »

In post #25 ... the very last section of code. Did you make sure to scroll down in the code box? Perhaps the 6px is all you need, since it seems like you didn't include that part when you sent the sreenshot.

OMG. So Sorry. Didn't see that bit.
But - it didn't work. I changed it to -20px, then -2 (not sure what the "-" means). Nothing changed.

Just so I'm fully transparent, here's the code now:

/* Add some space above and below each submenu link.
Also cause line-wrapping to indent after the 1st line */
.sm-page-layout-region-left .sm-nav-item-sublevel {
padding-top: 3px;
padding-bottom: 3px;
text-indent: -20px;
padding-left: 20px;
}
/* Fix the line-height of the sub-links so that multiple rows are closer together */
.sm-page-layout-region-left .sm-nav-item-sublevel a {
line-height: 25px !important;
}
/* Make the navbar have a hover color when the mouse goes over it */
/* Feel free to delete this if you don't like having hover color */
.sm-page-layout-region-left .sm-nav-item-toplevel a:hover,
.sm-page-layout-region-left .sm-nav-item > a:hover {
color: #19467D !important;
/* font-weight: bold; */
}
/* Make each top level menu item have less top and bottom padding */
.sm-accordion>.sm-accordion-item .sm-accordion-item-label {
line-height: 20px !important;
padding-top: 4px !important;
padding-bottom: 4px !important;
}
/* Move the + and - buttons up so they properly align */
.sm-page-widget-nav .sm-page-widget-nav-accordion .sm-accordion>.sm-accordion-item>.sm-accordion-item-action .sm-fonticon {
top: -2px; !important;
}

ChancyRat · October 23, 2013

I even tried -50px and those +s and -s aren't budging.

Right-indenting left-nav links that wrap

Comments