Programming this site.

[Billy]

I've added a few CSS classes to the site anyone can take advantage of.

Classes
Text
"big" = 130% larger font in green and bold weighted.
"ital" = italic or emphasis rendering
"b" = bold weighted

Images
"shadowbox" = top and left hot, right and bottom cool.

Make any requests here and we'll add them to the site-wide style sheets

[Billy]

Let me know what categories we ought to develop for discussion groupings.

[Dave Baker]

ThaNkS, yOuR gEeknEs!!

[Billy]

Here are a few more text classes:

"caption" = 60% smaller font size.
"alert" = crimson
"alertBold" crimson, bold
"alertItal" crimson, italic
"alertBoldItal" crimson, bold, italic

[Billy]

Here are some more image classes

shadowboxLeft
shadowboxRight
shadowboxLeft40
shadowboxRight40

Instead of using the "left" or "right" wrapping options using the interface, don't select an option and add class=shadowboxLeft The selectors I've embedded in the class make it a bit better rendering with more breathing space.

You may notice on some of my posts that the accompanying image expands if you click through to the article. That's because I'm telling the image to be a certain width relative to the space it occupies.

Using class=shadowboxRight40 will render the image to the right of the text with a nice set of padding and our highlighted/shadowed border. It also tells the image to be 40% of the width of the space it is occupying. So on the homepage it shrinks up and text can wrap around the remaining 60%. When a guest clicks through to the blog page, the image then fills up 40% of that much greater space.

[Billy]

If you want to take advantage of these CSS classes, use a "span wrapper" to call the class. Like so:

Here's your plain text and you want the words "plain text" to be big.

Here's your <span class=big>plain text</span> and you want the words plain text to be big.

Result:

Here's your plain text and you want the words plain text to be big.


People need to see this text, so you want "need to see" to be red.

People <span class=alert>need to see this text.</span> So you want "need to see" to be red.

Result:

People need to see this text. So you want "need to see" to be red.


You want your photos or icons or story-related images to pop off the page? Use the image tool. When you close the tool you are left with the HTML string in your text that prob looks like this:

<img src=http://renobama.com/washoe_greens/somePic.jpg style=float:left;margin-right:10px />

Simply add class=shadowbox (with spaces around it) to your code string.

<img src=http://renobama.com/washoe_greens/somePic.jpg style=float:left;margin-right:10px class=shadowbox />

Result:

From this:


To This:

[Dave Baker]

Hey! how did I do?

[Billy]

Most excellent, thou GeekMeister.

Now you can request a class. For example,

Hey Billy, I want a class that gives me a royal blue font color in bold and I want it to be called royalBold.

Voila!

No one time deals though, these should be classes you want to call again and again.

Now go fix your "Green Energy Show" icon.

[Dave Baker]

And don't forget to put quotation marks around the term to the right of the equal sign. Like this, I believe:
class="shadowbox".

[Billy]

Not necessary unless you need to concatenate a broken string, like if your class was named 'My Class' you would have to use quotes, like this,

class="My Class"

But otherwise you can use class=shadowbox

[Dave Baker]

I'm sure you're correct--I just assumed quotes were needed after looking at the source code for this page.

[Billy]

The interface might use them, but when you embed your own, it follows your device.

I'm a minimalist programmer: if you don't need it, don't use it. The docType for the encoding on this site is not strict xml which would dictate the quotes, though I've weighed in against that standard for a decade now. Quotes are a tremendous and unnecessary waste of bytes that could be used to render images and vids just that teeny bit of a fraction faster. Same goes for trailing ";" programmers add as a favor to the next programmer or programming editor. But they may never be used! So drop that courtesy and just stick with the essentials. Comments, though, can be quite helpful and necessary.

[David Sanders]

Good to see some CSS options! I'm only sorry that I didn't come across this sooner.

Of course, I'm a computer geek myself. I'm especially a fan of Open Source software; you're actually encouraged to install it on as many computers as you like, and the quality is often better than that of commercial software. Most of the major applications run on Windows or Mac as well as on Linux.

I'm licensing my own copyrighted images on this site under a version of the Creative Commons License. This expressly allows copying of the images for non-commercial use.