Site design information, including a CSS listing. Explore if you're curious.  Borrow if it helps.

About the Site Design (for other SmugMug site owners)

Design elements.  This site's layout is based on the SmugMug's Spartan template but with considerable customization. The sidebars have been separately constructed for individual webpages or webpage types to be context-sensitive.  The homepage, folder displays, and information pages use a modified version of the Spartan color theme. Galleries and the Enjoy page use two just-slightly-different dark background themes.  The heading font is Andika.  The body font is Roboto.  The keyword displays on the Tools & Notes page use SmugMug's classes for formatting but use custom HTML for content.   Panoramas, such as the three that appear at the end of this gallery, use SmugMug's Carousel widget, set up to show only that one image.

I've kept the SmugMug header in desktop view.   Here, the header provides access to the search function and fits in acceptably.  On the desktop Home page and the Enjoy slideshow pages, where the basic header would distract, I have custom modifications to limit its intrusiveness.  When logged in, I have narrowed the two-line header and have softened the colors. In mobile mode, where the header seems more generally intrusive, I've removed it when not logged-in.

I've kept the footer in most cases since it provides a user login link.  It's always present in mobile mode, excepting only cases where SmugMug code itself hides it.  In desktop mode, the footer shows on all folders and those pages and galleries where it's not troublesome.  I've hidden it on the Home page, the Enjoy pages, and some galleries that use the SmugMug style.  On the first, it either disappears or can distract.  On the second two, it can induce an otherwise unneeded scroll bar: a visual complexity I'd rather avoid.  SmugMug's policy is that the footer should not be removed.  Since the header is present in desktop mode, SmugMug branding is always present, as is a link to the SmugMug site for visitors.  I believe this meets the intent, if not the letter, of their policy.


Internal site database structure and web page display of that structure. The root level of the database contains only three folders, one of which is unlisted.  These folders and their web display are discussed below.  These notes reflect recent (Feb. 2020) database updates.     

(In what follows, the word "page" is restricted to the narrower SmugMug usage as a database node that can show text, links, and pictures from elsewhere, but does not contain its own database items.  The word "webpage" or the phrase "web display" are used more generically to describe the viewer display for a gallery, folder, or page.)   


Photo Library is the first folder at the root level of the database.  It contains all the listed photo galleries and several pages to be described below.  A full listing of the Photo Library contents can be seen on the Site Mgt page.   Putting all the pictures here, rather than at the root level of the database, makes the breadcrumbs lead back to Photo Library, whose web page serves as a table of contents.  (SmugMug's nominal table of contents page, the Browse page, lives outside the breadcrumb sequence.)  

The "Browse by Year" section of the Photo Library display reflects the internal organization of the database.  The display of these yearly folders uses "Items I Choose" folder/gallery/page blocks so I can interleave galleries and sub-folders to show chronological order, but the nesting is unchanged. 

The "Browse By Topic" section lists pages giving a cross-cut.  These pages also live in the Photo Library folder.  Content blocks on these pages link to galleries, mixed across years, associated with a particular topic.  These too make use of the "Items I Choose" option to pick the desired folders and galleries in the desired order.   In most cases the listings on different topic pages are mutually exclusive, although three galleries appear under both Yosemite Frontcountry and Sierra NorthIn a few cases, a topic page's listing points to a subsidiary page.  For example, the Farther Afield topic page has another page entry, Las Vegas, which, in turn, lists galleries showing visits to that Nevada city.  (Yes, Las Vegas is a fine hiking destination even if it's better known for other activities.)  These sub-pages have also been tucked into the Photo Library database folder although they do not show directly on that folder's web display. 

There's a "gotcha" in using this approach. It makes heavy use of Folders, Galleries, and Pages (FG&P) content blocks with the "Select From Items I Choose" option, and, unfortunately, SmugMug has a bug there. There is a tool for editing selections, but when applied, it reorders the selected items alphabetically, whether or not that's desired. So unless alphabetical works for you (it doesn't for me), there's no workable selection editing function. To add a new entry to such a content block, one has to delete the old selection and re-select all the items, including new one, in order and correctly. (No editing!) When adding a new gallery to the database, the approach here typically requires updating two such content blocks. To avoid errors, I typically write the two desired lists on paper first. If there were no mixture of folder and galleries at the third level, this bug would not be an issue: editing a Gallery content block, unlike a FG&P content block, with "Select From Items I Choose" does not force alphabetical order.

There's one more cross-cut: the Plant Families folder.  This too lives inside the Photo Library database folder.   It contains keyword-based smart galleries that collect pictures from the regular galleries (those in the year folders).   Plant Families is listed in the "By Topic" section of the Photo Library web display.  Note it is the only folder in that section.   The rest are pages.  


Infrastructure is the second folder at the root level of the database. It houses items that feed the main menu.  That folder contains the Featured Galleries and Enjoy pages as well as the Info folder which has the About Me, Tools and Notes, Site Design, and Site Mgt pages.  There are actually eight Enjoy pages, all located in the Enjoy Pages folder.  The basic Enjoy page linked from the sidebar menu has images from the last year while the other selections in the "Collection >" menus on those pages bring up others in Enjoy Pages These Enjoy pages area fed by smart galleries in the Enjoy Source Galleries folder.  The Infrastructure folder contains three additional galleries that carry out special roles.  Splash has the images that appear on the home page.  These repeat images in the Photo Library, except that these versions have been cropped to fit the common 16x9 aspect ratio and some have different settings for tone and/or sharpening.  Logo has the flower image that appear at the top left of every page.  Auxiliary Pictures has photos that have no home in a regular gallery and serve special functions.  These include (1) pictures I wish to include in Plant Families but not otherwise posted in Photo Library, (2) copies of pictures from the regular galleries needing a different caption for use in Plant Families or on the Info pages, (3) special crops for thumbnails, (4) extracts from videos for the Enjoy pages, and (5) the panorama pictures to be displayed using the carousel viewer. The first group is by far the largest. Most come from excursions not posted; a few are from early excursions where I included some plant pictures separately.  On the SmugMug Android/iOS app, where pages are not displayed, the Infrastructure folder shows only the folders and galleries discussed above.  The Info and Enjoy Pages folders appear empty.


Other is the third, unlisted, gallery at the root level.  It contains unlisted test pages, folders, and galleries, as well as some reference material.


The SmugMug Android/iOS app drove some of the database design. The choice of "By Year" for the actual database structure and use of pages for the most of the "By Topic" display is not critical for the operation of the website.  It could have been easily reversed with very little visible difference to a website user.  (And it was before February 2020.)  The breadcrumbs change, but since I've put both year and topic links in the descriptive text near the top of the web pages for various galleries, folders, and pages, navigation works either way.  However, the app can display only the actual database structure.   It cannot show pages.   It cannot produce a cross-cutting display.  "By Date" was chosen as the structure that shows there.   It was judged to be a bit simpler to understand and work with when the supporting text of the web display was not available.  It makes it easier to find what's new.  Putting everything else in Infrastructure or Other, rather than having more individual items at the root level, serves to reduce the clutter in the app. 


Third party tools.  I manage site content via the SmugMug plugin for Adobe Lightroom, but I sometimes find it useful to edit captions on SmugMug since the browser interface provides spell checking.  The Smug Syncback for Lightroom plugin allows me to pull those updated captions back to Lightroom.  I use Nicholas Sherlock's SmugMug Extension for Chrome to fetch permalinks for galleries, which I use in all the in text blocks.  That extension also provides a partial backup function.  


CSS mods. There are many. Most are local in scope, adjusting font sizes, margins and spacing, etc. A few go farther, addressing operational behavior or removing unwanted elements. In writing all of this, my goal has been to make a design created with the standard SmugMug tools work and look better, not to create something fundamentally different. I've tried to maintain a responsive design to various screen sizes. SmugMug's out-of-the-box designs are quite good for this, but when I've changed things, I've sometimes had to create alternate versions for various screen sizes. I generally use the Firefox Web Developer tools to inspect the SmugMug HTML and CSS to find the selectors (classes and the like) to work with. Note user CSS does not apply to the Android/iOS app.

The listings below show code I've applied to the entire site, to the default (modified Spartan), Gallery, and Enjoy themes, and to several specific pages. Most of the CSS is at the site level: all "structural" adjustments go here. The theme CSS entries only adjust font color and other attributes whose choice depends on the colors, opacities, etc. set in the theme. The page-level adjustments address issues specific to that page (or to one block on that page).

In constructing these CSS mods, I've drawn on the discussions in the Digital Grin Support forums and Nicholas Sherlock's site. Many thanks. The color-highlighting tags in the listings below were generated using Notepad++, with colors and fonts of my own choosing.

Other SmugMug users: feel free to use this code, either directly or for inspiration. I strongly encourage anyone using custom CSS to learn enough to write their own. A good place to start is McFarland's book on CSS in the O'Reilly Missing Manual Series. There are many good on-line resources as well. I find I regularly access pages at https://www.w3schools.com/ and this discussion of flexbox.


CSS Code Attached to the Entire Site - Galleries (not including the Lightbox)

/* Gallery CSS (not including the lightbox CSS) /* Latest update 17 February 2021 -- Adjust line spacing on gallery descriptions /*-------------------------------*/ /* GALLERY COVER ADJUSTMENTS */ /*-------------------------------*/ /*The cover is the new gallery picture/title/description combination up top. I've many small adjustments. Spacing assumes the breadcrumb block has a bottom margin of of 6. Added 2016-06. Lots of updating 2020-01 and -02 (mostly spacing issues) after SM addition of the share button in the cover. /* GALLERY COVER -- IMAGE RENDERING Since I've gone to loading lower resolution images, the cover image can require up-scaling, which can produce a very soft image. The image-rendering property provides sort of a fix for this, at the cost of some artifacts. Different browsers use different properties and values. Let's try it for cover images and see if I can live with the downsides more comfortably than with the soft images. 2020-05-28.*/ .sm-gallery-cover-image { image-rendering: crisp-edges; } .sm-browser-chrome .sm-gallery-cover-image, .sm-browser-unknown .sm-gallery-cover-image { /* For Webkit Edge, added 2020-09-26 */ image-rendering: pixelated; } .sm-browser-ie .sm-gallery-cover-image { ms-interpolation-mode:nearest-neighbor; } /* GALLERY COVER -- INFORMATION BOX, BOTH WITH AND WITHOUT IMAGE IN USE The information box is the container for the title and description.) The first block adjusts spacing because of my hiding the "Download All" and "Buy Photos" buttons. The second asks for a larger font in all cases. Last update 2020-07-09. */ @Media (min-width:737px) { .sm-user-ui .sm-gallery-cover[data-show-slideshow="true"] .sm-gallery-cover-info, .sm-user-ui .sm-gallery-cover[data-show-download="true"][data-show-slideshow="true"] .sm-gallery-cover-info { padding-right:110px; } } .sm-user-ui .sm-gallery-cover .sm-gallery-cover-description { font-size: 16px; } /* GALLERY COVER -- ADJUSTMENTS WHEN IMAGE NOT USED This makes the gallery header design look a little more like page and folder headers and a little more like the gallery alignment before the 2016-06 SmugMug changes ... but still moving in the direction of design using a cover picture. The font size is reduced for narrow screens and up to four lines are allowed for the title. This should prevent the title from being clipped. The special handling of SmugMug style galleries is there to reduce the occurrence of vertical scrollbars in Firefox when not operating in full screen mode. (There will be no scrollbars with single line descriptions, captions, and keyword lists.) Last update 2021-02-17.*/ @Media (min-width:737px) { .sm-user-ui .sm-gallery-cover[data-show-image="false"] { margin-bottom: 46px; /*change from 30 on 2017-01-12*/ } } .sm-user-ui .sm-gallery-cover[data-show-image="false"] .sm-gallery-cover-title { font-size: 32px; margin-top: 24px; padding-bottom: 6px; line-height: 1.3em; } .sm-user-ui .sm-gallery-cover[data-show-image="false"][data-size="small"] .sm-gallery-cover-title { -webkit-line-clamp:4; max-height:-webkit-calc(1.231em * 4); max-height:calc(1.231em * 4); font-size:24px } .sm-user-ui .sm-gallery-smugmug .sm-gallery-cover[data-show-image="false"] .sm-gallery-cover-title { margin-top: 6px; } .sm-user-ui .sm-gallery-cover[data-show-image="false"] .sm-gallery-cover-description { line-height: 1.4em; /*change from 1.3em 2020-02-17*/ padding-top: 12px; } /* GALLERY COVER -- ADJUSTMENTS WHEN AN IMAGE IS USED These make some of the details look more consistent with pages, folders, and galleries without the cover photo. The first block locates it with what seem appropriate margins and an appropriate size. The second block provides a larger and darker "scrim" background behind the text from improved readability with brighter or high-contrast images. SmugMug offers a small scrim with less contrast. The third and fourth blocks manage the title text. These update the font the on cover description to match the situation with no cover, except for mobile "small" covers, where it is reduced. In the latter case, up to 3 lines are allowed for the title, which should guarantee it fits. The fifth block just makes this case match the no-cover-image case better. The last block centers the "Read More" text with the buttons. Last update 2020-07-09*/ @Media (min-width:737px) { .sm-user-ui .sm-gallery-cover[data-show-image="true"] { margin-top: 24px; /*change from 12 on 2017-09-102*/ margin-bottom: 64px; /*change from 48 on 2017-01-12*/ max-height: 425px; } } .sm-user-ui .sm-gallery-cover[data-show-image="true"] .sm-gallery-cover-info { background: no-repeat linear-gradient(to top,rgba(0,0,0,.85),rgba(0,0,0,0) 100%); padding-top: 60px; padding-bottom: 10px; } .sm-user-ui .sm-gallery-cover[data-show-image="true"] .sm-gallery-cover-title { font-size: 36px; padding-bottom: 6px; } .sm-user-ui .sm-gallery-cover[data-show-image="true"][data-size="small"] .sm-gallery-cover-title { font-size: 24px; -webkit-line-clamp:3; max-height: -webkit-calc(1.231em * 3); max-height: calc(1.231em * 3) } .sm-user-ui .sm-gallery-cover[data-show-image="true"] .sm-gallery-cover-description { line-height: 1.3em; max-height: calc(1.3em * 3); } .sm-user-ui .sm-gallery-cover-readmore, .sm-user-ui .sm-gallery-cover-info[data-show-readmore="true"][data-show-readmore-newline="false"] .sm-gallery-cover-readmore { line-height: 1.3em; margin-top: calc(1.3em * 2.2); } /* GALLERY COVER -- ADJUSTMENTS TO BUTTONS USED WITH THE COVER (SHARE, SLIDESHOW, ETC.) This group makes adjustments to the buttons that show with the cover (the header buttons). The first block turns off the buy-button that otherwise would show when I'm logged in. The second block turns off the download-all button. I'm OK with individual image downloads but think a one-stop gallery-level download is too much. These two capabilities are currently linked, so the only way to turn off the whole-gallery download while allowing single-image downloads is to eliminate this button. Latest update 2020-07-09 following SmugMug update.*/ .sm-gallery-cover-container .sm-gallery-cover-buttons .sm-gallery-cover-buy-button { display:none; } .sm-gallery-cover-container .sm-gallery-cover-buttons .sm-button.sm-gallery-cover-download-button { display: none; } /* Special handling for OSC travel galleries. Download all button retained. The title and description then need a little more space. Updated 2020-07-09*/ .sm-page-parentnode-nr7gn2 .sm-gallery-cover-container .sm-gallery-cover-buttons .sm-gallery-cover-download-button, .sm-page-parentnode-hbWKJZ .sm-gallery-cover-container .sm-gallery-cover-buttons .sm-gallery-cover-download-button { display: inline-flex; } @Media (min-width:737px) { .sm-user-ui .sm-page-parentnode-nr7gn2 .sm-gallery-cover[data-show-slideshow="true"] .sm-gallery-cover-info, .sm-user-ui .sm-page-parentnode-hbWKJZ .sm-gallery-cover[data-show-slideshow="true"] .sm-gallery-cover-info, .sm-user-ui .sm-page-parentnode-nr7gn2 .sm-user-ui .sm-gallery-cover[data-show-download="true"][data-show-slideshow="true"] .sm-gallery-cover-info .sm-user-ui .sm-page-parentnode-hbWKJZ .sm-user-ui .sm-gallery-cover[data-show-download="true"][data-show-slideshow="true"] .sm-gallery-cover-info { padding-right:160px; } } /* GALLERY - COVER -- SMALLER TEXT AND EXTRA SPACE FOR TITLES IN THE "READ MORE" When a cover image is used, the title and description may be severely clipped on narrow screens, but the "Read More" displays the full description. SmugMug still clips the title here at 2 lines, which may not be enough. There were circumstances where no display anywhere could show the full title. this allows up to 4 lines and uses a smaller font in the Read More popup, generally guaranteeing a full title display. The smaller font just looks more balanced to me in this context too. 2020-01-24*/ .sm-gallery-cover-info-modal .sm-gallery-cover-title { -webkit-line-clamp:4; max-height:-webkit-calc(1.231em * 4); max-height:calc(1.231em * 4); font-size:24px } /* GALLERY COVER -- DATE RESULTS, KEYWORD RESULTS, AND POPULAR PAGES On these three pages, there's no image and no title in the cover, just the slideshow button. It seems cleaner just to remove the cover altogether on these. This works better on smaller laptops where vertical space is limited. 2018-01-24*/ .sm-user-ui .sm-page-node-sw2Dz .sm-gallery-cover[data-show-image="false"], /*date results*/ .sm-user-ui .sm-page-node-8jPnf .sm-gallery-cover[data-show-image="false"], /*keyword results*/ .sm-user-ui .sm-page-node-tm2LX .sm-gallery-cover[data-show-image="false"] { /*popular*/ display:none; } /*---------------------------------------------------------------*/ /* ADJUSTMENTS SPECIFIC TO COLLAGE LANDSCAPE STYLE GALLERIES */ /*---------------------------------------------------------------*/ /* LARGER TITLE FONT AND ADJUSTED SPACE IN COLLAGE LANDSCAPE STYLE GALLERIES Needed for the Andika font which SM is now using there instead of Roboto. That change is fine and is consistant with the Lightbox. However, Andika is a smaller font and aligns differently. 2020-02-10*/ .sm-gallery-images .sm-tiles-row-organic.sm-tiles-info-after .sm-tile-info p.sm-tile-title { font-size:17px; vertical-align:middle; line-height: 27px; height: 27px; } /*FULL CAPTION IN COLLAGE LANDSCAPE STYLE GALLERIES Allows for multi-line captions in galleries using the collage landscape display and turns off some of the little icons. Added 2014-02-07. Latest update 2018-11-26 making the first block specific to galleries. Note max-height in the block below (rather than a fixed height) allows for the spacing to adjust based on the size of the captions. The -webkit-line-clamp is based on SM coding (SM but clamped at 2). Added white space property to allow the captions to recognize line feeds. 2020-06-30. Adjusted max size 2021-02-03*/ .sm-gallery-images .sm-tiles-row-organic.sm-tiles-info-after .sm-tile-info p { overflow: auto; max-height: 6.45em; font-size:15px; white-space:pre-line; } .sm-tiles-row-organic.sm-tiles-info-after .sm-tile-info { padding-bottom: 20px; } .sm-tiles-row-organic.sm-tiles-info-after .sm-tile-info .sm-tile-info-text { -webkit-line-clamp: 5; } .sm-tiles-row-organic.sm-tiles-info-after .sm-tile-info .sm-gallery-image-tools { display: none; } /*------------------------------------------------*/ /* ADJUSTMENTS SPECIFIC TO SM STYLE GALLERIES */ /*------------------------------------------------*/ /* CAPTIONS Centers captions in SM-style galleries and adjusts the font size on captions and keywords. Note this does not adjust the size of the vertical bars that separate keywords. Motivated by http://dgrin.com/showthread.php?t=237467 Font default seems to be 10pt. Added 2013-08-26, Modified 2013-10-14 and 2015-01-15.*/ .sm-user-ui .sm-gallery-smugmug .sm-tile-info { max-width: none; text-align: center; font-size: 15px; } /* NO TITLE PLACEHOLDERS IN SM STYLE GALLERIES If there is no title (always the case at this site), this turns off the "add title" notice that appears when logged in. Added 2015-04-04.*/ .sm-gallery-smugmug .sm-tile-info .sm-tile-title .sm-inlineedit-placeholder.sm-muted { display: none; } /* INFO BOX / PANEL This is the pop-up that shows EXIF and other information on SM style galleries. It is very similar to the information sidebar in the lightbox. Adjust the height setting to remove scroll bars in the pop-up version when not requesting additional information. Note the CSS applied to the details of the entries for Lightbox V2 also apply here. Initial version 2015-03-31. Last update 2018-08-15. */ .sm-user-ui .sm-panel-imageinfo.sm-panel .sm-panel-body { height: 430px; } /*----------------------------------------*/ /* SPECIAL HANDLING FOR OSC GALLERIES */ /*----------------------------------------*/ /*Download button retained on images. 2019-05-17*/ .sm-page-parentnode-nr7gn2 .sm-tiles-row-organic.sm-tiles-info-after .sm-tile-info .sm-gallery-image-tools, .sm-page-parentnode-hbWKJZ .sm-tiles-row-organic.sm-tiles-info-after .sm-tile-info .sm-gallery-image-tools, .sm-page-node-vWp8CZ .sm-tiles-row-organic.sm-tiles-info-after .sm-tile-info .sm-gallery-image-tools { display: block; } .sm-page-parentnode-nr7gn2 .sm-tiles-row-organic.sm-tiles-info-after .sm-tile-info .sm-gallery-image-tools .sm-button-image-buy, .sm-page-parentnode-hbWKJZ .sm-tiles-row-organic.sm-tiles-info-after .sm-tile-info .sm-gallery-image-tools .sm-button-image-buy, .sm-page-node-vWp8CZ .sm-tiles-row-organic.sm-tiles-info-after .sm-tile-info .sm-gallery-image-tools .sm-button-image-buy { display: none; } /*------------------*/ /* VIDEO SIZING */ /*------------------*/ /* Makes Vimeo video embeds set at 315p (one of the SM options) expandable to 540p if space is available. SM does not offer the intermediate 540p size in their widget even though it is one of Vimeo's standard sizes. This essentially hijacks the smallest SmugMug widget size option to do so. JTR 2017-12-12, updated 2020-10-23 */ @media (min-width:945px) { iframe[height="315"][src*="vimeo"] { width:640px; height:360px; } } @media (min-width:1105px) { iframe[height="315"][src*="vimeo"] { width:800px; height:450px; } @media (min-width:1265px) { iframe[height="315"][src*="vimeo"] { width:960px; height:540px; } } /* Clamps all Vimeo videos to FHD. This turns 'Scale to Fit" into FHD. 2020-10-24.*/ iframe[src*="vimeo"] { max-width:1920px; max-height:1080px; } /* This clamps the Smugmug lightbox video player to 720p (HD). I think this looks a little better. The first does the video, the second the preview picture. The latter is hard to specify since the code is very like that for regular lightbox images. This uses selection based on image size, which is indirect. In theory, this can hit something other than a video preview, but it would be something like a collected image or FHD screen capture, which I don't think I have. Important flags are needed since SM defines the size using a style attribute in the HTML. Technically, this should go in the Lightbox CSS, but it fits in logically with the above. 2020-10-24.*/ .sm-lightbox-v2-video-player-container { max-height:720px; max-width: 1280px; } .sm-lightbox-v2-content-item .sm-lightbox-v2-photo[style*="height: 1080px"][style*="width: 1920px"] { height: 720px !important; width: 1280px !important; } /*--------------*/ /* CAROUSEL */ /*--------------*/ /*Removes arrows from the carousel display, which I only use in galleries as a single-image panorama viewer. The slider bar is much more useful and the arrows can impact the visual experiences, especially on smaller screens. Inserted 2016-02-20. Moved from Gallery Theme CSS to Entire Site CSS, 2017-01-02*/ .yui3-g .sm-component-carousel .sm-component-carousel-previous, .yui3-g .sm-component-carousel .sm-component-carousel-next { display:none; }

CSS Code Attached to the Entire Site - Lightbox

/* Lightbox CSS /* Latest update 18 December 2020 -- Non-scrim single color background on photo buttons (overlay text at the image bkg) -- (Comment editing 14 January 2021) /* In addition to the layout changes here, there are color changes in the Gallery Theme CSS. /*------------------------------*/ /* PHOTO DETAILS ON SIDEBAR */ /*------------------------------*/ /* Adjust the caption sizing and spacing to increase emphasis and visual focus to this section. There is also a color change to pure white in the Gallery theme CSS. Modestly different values for desktop, mobile. Last adjustment: 2020-05-14*/ @media (min-width:961px) { .sm-user-ui .sm-lightbox-v2 .sm-image-metadata-caption { font-size: 18px; line-height:1.33em; margin-bottom:48px; margin-top:18px } } @media (max-width:960px) { .sm-user-ui .sm-lightbox-v2 .sm-image-metadata-caption { font-size: 16px; margin-bottom:36px; margin-top:12px; } } /* When logged in on a desktop, realign the sidebar metadata section so the caption is on top but the keywords and edit button are side-by-side below. Shrink the edit button to just the pencil icon (no text). Last update 2020-05-14*/ @media (min-width:961px) { .sm-user-loggedin.sm-user-owner .sm-lightbox-v2-sidebar-content .sm-image-metadata{ display:flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } .sm-user-loggedin.sm-user-owner .sm-lightbox-v2-sidebar-content .sm-image-metadata-caption { width:100%; } .sm-user-loggedin.sm-user-owner .sm-lightbox-v2-sidebar-content .sm-image-metadata-keywords { width:81%; /* this makes space for the button. Sidebar is 364px, button needs 44px + margin, this allows 26px margin*/ margin-top:0; } .sm-user-loggedin.sm-user-owner .sm-lightbox-v2-sidebar-content button.sm-image-metadata-edit-button { min-width: auto; width:auto; padding: 0 12px; margin-top:0; background: transparent; } .sm-user-loggedin.sm-user-owner .sm-lightbox-v2-sidebar-content button.sm-image-metadata-edit-button span{ display: none; } .sm-user-loggedin.sm-user-owner .sm-lightbox-v2-sidebar-content .sm-image-metadata form{ width:100%; /* this makes the edit title/caption/keywords display fill the space. Added 2020-03-12.*/ } } /* Remove the unnecessary keywords label. 2019-05-29*/ .sm-user-ui .sm-lightbox-v2-sidebar-content .sm-image-metadata-keywords h5 { display:none; } /* Adjust the cross-reference information line when an image is drawn from another gallery. 2020-07-14.*/ p.sm-image-metadata-attribution { font-size: 12px; } p.sm-image-metadata-attribution a { text-decoration:underline; } /* Remove the Camera Info to label line. To balance spacing, add margin to the information table, more on the desktop than on mobile. 2109-08-30*/ .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-sidebar-content > h5 { display:none; } .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-sidebar-content > .sm-imageinfo-container { margin-top:60px; } @media (max-width:960px) { .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-sidebar-content > .sm-imageinfo-container { margin-top:24px; } } /* Tighten up the spacing on camera info entries in the information sidebar. This reduces the need for scrolling in many cases. This also applies to the info box on SM style galleries. 2019-10-12.*/ .sm-imageinfo-container .sm-imageinfo-label, .sm-imageinfo-container .sm-imageinfo-value { padding-bottom: 4px; } /* The section below adjusts the entries in the "Show Less" Camera Info data table. The goal here is to produce a more compact camera info section that does not compete for visual attention with the more important title and caption. The basic metadata fields are Camera, Lens, Focal Length, Aperture, Exposure Time, ISO, Copyright, and Date Taken. Each is called out here. On each, the width of the label is set to 0%. This shrinks the label column width to the length of longest word, rather than half the table width, leaving more space for the data. That in turn, leads to less word-wrap and a shorter table. For the longest three two-word labels (Focal Length, Exposure Time, Date Taken), I've introduced shorter alternatives. Note that when SHOW MORE is active, there are entries without the 0% width so the table returns to 50% label, 50% data. That seems OK given the complexity of some of the labels. This also applies to the info box on SM style galleries. 2019-10-12. Added the "Author" and "File Size" entries to the list of those handeled here. These sometimes appear on the "Show Less" list in some of my earlier pictures (using earlier cameras). 2019-11-19.*/ .sm-imageinfo-container tr[data-metadata="Camera"] .sm-imageinfo-label { width:0%; } .sm-imageinfo-container tr[data-metadata="Lens"] .sm-imageinfo-label { width:0%; } .sm-imageinfo-container tr[data-metadata="ISO"] .sm-imageinfo-label { width:0%; } .sm-imageinfo-container tr[data-metadata="Focal Length"] .sm-imageinfo-label { font-size:0; width:0%; padding-bottom:0; } .sm-imageinfo-container tr[data-metadata="Focal Length"] .sm-imageinfo-label:before { Content:"Focal Ln"; font-size:12px; } .sm-imageinfo-container tr[data-metadata="Focal Length"] .sm-imageinfo-label { width:0%; } .sm-imageinfo-container tr[data-metadata="Aperture"] .sm-imageinfo-label { width:0%; } .sm-imageinfo-container tr[data-metadata="Size"] .sm-imageinfo-label { width:0%; } .sm-imageinfo-container tr[data-metadata="Exposure Time"] .sm-imageinfo-label { font-size:0; width:0%; padding-bottom:0; } .sm-imageinfo-container tr[data-metadata="Exposure Time"] .sm-imageinfo-label:before { Content:"Shutter"; font-size:12px; } .sm-imageinfo-container tr[data-metadata="Copyright"] .sm-imageinfo-label { width:0%; } .sm-imageinfo-container tr[data-metadata="Copyright"] .sm-imageinfo-label, .sm-imageinfo-container tr[data-metadata="Copyright"] .sm-imageinfo-value { padding-bottom: 8px; } .sm-imageinfo-container tr[data-metadata="Date Taken"] .sm-imageinfo-label { font-size:0; width:0%; } .sm-imageinfo-container tr[data-metadata="Date Taken"] .sm-imageinfo-label:before { Content:"Taken"; font-size:12px; } .sm-imageinfo-container tr[data-metadata="Author"] .sm-imageinfo-label { width:0%; } .sm-imageinfo-container tr[data-metadata="File Size"] .sm-imageinfo-label { width:0%; } /* Remove the SHOW MORE [camera info] button for the logged out visitor, but restore it when logged in (and reduce it from full width). The expanded list is too much information and too much clutter for general users, but I occaisionally like to check some of it as the owner. Thanks to Allen from Dgrin for correcting my earlier code here. 2019-05-29*/ .sm-user-ui .sm-lightbox-v2 .sm-imageinfo-advanced-btn { display:none; } .sm-user-loggedin.sm-user-owner .sm-lightbox-v2 .sm-imageinfo-advanced-btn { display:inline-flex; width:auto; } .sm-user-loggedin.sm-user-owner .sm-lightbox-v2 .sm-imageinfo-advanced-btn span{ font-size:12px; font-weight:400; } /*--------------------------------------*/ /* PRIMARY CONTROLS (ICONS AT LEFT) */ /*--------------------------------------*/ /* In the left side navbar, widen the marker next to the active panel icon. This provides a bit more of a visual cue as to what's going on. 2018-08-17*/ .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-primary-controls-list button.sm-button[data-selected="true"]::after { border-width: 0 0 0 6px; } /*----------------------------------------------------------------------------------*/ /* PHOTO BUTTONS (TITLE AND PARTIAL CAPTION OVERLAYING THE BOTTOM OF THE PHOTO) */ /*----------------------------------------------------------------------------------*/ /* Update font for the overlay title to be smaller than the default 24px Note that when space is really constrained, SmugMug uses the h4 tag for the title, which uses a 14px font. That seems OK. For captions, this reduces the font weight but no font-size change is needed. The 16px default is fine. 2019-08-28. */ .sm-user-ui .sm-lightbox-v2-photo-buttons h2 { font-size: 18px; } .sm-user-ui .sm-lightbox-v2-photo-buttons p { font-weight: 400; } /* Hide the overlay caption when a title is present. When doing so, restore the field to the height used when just a title is present. 2019-08-27.*/ .sm-lightbox-v2-photo-title-and-caption > div > p.sm-text-ellipsis { display:none; } .sm-user-ui .sm-lightbox-v2-photo-title-and-caption {height:48px;} /* Use darker, single color background (not a gradient scrim) behind the overlay. For this type of background, the sizing needs to be adjusted too. 2020-12-18.*/ .sm-user-ui .sm-lightbox-v2-photo-buttons { background: rgba(96,96,96,0.8); padding-top:6px; padding-bottom:6px; } /*------------------------*/ /* AUTO HIDE FUNCTION */ /*------------------------*/ /* Auto-hide is set to be on, but this limits it to one case and introduces somewhat different behavior for the overlay title/caption. In regular lightbox mode (not the slideshow) always keep the vertical nav bar and the primary controls visible, even when the [data-hide-ui] flag is on. Most things can be be set to have full opacity, but disabled buttons need a special half opacity setting. The third block below allows the auto hide function to operate in slideshows for these elements by undoing the above. Note the SM code currently does not partially dim the disabled > and < arrows in slideshow mode, but the code here should still auto-hide correctly if this bug gets fixed. Updated 2020-12-10 after a minor SM code change. */ .sm-user-ui .sm-lightbox-v2[data-hide-ui] .sm-lightbox-v2-hideable:not(.sm-lightbox-v2-photo-buttons){ opacity:1; } .sm-user-ui .sm-lightbox-v2[data-hide-ui] button.sm-lightbox-v2-hideable[disabled] { opacity:0.5; } .sm-user-ui .sm-lightbox-v2[data-hide-ui][data-lightbox-mode="slideshow"] .sm-lightbox-v2-hideable, .sm-user-ui .sm-lightbox-v2[data-hide-ui][data-lightbox-mode="slideshow"] button.sm-lightbox-v2-hideable[disabled] { opacity:0; } /* In both regular and slideshow modes, hide overlay caption/title bar except when hovering. There's no delay but the transition is smoothed out a bit. The width change is needed to allow hover to apply to any part of the bottom of the image. Without that, .sm-lightbox-photo-buttons shrinks horizontally to the size of the the text and associated padding. 2019-10-04, width added 2020-12-17 */ .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-photo-buttons { opacity:0; } .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-photo-buttons .sm-button { width:100%; } .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-photo-buttons:hover { opacity:1; -webkit-transition: opacity .5s; transition: opacity .5s; }

CSS Code Attached to the Entire Site - Header

/* Header CSS /* Latest update 14 December 2020 /* -- Adjust status bar repositioning into section bar /* -- (Major restructuring 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 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. When the status bar is active and there's space to move it, this saves 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 */ } } /*---------------------------------------*/ /* COLOR CHANGES -- LOGGED IN HEADER */ /*---------------------------------------*/ /* The combination of an almost-black background with white text makes for a pretty stark display. The following provides a means to use other colors that draw less attention. This uses CSS variables to separate out the code to change colors from the colors themselves. Below is the code. The assignment of values to varables is separate, in the themes. If a variable value is not assigned, the code below has default values, correspoinding to the original SmugMug design.*/ /* BACKGROUND COLOR */ /* Separate color variables for the main header, section bar, and status bar backgrounds. */ .sm-user-ui .sm-user-owner:not(.sm-page-edit) .sm-page-header { background-color:var(--li-header-bkg-color, #1c1d1f); } .sm-user-ui .sm-user-owner:not(.sm-page-edit) .sm-page-header-section-bar { background-color:var(--li-header-section-bkg-color, #1c1d1f); } .sm-user-ui .sm-user-owner:not(.sm-page-edit) .sm-node-status { background-color:var(--li-header-status-bkg-color, #2c2e31); } /* BUTTONS /* Adjust most button colors: one text color, one background color for most circumstances. */ .sm-user-ui .sm-user-owner:not(.sm-page-edit) .sm-page-header .sm-button.sm-button-skin-default, .sm-user-ui .sm-user-owner:not(.sm-page-edit) .sm-page-header .sm-button.sm-header-main-nav-overflow-menu-button .sm-emphasized, .sm-user-ui .sm-user-owner:not(.sm-page-edit) .sm-page-header .sm-page-header-account-avatar-wrapper, .sm-user-ui .sm-user-owner:not(.sm-page-edit) .sm-page-header-section-bar .sm-button.sm-button-skin-default { color: var(--li-header-text-color, white); } /* Adjust most highlighted button colors: one (different) background color on hover or when a button is active. This includes the special case of the account button when its menu is open. */ .sm-user-ui .sm-user-owner:not(.sm-page-edit) .sm-page-header .sm-button.sm-button-skin-default:active, .sm-user-ui .sm-user-owner:not(.sm-page-edit) .sm-page-header .sm-button.sm-button-skin-default:hover, .sm-user-ui .sm-user-owner:not(.sm-page-edit) .sm-page-header-section-bar .sm-button.sm-button-skin-default:active, .sm-user-ui .sm-user-owner:not(.sm-page-edit) .sm-page-header-section-bar .sm-button.sm-button-skin-default:hover, .sm-user-ui .sm-user-owner:not(.sm-page-edit) .sm-page-header .sm-component-menu-item .sm-page-header-account-avatar-wrapper:hover, .sm-user-ui .sm-user-owner:not(.sm-page-edit) .sm-page-header-navitem-account[data-user-menu-open="true"] .sm-page-header-navitem-account-button { background-color:var(--li-header-hover-bkg-color, #242528); } /* Upload button. It's a special case. This defines the icon color. It can be the same as the common text color, but it does not have to be. Note that earlier in this file, there is code that changes the background to transparent.*/ .sm-user-ui .sm-user-owner:not(.sm-page-edit) .sm-page-header .sm-button.sm-button-skin-accent { color:var(--li-header-upload-icon-color, white); } /* Upload button. The other half of the special case. This defines the background on the highlighted/active upload button, which may be different from the general hover color. The original SmugMug design always gave this button a background of a lightened SmugMug Green (#81d600). Code above made it transparent under normal circumstances. This provides an option for any color on hover. The original SmugMug green (#6eb800) strikes me as a better choice in most cases than the lightened version. */ .sm-user-ui .sm-user-owner:not(.sm-page-edit) .sm-page-header.sm-nui .sm-button.sm-button-skin-accent[data-testid="header_upload_button"]:hover{ background-color:var(--li-header-upload-hover-bkg-color, #81d600); } /* MENU ITEMS /* Adjust text color on header menu items (Photos/Organize/Photo Site and drop downs). Apply the same one text color. */ .sm-user-ui .sm-user-owner:not(.sm-page-edit) .sm-component-menu .sm-component-menu-item .sm-component-menu-label, .sm-user-ui .sm-user-owner:not(.sm-page-edit) .sm-component-menu .sm-component-menu-item .sm-icon, .sm-user-ui .sm-user-owner:not(.sm-page-edit) .sm-component-menu .sm-component-menu-item .sm-user-nav-node-title, /* for mobile */ .sm-user-ui .sm-user-owner:not(.sm-page-edit) .sm-component-menu .sm-component-menu-item .sm-user-nav-node-settings-label { /* for mobile */ color:var(--li-header-text-color, white); } /* Adjust text color on disabled header menu items. (One such appears on the Style dropdown for galleries.) */ .sm-user-ui .sm-user-owner:not(.sm-page-edit) .sm-component-menu .sm-component-menu-item[aria-disabled="true"] .sm-component-menu-label, .sm-user-ui .sm-user-owner:not(.sm-page-edit) .sm-component-menu .sm-component-menu-item[aria-disabled="true"] .sm-icon { color:var(--li-header-disabled-text-color, #54575d); } /* Active menu link (Photo Site" or "Selling Tools" [for Portfolio/Pro users] on the full or expanded main menu). The SmugMug design used a lightened version SmugMug Green (#81d600). That gets lost on some background. This allows for alternate colors and the option of making the text bold for further emphasis. */ .sm-user-ui .sm-user-owner:not(.sm-page-edit) .sm-header-main-nav .sm-component-menu-item .sm-component-menu-item-link[data-active] .sm-component-menu-label { color: var(--li-header-active-link-color, #81d600); font-weight: var(--li-header-active-link-weight, normal); } /* Change background color and border on header dropdowns. */ .sm-user-ui .sm-user-owner:not(.sm-page-edit) .sm-component-menu.sm-inline-flex, .sm-user-ui .sm-user-owner:not(.sm-page-edit) .sm-component-menu .sm-component-menu-separator { background-color:var(--li-header-bkg-color, #1c1d1f); border-color:var(--li-header-dropdown-border-color, #3c3e43); } /* Change the hover background color for header menu items: (Photos/Organize/Photo Site) and dropdowns, except for disabled items. This applies the common hover background color. */ .sm-user-ui .sm-user-owner:not(.sm-page-edit) .sm-component-menu .sm-component-menu-item:hover:not([aria-disabled="true"]) { background-color: var(--li-header-hover-bkg-color, transparent); } /* OTHER ITEMS /* Change color of the SmugMug logo text on the left side of the top header bar. It's normally white. The dark color #212121 appears in the original SmugMug code (but not applied) suggesting that is a a standard dark altenative. There's no option here to change the SmugMug green "smile", even though it may not show well on some backgrounds. That smile/color combination is core SmugMug branding. SmugMug has written the combination into the HTML (not using CSS), identifiers, suggesting they do not want it changed.*/ .sm-user-ui .sm-user-owner:not(.sm-page-edit) path.sm-logo-word-mark { fill: var(--li-header-Smugmug-logo-fill-color, white); } /* Change color of the header text (e.g, "Folder") on the left side of the section bar to the new standard text color. */ .sm-user-ui .sm-user-owner:not(.sm-page-edit) .sm-page-header-section-bar h1 { color: var(--li-header-text-color, white); } /* Adjust color on status bar text, again to the standard text color. */ .sm-user-ui .sm-user-owner:not(.sm-page-edit) .sm-node-status { color:var(--li-header-text-color, white); } /* ---------------------------------- */ /* MOVE DROP-DOWN MENUS OVER SLIGHTLY */ /* ---------------------------------- */ /* Just a little tidying-up */ .sm-user-ui .sm-user-owner:not(.sm-page-edit) .sm-component-menu[role="menu"][aria-expanded="true"] { margin-left:24px; } /* ------------------*/ /* LOGGED-OUT HEADER */ /* ------------------*/ /* Adjust the logged-out header background color to either the assigned logged-in header background color or something just slightly darker than the page body background, 2020-12-01 */ .sm-user-ui .sm-page:not(.sm-user-owner) .sm-page-header { background-color:var(--li-header-bkg-color, rgba(0,0,0,0.10)); } /* Remove bottom line logged-out header.*/ .sm-user-ui .sm-page:not(.sm-user-owner) .sm-page-header { border-bottom-style:none; } /* Remove the header in mobile mode when logged out. It's an OK design element on the desktop, but it's a space eater on a mobile. */ @Media (max-width: 736px) { .sm-page:not(.sm-user-owner) .sm-page-header { display:none; } } /* ----------------------*/ /* HOME PAGE ADJUSTMENTS */ /* ----------------------*/ /* Note #sm-page-header does not appear in the Customizer so none of this applies there. */ @Media (min-width: 737px) { /* Make the header and section bar transparent in desktop mode */ .sm-user-ui .sm-page-home #sm-page-header .sm-page-header, .sm-user-ui .sm-page-home #sm-page-header .sm-page-header-section-bar { background-color:rgba(0,0,0,0); } /* Adjust the desktop header background on the home page on hover. For readability, some background enhancement is needed, but I'd prefer it not always be on. Note that to recognize the hover, the position property cannot remain at its default "static" value. This group also provides space for and adds a bottom border to the header group.*/ .sm-user-ui .sm-page-home #sm-page-header { position:relative; border-bottom-style: solid; border-bottom-color: transparent; border-bottom-width: 1px; } .sm-user-ui .sm-page-home #sm-page-header:hover { background-color:rgba(255,255,255,0.62); border-bottom-color: black; } } @Media (max-width: 736px) { /* In mobile mode, make the header semi-transparent like the menu, */ /* with a bottom border separating the two. No section bar in mobile mode. */ .sm-user-ui .sm-page-home #sm-page-header .sm-page-header { background-color:rgba(255,255,255,0.62); border-bottom-color: black; border-bottom-style: solid; } } /* Hide the section bar content in normal operations but show it when hovering on the header group. Note there's no section bar in mobile mode. */ .sm-user-ui .sm-page-home #sm-page-header .sm-page-header-section-bar { visibility:hidden; } .sm-user-ui .sm-page-home #sm-page-header:hover .sm-page-header-section-bar { visibility:visible; }

CSS Code Attached to the Entire Site - Miscellaneous

/* Miscellaneous Entire Site CSS /* Latest update 2 December 2020 -- Make Sidebar "sticky" (slide to top and stop) and adjust "jump to top" accordingly -- Reduced the number of cases where SmugMug footer is hidden -- A little clean up on the date page -- (12 Dec: Removed some dead breadcrumb code) /* JUMP TO TOP POP UP --------------------- As implemented, the JUMP TO TOP button can cover site content in undesirable ways. Two cases: First case: the screen is wide enough (screen width >= 737px) that the sidebar shows at left. The first block below moves the JUMP TO TOP button to open space at the left under the sidebar. The second block moves it up to just under the sidebar when the screen is tall enough that the sidebar is sticky. Otherwise, we stick with default positioning. Initial insertion 2016-04-07, latest update 2020-12-02. */ @Media (min-width:737px) { .sm-button.sm-page-scroll-to-top { left:67px; } } @Media (min-width:737px) and (min-height:765px) { .sm-button.sm-page-scroll-to-top { top:670px; bottom: inherit; } } /* Second case: narrower screens (screen width <= 736px)) where the "sidebar" is moved to the top. This reduces the button content to just an arrow Ref: http://dgrin.com/showthread.php?t=257626, code from Aaron Meyers at SmugMug, with some modifications. Added 2016-04-12, min-width adjusted 2017-12-11.*/ @media (max-width: 736px) { .sm-button.sm-page-scroll-to-top { padding: 4px; } .sm-button.sm-page-scroll-to-top .sm-page-scroll-to-top-label { display: none; } } /* IMAGE PICKER (Customizer) --------------------------------------------- /* Enlarge the images in the "image picker", the control that lets the user select images. The image picker is used for selecting feature images, cover images, and contents of photo content blocks. The Smugmug code uses a container box of size 110px x 110px for the thumbnails. The thumbnails are reduced to have width 100 and height variable per the photo's aspect ratio. If square thumbs are in use, the height is 100 for all images. However, the source images are SmugMug small size: up to 400 x 300. So there's room for expansion. This scales all up by a factor of 1.5. This does not apply to item selection where the choice is among folders, pages, and galleries. 2020-02-25, updated 2020-09-29*/ /* First, resize the containers that hold the thumbnail image. 165 = 110 x 1.5*/ .sm-picker-list .sm-thumbnail.sm-thumbnail-image, .sm-picker-list .sm-thumbnail-image.sm-thumbnail-selected .sm-thumbnail-content { width:165px; height:165px; } /* Then scale the thumbnail itself */ .sm-picker-list .sm-thumbnail.sm-thumbnail-image .sm-thumbnail-thumb-image img { transform: scale(1.5); position: relative; top: 12px; } /* SIDEBAR ---------- SmugMug's tools offer no way to pin sidebars introduced at the folder, page, or gallery level, which I use to provide context-specific information. SmugMug only has tools to pin a single site-wide sidebar. The following code pins all sidebars. The @Media limits the pinning to apply onbly when the screen is wide enough that the sidebar shows at the left (it's moved to the top for narrow screens) AND the screen is long enough to show the sidebar in its entirety plus some extra. The z-index makes sure the flyout for the Info submenu stays on top of the center-region elements. However, this interferes with the user customization editing tools, hence the second block. Initial version JTR 2014-06-20. Latest adjustment 2018-01-23. */ @Media (min-width:737px) and (min-height:765px) { .sm-user-ui .sm-page-layout-sitetemplate .sm-page-layout > .sm-page-layout-region > .sm-page-layout-region-left { position:sticky; top:0px; z-index:2; } .sm-user-ui .sm-page-edit .sm-page-layout-sitetemplate .sm-page-layout > .sm-page-layout-region > .sm-page-layout-region-left { z-index:0; } } /* Center the bottom sidebar descriptive text box on on mobile. 2017-12-27. */ @Media (max-width: 736px) { .sm-page-layout-region-left div:nth-child(3) { text-align: center; } } /* Remove the descriptive text at the bottom of the sidebar on selected pages when in mobile mode. This simplifies the mobile display. The !important is needed because SmugMug uses the !important quite regularly in their CSS aimed at mobile mode. 2017-12-27, last updated 2020-03-15.*/ @Media (max-width: 736px) { .sm-page-node-SpHcs .sm-page-layout-region-left div:nth-child(3), /*Featured Galleries*/ .sm-page-node-TwCV6 .sm-page-layout-region-left div:nth-child(3), /*Browse All*/ .sm-page-node-Hs5c4G .sm-page-layout-region-left div:nth-child(3), /*California Coast Range*/ .sm-page-node-rsTXz2 .sm-page-layout-region-left div:nth-child(3), /*Far Northern Califoria*/ .sm-page-node-fg66CK .sm-page-layout-region-left div:nth-child(3), /*Farther Afield*/ .sm-page-node-km82BF .sm-page-layout-region-left div:nth-child(3), /*Sierra North*/ .sm-page-node-FR8BHv .sm-page-layout-region-left div:nth-child(3), /*Sierra South*/ .sm-page-node-7gHh4z .sm-page-layout-region-left div:nth-child(3), /*Yosemite*/ .sm-page-node-5gj2tk .sm-page-layout-region-left div:nth-child(3), /*SF Bay Area*/ .sm-page-node-kV3hp3 .sm-page-layout-region-left div:nth-child(3), /*House and Garden*/ .sm-page-node-ZjpWT6 .sm-page-layout-region-left div:nth-child(3), /*Civilized Places and Events*/ .sm-page-node-5kXwj .sm-page-layout-region-left div:nth-child(3), /*Plant Families*/ .sm-page-node-Wpq6bK .sm-page-layout-region-left div:nth-child(3), /*2018*/ .sm-page-node-dCWpG7 .sm-page-layout-region-left div:nth-child(3), /*2017*/ .sm-page-node-WSxSgw .sm-page-layout-region-left div:nth-child(3), /*2016*/ .sm-page-node-MP7XZ9 .sm-page-layout-region-left div:nth-child(3), /*2015*/ .sm-page-node-rWjZNP .sm-page-layout-region-left div:nth-child(3), /*2014*/ .sm-page-node-3Gmc3L .sm-page-layout-region-left div:nth-child(3), /*2013*/ .sm-page-node-ndr7x6 .sm-page-layout-region-left div:nth-child(3), /*2012*/ .sm-page-node-LFZq8T .sm-page-layout-region-left div:nth-child(3), /*2011*/ .sm-page-node-knD8mw .sm-page-layout-region-left div:nth-child(3){ /*A Few 2006-10 Galleries*/ display:none !important; } } /*Adjusts the spacing between items on the vertical nav bar menu inside the sidebar. Ref: http://www.dgrin.com/showthread.php?t=239756 Font size adjustment for new version of the Roboto font. 2013-08-26, adjusted 2015-01-15. */ .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-vertical .sm-page-widget-nav-toplink { margin-bottom: 12pt; font-size: 17px; } /* Adjusts the spacing on the submenus. 2016-12-30*/ .sm-page-widget-nav-toplink .yui3-menu-item > .yui3-menu-label { padding: 0 36px 0 22px; } /* Internet explorer patch to get the logo text to wrap. 2018-09-10*/ .sm-browser-ie .sm-page-widget-logo .sm-page-widget-logo-align-center { display:block; } /* Remove the fifth element in the sidebar menu, a link to the search page. At one time I removed this only for desktop, not mobile, but since the search function doesn't work very well on mobile, I opted just to tuck it into the Tools & Notes page and take it off the main menu. A hook for an additional menu item remain, undisplayed, though, if I want to use it in the future. 2019-12-18. This was partially restored when SM removed of links to the search page on the logged-in account icon menu. They reversed that and the associated code is now gone. 2020-08-20 */ .sm-page-widget-nav-vertical .sm-page-widget-nav-toplink:nth-child(5), .sm-accordion .sm-nav-item-toplevel:nth-child(5) { display:none; } /* Option to display the missing item .sm-user-loggedin.sm-user-owner .sm-page-widget-nav-vertical .sm-page-widget-nav-toplink:nth-child(5), .sm-user-loggedin.sm-user-owner .sm-accordion .sm-nav-item-toplevel:nth-child(5) { display:list-item; } /* BREADCRUMBS -------------- /* Adjust the large breadcrumb font downwards, making this more in line with other text on the pages. Added 2013-11-04. Last modified 2017-09-02. (Removed some dead code handling the smaller breadcrumb font 2020-12-12.)*/ .sm-breadcrumbs h1 { font-size:24px; } /* Add a little space above the breadcrumb. I thought there was some without my setting any margins, but that may have disappeared in one of the recent SM updates ... or maybe I'm just opting for a spacing change I didn't have before. Inserted 2017-09-02. */ .sm-breadcrumbs { margin-top: 12px; } /* BRIGHTEN SMALLER DISPLAY IMAGES ---------------------------------- This increases the brightness of small, medium, and large display image classes used in navigation content boxes (small and medium) and in the collage landscape gallery display (large). These display images seem slightly darker than the biggest ones, perhaps because of the scaling algorithm. I've not brightened the smallest thumbnails. I use them rarely. Display XL, X2, and X3's are, in theory, darker than the originals too, but that difference is even smaller. Note that the filter command only works on more recent versions of many browsers and, as of the date added, does not work on IE. Ref: http://dgrin.com/showthread.php?t=247548, which cites http://www.4p8.com/eric.brasseur/gamma.html although it is not clear whether that particular problem is at work here or not. Added 2015-04-08. Several small amount adjustments, most recently 2015-06-20. */ .sm-tiles-S img.sm-image { filter: brightness(109%); -webkit-filter:brightness(109%); } .sm-tiles-M img.sm-image { filter: brightness(106%); -webkit-filter:brightness(106%); } .sm-tiles-L img.sm-image { filter: brightness(104%); -webkit-filter:brightness(104%); } /* NAVIGATION CONTENT BOXES --------------------------- Sets the normal font weight (rather than light) and size. Added 2013-08-26, revised 2015-01-15 in response to new Roboto font. Added font family 2020-03-10 after SM changed this to the accent font (Andika)*/ .sm-page-widget-folders .sm-tile-info .sm-tile-title, .sm-page-widget-galleries .sm-tile-info .sm-tile-title, .sm-page-widget-nodes .sm-tile-info .sm-tile-title, .sm-page-widget-pages .sm-tile-info .sm-tile-title { font-size:17px; font-weight:400; font-family: Roboto,Helvetica,Arial,sans-serif; } /* Allows multi-line titles on grid displays. First version 2013-08-31. 2015-01-15: Line height adjustments inserted for new Roboto font. 2015-09-29: Max-height, -webkit-line-clamp, align-items, and padding-bottom added to adjust after for SM updates 2018-09-16: Note this also affects thumbnail-style gallery displays. Since this site does use that style, this is moot, but if it did, some revision for that case would be needed. Adjusted 2020-11-30.*/ .sm-tiles-grid.sm-tiles-info-after .sm-tile-info p { line-height: 1.25em; max-height: 3.75em; overflow:visible; } .sm-tiles-grid.sm-tiles-info-after .sm-tile-info-text { -webkit-line-clamp:3; overflow:hidden; } .sm-tiles-grid.sm-tiles-info-after .sm-tile-info { align-items:initial; padding-bottom: 0.8em; } /* TEXT WIDGETS --------------- Adjusts the line spacing on text widgets to match behaviour before the 2013-10-31 text editor change. The SmugMug CSS forces a minimum line-height of 20px, too large if the text is 14 or 12pt. Added 2013-11-01.*/ .sm-widget-text p { line-height: inherit; } /* FOOTER --------- I've choosen to hide the footer in desktop mode on three types of pages: on the home page, on some SmugMug style galleries, and on the Enjoy pages. The footer is mostly innocuous and is useful for having a log-in link, especially now that such a link has been removed from the logged-out header (as of 11/6/2020). However in desktop mode, the footer can introduce otherwise unnecessary scrollbars on the SmugMug style galleries and the Enjoy pages. It can get lost or be a distraction in the home page background. In mobile mode, it does less damage. SmugMug officially requires the footer. I've only removed it for cause. The header remains to flag this as a SmugMug site. I hope this meets the intent if not the letter of the rule. There is no direct way to indicate SmugMug style galleries, so I have to consider the places where they occur: all galleries in the Plant Families folder, most galleries in the Infrastrucure folder, a few galleries in the Other folder, and the keyword, date, and popular result galleries. Some of these display acceptably with footer, so I've made a selection. Ref: (http://www.aaronmphotography.com/Customizations/Sitewide/Remove-SmugMug-Footer) which sites Lamah as the source. Last code modification 2020-12-02.*/ @Media (min-width: 737px) { /* .sm-page-gallery-keyword .sm-page-powered-by, Keyword galleries - footer not hidden .sm-page-gallery-date .sm-page-powered-by, Date gallery - footer not hidden .sm-page-gallery-popular .sm-page-powered-by, Popular gallery - footer not hidden*/ .sm-page-parentnode-5kXwj .sm-page-powered-by, /* All galleries in the Plant Families folder */ .sm-page-parentnode-w3hFJn.sm-page-gallery .sm-page-powered-by, /* All galleries in the Infrastructure folder */ .sm-page-parentnode-L3H99X .sm-page-powered-by, /* The Enjoy pages in Infrastructure*/ .sm-page-node-zBMgHR .sm-page-powered-by, /* The Enjoy Test page in Other*/ .sm-page-home .sm-page-powered-by { /* The Home page*/ overflow:hidden; height:0; } } /* SCROLL BARS - CHROME, SAFARI ------------------------------- Expands scroll bars in Chrome, Safari, and some other browsers. Were 12px. Makes the thumb higher contrast against the track. While this is primarly of value for the carousel, it apply to all scrollbars. The other major use is in the lightbox with SHOW MORE camera information. 2019-04-25*/ body ::-webkit-scrollbar, body ::-webkit-scrollbar-corner { width: 24px; height: 24px; } .sm-user-ui body ::-webkit-scrollbar-thumb { background-color: rgba(224,226,232,0.3); } /* SCROLL BARS - FIREFOX ------------------------ /* Widen the scroll bar in Firefox. This does not work at the moment since Smugmug strips this browser-specific non-standard code. If SM updates their CSS interpreter, this should function. 2019-09-20.*/ .sm-user-ui body * { scrollbar-width: auto; scrollbar-color: rgba(224,226,232,0.3) transparent; text-rendering: auto; } /* DATE PAGE ------------ /* Spacing adjustments for the title on the second entry group to better match the first and to separate the two a bit more. 2018-01-23, updated 2018-01-25*/ .sm-page-date-range h2 { margin-top:18px; margin-bottom:8px; } /* Clarify date page titles. 2018-01-23*/ .sm-page-date-years h2::before { content: "Find Items in this " } .sm-page-date-range h2::before { content: "Find Items in this " } /* Clean up overlap of header and slideshow button. 2020-12-02 */ .sm-page-gallery-date .sm-gallery-header { height: 48px; margin-top:6px; margin-bottom:6px; } /* SLIDESHOW CAPTIONS --------------------- SM provides an option to have captions show in the slideshow. If turned on, this code provides that the captions only show when the mouse hovers over them. JTR 2015-03-30. Transition speed controls added 2015-04-02.*/ .sm-slideshow-image .sm-tile-info { opacity: 0; -webkit-transition: 0.25s opacity; -moz-transition: 0.25s opacity; transition: 0.25s opacity; } .sm-slideshow-image .sm-tile-info:hover { opacity: inherit; }

CSS Code Attached the the default (modified Spartan) theme

/* Latest update 10 December 2020 -- Comment clean-up (no active code changes) -- 3 December: Adjust variable names -- 1 December: New variable-based approach to colors moves most of the code to the header css /* LOGGED IN HEADER COLORS --------------------------- /* Variables only -- Most of the code is in the Entire Site - Header CSS /* This is a light background theme, and these values are appropriate for that. The page background for this theme is rgb(197,197,197), /* and the header sections are all a bit darker. The original color logic had rgba(0,0,0,0.10), rgba(0,0,0,0.15), and rgba(0,0,0,0.20) for the first three. /* The three background colors here match the results of that logic with the background above. /* 2020-12-01. Variable name change 2020-12-03 */ :root {--li-header-bkg-color: rgb(177,177,177)} /* Top header bar background Was rgb(28,29,31) #1c1d1f I use this for my logged-out header too */ :root {--li-header-section-bkg-color: rgb(168,168,168)} /* Section bar (2nd header line) bkg Was rgb(28,29,31) #1c1d1f A bit darker than the above */ :root {--li-header-status-bkg-color: rgb(158,158,158)} /* Status bar (3rd line) background Was rgb(44,46,49) #2c2e31 Another small step darker */ :root {--li-header-text-color: black} /* Text Was white */ :root {--li-header-hover-bkg-color: rgb(207,207,207)} /* Text background on hover (highlight) Was rgb(36,27,40) #242528 and original menus stayed transparent */ :root {--li-header-disabled-text-color: grey} /* Disabled text Was rgb(84,87,93) #54575d Grey is rgb(128,128,128) */ :root {--li-header-upload-icon-color: black} /* Upload icon Was white */ :root {--li-header-upload-hover-bkg-color: #6eb800} /* Upload button bkg on hover (highlight) Was rgb(129,214,0) #81d600 I like #6eb800 or the -hover-bkg-color */ :root {--li-header-active-link-color: #3b6300} /* Active item [header bar left] Was rgb(129,214,0) #81d600 use a green or the -text-color */ :root {--li-header-active-link-weight: bold} /* Active item [header bar left] Was normal use either normal or bold */ :root {--li-header-dropdown-border-color: grey} /* Drop-down panel border Was rgb(60,62,67) #3c3e43 maybe use the -disabled-text-color */ :root {--li-header-Smugmug-logo-fill-color: #212121} /* SmugMug logo text (header left) fill Was white Use this or #212121 */ /* SET COLOR OF ALL UNDERLINED LINKS ------------------------------------- These show in Creative Commons sidebar entries, folder descriptions, and a few stray HTML blocks (e.g, on theTips and Tools page). This avoids having to put that color information in all the individual blocks. And it is tied to a light bkg. 2017-12-14*/ a u { color:#0024e3; } /* SEARCH WIDGET (USED ON TOOLS & NOTES AND 404 PAGES) ------------------------------------------------------ Makes the search button blue, more closely matching other entry button applications. The second block lightens the font color so it works with the background. 2018-01-24.*/ .sm-user-ui .sm-search-form .sm-button.sm-button-skin-default, .sm-user-ui .sm-search-form .sm-button.sm-button-skin-default[disabled] { background: #001785; } .sm-user-ui .sm-button.sm-search-form-submit.sm-button-skin-default[disabled] { color: #6D6D6D; } /* SEARCH BOX IN LOGGED-OUT HEADER */ /* ------------------------------- */ /* Darker outline than default 2020-11-26 */ .sm-user-ui .sm-page-header-search .sm-form-field-text-input { border-color: grey; } /* Background. 2020-08-13 */ .sm-user-ui .sm-page-header-search .sm-form-field-text-input:hover { background:#cfcfcf; } /* LOGGED-IN HEADER SPACING */ /* --------------------------*/ /* For light background galleries, and only these, no little extra space above the header line seems OK. 2020-11-26*/ .sm-user-ui .sm-user-owner #sm-page-header .sm-page-header { padding-top: 0px; }

CSS Code Attached to the Gallery Theme

/* Latest update 5 December 2020 -- Small color change -- (1 December: New variable-based approach to colors moves most of the code to the header css) /* LOGGED IN HEADER COLORS --------------------------- /* Variables only -- Code is in the Entire Site - Header CSS /* This is a dark background theme, and these values are appropriate for that. The page background for this theme is rgb(69,69,69). /* The three header lines are a bit darker. The original color logic had rgba(0,0,0,0.10), rgba(0,0,0,0.15), and rgba(0,0,0,0.20) /* for the first three but the colors here are slightly darker. They would have been rgb(62,62,62), rgb(59,59,59), and rgb(55,55,55). /* 2020-12-01. One color change 2020-12-02. Variable renaming 2020-12-03. */ :root {--li-header-bkg-color: rgb(56,56,56)} /* Top header bar background Was rgb(28,29,31) #1c1d1f I use this for my logged-out header too */ :root {--li-header-section-bkg-color: rgb(51,51,51)} /* Section bar (2nd header line) bkg Was rgb(28,29,31 #1c1d1f A bit darker than the above */ :root {--li-header-status-bkg-color: rgb(44,46,49)} /* Status bar (3rd line) background Was rgb(44,46,49) #2c2e31 Another small step darker */ :root {--li-header-text-color: lightgrey} /* Text Was white Lightgrey is rgb(211,211,211) */ :root {--li-header-hover-bkg-color: rgb(95,95,95)} /* Text background on hover (highlight) Was rgb(36,27,40) #242528 and original menus stayed transparent */ :root {--li-header-disabled-text-color: dimgrey} /* Disabled text Was rgb(84,87,93) #54575d Dimgrey is rgb(105,105,105) */ :root {--li-header-upload-icon-color: white} /* Upload icon Was white */ :root {--li-header-upload-hover-bkg-color: #6eb800} /* Upload button bkg on hover (highlight) Was rgb(129,214,0) #81d600 I like #6eb800 or the -hover-bkg-color */ :root {--li-header-active-link-color: #81d600} /* Active item [header bar left] Was rgb(129,214,0) #81d600 use a green or the -text-color */ :root {--li-header-active-link-weight: normal} /* Active item [header left] Was normal use either normal or bold */ :root {--li-header-dropdown-border-color: dimgrey} /* Drop-down panel border Was rgb(60,62,67) #3c3e43 maybe use the -disabled-text-color */ :root {--li-header-Smugmug-logo-fill-color: white} /* SmugMug logo text (header left) fill Was white Use white or #212121 */ /* LIGHTBOX VERSION 2 --------------------- /* Reset Lightbox background color to be a bit darker than the theme dark color 2019-08-17*/ .sm-user-ui.sm-user-overlay-container .sm-modal-mask.sm-lightbox-v2-modal-mask[data-opacity="opaque"], .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-navbar, .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-sidebar { background-color: #242526; } /* In the left side navbar, de-emphasize buttons not selected, but highlight the selected one by making the icon pure white. This provides a bit more of a visual cue as to what's going on. It also adds a guide on how to close the information panel. Only for desktop, not mobile in landscape mode. 2018-08-17*/ @media (min-width:961px) { .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-navbar .sm-lightbox-v2-primary-controls-list button.sm-button { color: #989ba2; } .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-navbar .sm-lightbox-v2-primary-controls-list button.sm-button[data-selected="true"] { color: white; } } /* Adjust the caption color to increase emphasis and visual focus to this section. 2019-08-18*/ .sm-user-ui .sm-lightbox-v2 .sm-image-metadata-caption { color: white; } /* Adjust color on all secondary text in the information sidebar (all except the title, caption) to a light gray. This de-emphasizes this section so as to emphasize the title and caption. A little brigher for mobile. 2019-08-30*/ .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-sidebar .sm-keywords a, .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-sidebar p.sm-image-metadata-attribution, .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-sidebar p.sm-image-metadata-attribution a, .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-sidebar .sm-imageinfo-label, .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-sidebar .sm-imageinfo-value, .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-sidebar button, .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-sidebar h5, .sm-user-owner.sm-user-owner .sm-lightbox-v2 .sm-imageinfo-advanced-btn span{ color: #989ba2; } @media (max-width:960px) { .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-sidebar .sm-keywords a, .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-sidebar p.sm-image-metadata-attribution, .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-sidebar p.sm-image-metadata-attribution a, .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-sidebar .sm-imageinfo-label, .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-sidebar .sm-imageinfo-value, .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-sidebar h5, .sm-user-owner.sm-user-owner .sm-lightbox-v2 .sm-imageinfo-advanced-btn span{ color: #c0c0c0; } }

CSS Code Attached to the Enjoy Theme used on various versions of the Enjoy Page

/* Latest update 22 December 2020 -- Dim color on slideshow control icons -- (1 December: New variable-based approach to colors moves most of the code to the header css plus some corrections to opacity handling.) /* The logged-in header follows the gallery theme colors with opacity reductions. That seemed more straightforward than introducing a bunch of transformed colors. The sidebar and logged-out header follow the theme's defined colors which themselves produce less contrast and do not require opacity reduction. The sidebar logo icon and the SmugMug logo text need opacity reduction both logged-in and -out. /* LOGGED IN HEADER COLORS --------------------------- /* Variables only -- Code is in the Entire Site - Header CSS This is a dark background theme with values identical to those in gallery theme with the exception of the the third. The status bar, including the background, recieves the 0.4 opacity. The values there, rgb(7,12,19) are computed to give a final color of rgb(44,46,49) -- same as the gallery theme -- after applying that opacity against the theme page background color of rgb(69,69,69). This uses Final-element color = (element color)(element opacity) + (background color)(1-element opacity) So, taking the blue channel as an example, the desired 49 ~ 19*0.4 + 69*0.6. Last update 2020-12-01. */ :root {--li-header-bkg-color: rgb(56,56,56)} /* Top header bar background Was rgb(28,29,31) #1c1d1f I use this for my logged-out header too */ :root {--li-header-section-bkg-color: rgb(51,51,51)} /* Section bar (2nd header line) bkg Was rgb(28,29,31 #1c1d1f A bit darker than the above */ :root {--li-header-status-bkg-color: rgb(7,12,19)} /* Status bar (3rd line) background Was rgb(44,46,49) #2c2e31 Another small step darker */ :root {--li-header-text-color: lightgrey} /* Text Was white Lightgrey is rgb(211,211,211) */ :root {--li-header-hover-bkg-color: rgb(95,95,95)} /* Text background on hover (highlight) Was rgb(36,27,40) #242528 and original menus stayed transparent */ :root {--li-header-disabled-text-color: dimgrey} /* Disabled text Was rgb(84,87,93) #54575d Dimgrey is rgb(105,105,105) */ :root {--li-header-upload-icon-color: white} /* Upload icon Was white */ :root {--li-header-upload-hover-bkg-color: #6eb800} /* Upload button bkg on hover (highlight) Was rgb(129,214,0) #81d600 I like #6eb800 or the -hover-bkg-color */ :root {--li-header-active-link-color: #81d600} /* Active item [header bar left] Was rgb(129,214,0) #81d600 use a green or the -text-color */ :root {--li-header-active-link-weight: normal} /* Active item [header left] Was normal use either normal or bold */ :root {--li-header-dropdown-border-color: dimgrey} /* Drop-down panel border Was rgb(60,62,67) #3c3e43 maybe use the disabled-text-color */ :root {--li-header-Smugmug-logo-fill-color: white} /* SmugMug logo text (header left) fill Was white Use white or #212121 */ /* OPACITY REDUCTIONS ON LOGGED-IN HEADER ELEMENTS AND LOGOs */ /* --------------------------------------------------------- */ /* Header bar. Do not hide dropdowns. Need to work carefully around the details of the account button structure, 2020-11-30. */ .sm-user-ui .sm-user-owner:not(.sm-page-edit) .sm-page-header .sm-button, .sm-user-ui .sm-user-owner:not(.sm-page-edit) .sm-page-header .sm-component-menu-item:not(.sm-page-header-navitem-account-button), .sm-user-ui .sm-user-owner:not(.sm-page-edit) .sm-page-header .sm-page-header-navitem-account-button .sm-page-header-account-avatar-wrapper, .sm-user-ui .sm-user-owner:not(.sm-page-edit) .sm-page-header .sm-page-header-navitem-account-button .sm-icon { Opacity:0.4; } /* Section bar title (at left) and regular buttons 2020-08-13. */ .sm-user-ui .sm-page-header-section-bar h1, .sm-user-owner:not(.sm-page-edit) .sm-page-header-section-bar .sm-button.sm-button-skin-default { Opacity:0.4; } /* Status bar. 2020-09-11. */ .sm-user-ui .sm-user-owner:not(.sm-page-edit) .sm-node-status { Opacity: 0.4; } /* Dims the SmugMug logo text and sidebar user logo images plus the search box on the logged-out header. Note the avatar gets dinned above. 2020-11-30.*/ #sm-page-header .sm-logo-link, .sm-page-widget-logo-img { opacity:0.4; } /* SLIDESHOW CONTROL ICONS */ /*-------------------------*/ /* Dims the control icons in slideshows. Introduced 2020-12-22 when the play button was turned on for the Enjoy slideshows. */ .sm-user-ui .sm-slideshow .sm-button.sm-button-skin-default .sm-fonticon { color: #888888; }

CSS Code Attached to the Pt Reyes Light Station - Dec 29 2017 Gallery

/* SmugMug provides no way to pull a cover image, the one used along with the gallery title and description up at the top of the age, from any place except the gallery. One cannot pull the cover image from a video. For this gallery, I wanted a cover image that came from a video or a still photo that would otherwise be redundant with it. I've inserted a still photo for use as the cover image in the gallery and then applied the code below to hide it and its caption. Inserted 2018-01-01, updated 2018-01-05*/ a[href$="i-SWncb5Q"] { display:none; } a[href$="i-SWncb5Q"] + div { display:none!important; }

CSS Code Attached to the 1/31/21 - Mt Diablo - Back and Donner Cyns Gallery

/* Adjusts the text blocks under "A discussion of hybrid oaks" from three columns in wide screens down to one column on narrower ones. This normally happens in mobile mode. This code does so for intermediate widths. 2021-02-04. */ @media (max-width:1520px) and (min-width:737px) { .sm-page-layout-column.yui3-u { width:100% !important; } }

CSS Code Attached to the Featured Galleries Page

/* RESPONSIVE DESIGN FOR THE BREADCRUMBS AND UPDATE NOTICE. The basic web display has these two are side by side with the former taking 40% of the screen width and the latter 60%. For mobile widths, the two are stacked vertically, with both getting all the screen width. There are intermediate widths where vertical stacking / 100% width is needed to avoid interference. This does so. 2020-03-10.*/ @media (max-width:1260px) and (min-width:737px) { .sm-page-layout-column.yui3-u[style="width: 40%;"] { width: 100%!important; } .sm-page-layout-column.yui3-u[style="width: 60%;"] { width: 100%!important; } } /* ASSURE THE BASIC DISPLAY HAS 2 OR 4 GALLERIES ACROSS. If SM wants to place three or five gallery icons across the page, this adjusts so there are four. The result is a display of 8 featured galleries showing in two rows of four. On narrow screens, the display reverts to rows of two (or even a column of one). The default size is such than on many phones / mobile devices the display comes out with two columns. Inserted 2016, last adjusted 2017-12-28.*/ .sm-page-widget-nodes .sm-tiles-grid.sm-tiles-col-3 .sm-tile-wrapper { width:25%; } .sm-page-widget-nodes .sm-tiles-grid.sm-tiles-col-5 .sm-tile-wrapper { width:25%; } .sm-page-widget-nodes .sm-tiles-grid.sm-tiles-col-6 .sm-tile-wrapper { width:25%; } .sm-page-widget-galleries .sm-tiles-grid.sm-tiles-col-8 .sm-tile-wrapper { width:9.09%; } /* SHOW A SPECIAL "IN PROCESS" BLOCK WHEN LOGGED IN. When logged in, a gallery display widget for "in process" and active test galleries shows below the main featured galleries list. When logged out, this hides that display. This also justifies the entries to the right. This makes use of the different display type for that list. 2019-11-30.*/ .sm-tiles-info-cover .sm-tiles-list { display:none; } .sm-user-loggedin.sm-user-owner .sm-tiles-info-cover .sm-tiles-list { display:flex; justify-content:flex-end; } /* BREADCRUMB Shorten breadcrumb to not include "Infrastructure" in the path. 2020-06-03. Introduced earlier but incorrectly. */ .sm-page-widget-2588539 .sm-breadcrumbs li:nth-child(2) {display:none }

CSS Code Attached to the Photo Library Folder

/* Adds a border to the By Topic block, effectively supplying a vertical bar separating it from the By Year block. Added 2017-01-12, updated 2020-02-23*/ .sm-page-widget-27476227 { border-right: 2px solid #AAAAAA; } /* Shows Site Management folders when logged in, not otherwise. 2020-02-23*/ .sm-page-widget-27517992 { display:none; } .sm-user-loggedin.sm-user-owner .sm-page-widget-27517992 { display:block; }

CSS Code Attached to the About Me Page

/* Expands the picture and text widgets text to full width when the screen gets moderately narrow, stacking them one above the other. This normally happens in mobile mode, but this makes it happen up to fairly intermediate widths. Side by side only works on a fairly wide screen. Unfortunately, the width for the blocks is set inline in a div above the ones with the specific class number. I have to apply the width to the very general class. That works with only two items in the center part of the page. 2017-01-12, min-width adjusted 2017-12-11. */ @media (max-width:1260px) and (min-width:737px) { .sm-page-layout-column.yui3-u { width:100% !important; } } /* This cleans up the text on this page. It uses the text widget rather than an html block so there are very limited controls. in the block itself. 2017-01-13.*/ .sm-page-widget-16893778 span { font-size:19px !important } .sm-page-widget-16893778 { line-height:1.2; }

CSS Code Attached to the Tools & Notes Page

/* This is expands the information text (the "notes") to full width when the screen gets narrow, although it defaults to SM for mobile widths. That pushes the picture down to below the text. In normal (wide enough screen) operation, the information text and the picture are in blocks taking 65% and 35% of the width beyond the sidebar respectively. The 65% width is set inline to a div without a specific identifying number, but for this simple a page, using a very general class specifier works to reset it. 2017-01-13, most recent adjustment 2018-12-06. Text updated 2020-02-23 */ @media (max-width:1365px) and (min-width:737px) { .sm-page-layout-column.yui3-u { width:100% !important } }

CSS Code Attached to the Site Mgt Page

/* Arranges extra icons across on the nodes widget Ref: http://dgrin.com/showthread.php?t=243435 (Lamah again!) Applied to the new Site Mgt page 2016-12-31. Latest mod 2020-11-29 */ @media only screen and (min-width: 1000px) { .sm-page-widget-nodes .sm-tiles-grid .sm-tiles-list .sm-tile-wrapper { width:25%; } .sm-page-widget-nodes .sm-tile-title { font-size:14px; } } @media only screen and (min-width: 1440px) { .sm-page-widget-nodes .sm-tiles-grid .sm-tiles-list .sm-tile-wrapper { width:12.5%; } } @media only screen and (min-width: 1720px) { .sm-page-widget-nodes .sm-tiles-grid .sm-tiles-list .sm-tile-wrapper { width:10%; } }

CSS Code Attached to the Keyword Page

/* Adjusts keyword display. Last adjustment 2017-01-24 (to add comments).*/ .sm-keywords-list { line-height:24px; } .sm-keywords-list a { font-size:16px; }

CSS Code Attached to the 404 Page

/*This manages the text block on the 404 page. Centered. Constrained width for larger desktop screens. Note the text block has 24px left and right margins. Updated 2020-03-11*/ .sm-page-widget.sm-page-widget-17001549 { max-width: 824px; margin-left: auto; margin-right: auto; font-size: 17px; text-align: center; }

CSS Code Attached to the Search Page

/* Search Page CSS /* Latest update 25 February 2021 /* -- Thumbnails on photo/video searches now show with original aspect ratio /* -- Comment updates /* REFORMATING IN DESKTOP MODE */ @media (min-width:737px) { /* This toggles an extra sidebar message off in when not in mobile mode. That message warns of incomplete results. Not sure when originally placed. Updated 2020-06-03.*/ .sm-user-ui .sm-page-widget-20272174 { display:none; } /* Puts a bit of margin around the results section of the search page in desktop mode. Added 2013-11-01. Moved here from the Entire Site - Misc CSS block 2020-07-25. Updated to not apply in mobile mode 2020-07-26.*/ .sm-search { margin:0px 24px; } /* Shows results uncropped, with original aspect ratio. Inserted 2020-07-25, then commented out. Re-applied 2021-02-25. Published on Dgrin https://dgrin.com/discussion/comment/2108856*/ .sm-user-ui .sm-search-result-img { background-size:contain; } /* The first group adds margin to all search images, including the pop-up images. That last doesn't look right, so the second block of code undoes the first in that case. Last content update 2020-07-25. Updated to not apply in mobile mode 2020-07-26. Published on Dgrin https://dgrin.com/discussion/comment/2108856*/ .sm-search-result-img { margin:12px; } .sm-user-ui .yui3-overlay-content .sm-search-result-img { margin:0px; } } /* SPECIAL HANDLING OF SEARCHES INVOLVING FOLDERS, GALLERIES, OR PAGES */ /* For these groups, this enlarges the search result thumbnails, makes them rectanglar, moves the title beneath, and turns off the popup. No change for searches of photos or videos. Small thumbnails seem best for these since there can be lots of results. And for these, the pop-up is the only way to see the source gallery. The mechanism for separating out photo and video searches is indirect: it looks at the link to the found items. The url for photos and videos (only) end with .../i-xxxxxxx where the x's are replaces by various characters. The selector keys on that pattern. At one time I restricted most to the logged-in owner. As of 2020-07-26, it is now applied generally. Limited to larger screeens: bigger thumbnails don't make sense on smaller screens and the handling of title information is different there. Original posting 2020-06-03, modified 2020-07-26. A variation on the first block (only) was published on Dgrin Dgrin https://dgrin.com/discussion/comment/2108856*/ @media (min-width:737px) { /* Expand the thumbnails and give a larger margin above and below*/ .sm-user-ui .sm-search-tile:not([data-url*="/i-"]), .sm-user-ui .sm-search-tile:not([data-url*="/i-"]) .sm-search-result-img { width: 400px; height: 300px; margin: 36px 12px 36px 12px; } /* Move the info line down and clean up the background. Photos and videos have no info line in the basic display, so no attribute selector is needed here. Note the font-size and text-align (but not the other two) also gets applied to pop-ups for photos and videos. Font size and alignment added 2020-07-26*/ .sm-user-ui .sm-search-tile-info { bottom:-30px; background-color: transparent; font-size:16px; text-align:center; } /* Turn off the pop-up for folders, galleries, and pages.*/ .sm-user-ui .sm-search-tile-overlay .sm-search-tile:not([data-url*="/i-"]) { display:none; } /* Lighten the background on the info line for unsupressed popups.*/ .sm-search-tile-overlay .sm-search-tile .sm-search-tile-info { background-color: rgba(207,207,207,0.8); } } /* Make sure the sidebar doesn't cover up a corner of the photo/video pop-up. 2020-06-03 */ .sm-search-tile-overlay { z-index:3!important; } /* FIX A RENDERING PROBLEM FOR F/G/P TITLES IN CHROME */ /* The SM use of display:inline-block for titles on galleries, folders, and pages leads to rendering problems on Chrome (but not Firefox) when the title exceeds the available space. The title doesn't show. This fixes that: all works with making this p display inline. I'm not 100% sure of the cause, but I have a working guess. I think it's an interaction with the blank <span> just above and the space computation with the ellipsis. Chrome concludes that with the ellipsis and span, this element as an inline-block won't fit, so it's pushing it down a line, and with nowrap on the container, it disappears. Oddly, it concludes it will fit if it's a block, and of course, the point is moot for inline. Firefox does the space computation just a little different and avoids this. At least that's a guess. First cut 2020-06-05. Simplified 2020-06-28 Posted on Dgrin: https://dgrin.com/discussion/comment/2107981 */ .sm-search-tile-info p { display:inline; }

CSS Code Attached to this Site Design Page

/* Adjusts font size on the big text box. It was done with the text widget, which leaves some very ugly HTML that puts the font size in a separate style box for each individual <span>. This globally adjusts. Some day I'll convert that into a big HTML block, but with all the links, it will be a big undertaking. 2020-03-14 */ .sm-page-widget-16913929 span { font-size: 18px !important; line-height: 23px !important; } /* Two columns on wide screens. 2020-03-14*/ @media (min-width:1600px) { .sm-page-widget-16913929 { column-count:2; column-gap:48px; } } /* CSS code for use with Notepad ++ generated files Inserted 12-29-2014, last edited 12-31-2014, Applied to new Site Design Page but not changed 2017-01*/ /* Default */ .sc0 { color: #004080; font-family: monospace; line-height:1.15; font-size: 12pt; font-weight: bold; } /* Tag - purple */ .sc1 { color: #5000A0; font-family: monospace; line-height:1.15; font-size: 12pt; font-weight: bold; } /* Class - blue */ .sc2 { color: #0008AA; font-family: monospace; line-height:1.15; font-size: 12pt; font-weight: bold; } /* Pseudo-class - purple italic */ .sc3 { color: #5000A0; font-family: monospace; line-height:1.15; font-size: 12pt; font-weight: bold; font-style: italic; } /* Unknown Pseudo-class - purple italic */ .sc4 { color: #5000A0; font-family: monospace; line-height:1.15; font-size: 12pt; font-weight: bold; font-style: italic; } /* Operator - black */ .sc5 { color: #000000; font-family: monospace; line-height:1.15; font-size: 12pt; font-weight: bold; } /* Property (Identifier) - black */ .sc6 { color: #000000; font-family: monospace; line-height:1.15; font-size: 12pt; font-weight: bold; } /* Unidentified Property (Identifier) - black italic */ .sc7 { color: #000000; font-family: monospace; line-height:1.15; font-size: 12pt; font-style: italic; } /* Value - pink*/ .sc8 { color: #9B0990; font-family: monospace; line-height:1.15; font-size: 12pt; font-weight: bold; } /* Comment - dk green italic */ .sc9 { color: #004020; font-family: "Consolas"; line-height:1.15; font-size: 12pt; font-weight: 100; font-style: italic; } /* ID - purple */ .sc10 { color: #5000A0; font-family: monospace; line-height:1.15; font-size: 12pt; font-weight: bold; } /* Important - dark red bold italic */ .sc11 { color: #C00000; font-family: "Consolas"; line-height:1.15; font-size: 12pt; font-weight: bold; font-style: italic; } /* Directive - black */ .sc12 { color: #000000; font-family: monospace; line-height:1.15; font-size: 12pt; font-weight: bold; } /* HTML attribute value string (inside attribute selector) - brown */ .sc13 {color: #502800; font-family: monospace; line-height:1.15; font-size: 12pt; font-weight: bold; } /* @ HTMl attribute (inside attribute selector) - brown */ .sc16 { color: #502800; font-family: monospace; line-height:1.15; font-size: 12pt; font-weight: bold; } /* Query - brown */ .sc22 { color: #502800; font-family: monospace; line-height:1.15; font-size: 12pt; font-weight: bold; } /* Link (inside comments) - dk green italic */ .sc73 { color: #004020; font-family: "Consolas"; line-height:1.15; font-size: 12pt; font-weight: 100; font-style: italic; }

Powered by SmugMug Owner Log In