Topic: Hints for Completing CSS COM3075 Assignments

CSS COM3075 Assignments

Activate Firebug for Firefox and use it to identify "boxes" or "divs" or "elements" and their style. Test your changes to colors and images in the css in firebug before saving the changes to your Appearance->Edit CSS.

Safari->Window->Activity will list all files "sent" to your browser to construct the page you see. Look for links there to your ../wp-content/themes/Basic201/style.css and the ...custom-css... file added by the Edit CSS plugin.

Use the links to your custom-css stylesheet to test validation at the W3C CSS validator page.

Print a copy of the ../wp-content/themes/Basic201/style.css and scribble your colour/image changes all over it.

Backup the CSS code you paste into the Edit CSS plugin, ie save it in a text file or in"code" tags in a draft post.

Focus your CSS effort on changing just colors and images. It is not necessary to alter the layout of elements in the Basic theme.

Avoid pasting large chunks of untested style into the Edit CSS page. Instead, paste one

element { property: value }

at a time. Make small changes, preview, undo, repeat before trying another.


Rules of Thumb for Web Design

Re: Hints for Completing CSS COM3075 Assignments

Secret for Safari that I use: Safari->Prefs->Advanced->Show Develop Menu toggles the Web Inspector and the especially useful "Inspect Element" contextual menu when right-clicking (command+left click).

Re: Hints for Completing CSS COM3075 Assignments

Remember, focus on font and background colours and images. Scanning stylesheets can look like gobbldy-gook at first, but get sharp at spotting the elements with images and colour values. When doing your CSS lessons, pay closest attention to topics on fonts and backgrounds(images, and colours).

Changing the layout or position, or adding new CSS elements is beyond the scope of the course.

Images may need to be recreated in PhotoShop, do not pass up an opportunity to revisit your skills in PhotoShop.

Re: Hints for Completing CSS COM3075 Assignments

Here's a toolbox css sheet with many changes to the origina loolbox css, but very few, if any, caual images.

http://toolboxdemo.wordpress.com/
http://toolboxdemo.wordpress.com/?custom-css=1&csblog=1eH5K&cscache=5&csrev=11

Re: Hints for Completing CSS COM3075 Assignments

Here's  a toolbox theme with an image in the header/branding div:

http://stjohnscathedral.ca/
http://stjohnscathedral.ca/about/our-website/
http://stjohnscathedral.ca/?custom-css=1&csblog=1eedS&cscache=5&csrev=19

Re: Hints for Completing CSS COM3075 Assignments

General advice:
http://en.forums.wordpress.com/topic/how-do-i-override-the-title-background-color

First off there is nothing to worry about in "overriding" CSS. Make sure "add to existing..." is checked and wordpress will take care of that for you. Copy the CSS out and put it into a plain text file (view original css) and then you can pull the bits you need out of the existing CSS and put into the CSS edit window. Don't copy and paste an entire section (selector), just the definitions that you are changing. If you need to add a definition, simply add that definition in.

Re: Hints for Completing CSS COM3075 Assignments

Background header images go into the header in the toolbox theme in a couple places something like this

#branding {
background:url('http://iblog.stjschool.org/2010/12/header-toolbox.png') no-repeat;
}

or

#branding hgroup {
    background: url('http://stjohnscathedral.files.wordpress.com/2010/12/header-toolbox.png') no-repeat bottom;
    position: relative;
    height: 350px;
}
#site-title {
    padding-top: 40px;
}
#site-title a {
    background: url('http://stjohnscathedral.files.wordpress.com/2010/12/logo.png');
    display: block;
    text-indent: -9000px;
    width: 361px;
    height: 45px;
}
#site-description {
    text-align: right;
    position: absolute;
    top: 63px;
    right: 30px;
}

Re: Hints for Completing CSS COM3075 Assignments

Examples: A variety of stylesheets use the custom css plugin:

1. http://en.blog.wordpress.com/2010/11/17 … ss-styles/
2. http://wholelottalovely.wordpress.com/?custom-css=1
3. http://rafaelalburquerque.com/?custom-css=1
4. http://kissmyspatula.com/?custom-css=1
5. http://foodytwoshoes.com/?custom-css=1
6. http://figandfennel.wordpress.com/?custom-css=1

The last one adds its background image to the html container rather than starting with the body container:

html {
background:#000 url('http://www.markwas.ca/figfennel/background.jpg');
background-attachment:fixed;
background-repeat:no-repeat;
}