CssTag | Jacob Emerick's Blog

MVC CSS Stylesheets

While working on redoing my website using a custom model-view-controller framework I decided that it was a good time to do some extra cleanup. After all, cleaning up the backend only changes the content portion of the site. There's much more to websites - styles, behaviors, cache control - then the content. In the interest of cleaning up my website I decided to take my MVC framework to the next level and use it to create my stylesheets and Javascript in real-time.

The primary benefit of MVC frameworks is to simplify code logic and remove duplicate code. With all user requests being transferred through the same routes and controllers, it's easy to whip out extra html pages or make site-wide changes by editing a few lines. Common SQL functions, AJAX calls, and classes can be used across different pages and sites easily without duplication.

There's a lot of duplicated code in my assets. I use Erik Meyer's reset stylesheet, a global set of style rules, jQuery, similar lightboxes, etc across my different subdomains. I could include each ...

• Tags:
• css
• my site
• oop

Basic Tag Cloud

This post assumes basic understanding of PHP, HTML, and CSS.

Creating my blog by hand gave me the opportunity to work with many features that come standard with online blogging software. I developed tag clouds, post filtering, and the search functions based on the visual functionality that other blogs appeared to have. With this post, I'm going to explain how to make a tag cloud using PHP and CSS that can be implemented on any type of article- or post-based environment.

Most blogs that use tags allow multiple tags per post and tags being placed on multiple posts. The tag not only helps explain what the post is about, but also gives basic navigation based on tag for users interested in a specific blog category. A tag cloud provides the navigation with an additional feature: tags that are used more often in the blog are increased in font size, giving them more weight compared to less-used tags.

The first thing that you'll need is a PHP array of all your blog tags. The creation of this array is wholly dependent on your blog setup ...

• Tags:
• blog
• css
• php

Style Switcher Part B

This post assumes some intermediate understanding of Javascript, stylesheets, and cookies. It will show you how to use cookies with a style switcher to remember a user's preference and load it with their (many) return visits.

In the previous post, I explained a method for allowing users to switch between different stylesheets on your website. However, after they leave your website, there's no way for your site to remember them or which style they preferred. If they liked the 'yellow' stylesheet, they would have to click it each and every time they visited your website. The best way to avoid this problem is to set a cookie when they choose a style, then read the cookie on their return to display the preferred stylesheet.

You can create your cookie as soon as the user clicks on a style, but you'll end up overwriting the cookie several times if the user clicks multiple styles (to check out the different options). A better method is to remember the last style they view before they leave the page.

• Tags:
• cookies
• css
• dynamic
• javascript

Style Switcher Part A

This post assumes some intermediate understanding of Javascript and stylesheets. It will show you how to setup a Javascript-powered styleswitcher that works for individual pages.

One of the huge benefits that CSS, or Cascading Style Sheets, brought to web design was the ability to easily change an entire website's design and layout. Since CSS allows a separation of content and layout, a single style sheet can control all of the pages of a website. Some extra markup in the HTML may be needed for specific layout requirements, but colors, font-size, and normal layout options can be easily modified with a few lines.

This brings up an interesting opportunity: multiple stylesheets for a web site. These different stylesheets can have simple changes: a main one containing layout and general styles with several optional sheets with color information. By attaching the stylesheets to the document with the alternate tag, some browsers will allow users to switch between the sheets under their 'View' menu.

• Tags:
• css
• dynamic
• javascript

Static Star Rating System

This post assumes basic understanding of CSS and website images.

Following the rule of separation of content and design, most web developers will limit any design element images to page's stylesheet. This includes repeating header, footer, logos, and body images. You can do some tricks with these images while linked to the stylesheet by utilizing the background-position style.

A block element (div, table, or forced by display:block) on a webpage can be thought of a window with information in it. The window's size depends on either the html content within it or the CSS declared height and width. When you have a background image from your stylesheet for a block element, the div will not change its shape to fit the image. Instead, if the image is larger than the window, part of the image will be hidden. You can control what is visible by changing the background-position to force the image to float to a certain side (left v right and top v bottom) or specify how far to the left and top in pixels the image should appear.

Why is this ...

• Tags:
• css