Greekgeek's Online Odyssey - Hubpages and Online Article Writing Tips

css-html

A New All-CSS Amazon / Zazzle Button

Feb 11th, 2013
by Ellen.
3 comments

I hadn’t posted this until now, because I’m still getting the kinks out. But I thought I’d share some CSS wizardry.

Problem:

My old Amazon “Buy” Buttons look a little fuzzy at modern screen resolutions, and they don’t resize well.
Amazon Associates

Also, that’s just for Amazon. Sometimes I want a Zazzle button!

I believe in the marketing research that shows a “Big Orange Button” helps convert sales.

So how can I make a BOB that will scale to different screen sizes?

Solution:

Create a rounded-corners button with CSS:

Buy on Amazon

 

 

blizzard of '78 t-shirt
Buy T-shirt on Zazzle

I’m still fine-tuning this, but people who know code can play with it.

Here’s an example from my spruced-up “Blizzard of ’78” lens.

Here’s a template for the button. You MUST change the width (11em) to fit the width of whatever words you use. For example,  in”Buy on Amazon” button, I used 8.5em.  An em is simply the width of the letter m, so this means that the dimensions listed in ems will scale up and down to match the text.
<a style=”display: block; margin: 5px auto; width: 11em; color: #fff; text-decoration: none; font-family: Arial; font-size: 90%; font-weight: bold; text-align: center; border-radius: .5em; padding: .2em; background-color: #f90; box-shadow: 1px 1px 2px #888888; background-image: linear-gradient(to top, #FF9900 60%, #FFBB44 100%);” href=”LINKgoesHERE”>Buy T-shirt on Zazzle</a></p>
I was a bit haphazard in which dimensions I specified in pixels, which in ems. I think this looks good at different screen resolutions, as I’ve checked with my iPad and this Responsive Design Tester, but… I can’t promise.
Breaking it down:
  • display: block; turns the span into a block-shaped area with specific dimensions.
  • the margin is whitespace around the outside of the button. Use margin: 5px; if you do NOT want the button centered horizontally (auto)!
  • the width is the width of the orange button, which I defined in terms of the width of the letters inside. This way the button grows or shrinks with the font and screen size.
  • color: #fff makes white letters; after this comes a bunch of optional text-tweaking.
  • border-radius: makes rounded corners on most modern browsers. On older browsers, you get rectangular corners, which isn’t too bad.
  • padding puts space between the borders of the orange rectangle and the words inside.
  •  background-color #f90 makes Squidoo Orange.
  • box-shadow: is a new CSS3 property, supported by IE9+, Firefox 4, Chrome, Opera, and Safari 5.1.1. On older browsers, no shadow. The values are: horizontal offset, vertical offset, blur distance, color.
  • linear-gradient: In theory, this will add a bit of shading, with darker orange at the bottom and lighter orange at the top. It’s part of CSS3, but not all browsers support it… yet. They will. In the meantime, I could go with all sorts of complicated code to make it work. But I’m not gonna. There’s nothing wrong with buttons that look good now, and will look better down the road.

Here’s a demo of how this button looks on browsers that DON’T support the linear gradient, and those that DO. (Modern editions of all browsers support rounded corners and drop shadow; older IE will just show an orange rectangle with no shadow.)

Cheat Sheet for Dealing With Squidoo’s New Flexible Layout

Dec 10th, 2012
by Ellen.
1 comment

My CSS Cheat Sheet for Converting Fixed-Width into Flexible Layouts

Originally posted here. (Now tweaked and revised.)

  • The first thing you should do is ask yourself, “Is this CSS absolutely necessary, or can I drop it?” See the postscript below for tips about how and when to use CSS. Usually, the best solution is, “Drop it!”
  • Testing: Try Screenfly Emulator or Responsive Layout Emulator, or if both of those are being crabby, drag the right-hand edge of your window around to simulate different screen sizes.
  • Replace font sizes and line heights in pixels with points or percentage. (E.g. 110% = “a little larger than the standard font size.”)
  • To center an image or a paragraph horizontally, use style=”margin: 0px auto;”
  • <br style=”clear:both;”> breaks you out of float-mode and usually stops things from spilling into places they don’t belong. (The “zigzaggy” stairstep effect, e.g. For that problem, put <br style=”clear:both;”> between each “step” of the staircase.)
  • Convert your old fixed-width dimensions by doing a little math. Say you used to have a paragraph 250 pixels wide. Squidoo’s old column width was 590 pixels. 250 ÷ 590 = .42, so change width:250px;   to width:42%; 
  • If all the widths of elements in a horizontal area add up to more than 100%, the last item will wrap onto the next row. This sometimes happens if you’ve got small elements like borders adding a few pixels of width to your total. In that case, trim the width of the elements you can control by 1-2% to leave more wiggle room.
  • You may need to set the outermost container width to 100%. If something’s shrinking to fit, and you want it to extend to the margins, that’s what to do.
  • When using percentages, you usually have to specify a paragraph or image’s size in width rather than height. Percentage of the containing area’s height is meaningless, because the bottom of the page is usually off the bottom of the screen. Percentage of the containing area’s width makes sense, because the right margin of a page is usually visible.
  • The only time you dare specify height is with graphics small enough that they’re not likely to spill into the margin even on phone-sized screens. Use Dee’s handy-dandy Screenfly emulator to check.
  • Let borders and rounded corners remain fixed-width (pixels). They are usually not big enough to spill over onto the margins, and they behave quite oddly when changed to percentages.
  • Advanced: When doing side-by-side layouts, consider using the style attribute min-width: 200px; to say, “don’t shrink this image (or design element) smaller than 200 pixels.” On small phone screens, which are 240 or 320 pixels wide, this will force side-by-side layouts to switch to a single column, so you don’t end up with teeny tiny images. You may also set a max-width, if your images start looking silly at large sizes.
  • Advanced: If you’ve got a colored or bordered paragraph containing a floated graphic and text, you will find that the floated graphic tends to spill out past the bottom of the paragraph when you switch dimensions to percentages. The best solution is to get rid of the color or border on the paragraph. But if you really, really have a good reason for the colored paragraph, this worked for me: <p style=”background-color: #eee; width:100%;”><span style=”display: block;”><img src=”blah” style=”float: left; blah blah;”>Text text text</span><br style=”clear: both;”></p>
  • Advanced: 3-items-across layout for Zazzle & other affiliate items: <p style=”width: 25%; padding: 2%; margin-right: 2%; margin-bottom: 2%; text-align: center; font-size: 80%;”><a href=”productLink” rel=”nofollow” style=”text-decoration:none;”><img src=”imgURL” alt=”altname” style=”width: 90%; margin: auto;”><br>ProductName<br><b style=”margin:auto;display:block;width:60%;line-height:110%; font-size: 70%; color:#fff;background-color:#f90;border-radius: 4px; padding:2%;”>View on Zazzle</b></a></p>

Postscript: How and When to Use CSS

CSS commands, the style=”blah blah blah”  part tucked inside of an HTML <tag>, let you control visual decoration and layout separately from HTML. If HTML says, “this is a hat,” CSS says, “size 10 with a red brim.” If HTML says, “this is a brick,” CSS says, “move it two inches to the right.” If HTML says, “this is a paragraph,” CSS says, “200 pixels wide with a dashed border and gray background.”

People tend to use CSS for decoration, but in fact, it’s better to use CSS only to indicate units of the page that function in a special way.

For example, adding color to links is more than mere decoration; it informs the reader that these words are links. A side-by-side display of product images with captions under them acts like a store display, telling the visitor, these are products, and allowing the customer to compare, browse, pick and choose. It’s functional, not just for pretty.

I have mostly avoided using colored or shaded paragraphs except for one special purpose: quotations or excerpts, when I’m alternating between quoting something and commenting on it. What’s the function of that CSS? Its purpose is to make clear which words are mine, which words are someone else’s. And I’m only going to do that on a page where I’m alternating between the two, not a simply one-off quotation or occasional quotes.

I also use CSS for navigation elements, on rare occasions. Usually, the navigation options like the “Table of Contents” in the introduction module are adequate, and don’t need to be replaced.

I wasn’t always this strict about CSS. So in reviewing old lenses, I’ve been asking myself, “Is this CSS providing useful information to the reader? Is it functional? Or is it just a paint job?” I’m dropping 99% of my “decorative” CSS. That very especially includes colored and bordered paragraphs, which are the web equivalent of a reader marking a book’s text with  colored highlighter pens and underlines.

Recovering From a Squidoo Surprise

Dec 8th, 2012
by Ellen.
20 comments

Here we go again

As most members know by now, Squidoo just unleashed a dramatically different layout two weeks before Christmas. This fits a pattern: Squidoo typically launches changes with little or no warning (that one was released on December 21, 2010, and it managed to throw some top-earning lenses into WIP, hiding them entirely from view and killing their tier earnings for the month.) Clearly, Squidoo thinks we have far too much time on our hands during the holidays.

If you’ve got hundreds of lenses, it may take days to salvage and check all of them. So how do we prioritize? Well, I’ve discovered a handy Excel trick to list all our lenses in order of how much they earn, which can aid in triage assessment.

But first, let’s look at some possible ways to repair layout problems caused by this so-called “Responsive” update (as a major iPad user, the old Squidoo layout gave me no trouble, whereas this one does):

  • [UPDATE] SquidTool’s creator A3 Labs has been on the ball and has updated SquidTools to work with Squidoo’s new layout. See this announcement post from A3 Labs explaining the fixes, and/or Annie’s tutorial on how to get these repairs to fix old Squidtools layouts.
  • For what it’s worth, most of my templates from my Amazon Associates Links Tutorial seem to be working under the new layout. Exception is the five-items-across. The rest are flexible enough to cope with varying screen sizes.
  • Create smallish fixed-width building blocks that flow and wrap around like the words in this paragraph when they hit the right-hand margin. By “building blocks,” I mean a box-shaped unit such as one image plus its caption underneath and maybe a “buy” button. My How to Align Image Side-by-Side templates all work this way, and as far as I can see, I think they’re all still behaving correctly.
  • One might be able to change dimensions to percentages, so that layout elements stay proportional to the page width. For instance, with a three-in-a-row layout, set the width of each of the three “building blocks” to 30% with a margin-right of 2% to give a little padding and still leave a smidge of wiggle room for borders.  But there’s a problem with this, too, as kburns notes: 30% of the screen width on a smartphone is tiny, too small for images. [UPDATE: See my next post: Cheat Sheet for Converting fixed-width to flexible-width Squidoo layouts. I think I’ve gotten the hang of it now.]
  • People who really know CSS backwards and forwards may find that some percentage-width problems are solved by adding max-width or min-width: making bits of a layout stretchy and flexible, but not infinitely so.

WHATEVER YOU DO: Keep in mind that Squidoo’s width and font sizes now vary on the fly to fit people’s screens and devices, so you can’t assume anyone else’s column width will be the same as it is on your computer. One quick way to check is to grab the lower right-hand corner of your browser window (if you can) and drag it left and right to view the lens resizing itself to fit the new window size. Also, check Screenfly (thanks, dee) to see how it will look on an iPad and other devices.

NOW, ABOUT THAT TRIAGE:

This was what I was going to post before I got distracted trying to solve layout issues (note: I cannot answer any more questions now, as I’ve only managed to check/repair 11 of my 431 lenses since yesterday and I’ve gotta get back to them).

If you have over a hundred lenses, it seems daunting to figure out where to start. Here’s a five-minute exercise you can do with Excel to help you find and prioritize your top-earning lenses on Squidoo.

  1. Go to the big blue Dashboard Stats tab. (that link takes you there.)
  2. Choose “My Payments” and “Life to Date” in the pulldown menus at the bottom, and click “go”. Go to the bathroom while that loads in. [UPDATE: you might want to set it to “Previous 3 months” instead; old lenses may have earned more historically, but may not be top earners now.]
  3. Click “Download report as TSV” at upper right-ish.
  4. Open the result in Excel.
  5. Select All, then, under the Data > Sort… box, Sort By Lens Title (or URL).
  6. Choose “Subtotals” under the Data menu and click OK.
  7. Now at the top of the left-hand corner, you should see buttons for “1 2 3.” Click the 2, and it should hide all the different month-by-month payouts for each lens and show you just the total lifetime earnings for each lens. (If you can’t find the numbers, under the Data > Group and Outline submenu, choose “hide detail” to collapse everything and then “show detail” to get the summary. This is dumb but it works.)
  8. Under the “Data” menu, choose “Sort” again and Sort by “Total,” Descending.
Of course, this only tells you about Squidoo earnings, not lenses that earn most of their income through affiliate sales with third party programs like Amazon. On Amazon, you could perform the above procedure on their Earnings Reports, which could at least tell you what items are selling most on your lenses.

Squidoo’s Flickr Module Is Retiring: How to Recover

Jun 15th, 2012
by Ellen.
2 comments

Many of us have used the Flickr module to add thumbnail galleries pointing to Creative Commons images on Flickr. Unfortunately, as you’ve probably noticed, some of these images have been disappearing. Squidoo HQ has been trying to work with Flickr for a couple weeks to track down why Flickr is serving up some images and not others, but Flickr hasn’t responded, and Flickr images continue to vanish from Squidoo at random.

The upshot?

Squidoo HQ Announces that the Flickr Photo Module Is Being Retired.

It’s just going to disappear from our lenses. Poof! No timetable yet on when this is going to happen… but it will probably happen very soon (although I doubt over the weekend).

How to Recover from Lost Flickr Photo Modules

This weekend, the important thing is to grab ALL the data from your Flickr modules before they vanish. This means any text you wrote in the description field, plus the URLs of the Flickr pages your gallery links to. 

First, how do you FIND all your lenses that have Flickr Modules? Go to Google and search for the following, replacing my lensmaster name with yours:

site:squidoo.com “by Greekgeek” “curated content from Flickr”

Once you’ve landed on a lens that has a Flickr module, find that module quickly by hitting command-F and searching for the word curated. This will turn up all the Flickr modules, which have the caption “content curated from flickr”.

Now you need to grab the contents of the Flickr module. The quickest way I’ve found to do this is the Copy HTML add-on for Firefox. This lets you select ANY part of a webpage, right-click, and choose “Copy HTML” to get not only the text you selected, but any invisible HTML codes, including the links in the Flickr module that point to Flickr pages. I’ve created an “Emergency Flickr Module Bailout” text document that looks like this:

name of lens

<all the code I copied from the flickr modules for that lens>

next lens

<copied flickr module code>

etc, etc. At the end, that’ll be my To Do list of modules I need to replace.

Once you’ve saved all the contents of your Flickr modules, then you can replace them at your leisure, even after the modules have gone bye-bye. How? Well, the simple way would be to use a Link List module, filling it with the links to the Flickr photos you were showcasing before, but that’s boring because it loses the thumbnail images. There is a way to hand-code a thumbnail image gallery, but it’ll take more work. Here’s how.

Prep: Make a list of URLs

Pick a lens to work on, and then pick ONE Flickr gallery on the lens that you want to replace. Open a spare text document and make a list of the URLs of each Flickr page that Flickr module USED to link to. If you used my “copy HTML” trick above, these URLs will be hidden in the part I’ve bolded here:

<a target=”_blank” title=”Tetrahedron by Peter Rosbjerg” href=”http://www.flickr.com/photos/peterrosbjerg/3988329232/”>

This list will be your “link list”: it’s where the clickable thumbnail graphics are going to point to. Next, we need to create those thumbnails.

Create Small Images for Your Clickable Thumbnail Gallery

Now we need a thumbnail-sized graphic of each photo. To get a small graphic, go to each original photo’s page on Flickr. Double-check that it’s Creative Commons – Commercial Use Permitted (here’s how). Once you’re sure you’re allowed to use it, pick “View All Sizes” under the “Actions” menu. The 75×75 option will give you a square, small thumbnail, an excellent size for tiling.

Or use this free online image editor or other online image resizers to resize a larger-version of the photo to exactly the dimensions and crop that you desire.

Save all your image thumbnails in a folder on your computer. In the “prep file” you started above, make a note of the name of each thumbnail graphic you saved next to the URL of the Flickr page it’s going to point to.  (The URL list you created earlier.)

Upload the Thumbnail Images Off-Site

Now we have to upload the thumbnail graphics to an image host somewhere on the web. Image hosts include Tinypic.com, Picasa.com, or Photobucket. None of these options are ideal, since free image hosting services usually have a bandwidth limit and will temporarily hide the image if too many people view graphics in your account within the same month. (I bet Picasa is the best option, as it’s Google’s baby). Another option is to host images on your own website. I use ICDSoft to host this blog and a few other blogs and websites, PLUS all my Squidoo graphics.

See my How to Upload Images tutorial for how to upload images and find their URLs on Picasa and Photobucket.

After you upload each image, open the text document where you saved the list of Flickr photo URLs,  and copy the URL of the thumbnail image  next to its corresponding Flickr page. (Remember, each thumbnail graphic is going to link to the full-sized photo on Flickr.)

Hand Code a Clickable Thumbnail Gallery in a Squidoo Text Module

So now you’ve got:

  • A list of Flickr pages you’re going to link to
  • A collection of small thumbnail graphics of those photos hosted somewhere else
  • A list of the URLs of the thumbnail graphics
The next step is to hand-code a gallery of clickable thumbnails linked to their corresponding Flickr photo pages. For this, we’ll use HTML in a Squidoo Text Module.

I’ve written two tutorials which can easily be adapted to do this. The easiest way is to Make a Side-by-Side Image Gallery (that includes a template you can copy), changing the “width” attribute to whatever width you chose for your thumbnails. The imageLocation will be the URL of the thumbnail graphic, and the Link will point to the Flickr page with the full-sized photo.

The other possibility is to make a 100×100 Thumbnail Photo Gallery, borrowing fancy rollover codes I hacked from the Monster Spirit Boards. I was using this to make fake “Featured Lenses Modules” that include links to some of my related hubs as well as my lenses, but it will work with any thumbnail images you’ve resized to exactly 100×100. Take a look.

 

Note that if you embedded Flickr photos on your lenses using the “Share” HTML codes that Flickr provides, some of those photos may also be disappearing intermittently, so you’ll want to upload them offsite on Picasa, Tinypic, Photobucket, or your own webhost as I described above.

Handy Squidoo Tip: Caption a Lens Logo or Text Module Graphic!

Nov 3rd, 2011
by Ellen.
No comments yet

Screencap from my lens

Eureka! Why didn’t I figure this out sooner? There is a fairly simple CSS way to force a caption (including an image caption with clickable link) to hang out directly under a Squidoo lens logo or an image uploaded into the text module!

Ta-da! Actual screencap of a lens!

Here. I have, of course, created a new Squidoo tutorial:

Squidoo Image Captions: Handy Tip

Of course, the easiest thing would be if Squidoo would add an optional caption slot for images.

But then, I suppose there’s no way to guess what height / style the caption slot ought to be. It depends whether you’re trying to make a photo credit or some kind of comment/description.

Squidoo, Zazzle, and Creative Commons

Nov 16th, 2010
by Ellen.
No comments yet

Zazzle Referrals = Creative Commons that Earn Cash?

Last week I had a brain wave. Zazzle designs work a little like e Creative Commons: as a Zazzle Associate, you may feature them on your page or blog by providing credit and a link (in this case, a referral link) back!  You’re promoting an artist’s products (that’s the whole point). But as a side benefit, you have access to a huge body of gorgeous graphics.

Which of course meant I had to make a lens about it:

Want Graphics? Use Zazzle Designs Like Creative Commons

(more…)

CSS, Graphics, and Lens Design: My Best Design

Jul 28th, 2010
by Ellen.
5 comments

I think that to date, the Squidoo Museum is my best lens as far as presentation, although the Fancy Table of Contents lens comes close.

I’d like to talk about how I put together the Squidoo Museum. It demonstrates everything I know about graphics, color, fonts, and CSS.

(more…)

Advanced CSS Tricks and Tips: Borders and Backgrounds and Captions, Oh My!

Jun 7th, 2010
by Ellen.
No comments yet

I finally got around to updating my Advanced CSS lens, where I used to post crazy “lab experiments” in CSS.

Now I’ve reorganized it and made it more dignified (slightly), and added all the tricks I tend to use most on my lenses: rounded corners, background-images for paragraphs, captions under aligned images, drop caps, dramatic numbered lists, and most of all, playing around with the introduction module to make the first thing visitors see look great.

I’ve moved the old lab experiments to page 2. There’s another use for a Page Break!

(My “crazy lab experiments” lens is now ZEE CODE SCRATCHPAD. Once I’ve got things working nicely there, I may move the “finished products” to the AdvancedCSS lens for prime time viewing.)

Some Squidoo Tutorials: Navigation Aids

Apr 10th, 2009
by Ellen.
No comments yet

Since my lenses tend to be looooong, I tend to develop various strategies to help folks navigate them. I like little inset tables of contents, “shortcuts” that jump to relevant parts of the page, or navigator bars.

So I was working on a Fancy Tables of Contents tutorial collecting my various ways of creating tables of contents, indexes, and the like. And I’m STILL working on it! *laugh* I can always make a small project huge. Then I have to find ways to shorten it.

Along the way — partly because people are making a big push to update or build Lensographies — I wound up spinning off one module onto its own page. So at least THAT tutorial is finished:

Build a Better Featured Lens Module

It lets you do three things a regular Featured Lens Module can’t:

  • Feature more than 5 lenses in the same list.
  • Feature lenses in a fixed order.
  • Write a blurb before and after the featured lenses without getting cut off in mid-sentence (doncha hate that?)

Meanwhile, I’m still waiting for somebody to find the Easter Egg on my Amazing Nessie Photo, where I am offering $5 to the first person who proves (without any doubt whatsoever) that it’s fake. Whoever does so is going to get a chuckle, hopefully.

Because a fool and her money are soon parted, and I am actually trying to teach a lesson with that lens, I will give an enormous clue:

PHOTOSHOP SEES MORE THAN MEETS THE EYE… :D