Site Design - Jim Ringland

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

About the Site Design (for other SmugMug site owners)

This site's layout is based on the SmugMug's Spartan design but with considerable customization. The sidebars have been separately constructed for individual pages or page types to be context-sensitive.  The homepage, folder pages, 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 Tips & Tools 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.  Doing so means the vertical alignment is the same logged in and logged out.  The header provides easy access to the search and login functions.  On the Home page and the Enjoy slideshow page, where the basic header would distract, I have custom modifications to limit its intrusiveness. 

Browse All is a folder that contains the regular photo galleries.  Putting all the pictures in the "Browse All" folder, rather than at the root level in the database, makes the breadcrumbs lead back to the Browse All page, which serves as a table of contents.  (SmugMug's nominal table of contents page, the Browse page, lives outside the breadcrumb sequence.)  The "Browse by Topic" section of that folder's page reflects the structuring of the gallery database.  The folder displays use "Items I Choose" folder/gallery/page blocks where necessary so I can interleave galleries and sub-folders.  In other cases, I get by with simple "Current Location" gallery blocks.  The "Browse By Year" section has folders that show galleries using "Items I Choose"  folder/gallery/page navigation content blocks that point to the appropriate galleries in the Topic folders.  No galleries actually live inside those Year folders!  The Plant Families folder (also inside Browse All) contains keyword-based smart galleries that collect pictures from the regular galleries. 

Two special galleries live at the root level of the database. More Nice Pictures has photos that have no home in a regular gallery: extra pictures (from 2010 and before) referenced in the Plant Families section but not elsewhere, pictures used in a second place (e.g., a smart gallery) but needing an alternate caption there, special crops for thumbnails or the Enjoy page, and the panorama pictures.  Splash has the images that appear on the home page.  These have versions in the regular galleries, but are specially cropped and have a little extra sharpening.

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 provides a useful way 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. 

There are many CSS mods.  Most are local in scope, adjusting font sizes, margins and spacing, etc.  A few go farther, addressing operational behavior or removing unwanted elements.  Still, the goal of the CSS is to make a design created with the standard SmugMug tools work and look better, not to create something completely different. 

The listings below show code I've applied to the entire site, to the default (modified Spartan) and Gallery themes, and to seven specific pages.  Most of the CSS is at the site level: all "structural" adjustments go here.  The theme CSS entries only adjust font color.  Colors are set by and are specific to 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.  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 source is McFarland's book on CSS in the O'Reilly Missing Manual Series.  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.  The color-highlighting tags in the listings below were generated using Notepad++, with colors and fonts of my own choosing.


CSS Code Attached to the Entire Site

/* Latest update 13 December 2017 */ /* HEADER --------- Several separate changes here, although some are connected. First, remove the "PHOTO SHARING" text that appears to users (logged out), making for a cleaner header bar. Clicking the SmugMug logo provides the same function. 2016-02-14, min-width adjusted 2017-12-11.*/ @Media (min-width:737px) { .yui3-u.sm-page-header-navitem.sm-page-header-navitem-mainhost { visibility: hidden; } } /* Second, remove the header line advertisement that SM sometimes put in. Added 2013, removed when the advertisement went away, restored 2016-11-23.*/ .sm-page-header-navitem-gosm { display:none; } /* Third, make the home page header very clean and simple, by making the background transparent, removing label text (extended to the login button on all pages, 2017-02-22), and enhancing the visibility of the icons and typed-in search text by adding some white shadow. This last helps for dark-background splash screens. All this puts more emphasis on the splash photo and less on the controls. Last update 2017-02-22.*/ .sm-page-home .sm-page-header { background-color:rgba(0,0,0,0); } .sm-page-home .sm-page-header .sm-button-label, .sm-page-header .sm-login-button .sm-button-label { display:none; } .sm-page-home .sm-page-header .sm-page-header-navitem .sm-fonticon, .sm-page-home .sm-page-header .sm-page-header-navitem-search .sm-form-field-text-input { text-shadow: 0 0 3px #FFF , 0 0 8px #FFF; font-weight: 500; } /* Fourth, move the SmugMug logo over a little, centering the green smile over the center of sidebar. This helps the visual balance on dark homepage backgrounds when the text doesn't show much. Having a margin at the left, like other screen elements, helps on lighter backgrounds. 2017-01-16*/ .sm-logo-link { margin-left:32px; } /* Finally, clean up the help icon. Changes on 2017-09-27 introduced some design elements I find unnecessary and unattractive: a line separating the ? button from the search box and a text "SUPPORT" label on the other side of the ? button. The last is acceptable when logged in but not when logged out. In the latter case it matches nothing in the header and defeats the generally minimalist feeling I'm seeking up there. This removes all that. 2017-09-30.*/ .sm-page-header .sm-page-header-navitem-help { border-left-width: 0px; border-left-style: none; margin-left: 0px; } .sm-button .sm-fonticon.sm-fonticon-HelpEncircled + .sm-button-label { display: none; } /* STATUS LINE -------------- The status line is the small text line that is inserted just below the header line when logged in to identify folders or galleries that are unlisted or protected. That insertion means the vertical layout when logged in is different from that for an un-logged-in regular user. This moves the status text into a blank space in the SM header and closes up the space. With this logged-in and -out views align. 2016-09-12*/ .sm-user-loggedin.sm-user-owner .sm-node-status { background: rgba(0,0,0,0); margin-top: -36px; margin-bottom: 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 2017-01-02 to add the z-index to support the then-new Info > flyout). Min-width adjusted 2017-12-11. */ @Media (min-width:737px) and (min-height:740px) { .sm-user-ui .sm-page-layout-sitetemplate .sm-page-layout > .sm-page-layout-region > .sm-page-layout-region-left { position:fixed; 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; } } /* NAV BAR (inside the sidebar) ------------------------------- Adjusts the spacing between items on the vertical nav bar. Added JTR 2013-08-26. Ref: http://www.dgrin.com/showthread.php?t=239756 Font size adjustment for new version of the Roboto font. Added JTR 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; } /* Moves the opened submenu box right 6 px. Latest adjustment 2017-01-27*/ .sm-page-widget-nav-toplink .yui3-menu.yui3-menu-vertical.yui3-menu-open { margin-left:6px; } /* 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 pinned. (See the SIDEBAR code above.) Inserted 2016-04-07, latest update 2016-04-08, min-width adjusted 2017-12-11. */ @Media (min-width:737px) { .sm-button.sm-page-scroll-to-top { left:80px; } } @Media (min-width:737px) and (min-height:740px) { .sm-button.sm-page-scroll-to-top { top:665px; bottom: inherit; } } /* Second case: narrower screens (screen width <= 670px)) 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; } } /* BREADCRUMBS -------------- This adjusts the small breadcrumb font size upwards, in response to Google's new Roboto font. Before it was 14px. JTR 2015-01-15, updated 2016-01-05*/ .sm-user-ui .sm-breadcrumb > a { font-size: 15px; } /* And this adjusts the large breadcrumb font downwards, making this more in line with other text on the pages. Added 2013-11-04. Modified 2015-01-05, 2017-09-02.*/ .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. The class there would be .sm-tiles-Th img.sm-image. 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.*/ .sm-page-widget-folders .sm-tile-title, .sm-page-widget-galleries .sm-tile-title, .sm-page-widget-nodes .sm-tile-title, .sm-page-widget-pages .sm-tile-title { font-size:17px; font-weight:400; } /* 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*/ .sm-tiles-grid.sm-tiles-info-after .sm-tile-info p { overflow: visible; line-height: 1.25em; max-height: 3em; } .sm-tiles-grid.sm-tiles-info-after .sm-tile-info-text { -webkit-line-clamp:3; } .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 just gone ahead and hidden it. It's redundant with the header and can cause unnecessary scroll bars in some cases (e.g., in SmugMug style galleries in some window sizes under Firefox). While SmugMug officially requires the footer, using the header would seem to address the same requirement. The following is from leftquark (http://www.aaronmphotography.com/Customizations/Sitewide/Remove-SmugMug-Footer) who cites Lamah as his source. Added here 2016-02-18. */ .sm-page-powered-by { overflow:hidden; height:0; } /* SEARCH PAGE -------------- Puts a bit of margin around the results section of the search page and around each icon. Added 2013-11-01 and 2013-12-13.*/ .sm-search { margin:24px; } .sm-search-result-img { margin:12px; } /* 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; } /*************************************************************/ /**** Galleries (not including the Lightbox-specific code ****/ /*************************************************************/ /* 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; } /* INFO BOX (SM STYLE GALLERIES and LIGHTBOX) --------------------------------------------- This is the pop-up that shows EXIF and other information. I've adjusted the height setting to remove scroll bars. Initial version 2015-03-31. Last update 2016-07-02. */ .sm-panel-imageinfo:not(.sm-imageinfo-expanded):not(.sm-imageinfo-tabs) .sm-panel-body { height: 420px; } /* GALLERY COVER (HEADER) 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-03 -04 -05 or -06 except as noted. /* GALLERY COVER -- INFORMATION BOX, BOTH WITH AND WITHOUT IMAGE IN USE First, cover information box spacing adjustments. (This is the container for the title and description.) The first block below removes extra margin that is only inserted for one particular data-size parameter. I'm not sure why it's there, but it doesn't seem necessary. The galleries look better to me without. The second block adjusts spacing because of my hiding the "Download All" and "Buy Photos" buttons. In this block, first class sequence handles narrow screens where the buy button is automatically off; the second handles wider screens where it could be on if I wasn't hiding it.*/ .sm-user-ui .sm-gallery-content[data-size="medium"] .sm-gallery-header { margin: 0; } .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:60px; } /* 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 the future design using a cover picture. 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.)*/ .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-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 { font-size: 15px; line-height: 1.3em; padding-top: 12px; } /* GALLERY COVER -- ADJUSTMENTS WHEN 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 and description text. Last adjustment 2017-01-12*/ .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"] .sm-gallery-cover-description { font-size: 15px; 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); } .sm-user-ui .sm-gallery-cover[data-show-image="true"] .sm-gallery-cover-description /* GALLERY COVER -- ADJUSTMENTS TO BUTTONS USED WITH THE COVER Fourth, adjustments to the buttons that show with the cover (the header buttons). The first block inserts a drop-shadow to match the "Jump to top" button when there is no cover image. The second block adjusts the spacing of the buttons to fit better. The third block turns off the buy-button that otherwise would show when I'm logged in. The fourth 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 2016-12-08 to reflect SM class definition changes when adjustment capability came in. */ .sm-gallery-cover[data-show-image="false"] .sm-gallery-cover-buttons .sm-button { box-shadow:3px 3px 9px rgba(0,0,0,0.5); } .sm-gallery-cover .sm-gallery-cover-buttons .sm-button { font-size:12px; line-height: 32px; margin-left: 4px; padding: 4px 8px 4px 8px; } .sm-gallery-cover .sm-gallery-cover-buttons .sm-gallery-cover-buy-button { display:none; } .sm-gallery-cover-download-button { display: none; } /* CAPTION ADJUSTMENTS IN SM STYLE GALLERIES -------------------------------------------- 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; } /* 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 2015-09-29. 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)*/ .sm-tiles-row-organic.sm-tiles-info-after .sm-tile-info p { overflow: auto; max-height: 6.7em; font-size:15px; } .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; } /* VIMEO EMBED WIDGET SIZING ---------------------------- /* Makes Vimeo video embeds set at 315p (one of the SM options) expandable to 540p in steps, depending on what fits. This is motivated by my wanting a 540p size. SmugMug does not offer that in their implementation of the Vimeo embed widget. SmugMug only offers embed sizes of "scale to fit", 315p, 360p, 480p, and 720p (no 1080p!), even though 540p is a "native" Vimeo size and one of the options for SmugMug's own video widget. This essentially hijacks one of the SmugMug widget size options. JTR 2017-12-12.*/ @media (min-width:945px) { iframe[height="315"][src*="vimeo"] { width:640px; height:360px; } } @media (min-width:1025px) { iframe[height="315"][src*="vimeo"] { width:720px; height:405px; } } @media (min-width:1105px) { iframe[height="315"][src*="vimeo"] { width:800px; height:450px; } } @media (min-width:1190px) { iframe[height="315"][src*="vimeo"] { width:880px; height:495px; } } @media (min-width:1265px) { iframe[height="315"][src*="vimeo"] { width:960px; height:540px; } } /********************/ /***** Lightbox *****/ /********************/ /* CREATIVE COMMONS FLAG IN CAPTION Adds a simple flag for the Creative Commons license in the lightbox caption area, applied only to galleries that are not protected (and thus available for download). Added 2015-08-24, latest mod 2017-02-08*/ .sm-lightbox-basic:not(.sm-lightbox-protected) .sm-lightbox-keywords::after { content: " (CC BY-NC 4)"; white-space:nowrap; } /* REMOVE PENCIL ICONS IN THE PANEL These icons can mess up line spacing and look awkward. This removes them. I can still edit captions and keywords by clicking the placeholder text. Initial version 2014-03-29, updated 2014-05-05, 2015-03-25, and 2016-04-09.*/ .sm-lightbox-caption .sm-inlineedit-hover-button, .sm-lightbox-keywords .sm-inlineedit-hover-button { display:none; } /* CAPTION AND FOOTER SPACING/ALIGNMENT Sets the lightbox info box (and the title, caption, and keyword text inside) not to wrap until it runs out of space. The other two class lists support live editing. The default info box maxes out at 648 pixels wide, far less than the available space on a large monitor. The margin-right: 215px leaves space for the footer tool icons. The other paddings and heights keep elements well-spaced and reasonably aligned. If the screen is less than 736px the default behavior fills the footer and the icons change, so the default there are fine. Between 800 and 670px, SM lightbox behavior changes again and it seems easiest to just use the default there too Latest modification: 2017-01-27*/ @Media (min-width:801px) { .sm-lightbox-basic .sm-lightbox-ft-center .sm-lightbox-info, .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-title, .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-caption, .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-keywords, .sm-lightbox-basic .sm-lightbox-ft-center .sm-lightbox-info > div, .sm-lightbox-basic .sm-lightbox-ft-center .sm-lightbox-info > p { Max-width:none; } .sm-lightbox-basic .sm-lightbox-ft-center .sm-lightbox-info { margin-right:215px; padding: 10px 16px 5px; min-height:56px; } .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-panel { max-height:56px; } } /* CAPTION AND KEYWORD EDITING BUTTON ADJUSTMENTS When editing captions and keywords, this moves the OK/Cancel button pairs into better positions (to the right, not below). Added: 2014-03-29, latest adjustment for 801px width 2016-11-19*/ @Media (min-width:801px) { .sm-user-ui .sm-lightbox-basic .sm-inlineedit-plugged .sm-inlineedit-buttons { position:relative; float: right; } .sm-inlineedit-node.sm-lightbox-caption.sm-inlineedit-plugged .sm-inlineedit-buttons { bottom:70px; } .sm-inlineedit-node.sm-lightbox-keywords.sm-inlineedit-plugged .sm-inlineedit-buttons { bottom:40px; } } /* KEYWORD IN-LINE DISPLAY Display keywords in the lightbox footer but run them in-line with the caption. Various adjustments spacing and font display. Added 2014-03-29, although caption font size settings go back to 2013-09-26. Latest adjustment 2016-04-09.*/ .sm-user-ui .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-caption { display: inline; font-size: 11pt; margin-right:20px; } .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-keywords { display: inline; font-size: 9pt; float: right; margin-top: 5px; margin-bottom: 0; } .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-keywords .sm-fonticon { margin-top: -24px; } .sm-lightbox-basic .sm-lightbox-info [data-name="Keywords"] > a { margin-bottom:0; } /* HIDE THE FOOTER EXCEPT ON HOVER OR WHEN EDITING The footer contains slideshow button, caption, and icon list. Added 2015-03-30. Transition speed controls added 2015-04-01. Edited (plugged-node) situation flag added 2015-04-02*/ .sm-user-ui .sm-lightbox-basic .yui3-widget-ft { opacity: 0; -webkit-transition: 0.25s opacity; -moz-transition: 0.25s opacity; transition: 0.25s opacity; } .sm-user-ui .sm-lightbox-basic .yui3-widget-ft:hover, .sm-user-ui .sm-lightbox-has-plugged-node.yui3-widget-ft { opacity: inherit; } /* MAKE BACKGROUND FOR OTHER CONTROLS TRANSPARENT, THEN NEVER HIDE THEM Removes background on other controls (buttons for expand, close, next, and previous), then forces opacity to 1 so they are always present. Current version added 2015-03-31.*/ .sm-user-ui .sm-lightbox-basic .sm-lightbox-content .yui3-widget-hd .sm-lightbox-tools .sm-button, .sm-user-ui .sm-lightbox-basic .yui3-widget-hd .sm-lightbox-nav { background-color:rgba(59,59,59,0); } .sm-user-ui .sm-lightbox-basic .yui3-widget-hd { opacity: 1; } /* NO FOCUS RING FOR LIGHTBOX CONTROLS It's generally considered unwise to interrupt the focus highlighting since it guides keyboard-only users, but in the lightbox, much of what the keyboard users would tab through is hidden. Highlighted controls -- one of the few things that do show rings -- can interfere with the image. The following turns off focus rings for some browsers, including Chrome 41 and IE 10. This does not work in Firefox 36, but Firefox only inserts focus rings when it senses a user is navigating via keyboard tabs, not via the mouse clicks, so it's a non-issue there. Added 2015-03-31.*/ .sm-user-ui .sm-lightbox-basic .sm-lightbox-content .yui3-widget-hd .sm-lightbox-tools .sm-button:focus, .sm-user-ui .sm-lightbox-basic .yui3-widget-hd .sm-lightbox-nav .sm-button:focus { outline:0; } /* REMOVE THE LITTLE UP-AND-DOWN ARROW Removes the little up-and-down arrow in the caption area since it interferes with the full-width caption/keyword area. 2015-03-25.*/ .sm-lightbox-info-expand { visibility:hidden; } /* REMOVE BUY BUTTON This gets rid of a button I don't need, and which only appears when I'm logged in. Doing so saves space for more captions and keywords. Added 2015-10-01 */ .sm-lightbox-buy-button { display:none; } /* SIZES FLY-OUT MENU Three different types of changes here. First, some spacing adjustment. The first rule reduces the row spacing for the entries on the fly-out for the sizes button (S, M, L, XL, etc.). With the expanded sizes list, the menu seems too large and too unlike the Info > fly-out. A little extra above the top entry looks good: that's the second rule. Last update 2017-01-28*/ .yui3-menu-item > .yui3-menu-label[data-item-id^="ImageSize"] { padding: 3px 46px 3px 22px; } .yui3-menu-item > .yui3-menu-label[data-item-id="ImageSizeS"] { padding: 9px 46px 3px 22px; } /* These next three rules change words in the list. I thought the "Low Res" entry for the 3X size was not really appropriate in the context of screen displays. (It does make sense in the context of photo protection for printing,which is where the words came from.) So the third and fourth blocks replace the text. A little clarification on the last entry's text helps too: that's the fifth block. Last update 2017-01-28*/ .yui3-menu-item > .yui3-menu-label[data-item-id="ImageSizeX3"]{ font-size: 0.0001px; } .yui3-menu-item > .yui3-menu-label[data-item-id="ImageSizeX3"]:after { content:"2 Mpix (X3)"; font-size: 14px; } .yui3-menu-item > .yui3-menu-label[data-item-id="ImageSizeA"]:after { content:" (Default)"; } /* The last block extends the fly-out to the bottom of the page so it's not just "hanging in mid-air" when the panel vanishes ... but just for logged-out visitors. When active, the block below would add the padding to any header and footer flyout (but not the Info > flyout). Logged out, there are no others besides the sizes flyout since I don't enable the buy button. Logged in, the control menus seen by a logged-in owner would also get the extra padding below. There's no way I can see to target the sizes flyout separately from these. So the :not() specifier just removes the logged-in case altogether. Because of the limited class structure on these fly-outs, this relies strongly on HTML organization and is still very broad-brush. Last update 2017-01-30*/ .sm-page-gallery:not(.sm-user-loggedin) > .yui3-menu-open > .yui3-menu-children { padding-bottom:40px; }

CSS Code Attached the the default (modified Spartan) theme

/*Set lightbox font color to black Otherwise it would be a medium-dark gray Added 2013-08-27*/ .sm-user-ui .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-caption { color: rgb(0, 0, 0); } /*Set color of all underlined links. These show in Creative Commons sidebar entries, folder descriptions, and a few stray HTML blocks (e.g, on the Tips 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; }

CSS Code Attached to the Gallery Theme

/*Set lightbox font color Otherwise it defaults to #dedede Added 2014-03-22*/ .sm-user-ui .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-caption { color: #d0d0d0; } /*Carousel-related code moved to Entire Site CSS, 2017-01-02*/

CSS Code Attached to the Featured Galleries Page

/* If there are supposed to be three gallery icons across the page, adjust so there are four. This tends to make the display of 8 featured galleries show in two rows of four. On narrow screens, the display reverts to rows of two (or even a column of one). Inserted 2016, cleaned up 2017-01-24.*/ .sm-page-widget-nodes .sm-tiles-grid.sm-tiles-col-3 .sm-tile-wrapper { width:25%; }

CSS Code Attached to the Browse All Page

/* 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 2017-01-20*/ .sm-page-widget-2251210 { border-right: 2px solid #AAAAAA;} }

CSS Code Attached to the Enjoy Page

/* Dims the two logo images (red columbine) and the two SM images. Combined with the gray text, this visually de-emphasizes the sidebar and header. Sidebar image: 2013-10-03 Three Header images: 2013-11-16*/ .sm-page-widget-logo .sm-page-widget-logo-img { opacity:0.4; } .sm-header-account-avatar, .sm-logo, .sm-logo-badge { opacity:0.4; } /* Hides a site management sidebar entry when not logged in. Inserted 2017-04-09, commented out when link made public 2017-07-26. body:not(.sm-user-loggedin) .sm-page-widget-17742652 { display:none; }*/

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 Tips and Tools Page

/* Expands the Tips text to full width when the screen gets narrow (but not so narrow that the display goes into mobile mode.) That pushes the picture down to below the text. In normal (wide enough screen) operation the Tips text and the picture are in blocks taking 50% of the width beyond the sidebar. The 50% 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. 2017-01-13, min width adjusted 2017-12-11 */ @media (max-width:1100px) and (min-width:737px) { .sm-page-layout-column.yui3-u { width:100% !important } }

CSS Code Attached to the Site Mgt Page

/* Arranges 10 icons across on the nodes widget Ref: http://dgrin.com/showthread.php?t=243435 (Lamah again!) with adjustments for my own needs. Applied to the new Site Mgt page 2016-12-31 Latest mod 2017-12-14*/ @media only screen and (min-width: 960px) { .sm-page-widget-nodes .sm-tiles-grid .sm-tiles-list .sm-tile-wrapper { width:10%; } .sm-page-widget-nodes .sm-tile-title { font-size:14px; } }

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

Powered by SmugMug Log In