Desperate for the navbar fix, Aaron

ChancyRat

I just can't unveil as is. I know my site isn't a typical photographer's site, by a long shot, but I still don't want it to have poo-poo smeared on all the pages due to the horrible ugly navbar problem. It's horrifying, not only because of the size and color, but I have so many links that that volume "catches" anyone's mouse hover. Getting the size under control will solve that.

Previous threads:

http://www.dgrin.com/showthread.php?t=241269
http://www.dgrin.com/showthread.php?t=242927

I have a list of other things that are broken (for example the lightbox mode does not have the site background, even though I copied the code for that), that I can ask about one by one after I'm unveiled, but the navbar is such a deal-breaker. The navbar SHOULD look like the image. It's instead the grey default with super-wide-lines.

Here is the first half of my CSS, will send 2nd half next.
Aaron, any change please please you could tell me what to do?

bow:cry

@font-face {
font-family: 'Buda';
font-style: normal;
font-weight: 400;
src:
url(http://themes.googleusercontent.com/static/fonts/buda/v3/xpKVHc19vcKaqMGd7JtK-A.eot?#iefix) format('embedded-opentype'),
url(http://themes.googleusercontent.com/static/fonts/buda/v3/3N6IHhwL9GuAVU1WX0Z9CA.woff) format('woff'),
url(http://themes.googleusercontent.com/static/fonts/buda/v3/In5nPPB6p1Mco64syFRrYQ.ttf) format('truetype');
}
/* Add personal background image */
html.sm-user-ui {
background-attachment: scroll;
background-image: url(http://joinrats.smugmug.com/photos/i-rW3qXMp/0/XL/i-rW3qXMp-XL.png);
background-position: right top;
background-repeat: no-repeat;
background-size: 10%
}

.sm-tile-content > .sm-tile-info {
background-color: rgba(186, 230, 255, 0.78) !important;
}

/* Remove the grey triangle in the bottom left corner that opens full screen mode */
.sm-lightbox-ft-left {
display: none !important;
}

/* Make lightbox background same as site background image */
.sm-lightbox {
background: url('/photos/i-rTjHXzq/0/Th/i-rTjHXzq.png');
}
/* Add some space above and below each leftbar 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: -30px; !important;
}
.sm-gallery-description {
width: 100%;
font-size: 20px;
}

/*
* Instead of vertically centering portrait images within their tiles (a 50% shift downwards), only
* shift these by 25% in order to have a better chance of keeping people's heads in the frame.
*/
.sm-page-widget-galleries .sm-tiles-center-image img.sm-tile-limit-width.sm-tile-portrait,
.sm-page-widget-nodes .sm-tiles-center-image img.sm-tile-limit-width.sm-tile-portrait,
.sm-page-widget-pages .sm-tiles-center-image img.sm-tile-limit-width.sm-tile-portrait,
.sm-page-widget-folders .sm-tiles-center-image img.sm-tile-limit-width.sm-tile-portrait {
top: 25%;
-webkit-transform: translate(0,-25%);
-moz-transform: translate(0,-25%);
-ms-transform: translate(0,-25%);
-o-transform: translate(0,-25%);
-webkit-transform: translate(0,-25%);
transform: translate(0,-25%);
}
/* Don't fade out the left arrow, right arrow or close button of the Lightbox */
.sm-user-ui .sm-lightbox-basic.sm-lightbox-clean .yui3-widget-hd {
opacity: 0.5;
}
/* Make left and right lightbox navigation arrows clickable across the entire height of the image window */
.sm-user-ui .sm-lightbox-nav.sm-lightbox-nav-left,
.sm-user-ui .sm-lightbox-nav.sm-lightbox-nav-right {
top: 42px; /* Avoid lying on close button */
bottom: 40px; /* Don't cover caption area (for vertical centering) */
background-color:transparent !important;
}
.sm-user-ui .sm-lightbox-nav.sm-lightbox-nav-left .sm-button,
.sm-user-ui .sm-lightbox-nav.sm-lightbox-nav-right .sm-button {
height:100%;
width:48px;
}
/* Move the dark background from the vertically stretched parent down to this child div: */
.sm-user-ui .sm-lightbox-nav.sm-lightbox-nav-left .sm-button-fonticon,
.sm-user-ui .sm-lightbox-nav.sm-lightbox-nav-right .sm-button-fonticon {
background-color: rgba(23,23,26, 0.6);
line-height: 65px;
width: 100%;
height: 84px;
text-align: center;
margin-left: 0;
}

/**
* Change the lightbox to always show the caption area below the photo, instead of hiding it on hover.
*
* By Sherlock Photography http://www.sherlockphotography.org/
*/
.sm-user-ui .sm-lightbox {
height: auto !important;
}

body.sm-page-gallery.sm-noscroll .sm-lightbox {
position: static;
}

.sm-user-ui .sm-lightbox .sm-lightbox-image {
position: relative !important;
display: block;
}

/* Don't fade out bottom controls */
.sm-user-ui .sm-lightbox-basic.sm-lightbox-clean .yui3-widget-ft,
.sm-user-ui .sm-lightbox-basic.sm-lightbox-has-title .yui3-widget-ft .sm-lightbox-caption {
opacity: 1;
}

/* Show caption all the time */
.sm-user-ui .sm-lightbox-basic .yui3-widget-ft {
position: static;
}
.sm-user-ui .sm-lightbox-basic.sm-lightbox-has-caption .yui3-widget-ft.sm-lightbox-hover .sm-lightbox-ft-center {
padding-bottom: 4px;
}
.sm-user-ui .sm-lightbox-basic.sm-lightbox-has-caption .yui3-widget-ft .sm-lightbox-ft-center {
height: auto !important;
}

/* Don't display the drop-down arrow on the caption */
.sm-user-ui .sm-lightbox-basic.sm-lightbox-has-caption .sm-lightbox-info-arrow {
display: none;
}

/* Overlay panels become fixed to the image area */
.sm-user-ui .sm-lightbox-content {
position: relative;
}
.sm-user-ui .sm-lightbox-content .yui3-widget-hd {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
/* Make sure that doesn't end up overlaying floating dialogs like the comment box */
.sm-lightbox + .yui3-widget-modal {
z-index:3 !important;
}

/* Previously floating navigation tools stay with the image, as long as it's not bigger than the screen with Image Sizes */
.sm-user-ui .sm-lightbox:not(.sm-lightbox-scrollable) .yui3-widget-hd .sm-lightbox-tools,
.sm-user-ui .sm-lightbox:not(.sm-lightbox-scrollable) .sm-lightbox-nav {
position: absolute;
}

/* Have footer controls escape from sm-lightbox-content so we don't alter its height (would push navigation buttons down the page) */
.sm-user-ui .sm-lightbox-content .yui3-widget-ft {
float: left;
width: 100%;
}
/* That causes a little space to appear at the bottom of the page as a side effect (same problem as "space appears under inline tags", same solution) */
.sm-user-ui .yui3-widget-ft {
font-size: 0;
}

/* Set font size of caption */
.sm-user-ui .sm-lightbox-content .yui3-widget-ft {
font-size: 14px;
}

.sm-user-ui .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-ft-center {
cursor: inherit;
}

/* Remove sliding animations for caption area */
.sm-user-ui .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-ft-center {
-moz-transition: none;
-webkit-transition: none;
transition: none;
}

/* Position bottom panel components */
.sm-user-ui .sm-lightbox .yui3-widget-ft .sm-lightbox-panel {
top: 0;
bottom: auto;
}

.sm-user-ui .sm-lightbox .sm-lightbox-panel {
background-color: transparent !important;
}

body.sm-page-gallery.sm-noscroll {
overflow-y: auto; /* Allow vertical scrollbar on page so we can see the caption */
overflow-x: auto; /* Allow horizontal scrollbar for Image Sizes menu if the image is wider than screen */
}
/* Remove scrollbars on just the image area if SM decides to add them */
.sm-user-ui .sm-lightbox-scrollable {
overflow:visible;
}
/* Stop SM from messing with the footer on scroll */
.sm-user-ui .sm-lightbox-scrollable .yui3-widget-ft {
bottom:auto;
left:0;
right:0;
}

/* Prevent page body from contributing to page scrollbar height */
body.sm-page-gallery.sm-noscroll #sm-page-content {
height:50px;
overflow:hidden;
}

/* Scale the main image to conform to the body area */
.sm-user-ui .sm-lightbox:not(.sm-lightbox-scrollable) .sm-lightbox-image {
width:auto !important;
height:auto !important;
max-width:100%;
max-height:100%;

top:50%;
-webkit-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-ms-transform:translateY(-50%);
-o-transform:translateY(-50%);
transform:translateY(-50%);
}

/* If main image uses right-click protection, it's a background-image, so we have to use a different approach: */
.sm-user-ui .sm-lightbox .sm-lightbox-image[src="/img/spacer.gif"] {
top:0;
-webkit-transform:none;
-moz-transform:none;
-ms-transform:none;
-o-transform:none;
transform:none;
}
/* If image is smaller than its container by using the image-sizes menu, or auto-sized, stretch it to fill the window */
.sm-user-ui .sm-lightbox:not(.sm-lightbox-scrollable) .sm-lightbox-image[src="/img/spacer.gif"] {
background-size: contain !important; /* Scale photo to fill the window */
background-position: center center;

width:100% !important;
height:100% !important;
}

/* Set the height of the body area so that the bottom bar will be visible without scrolling */
.sm-lightbox .sm-lightbox-content { height: 390px; }
@media only screen and (min-height: 400px) { .sm-lightbox .sm-lightbox-content { height: 400px; } }
@media only screen and (min-height: 410px) { .sm-lightbox .sm-lightbox-content { height: 410px; } }
@media only screen and (min-height: 420px) { .sm-lightbox .sm-lightbox-content { height: 420px; } }
@media only screen and (min-height: 430px) { .sm-lightbox .sm-lightbox-content { height: 430px; } }
@media only screen and (min-height: 440px) { .sm-lightbox .sm-lightbox-content { height: 440px; } }
@media only screen and (min-height: 450px) { .sm-lightbox .sm-lightbox-content { height: 450px; } }
@media only screen and (min-height: 460px) { .sm-lightbox .sm-lightbox-content { height: 460px; } }
@media only screen and (min-height: 470px) { .sm-lightbox .sm-lightbox-content { height: 470px; } }
@media only screen and (min-height: 480px) { .sm-lightbox .sm-lightbox-content { height: 480px; } }
@media only screen and (min-height: 490px) { .sm-lightbox .sm-lightbox-content { height: 490px; } }
@media only screen and (min-height: 500px) { .sm-lightbox .sm-lightbox-content { height: 500px; } }
@media only screen and (min-height: 510px) { .sm-lightbox .sm-lightbox-content { height: 510px; } }
@media only screen and (min-height: 520px) { .sm-lightbox .sm-lightbox-content { height: 520px; } }
@media only screen and (min-height: 530px) { .sm-lightbox .sm-lightbox-content { height: 530px; } }
@media only screen and (min-height: 540px) { .sm-lightbox .sm-lightbox-content { height: 540px; } }
@media only screen and (min-height: 550px) { .sm-lightbox .sm-lightbox-content { height: 550px; } }
@media only screen and (min-height: 560px) { .sm-lightbox .sm-lightbox-content { height: 560px; } }
@media only screen and (min-height: 570px) { .sm-lightbox .sm-lightbox-content { height: 570px; } }
@media only screen and (min-height: 580px) { .sm-lightbox .sm-lightbox-content { height: 580px; } }
@media only screen and (min-height: 590px) { .sm-lightbox .sm-lightbox-content { height: 590px; } }
@media only screen and (min-height: 600px) { .sm-lightbox .sm-lightbox-content { height: 600px; } }
@media only screen and (min-height: 610px) { .sm-lightbox .sm-lightbox-content { height: 610px; } }
@media only screen and (min-height: 620px) { .sm-lightbox .sm-lightbox-content { height: 620px; } }
@media only screen and (min-height: 630px) { .sm-lightbox .sm-lightbox-content { height: 630px; } }
@media only screen and (min-height: 640px) { .sm-lightbox .sm-lightbox-content { height: 640px; } }
@media only screen and (min-height: 650px) { .sm-lightbox .sm-lightbox-content { height: 650px; } }
@media only screen and (min-height: 660px) { .sm-lightbox .sm-lightbox-content { height: 660px; } }
@media only screen and (min-height: 670px) { .sm-lightbox .sm-lightbox-content { height: 670px; } }
@media only screen and (min-height: 680px) { .sm-lightbox .sm-lightbox-content { height: 680px; } }
@media only screen and (min-height: 690px) { .sm-lightbox .sm-lightbox-content { height: 690px; } }
@media only screen and (min-height: 700px) { .sm-lightbox .sm-lightbox-content { height: 700px; } }
@media only screen and (min-height: 710px) { .sm-lightbox .sm-lightbox-content { height: 710px; } }
@media only screen and (min-height: 720px) { .sm-lightbox .sm-lightbox-content { height: 720px; } }
@media only screen and (min-height: 730px) { .sm-lightbox .sm-lightbox-content { height: 730px; } }
@media only screen and (min-height: 740px) { .sm-lightbox .sm-lightbox-content { height: 740px; } }
@media only screen and (min-height: 750px) { .sm-lightbox .sm-lightbox-content { height: 750px; } }
@media only screen and (min-height: 760px) { .sm-lightbox .sm-lightbox-content { height: 760px; } }
@media only screen and (min-height: 770px) { .sm-lightbox .sm-lightbox-content { height: 770px; } }
@media only screen and (min-height: 780px) { .sm-lightbox .sm-lightbox-content { height: 780px; } }
@media only screen and (min-height: 790px) { .sm-lightbox .sm-lightbox-content { height: 790px; } }
@media only screen and (min-height: 800px) { .sm-lightbox .sm-lightbox-content { height: 800px; } }
@media only screen and (min-height: 810px) { .sm-lightbox .sm-lightbox-content { height: 810px; } }
@media only screen and (min-height: 820px) { .sm-lightbox .sm-lightbox-content { height: 820px; } }
@media only screen and (min-height: 830px) { .sm-lightbox .sm-lightbox-content { height: 830px; } }
@media only screen and (min-height: 840px) { .sm-lightbox .sm-lightbox-content { height: 840px; } }
@media only screen and (min-height: 850px) { .sm-lightbox .sm-lightbox-content { height: 850px; } }
@media only screen and (min-height: 860px) { .sm-lightbox .sm-lightbox-content { height: 860px; } }
@media only screen and (min-height: 870px) { .sm-lightbox .sm-lightbox-content { height: 870px; } }
@media only screen and (min-height: 880px) { .sm-lightbox .sm-lightbox-content { height: 880px; } }
@media only screen and (min-height: 890px) { .sm-lightbox .sm-lightbox-content { height: 890px; } }
@media only screen and (min-height: 900px) { .sm-lightbox .sm-lightbox-content { height: 900px; } }
@media only screen and (min-height: 910px) { .sm-lightbox .sm-lightbox-content { height: 910px; } }
@media only screen and (min-height: 920px) { .sm-lightbox .sm-lightbox-content { height: 920px; } }
@media only screen and (min-height: 930px) { .sm-lightbox .sm-lightbox-content { height: 930px; } }
@media only screen and (min-height: 940px) { .sm-lightbox .sm-lightbox-content { height: 940px; } }
@media only screen and (min-height: 950px) { .sm-lightbox .sm-lightbox-content { height: 950px; } }
@media only screen and (min-height: 960px) { .sm-lightbox .sm-lightbox-content { height: 960px; } }
@media only screen and (min-height: 970px) { .sm-lightbox .sm-lightbox-content { height: 970px; } }
@media only screen and (min-height: 980px) { .sm-lightbox .sm-lightbox-content { height: 980px; } }
@media only screen and (min-height: 990px) { .sm-lightbox .sm-lightbox-content { height: 990px; } }
@media only screen and (min-height: 1000px) { .sm-lightbox .sm-lightbox-content { height: 1000px; } }
@media only screen and (min-height: 1010px) { .sm-lightbox .sm-lightbox-content { height: 1010px; } }
@media only screen and (min-height: 1020px) { .sm-lightbox .sm-lightbox-content { height: 1020px; } }
@media only screen and (min-height: 1030px) { .sm-lightbox .sm-lightbox-content { height: 1030px; } }
@media only screen and (min-height: 1040px) { .sm-lightbox .sm-lightbox-content { height: 1040px; } }
@media only screen and (min-height: 1050px) { .sm-lightbox .sm-lightbox-content { height: 1050px; } }
@media only screen and (min-height: 1060px) { .sm-lightbox .sm-lightbox-content { height: 1060px; } }
@media only screen and (min-height: 1070px) { .sm-lightbox .sm-lightbox-content { height: 1070px; } }
@media only screen and (min-height: 1080px) { .sm-lightbox .sm-lightbox-content { height: 1080px; } }
@media only screen and (min-height: 1090px) { .sm-lightbox .sm-lightbox-content { height: 1090px; } }
@media only screen and (min-height: 1100px) { .sm-lightbox .sm-lightbox-content { height: 1100px; } }
@media only screen and (min-height: 1110px) { .sm-lightbox .sm-lightbox-content { height: 1110px; } }
@media only screen and (min-height: 1120px) { .sm-lightbox .sm-lightbox-content { height: 1120px; } }
@media only screen and (min-height: 1130px) { .sm-lightbox .sm-lightbox-content { height: 1130px; } }
@media only screen and (min-height: 1140px) { .sm-lightbox .sm-lightbox-content { height: 1140px; } }
@media only screen and (min-height: 1150px) { .sm-lightbox .sm-lightbox-content { height: 1150px; } }
@media only screen and (min-height: 1160px) { .sm-lightbox .sm-lightbox-content { height: 1160px; } }
@media only screen and (min-height: 1170px) { .sm-lightbox .sm-lightbox-content { height: 1170px; } }
@media only screen and (min-height: 1180px) { .sm-lightbox .sm-lightbox-content { height: 1180px; } }
@media only screen and (min-height: 1190px) { .sm-lightbox .sm-lightbox-content { height: 1190px; } }
@media only screen and (min-height: 1200px) { .sm-lightbox .sm-lightbox-content { height: 1200px; } }
@media only screen and (min-height: 1210px) { .sm-lightbox .sm-lightbox-content { height: 1210px; } }
@media only screen and (min-height: 1220px) { .sm-lightbox .sm-lightbox-content { height: 1220px; } }
@media only screen and (min-height: 1230px) { .sm-lightbox .sm-lightbox-content { height: 1230px; } }
@media only screen and (min-height: 1240px) { .sm-lightbox .sm-lightbox-content { height: 1240px; } }
@media only screen and (min-height: 1250px) { .sm-lightbox .sm-lightbox-content { height: 1250px; } }
@media only screen and (min-height: 1260px) { .sm-lightbox .sm-lightbox-content { height: 1260px; } }
@media only screen and (min-height: 1270px) { .sm-lightbox .sm-lightbox-content { height: 1270px; } }
@media only screen and (min-height: 1280px) { .sm-lightbox .sm-lightbox-content { height: 1280px; } }
@media only screen and (min-height: 1290px) { .sm-lightbox .sm-lightbox-content { height: 1290px; } }
@media only screen and (min-height: 1300px) { .sm-lightbox .sm-lightbox-content { height: 1300px; } }

.sm-user-ui .sm-lightbox .yui3-widget-bd {
height:100%;
}

ChancyRat

2nd half of the CSS:

/* If a size larger than the window is chosen with the Image Sizes menu, allow the content area to take its natural size */
.sm-user-ui .sm-lightbox.sm-lightbox-scrollable .sm-lightbox-content,
.sm-user-ui .sm-lightbox.sm-lightbox-scrollable .yui3-widget-bd {
height:auto;
}

/* This controls how much space is reserved on the screen for the bottom bar */
.sm-user-ui .sm-lightbox .sm-lightbox-content {
padding-bottom: 45px;
margin-bottom: -45px;

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* Since that causes the image to overlap the footer, make the footer sit on top: */
.sm-user-ui .sm-lightbox .yui3-widget-ft {
position: relative;
}

background-size: contain !important; /* Scale photo to fill the window */



/* Tweaks for lightbox title/caption appearance to increase the size of the title in my lightbox, use a darker text colour for captions, and add spacing between the paragraphs of the caption */
.sm-user-ui .sm-lightbox-title {
font-size: 20px;
}
.sm-user-ui .sm-lightbox-caption {
color: #FBF9D9;
}
.sm-user-ui .sm-lightbox-caption p {
margin-bottom: 0.2em;
}
/*Add a drop shadow to apply to all images, including the main image in SmugMug layout */
.sm-tiles-list .sm-tile .sm-tile-content {
box-shadow: 1px 1px 5px #000000;
}

/* Add a drop shadow to gallery and folder images */
.sm-tile .sm-tile-content:hover {
box-shadow: 0px 0px 2px 2px #7EA0C8
}
/* Remove the "Photo Sharing by SmugMug" Footer Text */
.sm-page-powered-by A:first-child
{
display: none;
}
/* Transition the links so they fade in and out */
a {
-webkit-transition:color 0.25s ease-in;
-moz-transition:color 0.25s ease-in;
transition:color 0.2s ease-in;
}
/* Set the buttons to transition to the hover color slowly */
.sm-user-ui .sm-button-skin-accent,
.sm-user-ui .sm-button,
.sm-user-ui .sm-page-widget-galleries .sm-tiles .sm-tile-content,
.sm-user-ui .sm-page-widget-folders .sm-tiles .sm-tile-content {
-webkit-transition: all 0.15s ease-in;
-moz-transition: all 0.15s ease-in;
transition: all 0.15 ease-in;
}
/* Transition the links under the photo */
.sm-button .sm-fonticon-small,
.sm-user-ui .sm-button-label,
.sm-fonticon {
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
transition: all 0.2 ease-in;
}
/* Change Font Size/Color of Caption in Gallery */
.sm-page-layout-region .sm-page-layout-region-center .sm-tile-info {
font-size: 20px;
}
/* Change Lightbox Captions*/
.sm-lightbox-basic .yui3-widget-ft .sm-lightbox-caption {

/* color: blue !important;*/
font-size: 20px;


.sm-breadcrumb
{
border-bottom: 1px solid #454548;
padding-bottom: 1px;
}
.sm-gallery-slideshow-button
{
display: none;
}

/* remove the buy button */
.sm-gallery-buymenu
{
display: none;
}

/* Hide the search form and social media links for mobile browsers */
@media only screen and (max-width: 640px) {
.sm-search-form, .sm-page-widget-social-links { display: none; }
}

/* Add 1 pixel border around the thumbnails and photos */
.sm-user-ui .sm-gallery-smugmug .sm-image {
border: 1px solid #4F4F4F;
padding: 0px;
}

/* Set the overflow of the images to be visible so the border actually displays properly */
.sm-user-ui .sm-gallery-smugmug .sm-tile-content {
position: relative;
display: block;
overflow: visible;

.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;
}

/* Change the navbar fonts */
.sm-page-widget-nav-toplink, .yui3-menu-item .yui3-menu-label,
.sm-page-widget-nav-toplink > a {
font-family: 'Buda' !important;
font-size: 14px !important;
color: #010102!important;
}

/* Change the way the sub-menu bar looks */
.sm-page-layout-region-top .yui3-menu-item .yui3-menu-label {
font-family: 'Buda' !important;
padding: 5px 15px 4px 9px !important;
font-size: 12px !important;
border: 1px solid rgba(242,208,152,0.9);
border-bottom: 1px solid #1F272A !important;
}
/* Add a line under the breadcrumb */
.sm-breadcrumb
{
border-bottom: 1px solid #EFFCFF;
padding-bottom: 4px;
}
/* Set the default navbar submenu background color */
.yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label {
background: #FBFADF;
}

/* Set the navbar submenu hover background color */
.yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label:hover {
background: #FDFCC3;
}

/* Change the border color */
.yui3-menu .yui3-menu-children, .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-sublinks-separator .yui3-menu .yui3-menu-label {
border-color: #00000;
}

/* when a user hovers over a link instead of it instantly going to the hover decoration, it will fade in and out to it */
a {
-webkit-transition:color 1.0s ease-in;
-moz-transition:color 1.0s ease-in;
transition:color 1.0s ease-in;
}
/* Make each sub-menu item fade in/out as the mouse moves over it */
.yui3-menu-label {
-webkit-transition:all 0.5s ease-in;
-moz-transition:all 0.5s ease-in;
transition:all 0.5s ease-in;
}
.sm-tooltip-content:after {
content: 'Sorry, these photos are Copyright JoinRats. Downloading is not permitted. Please contact me with questions.';
visibility: visible;
display: inline-block;
position: relative;
background-color: #8a8585;
width: 240px;
height: 75px;
}

.sm-user-ui .sm-tooltip, .sm-user-ui.sm-tooltip {
visibility: hidden;
}

leftquark

Chancy,
Ill take a stab when I'm home but while I'm still out and not able to help ... Can you post 2 more images ... One more zoomed out so I can see how it fits in with the rest of the page (you say it's a mess but in the cropped shot you posted it looks fine). Also, can you post a version where you draw arrows and have some text showing me what you want changed. I'm not sure what you have issues with right now

ChancyRat

If I can see through my tears of gratitude I will try to answer you.
Actually maybe it's only one image that you need. The one I posted above is correct - at some point the code worked.

This image is what I see now, all very very very bad.

By the way, I have a top nav on both the home page, and the entire site (so two different menu blocks) and need the code to apply to both. At the time of the original code, I was only applying it to Entire site.

ChancyRat

I believe the code you gave me that made the yellow version (first image in this thread), is still in the CSS. That's what's confusing.

leftquark

You still haven't mentioned how you want it to look? Like the first image you posted? What's wrong with how it is now, other than the background is grey and there's lots of room above/below the text?

leftquark

I stripped out all of the CSS that DOESN'T effect the navbar and was left with this. I don't see any overlapping code.

/* Add some space above and below each leftbar 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: -30px; !important;
}

/* Change the navbar fonts */
.sm-page-widget-nav-toplink, .yui3-menu-item .yui3-menu-label,
.sm-page-widget-nav-toplink > a {
font-family: 'Buda' !important;
font-size: 14px !important;
color: #010102!important;
}

/* Change the way the sub-menu bar looks */
.sm-page-layout-region-top .yui3-menu-item .yui3-menu-label {
font-family: 'Buda' !important;
padding: 5px 15px 4px 9px !important;
font-size: 12px !important;
border: 1px solid rgba(242,208,152,0.9);
border-bottom: 1px solid #1F272A !important;
}

/* Set the default navbar submenu background color */
.yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label {
background: #FBFADF;
}

/* Set the navbar submenu hover background color */
.yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label:hover {
background: #FDFCC3;
}

/* Change the border color */
.yui3-menu .yui3-menu-children, .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-sublinks-separator .yui3-menu .yui3-menu-label {
border-color: #00000;
}

/* Make each sub-menu item fade in/out as the mouse moves over it */
.yui3-menu-label {
-webkit-transition:all 0.5s ease-in;
-moz-transition:all 0.5s ease-in;
transition:all 0.5s ease-in;
}

ChancyRat

Yes, it should look like the image with yellow - narrow rows, the correct colors (no grey). The code had a hover color fade effect. I would settle for no grey and narrow rows.

I don't know what you did with the code you attached - it sounds like you stripped all CSS from the site except the right navbar? I don't want to loose a lot of that code that is good. What did you want me to do?

leftquark

You want me to fix the navbar so I'm looking at your navbar code. I don't care about the rest so I got rid of it. The only code I'm going to touch is the code I pasted above. Take your code and re-organize it so the block of code that I pasted above, is together, just as I pasted it. You can have the rest of your code below it. Basically, the easiest thing for me to do is to have you delete the code I pasted above, and then I'll give you a new set of navbar code.

You mentioned you thought you had code that superceeded itself ... so I needed to organize it so I could figure out if you have redundant code. By putting it all together I can see if you have things that overlap.

For what it's worth, the code I pasted above is all of your code that effects ANY navbar, not just your right navbar.

Also, you're now mentioning things you didn't mention before ... like that you have ANOTHER (3rd?) navbar that's on the right?! At this point I'm basically going to say that there's not much I can do unless I'm looking at your site. So your options are: unveil so we can see it, or temporarily change your password and email me your login so I can look at what you're seeing and get an idea of what's going on. Nobody will ever tell you to do this since this is the internet, but if you trust me, then feel free

ChancyRat

I can't give you the PW, Aaron. I will however trust you with my first born child.
I don't have a right navbar.
I have:
left nav on home page (code is great)
Top nav on home page
Top nav on entire site

The last 2 are the same, but because the homepage is separate, I had to re-create it.

I can reorganize the code you gave me in my CSS.

Will this be enough for you to try? Only the topnav bar is the issue, and that code will go in two places, for home page and entire site. The left nav on the homepage has already been tweaked and is good.

leftquark

On your homepage, press Control + U to bring up your source. Control + A to select all, then copy. Open up notepad (on Windows ... or TextEdit if you're on a Mac) and paste. Save the file as "homepage.html". Go back to your browser, and close the window with the source code. Close notepad

Then go to any page on your site. Press control + U to bring up your source, select all, copy, and paste it into notepad. Save it as "somepage.html". Close notepad, close the source code window.

Send me both files (you should still have my email). I need the HTML to fix it. You may have moved your top menubar out of an area that the code is trying to touch but I won't know unless I can see the code.

-Aaron

ChancyRat

Done.

leftquark

So the weird thing is, if I re-add the following code (which you mostly have already, I just added a couple lines), the top-navbar works perfectly. I don't know why it's not working. I'll have to go through your full set of code.

/* ==============================
   = TOP NAVBAR, SUB-MENU CODE  =
   ============================== */
/* Change the way the sub-menu bar looks */
.sm-page-layout-region-top .yui3-menu-item .yui3-menu-label {
  font-family: 'Buda' !important;
  padding: 5px 15px 4px 9px !important;
  font-size: 12px !important;
  border: 1px solid rgba(242,208,152,0.9);
  border-bottom: 1px solid #1F272A !important;
[COLOR="blue"]  background-color: #FBF2C9;[/COLOR]
}

[COLOR="Blue"]/* Set the background color of the sub-menu hover. 
   For some reason there was a 1px gap, so I moved the margin up a bit and it fixed it. */
.sm-page-layout-region-top .yui3-menu-item .yui3-menu-label:hover {
  background-color: #008000 !important;
  margin-top: -1px;
}[/COLOR]

New stuff marked in blue.

leftquark

Sent you an email with a new set of CSS to try. Delete your entire set of CSS before, add this in.

By any chance, do you have any CSS blocks on the homepage or on the entire site that are over-riding this? I'm gunna assume no because chrome didn't have any CSS for this section

leftquark

AHA! I found some code (see below) that is screwing it up. I don't know if you added it or if SmugMug added it. Does this look familiar? It's the culprit!

.yui3-menu-item>.yui3-menu-label {
[COLOR="Red"]padding: 13px 46px 12px 22px;[/COLOR]
border-width: 0 0 1px;
border-style: solid;
}

ChancyRat

YOU FIXED IT YOU FIXED IT


I have no idea what that code did or where I got it.

Is there a SCREAM OF HAPPINESS emoticon?
ARGGGHGHGHGHGHGH AHGGAHAGHAGHAGGAHGAHGA
DANCE DANCE DANCCEEEEEEE

thumb

ChancyRat

ok, um, little bitty problem.
As you probably saw on my homepage, I have about 40 menu blocks on the main body of the page.
They are supposed to be 20 px.
They have adopted the topnavbar tinier size.

ChancyRat

I'll have to go through your full set of code.

I want to say, Aaron, that when you said this, I felt a big GULP rise up. I do not understand the gravity of what this means you had to do, so I probably have not recognized just how much work you did. If that happened, please forgive my naïveté. I have a huge appreciation for what you've done here. Amazing.

ChancyRat

And here's the current version with your green replaced and border color changed. Woo hooo!
I'm just sitting here moving my mouse around and sighing deeply.

Because the menu blocks in the main body of the home page are now too small, the layout of them is very jumbled. Is there css to differentiate them from the top navbar on the header?

leftquark

ChancyRat wrote: »

And here's the current version with your green replaced and border color changed. Woo hooo!
I'm just sitting here moving my mouse around and sighing deeply.

Wahoo! Glad it worked!

ChancyRat wrote: »

Because the menu blocks in the main body of the home page are now too small, the layout of them is very jumbled. Is there css to differentiate them from the top navbar on the header?

I'm confused by what this means. Could you rephrase? Maybe some pictures?

You can add the following before any set of CSS to restrict it to the top or left menu:

/* Top Menu */
.sm-page-layout-region-top

/* Left Menu */
.sm-page-layout-region-left

Examples:

/* Change the way the TOP NAVBAR sub-menu bar looks */
[COLOR="Blue"].sm-page-layout-region-top[/COLOR] .yui3-menu-item .yui3-menu-label {
  font-family: 'Buda' !important;
  font-size: 12px !important;
}

/* Change the padding on the LEFT navbar */
[COLOR="blue"].sm-page-layout-region-left [/COLOR].sm-nav-item-sublevel {
  padding: 3px 0px 3px 20px; 
}

ChancyRat

Oh sorry I thought you could see the home page directly. I have a visitor sitemap constructed of menu blocks. When the font size is 20px, each gallery title is on it's own line in a vertical column. You can see they now wrap (blocks are set to horizontal because vertical screwed up the line spacing).

Regarding the code you sent above, I'm unclear where to put it. Could you pinpoint the sections below?

/* ================================
   = ALL NAVBARs, TOP-LEVEL CODE  =
   ================================ */
/* 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: -30px; !important;
}

/* Change the navbar fonts */
.sm-page-widget-nav-toplink, .yui3-menu-item .yui3-menu-label,
.sm-page-widget-nav-toplink > a {
  font-family: 'Buda' !important;
  font-size: 14px !important;
  color: #010102!important;
}

/* ==============================
   = ALL NAVBARs, SUB-MENU CODE  =
   ============================== */
/* Set the default navbar submenu background color */
.yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label {
  background-color: #FBFADF;
}

/* Set the navbar submenu hover background color */
.yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label:hover {
  background-color: #FDFCC3;
}

/* Change the border color */
.yui3-menu .yui3-menu-children, .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-sublinks-separator .yui3-menu .yui3-menu-label {
  border-color: #00000;
}

/* Make each sub-menu item fade in/out as the mouse moves over it */
.yui3-menu-label {
  -webkit-transition:all 0.5s ease-in;
  -moz-transition:all 0.5s ease-in;
  transition:all 0.5s ease-in;
}

/* ==============================
   = TOP NAVBAR, SUB-MENU CODE  =
   ============================== */
/* Change the way the sub-menu bar looks */
.sm-page-layout-region-top .yui3-menu-item .yui3-menu-label {
  font-family: 'Buda' !important;
  padding: 5px 15px 4px 9px !important;
  font-size: 12px !important;
  border: 1px solid rgba(242,208,152,0.9);
  border-bottom: 1px solid #1F272A !important;
  background-color: #FBF2C9 !important;
}

/* Set the background color of the sub-menu hover. 
   For some reason there was a 1px gap, so I moved the margin up a bit and it fixed it. */
.sm-page-layout-region-top .yui3-menu-item .yui3-menu-label:hover {
  background-color: #008000 !important;
  margin-top: -1px;
}


/* ================================
   = LEFT NAVBAR, TOP-LEVEL CODE  =
   ================================ */
/* 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; */
}

/* ==========================
   = LEFT NAVBAR, SUB-MENU CODE  =
   ========================== */
/* Add some space above and below each leftbar 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;
}

leftquark

Chancy,
Again I'm having a hard time figuring out what I screwed up. You like to type a lot but not really say what it is you need fixed other than "this part broke and I need it fixed." :cry

I think what you're trying to say is that you want the menu-items that are in the body (center) of the page to have a text-size of 20px, is that correct? It's probably easier to target those, rather than change some of the previous code. So to do that, add the following, wherever you think it works the best

/* ========================
   = CENTER NAVBAR, TOP-LEVEL CODE  =
   ========================= */
/* Make the top-level menu-items in the CENTER of the page have a larger font-size */
.sm-page-layout-region-center .sm-page-widget-nav-toplink a {
  font-size: 20px !important;
}

ChancyRat

Oh no, that is so the opposite of what I want to do.
Let me plug that code in and see what happens before I try to describe anything more.

ChancyRat

Perfect, despite my lack of explanation. If you look at the image in the earlier message that showed "messed" format, you see small type and wrapped lines of gallery titles.
Adding the code you just gave me, brought the body menu blocks back to 20 px, and, now the gallery titles are in one vertical column, which is how they were originally.

leftquark

So you're ready to unveil?!?!?!??!?!

ChancyRat

leftquark wrote: »

So you're ready to unveil?!?!?!??!?!

Well after I get my car towed to a shop because someone cut a rubber hose on the gas tank to steal gas, and I didn't figure it out until I tried filling the tank and spilled 6.14 gallons on the ground, and after I finish icing my forehead because I tripped and fell into the refrigerator, and then after I fix one more page that a friend pointed out I omitted entirely.

I know these are no excuse but they really happened. The ice on head is right now.

leftquark

ChancyRat wrote: »

Well after I get my car towed to a shop because someone cut a rubber hose on the gas tank to steal gas, and I didn't figure it out until I tried filling the tank and spilled 6.14 gallons on the ground, and after I finish icing my forehead because I tripped and fell into the refrigerator, and then after I fix one more page that a friend pointed out I omitted entirely.

I know these are no excuse but they really happened. The ice on head is right now.

Oy vey -- at least hte new year should hopefully start on the up and up!
Good luck with it all~

ChancyRat

In planning the switcheroo, I have the problem of having duplicate descriptions: the old SM, and the new blocks I've added.

Is there CSS I could put in an individual gallery to hide the SM default description?
That might be easier for me, then I can delete the old without frenzy.

leftquark

ChancyRat wrote: »

In planning the switcheroo, I have the problem of having duplicate descriptions: the old SM, and the new blocks I've added.

Is there CSS I could put in an individual gallery to hide the SM default description?
That might be easier for me, then I can delete the old without frenzy.

Are you talking about the gallery description under the breadcrumb?

You could use the code here and modify it to "display:none;" like so ....

/* Hide the Gallery Description */
.sm-gallery-description {
  display:none;
}

ChancyRat

With ice still on my head but feeling better, there are two more glitches in the body-based menu blocks:
- some of the blocks are only one link, where I set them as accent color. The others are standard black. Now all of them are black only. It appears the basic menu block is now 100% controlled by the CSS rather than by the block wrench settings? Can i bring back the wrench settings options?
- some of them bring up the drop-down sub-menu links. None of them should do that on the home page. (maybe in the future I would use such a block somewhere). How do I turn off the drop-down sub-menu?

ChancyRat

After I typed that last message I realize the blocks with problems are the same blocks. They are folder links, not gallery links (as such they were accent color), and I have "no show folder contents", but now they show anyway.