Some little things to tighten up

ChancyRat · May 20, 2014

Sorry for the general title but I need to cover a little range. There have been some things that used to work and now don't - very confusing. It's taken me months to be able to get around to asking.

But first - you Digital Grin folks ROCK! Thank you SO much for all the help.
And Smugmug - LOVE MY NEW SITE! I know you've got a lot of work to do - and I do too - but THANK YOU.
Smooches big time.

Okay, first, how do I get the chevrons on the sub-menus, to inside the boxes?
In this image I put the chevron's current location in PINK because it's impossible to spot, and where I want it to be, in GREEN.

I have tried looking at other people's menu code with inspect element but cannot figure out how to find it.
Thanks.

Hikin' Mike · May 20, 2014

You would think I would remember your site, but I don't. Any chance of you putting it in your signature?

ChancyRat · May 20, 2014

Hikin' Mike wrote: »

You would think I would remember your site, but I don't. Any chance of you putting it in your signature?

lol, JoinRats.com
It's also under my name on the left on DG.

snakeey11 · May 21, 2014

This is being caused by the custom padding you're applying in the following rule:

.sm-page-layout-region-top .yui3-menu-item .yui3-menu-label {
  /* ... */
  padding: 3px 5px 2px 5px !important;
  /* ... */
}

With this customization, the default positioning applied to the sub-menu indicator doesn't work properly. Something like the following bit of CSS should help the problem:

.sm-page-layout-region-top .yui3-menu-item.yui3-menu-has-children > .yui3-menu-label:after {
  margin-right: 0;
}

Note that you'll probably need to play with the padding and/or margin a bit in order to make sure the indicator doesn't overlap with long menu labels, but this should give you a good starting point.

Nice looking site!
-Mike

ChancyRat · May 21, 2014

Mike, thanks for the code but a bit more please - what you gave me, please tell me more specifically what to replace with what?
Just adding the code you provided, did nothing. All that CSS may be misleading you as to how much I know. The code is really Nicholas, Aaron, Allen, Denise, Mike ... sorry if I've left out anyone... Aaron mostly got the navbar up and running via this thread: http://www.dgrin.com/showthread.php?t=244036&highlight=sub-menu.

Thanks.

Hikin' Mike · May 21, 2014

You can try and change this:

.sm-page-layout-region-top .yui3-menu-item .yui3-menu-label {
	/* ... */
	padding: 3px [COLOR="Red"]35px[/COLOR] 2px 5px !important;
	/* ... */
}

snakeey11 · May 21, 2014

ChancyRat wrote: »

Mike, thanks for the code but a bit more please - what you gave me, please tell me more specifically what to replace with what?
Just adding the code you provided, did nothing. All that CSS may be misleading you as to how much I know. The code is really Nicholas, Aaron, Allen, Denise, Mike ... sorry if I've left out anyone... Aaron mostly got the navbar up and running via this thread: http://www.dgrin.com/showthread.php?t=244036&highlight=sub-menu.

Thanks.

Mike's suggestion changes the right padding for the menu item labels (to give the necessary space for the arrow) and has the added benefit of not introducing additional custom CSS. It should work just as well.

Another option, which you might prefer, would be to add the following rule:

.sm-page-layout-region-top .yui3-menu-item.yui3-menu-has-children .yui3-menu-label {
	padding-right: 35px !important;
}

What this would do is only apply the additional padding when there are submenus, and it would keep your existing spacing (which is not a lot of padding) for items that don't have the submenu - that way your "normal" menus wouldn't incur the extra space.

Hikin' Mike · May 21, 2014

snakeey11 wrote: »
Mike's suggestion changes the right padding for the menu item labels (to give the necessary space for the arrow) and has the added benefit of not introducing additional custom CSS. It should work just as well.

Another option, which you might prefer, would be to add the following rule:
.sm-page-layout-region-top .yui3-menu-item.yui3-menu-has-children .yui3-menu-label {
    padding-right: 35px !important;
}
What this would do is only apply the additional padding when there are submenus, and it would keep your existing spacing (which is not a lot of padding) for items that don't have the submenu - that way your "normal" menus wouldn't incur the extra space.

Personally, I would prefer more padding. It's easier to read, IMO. When I disabled your padding:

.sm-page-layout-region-top .yui3-menu-item .yui3-menu-label {
    /* ... */
   [B] padding: 3px 5px 2px 5px !important;[/B]
    /* ... */
}

...it looked better, at least to me.

ChancyRat · May 21, 2014

Honest Mike & Mike I got so confused I was too embarrassed to admit it.
I'm so afraid to mess with the main theme css, because it was so hard to get right, that I held my breath and tried what seemed to me the least dangerous edit, which was to add this:

.sm-page-layout-region-top .yui3-menu-item.yui3-menu-has-children .yui3-menu-label { padding-right: 35px !important; }

which seems to not have broken anything. Yay! Plus controlled the chevrons. Yay!

Mike I'm going to stay with the padding but may come back to it after a few other glitches are taken care of.

Okay, I'll mosey into the next bits:

1. Can I change the color of the chevrons on the sub-menus?

2. On my folders and galleries thumbnails, the titles used to wrap to a 2nd (or 3rd, or however many lines are needed).
For example the first gallery on this page:
http://www.joinrats.com/Intros
and the "Pet Rats? Oops?" sub-folder, middle column, 3 rows down, here:
http://www.joinrats.com/RatHealth

3. While I'm at it on the folder and gallery thumbs, with the titles below the image, I thought I could have a background color behind the titles, similar to when the title is ON the thumbs.

Thanks.

Hikin' Mike · May 21, 2014

Yes, add this to change the "chevrons":

.yui3-menu-can-have-children > .yui3-menu-label:after {
    color: #F00 !important;
    }

Hikin' Mike · May 21, 2014

Add this for your folder/gallery titles:

/* Adds Background Color to Folder/Gallery Titles */
.sm-user-ui .sm-tile-info {
    background-color: rgba(0, 0, 0, .1);
    padding: 2px 10px 0 !important;
    }

ChancyRat · May 22, 2014

Hikin' Mike wrote: »
Yes, add this to change the "chevrons":
.yui3-menu-can-have-children > .yui3-menu-label:after {
    color: #F00 !important;
    }

Perfect, thanks.

ChancyRat · May 22, 2014

Hikin' Mike wrote: »

Add this for your folder/gallery titles:

/* Adds Background Color to Folder/Gallery Titles */
.sm-user-ui .sm-tile-info {
    background-color: rgba(0, 0, 0, .1);
    padding: 2px 10px 0 !important;
    }

Hmm, didn't do anything...

ChancyRat · May 22, 2014

This is the code in my theme CSS that appears to be controlling if the titles are fully visible (wrap to as many lines as needed to show the full title) - if it is supposed to show the full titles, it doesn't.
I don't know if this code is also affecting the code that you gave me, Mike, to add color to the background of the titles. I don't know what to change or edit to achieve showing the full titles of galleries and folders, below the image, with a background color (all in any folder setting type, such as 3:2 or 1:3).

.sm-tiles-grid.sm-tiles-info-after .sm-tile-info p {
overflow: visible;
}

/* Properly center the image pagination */
.sm-user-ui .sm-gallery-smugmug .sm-gallery-image-pagination {
margin-left: auto;
margin-right: auto;
width: 50%;
}

/* Make thumb background color different */
.sm-tiles-grid .sm-tiles-list .sm-tile-content {
background-color: #CEE5FF;
color: white;
}

/* Place Titles on Thumbnails in Folders.
Will wrap the long gallery titles in the grid format. */
.sm-tiles-grid .sm-tile-info p {
padding-left: 0!important;
padding-right: 0!important;
overflow: visible !important;
white-space:normal !important;
height: 41px !important;
}

/* titles on thumbs in folders */
.sm-tiles-grid ul li a p {
font-size: 95%!important;
padding-left: 0!important;
padding-right: 0!important;
text-align:center;
overflow: visible !important;
white-space:normal !important;
height: 41px !important;
}

/* titles on thumbs in folders */
.sm-tiles-grid p {
text-align:center;
overflow: visible !important;
white-space:normal !important;
}

Hikin' Mike · May 22, 2014

It should work. Try adding '!important':

/* Adds Background Color to Folder/Gallery Titles */
.sm-user-ui .sm-tile-info {     
    background-color: rgba(0, 0, 0, .1) [B]!important[/B];     
    padding: 2px 10px 0 !important; 
    }

ChancyRat · May 22, 2014

Hikin' Mike wrote: »

It should work. Try adding '!important':

/* Adds Background Color to Folder/Gallery Titles */
.sm-user-ui .sm-tile-info {     
    background-color: rgba(0, 0, 0, .1) [B]!important[/B];     
    padding: 2px 10px 0 !important; 
    }

No go. :cry

This is what I added:

/* Adds Background Color to Folder/Gallery Titles */
.sm-user-ui .sm-tile-info {
background-color: rgba(136, 196, 253, .9) !important;
padding: 2px 10px 2px 10px !important;
}

I'm very confused by the code I posted above - so many variations on what seem like the same code. I can't believe it isn't causing problems. Should I just delete all of it and ask fresh, "how do I xyz"?

Hikin' Mike · May 22, 2014

I see this with the code I posted:

ChancyRat · May 22, 2014

Hikin' Mike wrote: »

I see this with the code I posted:

Did you put it in a particular place in the lineup of the code?
This is on the main theme CSS, correct?

Hikin' Mike · May 22, 2014

Not exactly. I use the 'Firebug' tool to insert it in the "Live Edit" mode...which it works 99% of the time.

Hikin' Mike · May 22, 2014

You might trying replacing '.sm-user-ui .sm-tile-info {}' to this:

.sm-page-layout-region .sm-page-layout-region-center .sm-tile-info {}

ChancyRat · May 22, 2014

Hikin' Mike wrote: »
You might trying replacing '.sm-user-ui .sm-tile-info {}' to this:
.sm-page-layout-region .sm-page-layout-region-center .sm-tile-info {}

That line of code is already in my CSS, as:

/* Change Font Size/Color of Caption in Gallery */
.sm-page-layout-region .sm-page-layout-region-center .sm-tile-info {
font-size: 20px;

When I added this to the above:

background-color: rgba(136, 196, 253, .9) !important;
padding: 2px 10px 2px 10px !important;

the result was to add the color properly to the gallery title thumbnail images, but also to all captions for every photo in a gallery (consistent with the comment).

I need the code that isolates the gallery and folder thumbnail images... I'm still

about the fact that you got results in firebug but I don't in the CSS directly.

ChancyRat · June 24, 2014

I'm still struggling over little things but this one seems big, and I probably have a bunch of galleries to fix for the same problem.

Why, when I click play on a video, does the video image jump out of the box and off the right margin?

This is the gallery: http://www.joinrats.com/RatsAreHystericallyFunny/Hysterical/
and attached is what happens when I click play.

Allen · June 24, 2014

This CSS rule seems to be causing it to jump.

.sm-page-node-XqR8B .sm-video-center{box-shadow:0 0 1px 0 #4c4d4f;background:#fdf7dc;margin:5px 5px 5px 50px;padding:20px 80px 15px 100px}

ChancyRat · June 25, 2014

Allen wrote: »

This CSS rule seems to be causing it to jump.

.sm-page-node-XqR8B .sm-video-center{box-shadow:0 0 1px 0 #4c4d4f;background:#fdf7dc;margin:5px 5px 5px 50px;padding:20px 80px 15px 100px}

Without that code - which you gave me, btw

- the components inside the background color, don't sit right. Are outside the background area, etc.

If I'm able to apply padding and margins to fit the pieces, why can't I - or how can I - set the position of the video play?

Some little things to tighten up

Comments