Websites worth a visit, CSS goodies to explore.
http://www.colorzilla.com/gradient-editor/
http://css3gen.com/
http://css3menu.com/
http://css-tricks.com
http://css-tricks.com/examples/AnythingSlider/
http://css-tricks.com/downloads/
http://bit.ly/sG04Eo
http://www.design.annagraphics.com/tutorials/tweaks.css
Using a CMS system to create and manage a web site is becoming more desirable. There are many out there, and the decision on which to use depends on the web site’s requirements.
Popular “open source” options include Drupal and WordPress. Both robust and well thought-out systems. However, deciding on which to use – then downloading, uploading, connecting to a database and checking some basic settings is only the beginning of a project. After that comes the actual visual design, page structure/hierarchy, and CSS formatting.
For both Drupal and WordPress use themes, and come with a default theme. (This is a folder containing multiple .php pages that control how the web pages are put together.) To make a custom website we do never modify or change any files of the default theme, but create a ‘child’ theme instead. The custom child theme can be an entire copy of the default theme , or it can be just a few .php files, in the child folder, which link-to and use the functionality from files in the parent theme.
All customization of the CSS and some php functions are edited in the child theme files.
Drupal and WordPress use the same principals, but have different requirements regarding the set up of a child theme. First we need to know which folders the themes are located in:
Drupal: sites/all/themes
Wordpress: wp-content/themes
Inside these folders are the theme folders, and depending on how the CMS was set up (by SimpleScrips?) or on which server (Dreamweaver ads multiple free themes to WordPress, Bluehost only includes the default) it may include none, one default or multiple themes.
At this point one should have a pretty good idea of what the proposed design and site structure will be, so the next step is to find a suitable theme to customize. Both Drupal and WordPress have hundreds of free themes available for download. However, customizing a theme that is already very “designed” can be frustrating. Starting with a simple ‘plain’ theme, which includes minimal stye can be easier to handle than trying to retrofit an advanced theme.
For Drupal, a good starting point is the “zen” theme. This also includes a “starter kit” and clear instruction on how to proceed. For WordPress, the default 2010 (or 2011) theme is also relatively easy to customize.
The new theme folder will reside in the ‘themes’ folder, and have it’s own name. Inside that are the custom files. To activate the theme some basic information needs to be edited in these files:
In Drupal the .info file is changed.
In WordPress the style.css file is changed.
These edits will make the theme available for activation in the admin area of the CMS system.
Once the theme is activated we can start editing the CSS to create the front-end visual look of the pages. The easiest way to experiment with CSS is to use the Firefox Web Developer plugin. The effect is seen in the browser window, but not saved. Once a CSS style is decided upon, it is copy/pasted into the actual CSS file within the theme folder.
We see the writing on the wall.. the future of web site construction is firmly moving from hand-coded HTML pages to CMS driven sites. Systems such as Drupal, WordPress and Joomla etc., offer many advantages and dynamic features built-in, and with regular updates CMS-driven sites stay current with all the latest code, dynamic goodies, SEO best-practice, as well as security standards. Deciding which CMS system to use, and then installation and activation is a subject unto it’s own. Therefore in this November SIG meeting we will only take a comparative look at the techniques and tweaks required to customize a default CMS website template into our OWN design. CSS and php templates will be explored. Seeing an overview of customization will also help in deciding which CMS system might be best suited for your own project.
Join us and find out more..
Styling your websites with attractive and reliable fonts.
In the past we had to play it safe and choose fonts we assumed were installed on viewer’s computers, Choices were limited to “serif” v/s”sans serif“, or Verdana v/s Times. Now there are many more options available now using the online @font system, and using HTML and CSS to display fonts.
There are many things to consider when choosing fonts for the best “readability”. What makes a page of text easier to read?
Viewers read the shapes of letters – we see the strokes, and spaces around the letters.
Designing for screen is not the same as print, resolutions and pixels are involved.
“x” height is important – the height of the lower-case letters to the height of the uppercase letters. The greater “x” height, the easier to read.
Verdana has higher x height so it’s more legible.
“Counterforms” spaces inside the letters. In an “o” or “d” etc. Bigger is better.
“Apertures” openings on letters like “e” and “c”. Larger apertures are easier to read.
Bowls: not to narrow and not to round.
Shoulders: where bowls meet the stem Ascenders and descenders. Length can make it easier to read.
Serif and Sans serif: Little hooks on letters.
Terminals: blob at end of apertures
Strokes: not too thin or it gets lost.
In paragraphs of text, the space between lines “leading” is also important for readability. More space makes it easier, but not so much that if feels like a new paragraph.
Consider how the font will be used – headline only, or block of text, or very small text? How does it hold up when set very small?
Does the font include the required variances such as bold/italic and numbers? Verdana has numbers at ‘x’ height, Georgia has “old style” smaller numbers relative to the letters.
Downloading and installing fonts to use on own server.
Find a font to download at www.fontsquirrel.com
Download the “@font face kit”. Select all versions.
TTF is for most browsers
EOT is for IE
WOFF is emerging standard
SVG is for iphones and ipads
The zipped folder will include all versions, an HTML sample, CSS and the license.
Place the fonts into a “fonts” folder, and upload to the server.
Link to the CSS file that came with the font, in the fonts folder.
Set the CSS code (change the name to your font!) to define the size/style
Specify the style in the HTML of the page
How to use google webfonts:
Use the fonts on another server such as Google
google.com/webfonts
http://code.google.com/apis/webfonts/
Easier to use, follow Google instructions to place the link to their CSS file, into your file. Paste the Google link code at the top of the head section of the code(!) Or it won’t work on every browser. Then have to change font family in the CSS file
h1 { font-family: ‘Metrophobic’, Arial, serif;
font-weight: 400;
}
Good habit to have single quotes ‘ ‘ around the font name, especially if the name has a space. The second font names are fall back.
