Created by spirituality (contact me)
I'm a webmaster and student of religion and spirituality. See my website on religion and spirituality: www.katinkahesselink.net
Join my fanclub if you...
(more...)
Squidoo coding - css examples
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 a better lensmaster and perhaps it will help some other squids as well.
Some basic HTML explanations
<p> Your text here </p>
Notice that it starts with <p>
and ends with </p>
These are called the opening and close tags. Your text should go between those two tags.
Paragraph tags are great because after the closing paragraph tag your next text will automatically go on the next line. In squidoo you can also just push <enter> - but that won't work in ordinary HTML
The other basic HTML tag I use is bold:
<b>your text here</b>
Opening tag: <b>
Closing tag: </b>
This can be in a paragraph - and works if you want to style a single word.
So the basic message here is: if you want your text styled, use both the opening and the closing HTML-tags.
Orange Box
This is a style I like to use when I want some of the look of 'the most important thing' module, but not all.
Opening tag:
<p style="border: solid 10px #ff6600; padding: 10px">
Closing tag: </p>
Light blue background
The style of the new 'contents at a glance' bit
This is the precise color of light blue that is used in the new contents at a glance and explore related pages part of squidoo. I haven't used this yet, but for unity of style on a page, this could really work
Opening tag:
<p style="background: #E1E8F2; padding: 15px; margin: 0;">
Closing tag: </p>
(Light) Yellow background
This is the background-color used in the 'created by' bit that's at the top of each lens. For a consistent look throughout a lens it could be used to highlight text in a way that's not too flashy. (Orange is flashy, light yellow is more mellow - yes that rimed).
Opening tag:
<p style="background: #FCF8C0; padding:15px; margin: 0;">
Closing tag: </p>
Blue Typed Text
I use this for quotes sometimes. It gives a nice contrast and the colors go well with the squidoo colorscheme
Opening tag:
<p style="color: #1f94bf; line-height: 1em;
font-size: 150%; font-family: 'courier new'; padding: 10px;">
Closing tag: </p>
Similarly - combined with a bold font, the effect can be a bit more striking.
Opening tag:
<p style="color: #1f94bf; line-height: 1em;
font-size: 150%; font-family: 'courier new'; padding: 10px;"><b>
Don't forget to close both the bold and the paragraph tags like this: </b></p>
More blue text, but without the special font
This text is bold, blue, larger than usual and has space between the lines that you probably won't notice but still makes it more legible.
Opening tag:
<p style="color: #1f94bf; line-height: 1.2em; font-size: 150%; font-weight: bold; padding: 10px; margin: 10px;">
Closing tag: </p>
More blue letters, font size a bit larger than usual
For a calmer effect this color, with a font-size just a few pixels larger than the usual squidoo font-size can work very well.
Opening tag:
<p style="color: #069; font-size: 150%; ">
Closing tag: </p>
More squidoo blue
this is the precise color the headings and links have in squidoo
Opening tag:
<p style="color:#046381;">
Closing tag: </p>
More blue text
This text is bold, but no larger than the standard font-size. The color is another variety of blue.
Opening tag:
<p style="color: #1f94bf; font-weight: bold">
Closing tag: </p>
Orange text
I've used these orange letters on a jokes page. The orange is related to the several orange colors in use on squidoo. the font-size is just a bit larger than the standard-squidoo lettering and the style is bold
Opening tag:
<p style="color: #f60; font-size: 150%; font-weight: bold">
Closing tag: </p>
Red text, within a paragraph.
Opening tag:
<b style="color: red">
Close this off with: </b>
Heads up on HTML and CSS options on squidoo
- font-size in pixels (px)
- <hr> :horizontal lines
- i-frames
Let me know in the guestbook what disabled HTML features I missed.
More lenses on how to be a lensmaster
-
Cute modules to spice up your lens
-
Cute modules that will help your lens stand out. Go beyond the text-module and the link-list module and use some color. These modules are built into squidoo and really make your lens look good. Some are hard to find, so I added descriptions on where...
-
The New Introduction Module in Squidoo
-
Squidoo recently changed the Introduction module. It suddenly has an inbuilt table of content and a 'discovery tool'. This lens is about the ins and outs of these new features. Squidoo gives these options on all lenses, but the features don't show u...
So, what did you think of my Squidoo css tips?
|
MerryM
thanks for this! faving for future reference. Posted May 14, 2008 |
| WordWhisperer
Thanks for this lens. It will be great resource for this newbie squidooer. Posted May 04, 2008 |
| clouda9
Yeah! Lovin' it, thanks for sharing. Posted May 04, 2008 |
| jince
nice work Posted April 29, 2008 |
|
XP
Thank you for the code ... will add this to my new Lens Typography lens. 5*s too. :) Posted April 23, 2008 |
More lenses by me
-
Katinka Hesselink - my other lenses
-
I'm a lensmaster, webdesigner an oldest child, an eternal student, a former teacher and single. Most of you know me here on Squidoo as lensmaster 'spirituality' - but I've also got a life outside my interests in spirituality (though perhaps that's n...
Was This Lens Helpful?
So many ways to show your appreciation! Rank this lens with the little stars at the top. Check out the advertiser's, if you are interested in their products. Stumble it. Digg it. Add it to your lens roll. Leave a comment. Favorite it.
Thank you!
(by 2 people)
