shopify analytics ecommerce tracking

Lexicon pop-up

Monday, 25Dec2017 Filed in: Webmaster
So let me catch my notes up.

I want my lexicon to be an amazing resource for everybody, not just me. Since it's all going to be on one page, I need to make the UI as friendly as I can.

After the button bars under each entry, I wanted an overlay on the definition window that would give the web addy for the definition. I haven't done that yet.

I also wanted a pop-up when the viewer clicked on the letters above each entry.

I'm indebted to Prakash Nakrani and his popup without Javascript. It's the basis of what I am doing.

I'm still doing the behind-the-scenes tweaking and I have not cleaned up my code up. When I have all the stuff working and the old blog entries moved, I'll go through and alphabetize and consolidate. For now, here are the site-wide CSS for Technopagan Yearnings.

.emphatic {font-style: italic; color: #0A4F00; font-weight: 700; text-shadow: 2px 2px 3px #A9A9A9;}
.tttitle {font-family: 'Quintessential', cursive; font-size: 1.3em; font-weight: 600; color:#0A4F00;}
.befores {font-family: Amarante; color: #0A4F00; text-align:center;}
.bio {font-size: .9em; font-style: italic; text-align:center;}
.music {font-family: Amarante; font-size: 1.3em}
.lyrics {font-family: Amarante; font-size: 1.5em; color:#2F4F4F; font-style: italic; text-align:center; text-shadow: 2px 2px 3px #ACACAC;}
.mychants {font-family: Amarante; font-size: 1.7em; color:#0A4F00; font-style: normal; font-weight: 600; text-align:center; text-shadow: 2px 2px 3px #ACACAC;}
.TimesLike {font-family: Times; font-style: normal; font-size: 1.3em; color:#2F4F4F;}
.blurb {font-style: normal; color:#0A4F00; margin-left: 1.3em; margin-right: 1.3em; font-family: 'Special Elite', cursive; font-size: large; letter-spacing: .03em;}
.otherbox {margin-left: 13px; margin-right: 13px; margin-bottom: 30px; border-top-right-radius: 13px; border-bottom-right-radius: 13px;border-top:3px solid white;border-right:1px solid white;border-bottom:3px solid white;border-left:5px solid #0A4F00; padding:13px;}
.otherquote {font:x-large Georgia; font-weight: normal; font-style: italic;}
.mybox {margin-left: 13px; margin-right: 13px; margin-bottom: 26px; border-radius: 25px; border-left:5px solid #0A4F00; border-right:5px solid #0A4F00; padding:13px; font-family: Special Elite; color:#006600; font-size: initial; font-weight: normal;}
.calendar {padding-right: 13px; padding-left: 13px; text-align: center; font-family: Times; color:#0A4F00; font-style: italic;}
.blentry {font-family; Gilsans; font-size: large; margin-right: 13px; font-weight: 600; margin-bottom: 13px}
.oldtitle {font-family: Quintessential; font-weight: bolder; font-size: xx-large; text-align:center; color:#0A4F00;}
.third {font-family: Courier; color:#006600; font-size: .8em;}
.oldate {font-family: Arial; font-size: small; text-align:right; color: #0A4F00;}
.box {border-radius: 25px; border-top:1px solid #CCCCCC;border-right:3px solid #CCCCCC;border-bottom:1px solid #CCCCCC;border-left:3px solid #CCCCCC; padding:13px; font-size: 1.1em;}
.neonote {margin-left: 13px; margin-right: 13px; margin-bottom: 13px; border-radius: 25px; border-top:5px solid #0A4F00; border-left:1px solid #0A4F00; border-bottom:5px solid #0A4F00; border-right:1px solid #0A4F00; padding:13px; font-family: Courier; color:#006600; font-weight: normal;}
.greenframe {margin:13px; padding:3px; border: 9px solid #0A4F00; border-radius: 13px}
.simplechant {font-family: Amarante; color:#0A4F00; font-style: normal; text-shadow: 2px 2px 3px #ACACAC;}
.dismiss {font-weight: normal; text-decoration: line-through; color: #C0C0C0;}
.noted {font-family: Georgia; font-weight: bolder;}
.im1 {background-color: #0A4F00; border-radius: 21px; font-family: Helvetica; font-weight: normal; color: #F5F5F5; padding: 13px; margin-left: 21px; margin-right: 21px;}
.im2 {background-color: #a33d00; border-radius: 21px; font-family: Helvetica; font-weight: normal; color: #F5F5F5; padding: 13px; margin-left: 21px; margin-right: 21px;}
.disclaimer {font-family: Georgia; font-style: italic; font-size: .7em; text-align: center; margin-top: 7px; margin-bottom: 21px; text-align:center;}
.greenbar {border-radius: 7px; background-image: url(http://neowayland.com/backgroundimages/dgren077.jpg); text-align:center; max-width: 86%; margin: auto;}
.bartitle {color: white; padding:5px; text-shadow: 2px 2px 4px #000000;}
.defbox {background-color:#FAEBD7; padding:13px; border-radius: 13px; margin-bottom: 1.3em;}
.sabbat {letter-spacing: 2px; text-align:center;}
.alpha {font-size: 3em; font-style: italic; color: #0A4F00; letter-spacing: 3px; text-align: center; padding-top: 2em; margin-bottom: .1em;}
.word {letter-spacing: 2px; color:#333333;}
.redword {letter-spacing: 2px; color:#FF0000;}
.mydef {font-family: Courier; color:#0A4F00; font-size: 1.3em;}
.defbox2 {border-left:3px solid #0A4F00; border-radius: 0px 13px 13px 0px; background-color: white; padding:13px; margin-bottom: 1.3em;}
.def {font-family: Georgia; font-size: 1.3em;}
.defref {font-size: .7em; text-align: right;}
.caution {border: 1px dashed #0A4F00; padding: 13px; margin-bottom: 1.3em;}
.offset {text-indent: 2em}
.buttonbar {text-align: right; margin-bottom: .9em;}

Here's the site wide header additions.

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=IM+Fell+English|Amarante|Quintessential|Special+Elite">

<style>
a.image:link, a.image:visited, a.image:hover {background-color: transparent; background-image: none;}
a.nwc:link, a.nwc:visited {text-decoration: underline;}
a.nwc:hover {font-size: 113%; font-weight: 700; background-color: transparent; background-image: none; text-decoration: none; text-transform: none;}
a.rednwc:link, a.rednwc:visited {text-decoration: underline; color:#FF0000;}
a.rednwc:hover {font-size: 113%; background-color: transparent; background-image: none; text-decoration: none; font-weight: 700; none; text-transform: none;}
a.broke:link, a.broke:visited {text-decoration: line-through; color: #C0C0C0;}
a.broke:hover {font-size: 87%; text-decoration: none; color: white; background-color: #C0C0C0;}
a.pvc:hover {font-family: Times; font-size: 113%; font-weight: 800; background-color: transparent; background-image: none; text-decoration: none;}
a.button:link, a.button:visited {border-radius: 39px; background-image: url(http://neowayland.com/backgroundimages/dgren077.jpg); font-family: Special Elite; font-size: large; text-align:center; margin: ..09em; color: #C0C0C0; padding:5px; text-shadow: 2px 2px 4px #000000;}
a.button:hover {color: white; background-image: none; background-color:#0A4F00;}
a.button:active {background-image: none; background-color: transparent; border:1px solid #0A4F00; color: #0A4F00;}
a.lexicon:link, a.lexicon:visited {background-color:#0A4F00; color: white; padding: 0em .3em 0em .3em;}
a.lexicon:hover {color: #0A4F00; background-color: white; font-size: 113%; font-weight: 700;}
a.lexicon:hover:after {content: " - lexicon definition";}
</style>

As you can see, I went crazy on the link behaviors. I will use the broke class at all my blogs with the same behaviors.. The nbc and pvc classes will be all blogs too, although the behaviors will change. The big thing is that at TPY, almost all neowayland.com links will grow a bit when hovered over, beckoning the user to click.

The lexicon will have many behaviors not seen on the rest of the site. Fortunately RapidWeaver lets you use page specific code. So here are the lexicon additions.

<style>
a.letter:link, a.letter:visited {color: #0A4F00;}
a.letter:hover {color: #a33d00; background-color: transparent; font-size: 113%;}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}

.popup {
margin: 70px auto;
text-transform: uppercase;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 85%;
position: relative;
transition: all 5s ease-in-out;
}
</style>

Nakrani's original example had a button which I have no use for. Once I realized that everything relied on an </A HREF=""> code, the rest was just a matter of playing.

Here's my proof of concept.

<h1 id="Bb" class="alpha"><a class="letter" HREF="#Bb-box">Bb…</a></h1>
<div id="Bb-box" class="overlay">
     <div class="popup">
          <div style="text-align: right; margin-bottom: 1.5em"><a class="close" href="#Bb">✓</a></div>
          <div class="content">
               <A class="nwc" HREF="#">bbb</a>     
          </div>
     </div>
</div>

All that's left is putting in the links for each of the definitions. My lexicon has the Aa box ready to go right now. Go there and take a look.

I'm still transferring words and links from the previous version of the lexicon. But I am happy with what I have so far.

Tags: + + + + +

blog comments powered by Disqus