Tessisamess

You know what's fun? Overlays.

Doing them in Complete Style is a little trickier than doing them in Generator. Why? You have to have an ID for the div you want to overlay as a popup/slideout/whathaveyou, and you're not allowed to add your own IDs to Complete Style; classes only. In Generator you can add your own IDs, so it's as easy as creating it all from scratch, but that's not going to work in Complete Style; it's going to pretend it doesn't see your custom ID names. So how do we get around this annoying hiccup? Use the existing IDs on the page!

This does limit the options for what you can make slide out, but it's a great tool for hidden and/or expanding sidebars/headers/etc. when you just don't want to use Generator for your layout. In this tutorial, though, we're going to learn how to make a sticky note into a popup as our example!

We're going to use my newest layout, Botanique, for the demo! As you can see, this layout is very straightforward and timeless with no hidden thrills, and that's great when it's what you're looking for! But let's see if we can add a little mystery to this babe. As you're reading, if you ever find yourself confused about how a sticky note is set up, just reference the Sticky Note lesson in my S2 Complete Style documentation.

How does this work without JavaScript or jQuery?

Making a popup with JS or jQ is easy peasy, but how does this work if we can't use programming languages in our layouts?

To make a popup without these tools, first you need to know what the :target selector does and know that you can use it in conjunction with a link.

Say you have a div called #myDiv and you want to have the page jump directly to that div when you click a link to it. You'd use a link set up like this: <a href="#myDiv">LINK</a> to achieve that; this is an anchor link. #myDiv is the target for that link and when you click it you are targeting #myDiv. Throw some fixed positioning and display CSS into the mix and you're able to turn targeting a div into showing and hiding that div! All you need is a div with an ID, two links, and some CSS to style it all and call the :target into play!

Where do I start, though?!

First, we need an overlay to call when you click the link. We're gonna make that with the outer ID, #sticky-note. What's one thing all popup overlays have? A darker transparent background! That's where this is going to go. We're also going to prepare for the inner content and position our overlay!

#sticky-note{

/* POSITION THE STICKY */
	position:fixed;z-index:2000;
	left:0;right:0;bottom:0;top:0;

/* GIVE IT A BACKGROUND */
	background:rgba(0,0,0,0.6);

/* POSITION THE STICKY'S CONTENT */
	display:flex;
	align-items:center;justify-content:center;
	}

You now have an overlay! It looks a little funny though, right? Now we need to adjust the actual sticky entry's width and reset the bottom margin most entries have so that it centers. This can be any width you want and you can add a height too if you need it.

#sticky-note .entry{
	width:500px;
	margin:0;
	}

That's much better! It looks like a real popup now!

...but how do I hide it?

You may have noticed that this lovely popup is now completely blocking all of your content. That means it's time to add functionality! First, change display:flex to display:none. I know, I know. I'm taking you through completely unnecessary steps by having you use flex initially, but I wanted you to see how it's supposed to look. Go on and hide your sticky now!

#sticky-note{
	position:fixed;z-index:2000;
	left:0;right:0;bottom:0;top:0;
	background:rgba(0,0,0,0.6);
	display:none;
	align-items:center;justify-content:center;
	}

Now we add the function and put flex where it actually belongs!

#sticky-note:target{
	display:flex;
	}

Aaand it's gone.

Now instead of your popup blocking all of your content it's totally gone with no way to show it! Perfect, you're done. (Just kidding.) Next we need to add in a function to make it pop up! Add a link anywhere you want it, be it your navigation entry, or the sidebar's link list or blurb. It can look any way you want and say anything you want as long as the URL is correct.

<a href="#sticky-note">LINK</a>

If you want this styled a unique way just add class="yourclassname" to the a href for this link and style it in your layout CSS.

For this demo, since the layout I'm using to show how it works doesn't have a sidebar, I'll just be tossing a basic link into an entry.

And now you can make it pop up!

...but you can't make it go away without reloading the page. Let's add in a function for that! You'll need two things for this: A new link inside the popup and CSS to style it. This can look any way you want and be anywhere in the sticky note, but for this tutorial I'll be using the classic corner × to denote the ability to close the sticky popup.

Let's prep!

#sticky-note .entry{
	width:500px;
	margin:0;
	position:relative;
	}

Now let's add a class for the close link so we can position and style it! The .close class is a link, so you can add a color here if needed, and .close:hover will control only that link's hover style if desired.

.close{
	position:absolute;
	top:7px;right:10px;
	font-size:30px;
	}

Now you can add a close link in your sticky note content!

<a class="close" href="#">&times;</a>

Now we're firing on all cyllinders! But we can make this function just a little bit nicer, right? This next step is optional! We're going to add in CSS animations so that the popup fades in.

First, we'll create the animation:

@-webkit-keyframes fadein{
	0%{display:none;opacity:0;}
	1%{display:flex;opacity:0;}
	100%{display:flex;opacity:1;}
	}

@-moz-keyframes fadein{
	0%{display:none;opacity:0;}
	1%{display:flex;opacity:0;}
	100%{display:flex;opacity:1;}
	}

@-o-keyframes fadein{
	0%{display:none;opacity:0;}
	1%{display:flex;opacity:0;}
	100%{display:flex;opacity:1;}
	}

@keyframes fadein{
	0%{display:none;opacity:0;}
	1%{display:flex;opacity:0;}
	100%{display:flex;opacity:1;}
	}

And then we'll tell the sticky note to use that animation!

#sticky-note{
	position:fixed;z-index:2000;
	left:0;right:0;bottom:0;top:0;
	background:rgba(0,0,0,0.6);
	display:none;
	align-items:center;justify-content:center;
	-webkit-animation:fadein 0.5s ease-in-out;
	-moz-animation:fadein 0.5s ease-in-out;
	-o-animation:fadein 0.5s ease-in-out;
	animation:fadein 0.5s ease-in-out;
	}

Now that's a popup! You're all set and you can add whatever you want to the inner content of your sticky note! You can even add more CSS and custom classes to create a custom code inside of it.

Which layouts can I use this in, though?

Any Complete Style layout will work for this trick as coded in this tutorial!

Note that you need to keep in mind that #sticky-note .entry has the same styling as .entry, so if you want it to be different you'll need to style it specifically (say, if the entries have a white background but you want the sticky note's entry background to be blue.) You'll also need to keep in mind that to put a link to this popup in your sidebar you'll have to be using a layout that has a sidebar, haha. Otherwise you can link it in an entry; navigation codes are great for this!

The whole enchilada!

Here's everything we've learned all put together! The below (minus grayed out animation CSS) really is the only CSS you need to make a popup this way.

@-webkit-keyframes fadein{
	0%{display:none;opacity:0;}
	1%{display:flex;opacity:0;}
	100%{display:flex;opacity:1;}
	}

@-moz-keyframes fadein{
	0%{display:none;opacity:0;}
	1%{display:flex;opacity:0;}
	100%{display:flex;opacity:1;}
	}

@-o-keyframes fadein{
	0%{display:none;opacity:0;}
	1%{display:flex;opacity:0;}
	100%{display:flex;opacity:1;}
	}

@keyframes fadein{
	0%{display:none;opacity:0;}
	1%{display:flex;opacity:0;}
	100%{display:flex;opacity:1;}
	}

#sticky-note{
	position:fixed;z-index:2000;
	left:0;right:0;bottom:0;top:0;
	background:rgba(0,0,0,0.6);
	display:none;
	align-items:center;justify-content:center;
	-webkit-animation:fadein 0.5s ease-in-out;
	-moz-animation:fadein 0.5s ease-in-out;
	-o-animation:fadein 0.5s ease-in-out;
	animation:fadein 0.5s ease-in-out;
	}

#sticky-note:target{
	display:flex;
	}

#sticky-note .entry{
	width:500px;
	margin:0;
	position:relative;
	}

.close{
	position:absolute;
	top:7px;right:10px;
	font-size:30px;
	}

The bare minimum!

Here you can see ONLY the parts that make this work. Everything else is just positioning and styling to make it specifically look like a popup! You can position and style this trick any way you like. (Just remember those links for opening it and closing it. You really need those.)

#sticky-note{
	display:none;
	}

#sticky-note:target{
	display:flex; /* or display:block if you don't want it centered on the page */
	}

Now that you've styled your popup to work all you need to do is make sure you have the targeting and closing links in place! And that's it!

♡ You're Done! ♡