Narrowing the logged-in header (part 2 of 2 -- code)

Jtring · December 3, 2020

Later in this thread, there's an update to this code.

/* Narrow Header CSS
/* James Ringland, 1 December 2020.

The following narrows the logged-in header on the regular Photo Site display,
but not in the Customizer or Organizer.  User CSS never reaches the Organizer
and the code has been written to not apply to the Customizer.  

To make the terminology clear, the logged-in header, as discussed here, has 3 parts:
1) the header line with the SmugMug logo at the left and the account button at the right; 
2) the section bar, which has different entries for pages, folder, and galleries, and 
3) the status line, which flags unlisted and password-protected items. 

The strategy is threefold: narrow the header line and section bar, simplify their contents
to fit and present a unified appearance, and move the contents of the status line up 
into open middle space of the header line if there is room. 

/* -----------------------------------------*/
/* NARROW THE HEADER LINE AND SECTION BAR   */
/* -----------------------------------------*/

/* The net result here is that both are 36px high, but the header line has a little
extra 6px space above to separate it some from whatever browser controls may be up top.
So what was 120px high is now 72px.*/
.sm-user-owner:not(.sm-page-edit) .sm-page-header {
    height: 36px;
    padding-top: 6px;
}
.sm-user-ui .sm-page-header-section-bar {
    padding-top:0;
    padding-bottom:0;
}  

/* Remove bottom line on header and section bar when 
logged in. It's too busy with the narrow lines. */
.sm-user-ui .sm-user-owner:not(.sm-page-edit) .sm-page-header,
.sm-user-ui .sm-page-header-section-bar {
    border-bottom-style:none;
}
/* --------------------------------------------------------------------------------- */
/* ADJUST THE VARIOUS MENU ITEMS AND BUTTONS TO FIT AND HAVE A UNIFIED, SIMPLE STYLE */
/* --------------------------------------------------------------------------------- */

/* The SmugMug header design mixes menus and buttons.  These are different 
display types and look different.  The code below makes all look much more 
alike.  Where needed, this section also includes code to fit items 
into the reduced header. For the last, no text or icons change, but background area,
padding, or margins may.*/

/* Main nav menu ("Photos  Organizer Photo Site"). Adjust vertical spacing.*/
 .sm-user-owner:not(.sm-page-edit) .sm-header-main-nav .sm-component-menu-item-link {
    padding-top:8px;
    padding-bottom:8px;
}
/* "What's New", search, help, account, and all buttons at right on the section bar.
Adjust styling that matches the menus: not all caps, same font size, weight, and 
kerning, no border, no background.  */
.sm-user-ui .sm-page-header-section-bar .sm-button,
.sm-user-ui .sm-user-owner:not(.sm-page-edit) .sm-page-header-nav-right .sm-button,
 .sm-user-ui .sm-user-owner:not(.sm-page-edit) .sm-page-header .sm-page-header-account-avatar-wrapper {
    text-transform: none;
    font-size:14px;
    font-weight:400;
    letter-spacing:normal;
    border-style:none;
    background-color: transparent;
}
/*  "What's New" and all buttons at right on the section bar (not the search and help buttons).
Tighten up the horizontal spacing.*/ 
.sm-user-ui .sm-user-owner:not(.sm-page-edit) .sm-page-header .sm-button-size-small:not(.sm-button-square),
.sm-user-ui .sm-page-header-section-bar .sm-button-size-small {
    min-width: initial;
    padding: 0 18px;
    margin:0;
}
/* Overflow button (The collapsed "Photo List" entry on narrow screens).  
Size to fit the narrower lines.  The padding and margin changes here
make no difference with original SmugMug approach, but support alternate color 
approaches that apply a background color change when hovering over an item. */
.sm-user-ui .sm-user-owner:not(.sm-page-edit) .sm-header-main-nav-overflow-menu-button {
    height:36px;
    padding-left:12px;  /* was 24 */
    margin-left:12px;   /* was 0  */
}
/* What's new button.  Move the counter down a little for the narrow header bar.*/
.sm-user-ui .sm-user-owner:not(.sm-page-edit) .sm-page-header-navitem-headway .sm-badge-skin-info {
    top:3px;
}
/* Account button. Adjust height to fit narrower lines.  */
.sm-user-ui .sm-user-owner:not(.sm-page-edit) .sm-page-header-navitem-account > .sm-page-header-navitem-account-button,
.sm-user-ui .sm-user-owner:not(.sm-page-edit) .sm-page-header-navitem-account[data-always-visible] {
     height:36px;
 }
/* Account button. Swap margin and padding on account button. As with the
overflow button, the padding and margin changes here make no difference
with original SmugMug approach, but support alternate color approaches 
that apply a background color change when hovering over an item.*/ 
.sm-user-ui .sm-user-owner:not(.sm-page-edit) .sm-page-header-navitem-account .sm-page-header-navitem-account-button {
    margin: 0 24px 0 0;   /* was 0 */
    padding: 0;           /* was 0 24px 0 0 */
}
/* Upload button. This is the only button on the header (excluding the
drop down menus) with both an icon and caption text.  It's the only one 
with a colored background.  It's all too much on the reduced-height header.  
This and the following entries calm things down. First, remove the green
background under normal circumstances but restore it on hover.  Note the 
green here is a lightened version of the basic SmugMug Green (which is #6eb800).
This last will be superseded by code in the color section, but is here for 
when there are no other color adjustments.  */
.sm-user-ui .sm-user-owner:not(.sm-page-edit) .sm-page-header  .sm-button.sm-button-skin-accent {
    background-color:transparent;
}
.sm-user-ui .sm-user-owner:not(.sm-page-edit) .sm-page-header  .sm-button.sm-button-skin-accent:hover{
    background-color: #81d600;
}
 /* Upload button.  Second, remove the text. */
.sm-user-ui .sm-user-owner:not(.sm-page-edit) .sm-page-header  .sm-button.sm-button-skin-accent > .sm-button-label {
    display:none;
}
/* Upload button.  Third, move the main nav menu (left side links) 
in the header a little closer to the Upload button. With no text in
the Upload button, this closer spacing seems acceptable.*/
.sm-user-owner:not(.sm-page-edit) .sm-nui  .sm-header-main-nav[role="menubar"] {
    margin-left: 0px;
}

/* -------------------------------------------------------- */  
/* MOVE THE STATUS BAR UP INTO THE HEADER IF THERE IS SPACE */
/* -------------------------------------------------------- */

/* If there's available open space, move this on top of the center of the header.  
The screen has be moderately wide to have the necessary space, but a laptop having a
1366 x 768 screen giving SmugMug its full width will do.  When the status bar is active
and there's space to move it, this step saves another 30px of vertical space. */
 @media screen and (min-width:1320px) {
    .sm-user-ui .sm-user-owner:not(.sm-page-edit) .sm-nui.sm-node-status {
        background-color: transparent;
        margin-top: -69px;
        margin-bottom: 39px;
    }
}

Allen · December 3, 2020

The most crazy thing is the "Photo Site". Hey, it's me logged in. I do NOT need a link to MY homepage.

I do NOT need "Organize" and Organize Gallery". 99.99% of the time it's the page your on that needs organizing.
It's surely easy to scroll to whatever you want to organized if it's not this page.

Just noticed clicking "Selling Tools" takes you away from the page you're on.
This should open another window or tab so you don't lose where you came from.

Allen · December 4, 2020

There is also an upload button at the top. But it shows on page and folder pages. Just where does a photo go on a page or folder page?
This button should only appear on a gallery page that can accept photos.

Shinrya · December 4, 2020

Smugmug really needs to re-design the whole thing. Either slim down the bezels on the two header bars, reduce the font sizes, button sizes etc. Or get rid of it completely, just have one top bar (a thinner one if possible) with a hamburger style button on the main header that when clicked shows the extra menu items. Something like Flickr's menu bar would be ideal I think.

AceCo55 · December 4, 2020

@Shinrya said:
Smugmug really needs to re-design the whole thing. Either slim down the bezels on the two header bars, reduce the font sizes, button sizes etc. Or get rid of it completely, just have one top bar (a thinner one if possible) with a hamburger style button on the main header that when clicked shows the extra menu items. Something like Flickr's menu bar would be ideal I think.

+1 to this

Jtring · December 18, 2020

There's not been a lot of interest in using this, but here's an update should someone find this thread in the future. This moves the status bar into the section bar, not the header. More space there. It also fixes a bug that shows on pages with slideshows. (BTW, I agree with Shinrya that SmugMug should re-work the header, but that may or may not happen anytime soon.)

In any case, first, a screen shot of the header. I'm a Power user, so there's no "Selling Tools" entry.

Second, the CSS that produces this. Insert in the theme CSS or put in a CSS block at the Entire Site level.

/* Narrow Header CSS - update
/* James Ringland, 14 December 2020.

The following narrows the logged-in header on the regular Photo Site display,
but not in the Customizer or Organizer.  User CSS never reaches the Organizer
and the code has been written to not apply to the Customizer.  

To make the terminology clear, the logged-in header, as discussed here, has 3 parts:
1) the header line with the SmugMug logo at the left and the account button at the right; 
2) the section bar, which has different entries for pages, folder, and galleries, and 
3) the status line, which flags unlisted and password-protected items. 

The strategy is threefold: narrow the header line and section bar, simplify their contents
to fit and present a unified appearance, and move the contents of the status line up 
into open middle space of the header line if there is room. 

/* -----------------------------------------*/
/* NARROW THE HEADER LINE AND SECTION BAR   */
/* -----------------------------------------*/

/* The net result here is that both are 36px high, but the header line has a little
extra 6px space above to separate it some from whatever browser controls may be up top.
So what was 120px high is now 72px.*/
.sm-user-owner:not(.sm-page-edit) .sm-page-header {
    height: 36px;
    padding-top: 6px;
}
.sm-user-ui .sm-page-header-section-bar {
    padding-top:0;
    padding-bottom:0;
}  

/* Remove bottom line on header and section bar when 
logged in. It's too busy with the narrow lines. */
.sm-user-ui .sm-user-owner:not(.sm-page-edit) .sm-page-header,
.sm-user-ui .sm-page-header-section-bar {
    border-bottom-style:none;
}
/* --------------------------------------------------------------------------------- */
/* ADJUST THE VARIOUS MENU ITEMS AND BUTTONS TO FIT AND HAVE A UNIFIED, SIMPLE STYLE */
/* --------------------------------------------------------------------------------- */

/* The SmugMug header design mixes menus and buttons.  These are different 
display types and look different.  The code below makes all look much more 
alike.  Where needed, this section also includes code to fit items 
into the reduced header. For the last, no text or icons change, but background area,
padding, or margins may.*/

/* Main nav menu ("Photos  Organizer Photo Site"). Adjust vertical spacing.*/
 .sm-user-owner:not(.sm-page-edit) .sm-header-main-nav .sm-component-menu-item-link {
    padding-top:8px;
    padding-bottom:8px;
}
/* "What's New", search, help, account, and all buttons at right on the section bar.
Adjust styling that matches the menus: not all caps, same font size, weight, and 
kerning, no border, no background.  */
.sm-user-ui .sm-page-header-section-bar .sm-button,
.sm-user-ui .sm-user-owner:not(.sm-page-edit) .sm-page-header-nav-right .sm-button,
 .sm-user-ui .sm-user-owner:not(.sm-page-edit) .sm-page-header .sm-page-header-account-avatar-wrapper {
    text-transform: none;
    font-size:14px;
    font-weight:400;
    letter-spacing:normal;
    border-style:none;
    background-color: transparent;
}
/*  "What's New" and all buttons at right on the section bar (not the search and help buttons).
Tighten up the horizontal spacing.*/ 
.sm-user-ui .sm-user-owner:not(.sm-page-edit) .sm-page-header .sm-button-size-small:not(.sm-button-square),
.sm-user-ui .sm-page-header-section-bar .sm-button-size-small {
    min-width: initial;
    padding: 0 18px;
    margin:0;
}
/* Overflow button (The collapsed "Photo List" entry on narrow screens).  
Size to fit the narrower lines.  The padding and margin changes here
make no difference with original SmugMug approach, but support alternate color 
approaches that apply a background color change when hovering over an item. */
.sm-user-ui .sm-user-owner:not(.sm-page-edit) .sm-header-main-nav-overflow-menu-button {
    height:36px;
    padding-left:12px;  /* was 24 */
    margin-left:12px;   /* was 0  */
}
/* What's new button.  Move the counter down a little for the narrow header bar.*/
.sm-user-ui .sm-user-owner:not(.sm-page-edit) .sm-page-header-navitem-headway .sm-badge-skin-info {
    top:3px;
}
/* Account button. Adjust height to fit narrower lines.  */
.sm-user-ui .sm-user-owner:not(.sm-page-edit) .sm-page-header-navitem-account > .sm-page-header-navitem-account-button,
.sm-user-ui .sm-user-owner:not(.sm-page-edit) .sm-page-header-navitem-account[data-always-visible] {
     height:36px;
 }
/* Account button. Swap margin and padding on account button. As with the
overflow button, the padding and margin changes here make no difference
with original SmugMug approach, but support alternate color approaches 
that apply a background color change when hovering over an item.*/ 
.sm-user-ui .sm-user-owner:not(.sm-page-edit) .sm-page-header-navitem-account .sm-page-header-navitem-account-button {
    margin: 0 24px 0 0;   /* was 0 */
    padding: 0;           /* was 0 24px 0 0 */
}
/* Upload button. This is the only button on the header (excluding the
drop down menus) with both an icon and caption text.  It's the only one 
with a colored background.  It's all too much on the reduced-height header.  
This and the following entries calm things down. First, remove the green
background under normal circumstances but restore it on hover.  Note the 
green here is a lightened version of the basic SmugMug Green (which is #6eb800).
This last will be superseded by code in the color section, but is here for 
when there are no other color adjustments.  */
.sm-user-ui .sm-user-owner:not(.sm-page-edit) .sm-page-header  .sm-button.sm-button-skin-accent {
    background-color:transparent;
}
.sm-user-ui .sm-user-owner:not(.sm-page-edit) .sm-page-header  .sm-button.sm-button-skin-accent:hover{
    background-color: #81d600;
}
 /* Upload button.  Second, remove the text. */
.sm-user-ui .sm-user-owner:not(.sm-page-edit) .sm-page-header  .sm-button.sm-button-skin-accent > .sm-button-label {
    display:none;
}
/* Upload button.  Third, move the main nav menu (left side links) 
in the header a little closer to the Upload button. With no text in
the Upload button, this closer spacing seems acceptable.*/
.sm-user-owner:not(.sm-page-edit) .sm-nui  .sm-header-main-nav[role="menubar"] {
    margin-left: 0px;
}

/* ------------------------------------------------------------- */ 
/* MOVE THE STATUS BAR UP INTO THE SECTION BAR IF THERE IS SPACE */
/* ------------------------------------------------------------- */

/* If there's available open space, move this on top of the section bar.
At one time, this was moved to to the top of the header line.  There
can be more space in the section bar and it makes better contextual sense
to put it there.  This requires a moderately wide screen but works 
with a 1366 x 768 laptop if running SmugMug full width.  This can
save 30px of vertical space. Adjusted 2020-12-14. */
 @media screen and (min-width:1340px) {
    .sm-user-ui .sm-user-owner:not(.sm-page-edit) .sm-nui.sm-node-status {
        background-color: transparent;
        margin-top: -33px;  /* -69 would move this to the header line   */
        margin-bottom: 3px; /*  33 would move this to the header line   */
        margin-left: 520px;  /* Centers and */  
        margin-right: 520px; /* avoids interference on slideshow pages  */
    }
}

Narrowing the logged-in header (part 2 of 2 -- code)

Comments