shopify analytics ecommerce
tracking
Webmaster

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

Is this the best 404 page ever created?

It's certainly the best I've ever seen.

Financial Times 404 page
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 Hierarchy

Geekery

Read More...
Comments

Adjusting image size

From a purist viewpoint you're supposed to adjust the image size in a photo editing program before publishing the web page.

Read More...
Comments

Relative links

Within the same domain

Read More...
Comments

A new shadow

A hack replacing a hack

Read More...
Comments

Class act

It's much easier to define classes and go from there.

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

Scratch

I keep a file named Scratch open in TextEdit.

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

A fun way to spend a day and a half

Okay, that was weird.

Read More...
Comments

Claude Shannon

“The mathematical prodigy who gave the world ‘bits’”

Read More...
Comments

File format names

You can see an example in the entry URL above.

Read More...
Comments

Fixed the loading problem

Pagan Vigil has had a loading problem for years.

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

Style the link

You can drop style codes into the link definition.

Read More...
Comments

Blockquote fix

I experimented.

Read More...
Comments

Search boxes

This works after a fashion, but there is no doubt it is a hack.

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

Two more projects

I always start a project by designing a logo.

Read More...
Comments

Badges

Where I can find them

Read More...
Comments

Changing

That was simple enough.

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

Sloppy seconds

Yeah, stuff changed.

Keeping to my sloppy notebook model, I lost the drop down menus and put everything across the top. There may be more later.

Site news is now a tag.

Comments

Lexicon sidebar

For my own reference

Read More...
Comments

Pagan Vigil LibraryThing

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

Hacks versus tips

Hacks change the rules

Read More...
Comments

Sidebar texture

For Pagan Vigil, of course I duplicated the CameoV theme file to CameoV2.

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

Old pictures

I’ve been tweaking Technopagan Yearnings and naturally I thought about tweaking this site.

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

RapidWeaver 6 Themes

That's a relief. I want to fix some things

Read More...
Comments

No Dymamic PHP

Fot the moment, this is not a good setting to use.

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

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

Top stories, tags, and tag cloud

Summary just for demo purposes Read More...
Comments

FTP shortcuts

Making it work Read More...
Comments

Banner and more redirection

Getting my technopagan on Read More...
Comments

Behind the scenes redirection

Moving the file Read More...
Comments

Get permission

Today I learned about file permissions on a hosting server

Read More...
Comments

Theme settings and CSS changes for PV

Recapturing the feeling at Pagan Vigil

Read More...
Comments

FTP issues

Handy settings for MacHighway and RapidWeaver

Read More...
Comments