shopify analytics ecommerce
tracking
HTML

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

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

Boxes, button bars and sidebars

I wanted each letter in turn.

Read More...
Comments

More font fun

Now this is a tip

Read More...
Comments

Disappearing sidebar

I had a problem this morning

Read More...
Comments

Accidental

I was going to fix it, but I decided it looked better that way.

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

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

Style the link

You can drop style codes into the link definition.

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

Whoops!

I was looking for ways to make the entry titles on Pagan Vigil "pop!"

Read More...
Comments

Fonts on my blogs

They aren't the perfect ones

Read More...
Comments

This year and previous years

Of course this is a brute force hack and there is no way to do this within the RqpidWeaver program or theme.

Read More...
Comments

Badges

Where I can find them

Read More...
Comments

Changing

That was simple enough.

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

Sidebar titles and spacers

I had to take control of the sidebars

Read More...
Comments

Tweaking the Amazon iframe

There are a couple of changes that I have to make to an Amazon iframe to embed it on any of my sites

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

Revenge of the Smart Quotes - Updated

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