Site Design - Jim Ringland

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)

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 Notes & 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 when in desktop view and have removed the SmugMug footer.  Having a header means the vertical alignment is the same logged in and logged out.  The header provides easy access to the search and login functions.  In the desktop view, the header seems a reasonable design element.  On the Home page and the Enjoy slideshow page, where the basic header would distract, I have custom modifications to limit its intrusiveness.  I have also made a large number of custom modifications to tone down the ugly and visually intrusive logged-in header styling SmugMug introduced in March 2018.  In mobile mode, where the header seems more generally intrusive, I've removed it (except when logged in) and have restored the footer.

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

The listings below show code I've applied to the entire site, to the default (modified Spartan) and Gallery 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.  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.  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 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.

CSS Code Attached to the Entire Site

/* Latest update 29 May 2019 -- Inserted code for upcoming lightbox v2 -- Shown download buttons for OSC Joe Orr gallery /* HEADER --------- Several separate changes here, although some are connected. First of all, just remove the header in the mobile display when not logged in. It's an OK design element on the desktop (with the modifications below), but it's a space eater on a mobile. 2017-12-25*/ @Media (max-width: 736px) { .sm-page:not(.sm-user-loggedin) .sm-page-header { display:none; } } /* Remove the header line advertisement that SM sometimes put in. Added 2013, removed when the advertisement went away, restored 2016-11-23. Flickr blub removed 2018-04-20*/ .sm-page-header-navitem-gosm, .sm-page-header-navitem-flickr { display:none; } /* Move the SmugMug logo over a little, centering the green smile over the center of sidebar when not logged in. This helps the visual balance on dark homepage backgrounds when the text doesn't show much. When logged in, better to have the logo flush left to make space for the left menu section. 2018-03-09*/ .sm-page:not(.sm-user-loggedin) .sm-logo-link { margin-left:32px; } /* Remove bottom line on header 2013-03-09*/ .sm-user-ui .sm-page-header { border-bottom-style:none; } /* Next, a bunch of changes to the header while logged in. SM made the logged in header all black in March 2018. I prefer a less obtrusive color and one that more closely reflects the general visual feel of the the non-logged in view. The following moves the header to more gentle grays. The theme CSS items define header background to match the theme but the drop downs and icon colors are fixed. Make the left menu section with the update, organize, and customize buttons transparent. Adjust spacing. Get rid of the lables and angle brackets at the top level but not in the popouts below. Make icon black with a white halo background. 2018-04-05 */ .sm-user-loggedin .sm-page-header .sm-page-header-nav-left .sm-component-menu { background-color: rgba(0,0,0,0); margin-left:0; } .sm-user-loggedin .sm-page-header .sm-page-header-nav-left .sm-component-menu-item .sm-icon + .sm-component-menu-label, .sm-user-loggedin .sm-page-header .sm-page-header-nav-left .sm-component-menu-item { display:none; } .sm-user-loggedin .sm-page-header .sm-page-header-nav-left .sm-icon-AngleBracketRight { padding-left: 0; } .sm-user-loggedin .sm-page-header .sm-page-header-nav-left .sm-component-submenu .sm-component-menu-item .sm-icon + .sm-component-menu-label { display:inline; } .sm-user-loggedin .sm-page-header .sm-component-menu-item .sm-icon{ background: radial-gradient(closest-side at 50% 50%, white,transparent 110%); color:black; border: none; } @Media (max-width:1200px){ .sm-page-header-nav-left > .sm-component-menu > .sm-component-menu-item > .sm-component-menu-item-link > .sm-icon, .sm-page-header-nav-left > .sm-component-menu > .sm-component-menu-item > .sm-icon { background: radial-gradient(closest-side at 50% 50%, white,transparent 55%); } } .sm-page-header-nav-left > .sm-component-menu > .sm-component-menu-item > .sm-component-menu-item-link > .sm-icon{ border:none; } /* Some similar things are needed on the right side with the login avatar, search box, and help icon. Some of these need special adjustments to deal with backgrounds and get rid of some lables and extra icons. The mod Spartan theme also has text color adjustments for the search input box. Latest update 2018-04-05 */ .sm-user-loggedin .sm-page-header .sm-page-header-nav-right .sm-component-menu { background-color: rgba(0,0,0,0); margin-left:85px; } @Media (min-width: 737px) { .sm-user-loggedin .sm-page-header-navitem-account > .sm-component-menu-item { margin: 0; } } .sm-user-loggedin .sm-page-header-navitem-account:hover .sm-page-header-account-avatar-wrapper, .sm-user-loggedin .sm-page-header-navitem-account[data-user-menu-open="true"] .sm-page-header-account-avatar-wrapper { background:transparent; } .sm-user-loggedin .sm-page-header .sm-component-menu-item { display:none; } .sm-user-loggedin .sm-page-header-account-avatar-wrapper { border:none; } .sm-user-loggedin .sm-page-header .sm-button-header-support .sm-icon, .sm-user-loggedin .sm-page-header .sm-page-header-search .sm-icon, .sm-user-loggedin .sm-page-header-search-button{ background: radial-gradient(closest-side at 50% 50%, white,transparent 110%); color:black; border:none; } @Media (max-width: 1200px){ .sm-user-loggedin .sm-page-header-search-button{ background: radial-gradient(closest-side at 50% 50%, white,transparent 55%); } } .sm-user-loggedin .sm-page-header .sm-page-header-nav-right .sm-button-header-support { background-color:transparent; border:none; min-width:0; margin:0; padding: 0 15px; } .sm-button + .sm-button-label { display: none; } /* On both sides, use white text on dark gray (including when hovering) on the submenus. A little location adjustment too. 2018-03-08 */ .sm-user-loggedin .sm-page-header { margin-left:10px; background-color: dimgray; } .sm-user-loggedin .sm-page-header .sm-component-menu-item:hover:not([aria-disabled="true"]) > .sm-component-menu-item-link, .sm-user-loggedin .sm-page-header .sm-component-menu-item:hover { color:white; } /* Some special handling of the header when not logged in. Remove the help icon and move the search field over a bit so it isn't flush right. There are some color adjustments in the themes. 2018-03-08*/ .sm-page:not(.sm-user-loggedin) .sm-button-header-support { display:none; } .sm-page:not(.sm-user-loggedin) .sm-page-header-navitem-login + .sm-page-header-search { margin-right: 24px; } /* The home page. Make the header background transparent and remove the bottom line. 2018-03-08*/ .sm-user-ui .sm-page-home .sm-page-header { background-color:rgba(0,0,0,0); border-bottom-style:none; } .sm-nui .sm-page-header-search .sm-form-field-text-input { color:#000; border: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-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 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: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; } } /* 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 2018-12-07.*/ @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-5cMhRX .sm-page-layout-region-left div:nth-child(3), /*California Coast Range*/ .sm-page-node-8h4588 .sm-page-layout-region-left div:nth-child(3), /*Far Northern Califoria*/ .sm-page-node-WJ6ZQR .sm-page-layout-region-left div:nth-child(3), /*Farther Afield*/ .sm-page-node-ZcP74K .sm-page-layout-region-left div:nth-child(3), /*Sierra North*/ .sm-page-node-9TBWWX .sm-page-layout-region-left div:nth-child(3), /*Sierra South*/ .sm-page-node-gBJRkH .sm-page-layout-region-left div:nth-child(3), /*Yosemite*/ .sm-page-node-nrrS9k .sm-page-layout-region-left div:nth-child(3), /*SF Bay Area*/ .sm-page-node-bPCmhH .sm-page-layout-region-left div:nth-child(3), /*House and Garden*/ .sm-page-node-WkHQPc .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: 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-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, for desktop menus (which use .sm-page-widget-nav-popover), but not in mobile mode (which use don't) 2018-12-05 */ .sm-page-widget-nav-popover .sm-page-widget-nav-toplink:nth-child(5) { display:none; } /* 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 2018-03-27. */ @Media (min-width:737px) { { left:80px; max-width:135px; } } @Media (min-width:737px) and (min-height:765px) { { top:700px; 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:, code from Aaron Meyers at SmugMug, with some modifications. Added 2016-04-12, min-width adjusted 2017-12-11.*/ @media (max-width: 736px) { { padding: 4px; } .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, last updated 2018-01-05*/ .sm-user-ui .sm-breadcrumbs > 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 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:, which cites 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 { filter: brightness(109%); -webkit-filter:brightness(109%); } .sm-tiles-M { filter: brightness(106%); -webkit-filter:brightness(106%); } .sm-tiles-L { 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 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. */ .sm-tile-info p { overflow: visible; line-height: 1.25em; max-height: 3em; } .sm-tile-info-text { -webkit-line-clamp:3; } .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 when in desktop view and when logged in. In these cases, the header shows, so the footer is redundant. The latter 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 basic idea is from leftquark ( who cites Lamah as his source. Added 2016-02-18 for all cases. Limited to desktop view and when logged in, 2017-12-25 */ @Media (min-width: 737px) { .sm-page-powered-by { overflow:hidden; height:0; } } .sm-user-loggedin .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. Last update 2018-01-23.*/ .sm-search { margin:0px 24px; } .sm-search-result-img { margin:12px; } /* 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 " } /* 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; } /* Expands scroll bars in Chrome. Were 12px. Makes the moving part of the scroll bar higher contrast against the background. While this is primarly of value for the carousel, it apply to all scrollbars. The other major use is in the lightbox with image sizes larger than "fill". 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); } /* 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.) Minor update 2018-01-12*/ .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 { line-height: 1.3em; padding-top: 12px; } @Media (min-width:737px) { .sm-user-ui .sm-gallery-cover[data-show-image="false"] .sm-gallery-cover-description { font-size: 16px; } } /* 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; } /* 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; } /* Special handling for OSC travel galleries. Download all button retained. 2019-05-17*/ .sm-page-parentnode-nr7gn2 .sm-gallery-cover-download-button, .sm-page-parentnode-hbWKJZ .sm-gallery-cover-download-button { display: inline-flex; } /* 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 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 { 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 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)*/ .sm-gallery-images .sm-tile-info p { overflow: auto; max-height: 6.7em; font-size:15px; } .sm-tile-info { padding-bottom: 20px; } .sm-tile-info .sm-tile-info-text { -webkit-line-clamp: 5; } .sm-tile-info .sm-gallery-image-tools { display: none; } /* Special handling for OSC galleries. Down load button retained on images. 2019-05-17*/ .sm-page-parentnode-nr7gn2 .sm-tile-info .sm-gallery-image-tools, .sm-page-parentnode-hbWKJZ .sm-tile-info .sm-gallery-image-tools, .sm-page-node-vWp8CZ .sm-tile-info .sm-gallery-image-tools { display: block; } .sm-page-parentnode-nr7gn2 .sm-tile-info .sm-gallery-image-tools .sm-button-image-buy, .sm-page-parentnode-hbWKJZ .sm-tile-info .sm-gallery-image-tools .sm-button-image-buy, .sm-page-node-vWp8CZ .sm-tile-info .sm-gallery-image-tools .sm-button-image-buy { 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 version 2 *****/ /******************************/ /*Turn off buy button. 2019-05-29*/ .sm-user-ui .sm-lightbox-v2-photo-buttons .sm-lightbox-buy-button { display:none; } /* Update font for overlay title in lightbox. Same font as the VIEW PHOTO DETAILS message when there is no title. 2019-05-29.*/ .sm-user-ui .sm-lightbox-v2-photo-buttons h2{ font-size: 16px; font-weight: 400; } /* Light grey on everything except the title and caption in the info sidebar that isn't already. 2019-05-29*/ .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{ color: #989ba2; } /*Caption adjustments, all to increase emphasis and focus on this section. 2019-05-29*/ .sm-user-ui .sm-lightbox-v2 .sm-image-metadata-caption { color: white; font-size: 18px; line-height:1.33em; } /* Extra space above keywords, again adding focus on caption. 2019-05-29*/ .sm-user-ui .sm-lightbox-v2 .sm-image-metadata-keywords { margin-top:48px; } /* Remove unnecessary keywords lable. 2019-05-29*/ .sm-user-ui .sm-lightbox-v2 .sm-image-metadata-keywords h5 { display:none; } /*Remove the Show More [camera info} button. Restore when logged in. TMI for general browsers. 2019-05-29*/ .sm-user-ui .sm-lightbox-v2 .sm-imageinfo-advanced-btn { display:none; } .sm-user-loggedin .sm-lightbox-v2 .sm-imageinfo-advanced-btn { display:inline-flex; } /******************************/ /***** Lightbox version 1 *****/ /******************************/ /* 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-basic .sm-lightbox-caption .sm-inlineedit-hover-button, .sm-lightbox-basic .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-lightbox-basic .sm-inlineedit-buttons { bottom:70px; } .sm-lightbox-basic .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-basic .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-basic .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-basic .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; } /* SEARCH WIDGET (CURRENTLY ONLY USED ON 404 PAGE) -------------------------------------------------- Makes the search button blue, more closely matching other entry button applications, although this page has an opacity shift that others do not. The second block lightens the font color so it works with the background. 2018-01-24.*/ .sm-user-ui .sm-search-form, .sm-user-ui .sm-search-form[disabled] { background: #001785; } .sm-user-ui[disabled] { color: #6D6D6D; } /* HEADER (LOGGED IN) --------------------- SM made the logged-on header background black. I prefer it follow the theme. That's less visually obtrusive and allow the logged in view better represent the non-logged-in view. Structural changes are in the site CSS. Color changes are in the theme. 2018-03-09*/ .sm-user-ui .sm-user-loggedin .sm-page-header { background-color:rgba(214,214,214,0.75); border-bottom-style:none; } /* Flip the logo (a sprite) to have black text. 2018-03-09*/ .sm-user-ui .sm-user-loggedin .sm-logo { background-position: 0 -96px; } /* Text color adjustment for Search box */ .sm-user-loggedin .sm-nui .sm-page-header-search .sm-form-field-text-input { color:#000; border-color:#b5b5b5; } .sm-user-loggedin .sm-page-header-search .sm-form-field-text-input:hover { background-color: lightgray; color:black; } /* Color adjustment on the header search box when not logged in */ .sm-page:not(.sm-user-loggedin) .sm-page-header-search .sm-form-field-text-input:hover { background-color: #CFCFCF; } /* LIGHTBOX ------------ If this theme is used for a gallery, it seems best to make the lightbox background a dark gray and its controls white. The caption/keyword bar follows the light bkg/dark text theme. Added 2018-12-19*/ .sm-lightbox { background: #454545; } .sm-user-ui .sm-lightbox .yui3-widget-hd .sm-icon, .sm-user-ui .sm-lightbox .yui3-widget-hd .sm-fonticon, .sm-user-ui .sm-lightbox .yui3-widget-hd .sm-icon:hover, .sm-user-ui .sm-lightbox .yui3-widget-hd .sm-fonticon:hover{ color:white }

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; } /* HEADER (LOGGED IN) --------------------- SM made the logged-on header background black. I prefer it follow the theme. That's less visually obtrusive and allow the logged in view better represent the non-logged-in view. Structural changes are in the site CSS. Color changes are in the theme. 2018-03-09*/ .sm-user-ui .sm-user-loggedin .sm-page-header { background-color:rgba(66,66,66,0.75); } /* Color adjustment on the header search box when not logged in */ .sm-page:not(.sm-user-loggedin) .sm-page-header-search .sm-form-field-text-input:hover { background-color: #4A4A4A; }

CSS Code Attached to the Enjoy Theme used on the Enjoy and Enjoy-Recent Pages

/* Header color 2018-03-09*/ .sm-user-ui .sm-user-loggedin .sm-page-header { background-color:rgba(66,66,66,0.75); } /* Dims the two logo images and the various logged-in header icons. Last update 2018-03-09*/ .sm-page-widget-logo .sm-page-widget-logo-img { opacity:0.4; } .sm-page-header-account-avatar, .sm-logo, .sm-logo-badge { opacity:0.4; } .sm-user-loggedin .sm-page-header .sm-component-menu-item .sm-icon, .sm-user-loggedin .sm-page-header .sm-button-header-support .sm-icon, .sm-user-loggedin .sm-page-header .sm-page-header-search .sm-icon, .sm-user-loggedin .sm-page-header .sm-form-field-text-input{ opacity:0.4; }

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 Featured Galleries Page

/* 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-tile-wrapper { width:25%; } .sm-page-widget-nodes .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 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 Using the Site (formerly Tips and Tools) Page

/* As of 2018-12-06, the page is now named Using the Site This is expands the information text 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. 2017-01-13, most recent adjustment 2018-12-06 */ @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 10 icons across on the nodes widget Ref: (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; }

CSS Code Attached to the 404 Page

/*This manages the text block on the 404 page. Half width for desktops, almost full width for mobile. 2018-01-23*/ { width: 50%; margin-left: auto; margin-right: auto; font-size: 17px; text-align: center; } @Media(max-width: 736px) { { width: 95%; } }

CSS Code Attached to this Site Design Page

/* CSS code for use with Notepad ++ generated files Inserted 12-29-2014, last edited 12-28-2017, JTR*/ /* 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, bolded on mobile for better visibility */ .sc9 { color: #004020; font-family: "Consolas"; line-height:1.15; font-size: 12pt; font-weight: 100; font-style: italic; } @Media (max-width:736px){ .sc9 { font-weight: bold; } } /* 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) - bolded on mobile for better visibility */ .sc73 { color: #004020; font-family: "Consolas"; line-height:1.15; font-size: 12pt; font-weight: 100; font-style: italic; } @Media (max-width:736px){ .sc9 { font-weight: bold; } }

Powered by SmugMug Log In