s2generations | CSS Tutorial

Whole Page
Journal Entries
Page Views
Security Icons
1. Icon Replacements

Overview

Welcome to S2 Generations! Let's take a tour through the stylesheet so you know what everything does. I've added as many spec targets as I could think of without getting niche-specific with pseudo-elements and shit, so it's a little overkill. You do not need this whole sheet; if you want to delete any and all empty elements from the sheet and only edit as little as needed (like the global elements and the entries, for example), you can!

When building this theme, I wanted to make sure as many random things had classes as possible, so that hyper-specific targeting is as easy as possible, because if there's one thing I've learned, it's that when you do need hyper-specific targeting, like grabbing one link from a list of them, you really need it. I don't want that to be a pain in the ass for you guys lmao.

Variable Directory

As you can see in the CSS for S2 Generations, we're using a more up-to-date method of style organization.

The :root directory makes it quick and easy to change style elements, but if you've never seen one before, I can understand how it might feel overwhelming. Here's the deal: you create a --placeholder name to go in the root and assign it whatever you want, a font, color, border style—whatever. For example: --borders: 1px solid red; and now, anywhere in the layout that you want that border, all you have to do is use border:var(--borders); in each spot. Now if you want to change all those borders to a new style, you only need to do it once in the :root for it to change every instance of that element.

You can mix regular CSS and variables, so if you don't want to add new stuff to the :root, you don't need to. You can also mix CSS and variables in one specification. For example, background:var(--page-bg) var(--bg-img); could be background:#222 var(--bg-img); or background:var(--page-bg) url()center; and any way will work.

In short, --example: #000; would go in the :root and var(--example) would go throughout the rest of the sheet whenever you want a background, border, or other color to be #000.

You cannot use variables to replace entire lines. For instance, you cannot use --borders: border:1px solid red; because that includes the spec itself in addition to the styling for it. You can check out the W3 Schools page on CSS variables if you want it explained from an alternate source!

This section is for the page as a whole and elements that aren't specific to containers.

Global CSS

 /* this can be deleted if you're deleting the line below it */
.custom-element p{margin:0;}
 /* DELETE THIS if you want to enable the use of the br tag again */
.custom-element br{display:none;}

/* resets all elements for accurate sizing */
*,*:before,*:after{box-sizing:border-box;}
/* makes sure nothing gets an ugly black outline when clicked */
*:focus{outline:none;}
/* makes sure form elements like select menus and buttons aren't a default font */
form *{font-family:var(--main-font);}

/* text highlight colors */
::selection{
	background:var(--accent);
	color:var(--lightest);
}

::-moz-selection{
	background:var(--accent);
	color:var(--lightest);
}

/* scrollbar container */
::-webkit-scrollbar-track{
	background:var(--page-bg);
}

/* scrollbar */
::-webkit-scrollbar{
	width:7px;
	background:transparent;
}

/* scrollbar piece */
::-webkit-scrollbar-thumb{
	background:var(--accent);
	border:2px solid var(--page-bg);
	border-radius:5px;
}

/* whole page */
body{
	margin:0;
	padding:0;
	background:var(--page-bg) var(--bg-img);
	background-size:var(--background-size);
	font-family:var(--main-font);
	font-size:var(--body-text);
	color:var(--text-color);
	cursor:var(--cursor), auto;
}

/* page links */
a:link,a:visited,a:active{
	color:var(--links);
	text-decoration:none;
	cursor:var(--cursor-hover), pointer;
	-webkit-transition:all 0.5s ease-in-out;
	-moz-transition:all 0.5s ease-in-out;
	-ms-transition:all 0.5s ease-in-out;
	-o-transition:all 0.5s ease-in-out;
	transition:all 0.5s ease-in-out;
}

a:hover{
	color:var(--links-hover);
	text-decoration:none;
}

/* page headings */
h1,h2,h3,h4,h5,h6{
	font-family:var(--headings);
	color:var(--headings-color);
	margin:0;
	font-weight:normal;
}

/* quote text */
blockquote{}

/* KEEP THIS; it prevents images from overflowing containers */
img{max-width:100%;}

/* unordered lists, ordered lists, and standalone list items */
ul{}
ul li{}
ol{}
ol li{}
li:not(ul li){}
li:not(ol li){}

/* horizontal rule dividers */
hr{}

/* details show/hide containers */
details{}
details[open]{}
details summary{cursor:var(--cursor-hover), auto;}
details summary::marker{}
details[open] summary{}
details[open] summary::marker{}

/* code text */
code{}

/* html tables */
table{}
table tbody{}
table th{}
table tr{}
table td{}

/* user tag */
.ljuser{font-weight:bold;}
.ljuser a[href*="profile"] img{display:none;}
.ljuser a[href*="profile"]:before{content:'@';}

Page Setup

This section is for the entire layout's container. Additionally, it shows you the class names available to add styling only for specific page setups. These classes are used in the <body>. For instance, if you wanted the #layout-inner content width to be narrow for a layout that only has a header, you can target .header-layout #layout-inner to give it a new width, and the versions that have a sidebar will keep the wider width.

/* contains the entirety of the layout; min height is for image backgrounds and layered background effects to make sure there's never a weird cutoff point */
#layout{
	min-height:100vh;
}

/* sets the width and margin for the whole page container */
#layout-inner{
	max-width:var(--content-width);
	margin:0 auto;
	padding:var(--page-inset);
}

/* specs so that you can preface any other element to define styles that should only apply to specific page setups */
.header-layout{}
.sidebar-layout{}
.header-sidebar-layout{}

Page Views

Like the prefaces for what type of layout you're using, these prefaces are for targeting as well, except these control the kind of page you're viewing instead. So, for instance, if you want big fancy entry titles on your entries, but you want your friends page to be more readable while scrolling, you could use .pageview-read .subject h3 to do just that!

/* recent entries */
.pageview-recent{}
/* friends/reading page */
.pageview-read{}
/* viewing entries by tag */
.pageview-tagged{}

/* calendar page */
.pageview-archive{}
/* date page */
.pageview-date{}
/* month page */
.pageview-month{}

/* journal tags page */
.pageview-tagspage{}

Journal Navigation

This is the top navigation of your journal that covers your Recent, Profile, Friends, Calendar, and Tags links. You can disable this one if you plan on creating custom links in an element of your own!

/* journal nav container */
#nav-links{
	margin:0 0 var(--margin) 0;
	font-size:var(--nav-text);
}

/* inner container for more styling capabilities */
.nav-links-inner{}

/* nav links list */
.nav-links-inner ul{
	list-style:none;
	padding:0;
	margin:0;
	display:flex;
}

/* nav links list items */
.nav-links-inner li{
	margin:0 8px 0 0;
}
/* special styling to indicate the current page you're viewing */
.nav-links-inner li.current{}

/* specialized classes for each link for hyper-specific styling */
.nav-links-inner li.recent{}
.nav-links-inner li.profile{}
.nav-links-inner li.reading{}
.nav-links-inner li.calendar{}
.nav-links-inner li.tags{}

/* nav links */
.nav-links-inner li a{}
.nav-links-inner li.current a{}
.nav-links-inner li a:hover{}

Page Navigation

This navigation, on the other hand, is for the footer navigation that contains the previous/next skiplinks.

/* footer prev/next nav */
.skiplinks{
	margin:var(--margin) 0 0 0;
	text-align:center;
	font-size:var(--entry-info-text);
}

/* special class for the nav on the page for specific dates */
.skiplinks.day-page{}

/* prev/next links */
.skiplinks a{}
.skiplinks a:hover{}

/* special classes for prev/next links */
.skiplinks a.forward{}
.skiplinks a.back{}

/* class for prev/next separator; makes it easy to remove the divider */
.nav-separator{
	margin:0 5px;
}

Custom Elements

Here's the fun area!! You have three options to choose from. You can use just one, all three, or a combination of two. This section is where you add your own CSS to go with whatever custom HTML you're using. Remember, for your custom elements you can create any new CSS elements you want; your only stipulation is that you can only use classes and not IDs when creating custom names, so be mindful that it should be .example and not #example when creating custom names. The default styling of these elements is just margin for spacing, but feel free to delete that. It won't break anything.

/* CUSTOM HEADER - ADD ANY CUSTOM CSS CLASSES AND/OR STYLING */

#custom-header{
	margin:0 0 var(--margin) 0;
}


/* CUSTOM SIDEBAR - ADD ANY CUSTOM CSS CLASSES AND/OR STYLING */

#custom-sidebar{
	float:left;
	width:var(--side-width);
}


/* CUSTOM FOOTER - ADD ANY CUSTOM CSS CLASSES AND/OR STYLING */

#custom-footer{
	margin:var(--margin) 0 0 0;
}

Credit Link

Your credit container is nice and tiny and unobtrusive; just a lil baby thing on the bottom left of the screen that's low opacity until you hover it; that way you can display a link to make your layout easier to "steal" and credit without it making your layout ugly or taking up space in one of your custom elements.

/* layout credit container */
#credit-link{
	position:fixed;
	bottom:0;
	left:0;
	padding:10px;
	opacity:0.5;
	font-size:var(--credit-text);
	text-transform:uppercase;
	letter-spacing:1px;
	-webkit-transition:all 0.5s ease-in-out;
	-moz-transition:all 0.5s ease-in-out;
	-ms-transition:all 0.5s ease-in-out;
	-o-transition:all 0.5s ease-in-out;
	transition:all 0.5s ease-in-out;
}

/* layout credit hover; can remove if disabling the opacity feature */
#credit-link:hover{
	opacity:1;
}

/* the non-link text */
#credit-link .credit-text{}

/* username link */
#credit-link a{}
#credit-link a:hover{}

Sidebar & Entries

What it says on the tin! Just a container and inner container that holds the custom sidebar and entries containers to keep them next to each other.

/* container for sidebar & entries */
#content{}
/* inner container for more styling capabilities */
#content-inner{}
/* clearfix to keep the sidebar float looking nice; you can delete this if you aren't using float for the sidebar */
#content-inner:after{content:'';display:table;clear:both;}

Entry List

List of entries, as well as some extra specifications for layouts that include a sidebar! You're gonna see a little math there; it's automated to make your life easier when floating elements and making sure they play nicely and sit where they're supposed to without having to subtract widths.

/* entries container */
#entries{}

/* inner container for more styling capabilities */
#entries-inner{}

/* positioning for entries if sidebar layout is being used; math auto-calculates distance based on sidebar width */
.sidebar-layout #entries{
	margin:0 0 0 calc(var(--side-width) + var(--margin));
}

/* positioning for entries if header & sidebar layout is being used; math auto-calculates distance based on sidebar width */
.header-sidebar-layout #entries{
	margin:0 0 0 calc(var(--side-width) + var(--margin));
}

/* special container for when you're viewing specifically-tagged entries; I like disabling this for my journals tbh but it's handy */
#tagpage-header{
	margin:0 0 var(--margin) 0;
	text-align:center;
}

/* the heading for the tags page text */
#tagpage-header h2{
	font-size:var(--entry-info);
	font-family:var(--main-font);
}

/* links inside of entries */
#entries a,
#entries a:visited{
	color:var(--content-links);
}

#entries a:hover{
	color:var(--content-links-hover);
}

Entries

Each journal entry! If you want the layout to look more like generator, you can remove the padding and put padding in .entry-header and .entry-content and .entry-links instead, and use dividing borders/backgrounds.

Something else I've done, is given each entry a unique ID based on the number in the entry's URL, prefaced with #entry-. For example, the ID for this entry is #entry-1720. This way, if you ever want to style one specific entry, or create anchor links to entries, you can!

/* entry container */
.entry{
	margin:0 0 var(--entry-margin) 0;
	padding:var(--entry-padding);
	background:var(--content-bg);
	border:1px solid var(--borders);
	position:relative;
}

/* inner container for more styling capabilities */
.entry-inner{}

Entry Header

A BEEFY BOY of a section; that's just because it holds the styling for the entry subject, date, and two options for icons. The one you see by default in the layout is the one you see a lot of the time, an icon just outside the entry with usernames underneath it. There's another hidden option, however, that sits next to the entry subject! You can remove display:none; from that one and add it to the displayed icon container, which I give info on below.

/* entry header container */
.entry-header{}

/* inner container for more styling capabilities */
.entry-header-inner{
	display:flex;
	align-items:center;
}

/* entry subject & date; also poster info and user icon for below disabled element */
.entry-header-content{
	width:100%;
	display:flex;
	justify-content:space-between;
}

/* alternate icon option to position it inside the entry header instead of outside the entry container; un-comment out and move display:none; to .outer-poster to switch over */
/* .poster-info ~ .entry-header-content{width:calc(100% - var(--entry-icon));} */
.entry-header .poster-info{
	display:none;
}

/* icon container */
.userpic{}

/* icon image */
.userpic img{
	width:var(--entry-icon);
	height:var(--entry-icon);
	margin:0 15px 0 0;
}

/* user link container */
.poster-info .user{}
/* user link tag */
.poster-info .user .ljuser{}
/* user profile link */
.poster-info .user .ljuser a[href*='profile']{display:none;}
/* second user link; ie. communities */
.poster-info .user .ljuser ~ .ljuser{}

/* icon and poster info container */
.outer-poster{
	position:absolute;
	top:0;
	right:calc((var(--entry-icon) + 10px) * -1);
	text-align:center;
	font-size:smaller;
}

/* outer icon image */
.outer-poster img{
	margin:0 0 5px 0;
	padding:5px;
	background:var(--content-bg);
	border:1px solid var(--borders);
}

/* subject container */
.subject{}
/* subject link */
.subject a{}

/* subject heading */
.subject h3{
	display:flex;
	align-items:center;
	font-size:var(--subject-text);
}

/* entry security icon container */
.subject h3 .security-icon{
	margin:0 5px 0 0;
}

/* entry security icon image */
.subject h3 .security-icon img{}

/* date and time container */
.date-time{
	font-size:var(--entry-info-text);
	color:var(--date-color);
}

/* entry date */
.date-time .date{}
/* date and time separator */
.date-time .at{margin:0 3px;}
/* entry time */
.date-time .time{}

Entry Content

The section is specifically for your entry content and holds nothing else, that way you can style it without it affecting anything next to it.

/* only the entry's text/content */
.entry-content{
	margin:var(--entry-content-margin) 0 0 0;
}

/* inner container for more styling capabilities */
.entry-content-inner{}

Entry Tags

The container for your entry tags that sits right under the entry content container. This holds the styling for both tag display options, as well as general styling to affect both.

What I love most about this is that S2 styles your tags page, which means you can just tag entries and link that tag for cute links to customs etc., and you don't have to rely on manipulating dates. There's an option in the layout setup to not display the tags on the entry, which means you can use this feature without having to show the actual tags if you want to keep the cleaner look. When doing this, most of you will probably also want to set #tagpage-header to display:none;

/* entry tags container */
.entry-tags{
	margin:var(--entry-content-margin) 0 0 0;
	font-size:var(--entry-tags-text);
}

/* entry tags links */
.entry-tags a{}
.entry-tags a:hover{}

/* comma-separated tags list container */
.entry-tags.comma-list{}
.entry-tags.comma-list b{}

/* hashtag style tags container */
.entry-tags.hashtags{}

Entry Footer

The entry footer! I made sure to give each list item its own class to go with the link that's in it, that way if you want to replace the text with icons or anything like that, you don't have to do any extra work. Other users will only see the two links you're used to seeing in S1 Generator, but you'll also see links to edit the journal and its tags if you're the owner to save you a step. You can remove display:none; from the hidden link classes to display them, but in my experience most people don't want to do that.

/* entry footer container */
.entry-links{
	margin:var(--entry-content-margin) 0 0 0;
	font-size:var(--entry-info-text);
}

/* entry footer links list */
.entry-links ul{
	list-style:none;
	padding:0;
	margin:0;
	display:flex;
	justify-content:flex-end;
}

/* entry footer list items */
.entry-links ul li{
	margin:0 0 0 8px;
}

/* specific classes for each list item for easier link targeting */
.entry-links li.reply{}
.entry-links li.entry-comments{}
.entry-links li.edit-entry{}
.entry-links li.edit-tags{}

/* disabled links most people don't like showing */
.entry-links li.tell,
.entry-links li.add-mem,
.entry-links li.track,
.entry-links li.untrack{display:none;}

/* entry footer links */
.entry-links ul li a{}
.entry-links ul li a:hover{}

Tags Page

Your tags page! I made sure every aspect of each list item is wrapped in a span container so that you can style and hide things quickly and easily, such as the divider between the tag link and the usage count, or removing the usage count.

/* special entry class for the tags page container */
.entry.tags-list{}

/* tags list header container */
.tags-list .subject{}
/* tags list header text */
.tags-list .subject h3{}

/* tags list */
.tags-list .all-tags{
	list-style-position:inside;
	padding:0;
	margin:0;
}

/* tags list items & links */
.tags-list .all-tags li{}
.tags-list .all-tags li a{}
.tags-list .all-tags li a:hover{}

/* separator between tag link and number of uses; makes removing it easier */
.tags-list .all-tags li .tag-separator{margin:0 5px;}

/* container for number of uses */
.tags-list .all-tags li .uses{}

Archive Page

Your calendar page! This is extremely similar to S2 Complete Style calendars, and I think fairly standard for S1 Generator too? Either way, it's the only table in the layout, so it's a little clunkier to style than everything else.

/* container for list of years that have entries above the calendars */
.yearlinks{
	text-align:center;
	margin-bottom:10px;
}

/* inner container for more styling capabilities */
.yearlinks-inner{
	text-align:center;
	margin-bottom:10px;
}

/* list of years */
.years{
	list-style:none;
	margin:0;
	padding:0;
}

/* each year; you can also add stuff for .years li a and .years li a:hover if you want it to be different from the page links */
.years li{
	display:inline;
	padding:0;
}

/* special entry class for the calendar page container */
.entry.month-calendar{}

/* actual calendar */
.yeartable{
	border-collapse:separate;
	border:none;
	width:100%;
}

/* days of the week */
.dayname{
	letter-spacing:2px;
	text-transform:uppercase;
	text-align:center;
	background:var(--accent) !important;
	color:var(--lightest);
}

/* each day container; you can also add stuff for .yeartable td a and .yeartable td a:hover to style the link for days that have entries */
.yeartable td{
	border:none !important;
	background:rgba(0, 0, 0, 0.05);
	padding:5px;
}

Month Page

Your month page! This displays all entries posted on specific months. Like the calendar, I think this is pretty similar to the S1 Generator layout, but I've added more container specs so that it's got more styling support. To remove posting times, I typically set .month-list dl to have font-size:0; and add a font size to .month-list dt a to reset it, that way the link is the only part that shows.

/* special entry class for the month page container */
.entry.month-list{}

/* navigation menu */
.month-list form{}
.month-list form center{}

/* prev/next month links */
.month-list form center a{}
.month-list form center select{}

/* navigation menu "view" button */
.month-list form center input[type='submit']{}

/* list for each date that has entries */
.month-list dl{}

/* date above list */
.month-list dt{}

/* entry link */
.month-list dt a{}
.month-list dt b{}

/* list of entries for that date */
.month-list dd{}

/* security icon if the entry's locked */
.month-list dd img{}

Icon Replacements

And, finally, this section is to hide and replace the entry security icons for private, friends-locked, and custom-locked entries.

/* reset all icons */
img[src*="entry/private.png"],
img[src*="entry/protected.png"],
img[src*="entry/groups.png"]{
	width:0 !important;
	height:0 !important;
	padding:13px 0 0 16px!important;
	background-size:auto 100%!important;
}

/* private entries */
img[src*="entry/private.png"]{
	background:transparent var(--private);
}

/* friends only entries */
img[src*="entry/protected.png"]{
	background:transparent var(--locked);
}

/* custom groups entries */
img[src*="entry/groups.png"]{
	background:transparent var(--customs);
}

Conclusion

And that's all, folks! I've hopefully covered the vast majority of what each part of the layout does, although I'm sure I left off a few tiny bits and pieces that I figured 99.9% of people won't care about. If you're the 0.1%, I'm sorry!!

Enjoy, and I hope you have tons of fun creating layouts for S2 Generations. 💖