Quick Tips To Make Custom Borders & Backgrounds Fit The Pictures In Your Modules
While looking at various Lenses, I noticed many Lensmasters were having the same problems I have getting the custom borders they make match up with their Lens photos.
This is most noticeable when there aren't enough words in an Intro or Text module to fill the same amount of vertical space the image uses. An added problem is that they often look good in the Workshop, but not after they are published.
Many people love to jazz up their Lenses to make them stand out, but haven't figured out how to go the extra step to manipulate that custom border or background into just the right size to match their Lens photos.
The solution is a bit more advanced than simply copying code from one place to another. There are different spacing elements that can be adjusted, and just because you've figured it out for one module, or Lens, doesn't mean that the exact same solution will work in all your modules on all of your Lenses.
Even more frustrating is that just adding more content to a Lens may change your custom spacing, and maybe even make it unnecessary. Every change you make needs to be tested after you publish, what may look good in one browser could quite possibly look horrible in another!
Align The Border With The Intro Picture
Here are some of the things I did to spruce up How To Add A Custom 'Contact Me' Button To Your Squidoo Lens.
My first problem was the mismatch on the Intro. It bothered me a bit when I first made the Lens, it was the first thing that stood out when I looked at the published Lens.
I really do not like the image to be so much larger in the vertical dimension than the text area, especially when it sticks out both above, and below.
Try Some Padding
By default, I usually use "padding 15px;" for all of my text borders. This gives an equal buffer all the way around. I like this when working with borders because I don't like having my text to close to the edges.
I'm also using "font-size: 15px;" which is important because the size of the text also makes a difference in the border size.
The big problem I had with this is that while in the workshop, the border does not look the way it will after it is published. Here I've managed to expand the bottom, but there is more orange border beneath the Intro Image than I want.
After changing the padding a few times, I finally settled on "padding: 30px 10px 20px;" which gives me a little more on top, a little less on the sides and a bit more on the bottom than my starting point of 15px all around.
In case you don't understand how the padding numbers work, with one number, the space on all four sides is set to that one size. Two numbers will use the first for top/bottom, and the second is for right/left. With three numbers like I'm using, the first is for top, second for right/left and third for the bottom.
If you needed different numbers on all sides, the first is top, second is right, third is bottom, and fourth is left.
Things In The Workshop Aren't Always As They Will Appear
It may not have looked like what I had in mind while still in the Workshop, but this is how it looks after being published.
Adding Non- Breaking Spaces
My next problem seemed too big for padding, so I decided to add Non-Breaking Spaces. They are typed into HTML as
Non-Breaking Spaces are shown as blank spaces when the text module is not in editing mode.
If you've ever tried to make more than one space or line appear, you've probably noticed that web pages only allow one space between characters or lines.
Non-Breaking Spaces are how you get around that. I've used them in many places to create spacing, especially when I've needed to correct a problem with floating elements displaying in the wrong place.
I've seen some people deal with this by adding visible characters such as dots (periods) or dashes. I've even done it myself, but Non-Breaking Spaces are a cleaner option.
Before Non-Breaking Spaces
This is how it originally looked in the Text editor.
Adding The Non-Breaking Spaces
Here's how it looked when I added the Non-Breaking Spaces.
For my purposes, I only require one Non-Breaking Space per line.
(Don't mind the red lines, they're just FireFox's way of telling me that "nbsp" is not a word.)
Looks Like The Right Number Of Non-Breaking Spaces
This was how it appeared in the Workshop, exactly what I wanted.
How It Looks When Published With Too Many Non-Breaking Spaces
It looked great in the Workshop, but this is what I saw after I published.
Too much orange at the bottom. If I had enough text to fill that space, it would look fine, but with what little I planned on using, this seems awkward to me.
Sometimes, Less Is More...
More like it!
I probably made changes and published a few times before I had it looking the way I wanted.
Eventually, I cut back to five Non-breaking Spaces.
Notice that I put the closing tag on it's own line, this will also make a slight difference in the amount of space at the bottom.
Looks A Bit Off...
It may not look right in the Workshop...
Exactly The Look I Want
...It looks great when published!
Next Problem, Two Backgrounds In One Module
This was the worst problem on the whole Lens.
I never wanted it to look like this, but when I first published, I couldn't picture exactly what I wanted,
When I went back over it, I could clearly see that it would look good with just one background, instead having two in the same text module.
Merging The Backgrounds
The first step was to remove the closing tag from the first paragraph, then remove the opening tag from the second paragraph.
Added More Non-Breaking Spaces
I already had Non-Breaking Spaces dividing the paragraphs. The trick was figuring out where I needed more, or less.
Here's how it looked in the Workshop when I finally figured out the right number of Non-Breaking Spaces before and after the second paragraph.
Another Finished Module
I think that I actually got the best results with this one, but it's dimensions were rather odd and harder to work with since its image is actually two pictures stacked together.
How To Add A Custom 'Contact Me' Button You Your Squidoo Lens
See how it all fits together for yourself!
-
How To Add A Custom 'Contact Me' Button To Your Squidoo Lens
-
Some Lensmasters don't even have "Contact Me" enabled on their Lensmaster Page, but for most who do, that's enough. Some want more. If you want to encourage email feedback from your readers on one, or all of your Lenses without having them go to yo...
Help With Backgrounds, Borders & Colors
If you need the basic codes for making backgrounds, borders or even changing the colors here are the places I go to get ideas:
-
Advanced CSS: Layout Tricks and Lab Experiments
-
Columns! Images! Colored boxes! This lens is my CSS sandbox, where I'm testing fancy layout tricks to make Squidoo lenses look great. As I figure out new CSS techniques, I'll share them with you, so you can use them on your lenses! This lens assumes...
-
Borders and More
-
When it comes to HTML and CSS, sometimes we want to have borders around our text to spice up your pages. There are a variety of different types of borders. You have regular ones and then rounded ones. Please remember not everything works in all brows...
-
The Guide to Colors On HTML
-
My HTML and CSS lens has managed to get a bit big so I decided that I need to split it up a bit. This is what this lens is all about. What I am basically going to cover is the different colors that you can use in your own lenses. I know they all work...
-
Background Tips and Tricks
-
In the previous HTML and CSS lenses that I have created, I had talked about backgrounds and how to add it to your lenses. I know you were probably confused and thought maybe it only works with the borders as that seems to be the only place so far tha...
-
HTML Borders Backgrounds
-
Have you seen sharp looking lenses formatted with HTML borders and backgrounds and wished you could do the same? There are already plenty of EXCELLENT how-to-HTML lenses available, so I thought I'd do something a little different. There are two main...
Help With CSS On Squidoo
It's good to see how others use HTML Code & CSS then try playing around with it on one of your own Lenses.
Choose a Lens that does not get a lot of traffic (we all have them!) and change a little bit at a time. Note not just how things look within the Workshop, but publish and view it in different browsers!
Little by little, you'll figure out what works best for you!
-
My Favourite CSS Tricks on Squidoo
-
The basic tools provided by Squidoo will do pretty much everything you need to get your content out to your audience. But sometimes you want to format it a little differently, and this is where inline CSS comes into play. Here I show some of the tric...
-
Squidoo CSS - my favorite code to spice up a lens
-
I've gathered my favorite Squidoo-code for later reference. I'm tired of trying to find that specific lens I used a css effect on and then having to go to edit-mode, copy paste, and then go back to the lens I was working on. This lens will help me be...
Learn More About The GIMP!
It's free, can't hurt to give it a try!-
Why I Love The GIMP For Photo Editing
-
A powerful image editing tool, The GIMP has been developed to primarily be used on UNIX platforms, but it also runs on MS Windows and Mac OS X. Use it as a simple paint program, for doing expert quality photo retouching, online batch processing, for...
Comments? What Do You Think About Making Custom Borders & Backgrounds?
Mickie_G wrote...
Again, you are a wonderful pal. You share great tips with everyone!
Light-in-me wrote...
Great information, I did not know about the non breaking spaces code. I will use that for sure !
Thank's for sharing..
ajgodinho wrote...
Excellent step-by-step approach and easy to understand. I think a lot of squids will relate to the issues you've tackled in this lens and use the solutions you've provided. They will be happy campers once they come across this baby. I've lensrolled to my Squid-School lens...great job!
JenniferAkers wrote...
You answered questions that I hadn't found answers for (and even gave tips on things I hadn't even thought about changing, like the non-breaking space). Thanks!! 5*, Favorited, bookmarked.
mulberry wrote...
Looks great, I need to bookmark this one, I'm sure I'll be back repeatedly!
2Eklectik wrote...
Thanks for the info. I am always on the lookout for ways to improve my lenses.
Love Learning About Advanced HTML For Borders & Backgrounds On Squidoo?
CleanerLife On Twitter

- CleanerLife
- aka CleanerLife
- 1,305 followers
- 1,459 following
-
- Scary Chemicals Found in Food: http://bit.ly/2pIcQm
-
- Dangers of packaging chemicals getting into food: http://bit.ly/162ub6
-
- The company responsible for Swine Flu is the same company getting rich making the Vaccine? http://bit.ly/1XQitA
-
- @badmsm you are making edible hats and scarves now :)?
-
- @Dana_Willhoit spam, of course ;) http://bit.ly/RQuJV
CleanerLife's Top 10 Lenses
Fetching RSS feed... please stand by
Squidoo & The Squidoo Logo(tm)
are Trademarks of Squidoo LLC
GIMP © The GIMP Team
Original content:

Advanced HTML For Borders
& Backgrounds On Squidoo
by CleanerLife
is licensed under a Creative Commons
Attribution-Noncommercial-No Derivative Works 3.0
United States License.
by CleanerLife
I'm obsessed with eating healthy, fresh food raised... (more)























