shopify analytics ecommerce
tracking
Technopagagan Yearnings

Obviously

Sometimes I get obsessed with the complication.

If I put nonbreaking spaces in the links for my See also floating boxes, I don't have to eyeball in and insert manual page breaks.

I should have figured that out sooner.
Comments

See also

In my TPY lexicon, I wanted to make things a bit easier.

For the web links on the definitions, I wanted it justified on the right. I was also tired of hand entering the line breaks. I wanted to automate it a bit. So here is the CSS.

.defref {float: right; width: 60%; font-size: .7em; text-align: right;}



It looks good but it's complicated.

Screen Shot 2018-05-20 at 2.54.53 PM

Here's the code.

<br><div class="defref">
<A HREF="http://www.lifezette.com/polizette/the-shadowy-extremist-group-behind-the-anti-trump-riots/" target="blank">The Shadowy Extremist Group Behind the Anti-Trump Riots</a></div></div>
<div style="width: 33%; height: 1em;"></div>
</p><div style="text-align: center;"><a class="button" style="font-size: smaller; font-style: italic;" HREF="#Aa-box">  index  </a><br><span class="emphatic" style="font-style: normal; font-size: 90%;">http://www.neowayland.com/lexicon/aa/#antifa</span></div>


With the float property, the hack in red becomes pretty important. That keeps the next element, in this case the index button, from drifting up the page. It's also the bit that lets me fine tune the spacing manually.

I used a <br> to begin with because this is the weblink that I quoted from. If it had been just some related links, I would have used a </p>.

Here's a picture that combines the two.

Screen Shot 2018-05-20 at 3.09.11 PM
Comments

More buttons

I've been tweaking my buttons at Technopagan Yearnings.

Here's the code for the button link inserted in the head.

a.button:link, a.button:visited {border-radius: 39px; background-color: #696969; 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;}


Obviously this produces a very distinctive looking button. Originally I planned to use it in the sidebar like this.

Screen Shot 2018-05-20 at 2.18.22 PM

That was good, but I also needed something on the lexicon index. So I worked out the button bar while I was working on the second version of lexicon.

Screen Shot 2018-05-20 at 2.22.12 PM

Well, that worked on the modal dialogue, but getting around the main lexicon page was a pain in the posterior.

I came up with something that looks a little kludgy, but it works.

Screen Shot 2018-05-20 at 2.24.54 PM

Here's the code.

<div class="buttonbar" style="text-align: center;">
<a class="button" HREF="#Aa"> Aa  </a>
<a class="button" HREF="#Bb"> Bb  </a>
<a class="button" HREF="#Cc"> Cc  </a>
<a class="button" HREF="#Dd"> Dd  </a>
<a class="button" HREF="#Ee"> Ee  </a>
<a class="button" HREF="#Ff"> Ff  </a>
<a class="button" HREF="#Gg"> Gg  </a>
<a class="button" HREF="#Hh"> Hh  </a>
<a class="button" HREF="#Ii"> Ii  </a>
<a class="button" HREF="#Jj"> Jj  </a>
<a class="button" HREF="#Kk"> Kk  </a>
<a class="button" HREF="#Ll"> Ll  </a>
<a class="button" HREF="#Mm"> Mm  </a></p>
<a class="button" HREF="#Nn"> Nn  </a>
<a class="button" HREF="#Oo"> Oo  </a>
<a class="button" HREF="#Pp"> Pp  </a>
<a class="button" HREF="#Qq"> Qq  </a>
<a class="button" HREF="#Rr"> Rr  </a>
<a class="button" HREF="#Ss"> Ss  </a>
<a class="button" HREF="#Tt"> Tt  </a>
<a class="button" HREF="#Uu"> Uu  </a>
<a class="button" HREF="#Vv"> Vv  </a>
<a class="button" HREF="#Ww"> Ww  </a>
<a class="button" HREF="#Xx"> Xx  </a>
<a class="button" HREF="#Yy"> Yy  </a>
<a class="button" HREF="#Zz"> Zz  </a></p>
<a class="button" HREF="http://neowayland.com/lexicon/aa/#Aa">a</a>
<a class="button" HREF="http://neowayland.com/lexicon/bb/#Bb">b</a>
<a class="button" HREF="http://neowayland.com/lexicon/cc/#Cc">c</a>
<a class="button" HREF="http://neowayland.com/lexicon/dd/#Dd">d</a>
<a class="button" HREF="http://neowayland.com/lexicon/ee/#Ee">e</a>
<a class="button" HREF="http://neowayland.com/lexicon/ff/#Ff">f</a>
<a class="button" HREF="http://neowayland.com/lexicon/gg/#Gg">g</a>
<a class="button" HREF="http://neowayland.com/lexicon/hh/#Hh">h</a>
<a class="button" HREF="http://neowayland.com/lexicon/ii/#Ii">i</a>
<a class="button" HREF="http://neowayland.com/lexicon/jj/#Jj">j</a>
<a class="button" HREF="http://neowayland.com/lexicon/kk/#Kk">k</a>
<a class="button" HREF="http://neowayland.com/lexicon/ll/#Ll">l</a>
<a class="button" HREF="http://neowayland.com/lexicon/mm/#Mm">m</a>
<a class="button" HREF="http://neowayland.com/lexicon/nn/#Nn">n</a>
<a class="button" HREF="http://neowayland.com/lexicon/oo/#Oo">o</a>
<a class="button" HREF="http://neowayland.com/lexicon/pp/#Pp">p</a>
<a class="button" HREF="http://neowayland.com/lexicon/qq/#Qq">q</a>
<a class="button" HREF="http://neowayland.com/lexicon/rr/#Rr">r</a>
<a class="button" HREF="http://neowayland.com/lexicon/ss/#Ss">s</a>
<a class="button" HREF="http://neowayland.com/lexicon/tt/#Tt">t</a>
<a class="button" HREF="http://neowayland.com/lexicon/uu/#Uu">u</a>
<a class="button" HREF="http://neowayland.com/lexicon/vv/#Vv">v</a>
<a class="button" HREF="http://neowayland.com/lexicon/ww/#Ww">w</a>
<a class="button" HREF="http://neowayland.com/lexicon/xx/#Xx">x</a>
<a class="button" HREF="http://neowayland.com/lexicon/yy/#Yy">y</a>
<a class="button" HREF="http://neowayland.com/lexicon/zz/#Zz">z</a>
</div>



I also made a bit of a change on the individual letter pages of the lexicon.

Screen Shot 2018-05-20 at 2.31.18 PM

Heres the code for these buttons.

<div class="buttonbar" style="text-align: center;">
<a id="Aa" class="button" style="font-size: smaller; font-style: italic;" HREF="#Aa-box"">  index  </a></p>
<a class="button" HREF="#Aa"> Aa…  </a>
<a class="button" HREF="http://neowayland.com/lexicon/bb/#Bb">b</a>
<a class="button" HREF="http://neowayland.com/lexicon/cc/#Cc">c</a>
<a class="button" HREF="http://neowayland.com/lexicon/dd/#Dd">d</a>
<a class="button" HREF="http://neowayland.com/lexicon/ee/#Ee">e</a>
<a class="button" HREF="http://neowayland.com/lexicon/ff/#Ff">f</a>
<a class="button" HREF="http://neowayland.com/lexicon/gg/#Gg">g</a>
<a class="button" HREF="http://neowayland.com/lexicon/hh/#Hh">h</a>
<a class="button" HREF="http://neowayland.com/lexicon/ii/#Ii">i</a>
<a class="button" HREF="http://neowayland.com/lexicon/jj/#Jj">j</a>
<a class="button" HREF="http://neowayland.com/lexicon/kk/#Kk">k</a>
<a class="button" HREF="http://neowayland.com/lexicon/ll/#Ll">l</a>
<a class="button" HREF="http://neowayland.com/lexicon/mm/#Mm">m</a>
<a class="button" HREF="http://neowayland.com/lexicon/nn/#Nn">n</a>
<a class="button" HREF="http://neowayland.com/lexicon/oo/#Oo">o</a>
<a class="button" HREF="http://neowayland.com/lexicon/pp/#Pp">p</a>
<a class="button" HREF="http://neowayland.com/lexicon/qq/#Qq">q</a>
<a class="button" HREF="http://neowayland.com/lexicon/rr/#Rr">r</a>
<a class="button" HREF="http://neowayland.com/lexicon/ss/#Ss">s</a>
<a class="button" HREF="http://neowayland.com/lexicon/tt/#Tt">t</a>
<a class="button" HREF="http://neowayland.com/lexicon/uu/#Uu">u</a>
<a class="button" HREF="http://neowayland.com/lexicon/vv/#Vv">v</a>
<a class="button" HREF="http://neowayland.com/lexicon/ww/#Ww">w</a>
<a class="button" HREF="http://neowayland.com/lexicon/xx/#Xx">x</a>
<a class="button" HREF="http://neowayland.com/lexicon/yy/#Yy">y</a>
<a class="button" HREF="http://neowayland.com/lexicon/zz/#Zz">z</a>
</div>


There are index buttons at the bottom of each lexicon entry, but only the top one has an ID code. This way, that button will be at the top of the window. Notice too that the A button here is different than the others. It takes the user to a spot on the page instead of another page, so it looks different.

After I looked at all this, I came up with one more refinement.

Screen Shot 2018-05-20 at 2.40.53 PM

If you look closely, there is a button on the sidebar green title bar. Hover over it and it changes color just like the letter buttons below. I put one in for the lexicon and the time table. Here's the code.

<a class="button" style="font-family: 'Quintessential', cursive; color: white; padding: 3px" HREF="http://neowayland.com/lexicon">  lexicon  </a></h6>


Of course I had to tweak a little bit to make it work in the sidebar, but I think it looks pretty good.


Comments

Lexicon 3 and timetable 2 for TPY

I've been taking some quiet time and revamping Technopagan Yearnings.

Read More...
Comments

Too many modals

Which means before I can finish and unveil lexicon 2.0, I'm going to have to redesign and start lexicon 3.0.

Read More...
Comments

A better popup

I think I stumbled on an internal frame or something.

Read More...
Comments

Lexicon pop-up

The lexicon will have many behaviors not seen on the rest of the site.

Read More...
Comments

Boxes, button bars and sidebars

I wanted each letter in turn.

Read More...
Comments

CSS class

This is something else I should have tried a long time ago.

Read More...
Comments

Two steps forward, one step back

Last night as I was staring at the ceiling, it dawned on me that I goofed.

Read More...
Comments

Deep coding

Once it is up I won't be editing it that often.

Read More...
Comments

Text shadow for Technopagan Yearnings (and new quote box)

Gods that's awkward. And U-G-L-Y. What was I thinking?

Read More...
Comments

Blockquote fix

I experimented.

Read More...
Comments

Calendar strip

It's diffictult to combine multiple calendars reliably.

Read More...
Comments

Cleaner quote boxes

I went through and cleaned some things up

Read More...
Comments

Badges

Where I can find them

Read More...
Comments

Green smoke

So it's time to put the green smoke back on the shelf.

Read More...
Comments

Revised TPY sidebars

Some things about RapidWeaver can make you lazy

Read More...
Comments

Lexicon sidebar

For my own reference

Read More...
Comments

Humans remember differently

But who is going to remember files/category-sex?

Read More...
Comments

Changing design

Technopagan Yearnings is my original site.

Read More...
Comments

Sidebar titles and spacers

I had to take control of the sidebars

Read More...
Comments

RapidWeaverTheme hacks

Finally I decided that brute force hacks were the only way to make things work the way I wanted.

Read More...
Comments

Quote boxes

Recently I finished some “clean” versions of the code I will use for quotes at Pagan Vigil and Technopagan Yearnings.


Read More...
Comments

RapidWeaver makes drop down stuff easy

Site tweaks

Read More...
Comments

Revenge of the Smart Quotes - Updated

That was a bit of a pickle. Read More...
Comments

FTP shortcuts

Making it work Read More...
Comments

Banner and more redirection

Getting my technopagan on Read More...
Comments

FTP issues

Handy settings for MacHighway and RapidWeaver

Read More...
Comments