Web Support Goddess

Tending your site… While you do what you love…

Understanding HTML & CSS Simply

What you want on your page is HTML

Header Box
Header Image
Content Box
Content
Footer Box
Footer Information

How it will look is CSS

I want a bit of spacing at the top and then my header image.
I want to have my title be blue and be bigger then the regular text.
I want my text to be grey and I want to use Arial font.

HTML stuff are called Tags & Elements

CSS stuff are called Selectors & Properties

They are both code languages.

To convert what you want to on the page we have to say it in the HTML language.

<header><img src="myheaderimage.png" /></header>

header is the tag <header></header> is the element.

<header><img src="myheaderimage.png" /></header>
 <section>
 <h1>This is my content</h1>
 <p>The is where I talk about my content.</p>
 </section>
 <footer>
 <p>This is all copyright Shari Lynn Smith</p>
 </footer>

To convert how you want it look on the page we have say that in the CSS language.

header { padding-top: 25px; }

header is the selector padding-top is the property

header { padding-top: 25px; }
 h1 { color: blue; font-size: 30px; }
 p { color: grey; font-size: 16px; }
 * { font-family: "Arial"}

WordPress handles all of this for you, however understanding what is where can be helpful when you want to change something. this is not all the information nor all that is needed to create a web page, there are many websites that will explain and teach you how to write code. This however will help you to know where you have to go to change something on your WordPress site.

Simply..

Your Theme writes the HTML Structure code
Your Theme CSS writes the Styling code
WordPress core writes the content HTML code

I work in Thesis because anything you can do with HTML you can do with Thesis. The Thesis Skin Editor does all the HTML structure stuff, the CSS is customizable easily, and WordPress handles all the content stuff.

Inkscape Notes

Things I’ve done and need to remember when using Inkscape.

I didn’t like seeing the piece of paper and I’m not going to be printing stuff often so I turned it off.

File > Document Properties > Untick Display Show page border

Per Nick Saporito on Youtube:

View > Custom

 

View > Zoom > 1:1

Pingback and Trackbacks

Sometimes I get so confused. How to do these and how they work. Here is the testing content showing them.

Formatting shortcuts in WordPress

Letter Action
* Start an unordered list
– Start an unordered list
1. Start an ordered list
1) Start an ordered list
## H2
### H3
#### H4
##### H5
###### H6
> transform text into blockquote
— holizontal line
`..` transform text into code block

Calendar by Kieran O’Shea

Simple to use, and simply displayed calendar.

When you hover over the item you get the information including any images you’ve added via html. There is no fancy editing of the description it’s just a text box that can take html but no WYSIWYG.

Each entry can be link to a url so you could link each to a post or page on your own website or somewhere else.

It does have repeat ability.

It does categories.

No location.

No multiple leaders, speakers.

It has a few widgets.

Calendar

Upcoming Events

Today’s Events

Previous Posts