Zen

Theming Drupal Blocks in a Zen Sub-theme

Adding block styles to your sub-theme are important for several reasons. My original objective behind learning to style blocks was to eliminate large  titles and awkward spacing that was inherited from the parent style sheets, especially the H2 tag. Once I got a grasp on how easy it was to style individual blocks or groups of them I started to utilize this more. Blocks.css comes packaged in your sub-theme's CSS directory with many useful classes and ID's listed (commented with their purpose as well).

Taking a look at the page source you can see how styles are applied to blocks...Read full article...


Theming Drupal - Side by side blocks in page region

You can go far with Drupal, a Zen Subtheme, and a little CSS intuition. Sometimes it's necessary to place blocks side by side in a page region, but adding page regions isn't possible or practical, you can use the block.css file in your Zen Subtheme's CSS directory to work some magic.Read full article...


Custom Regions using Drupal and Zen Subthemes

Having the ability to layout each page according to your own specifications is a must when designing a web site. In Drupal development, creating custom page regions gives control over content areas to achieve a personalized look. I'll walk you through creating two regions that split the content area in half.

Prerequisites: A basic understanding of Drupal and how it works, a Drupal site that you have access to installing themes and a basic text editor.Read full article...


Theming Drupal Views in a Zen Subtheme

Take complete control of design and flow of information using Drupal Views and Zen Subthemes. Changing the appearance is crucial when changing a background and body text colors of a site that conflict with the default views styling. CSS properties can be added to a high level tag that affects many areas as well as to very finite areas of just one View.

When the views module outputs a view it wraps it in a div tag with class information. Zen uses views-styles.css in the CSS directory of your subtheme to style views.

One key element in styling views is that when a view is created you must use on lowercase letters and underscores, however when creating the class tag in the CSS document you must use hyphens in place of underscores.Read full article...


Navigation menu with Drupal Zen Sub-theme

How to create Try2Stop.us style navigation menu in Drupal using the Zen theming system and a custom sub-theme

These steps assume you have the following installed and configured already - Drupal CMS, Zen Theme, STARTERKIT subtheme configured to the name and settings you desire, you have a working knowledge of css.

1. Open pages.css file in the css folder subtheme directory

2. There are already styles for various regions and tags, we will need to add a few to target a specific area. The method I used for creating the menu was styling the list items, so...Read full article...


Zen sub-theme CSS html-reset file

Use the style sheet html-reset.css in your Zen sub-theme for setting the default styling for your site, mainly text styling and backround colors. It has a confusing name that can make one worried about editing, but in reality it's a file that should be the first edited.

This file uses ems for most of it's styling, which is fantastic for fluid and dynamic sites that allow users to change font size, but not so wonderful for those who need to figure out how high to make a button for a line height of 1.2 ems.  Ems are calculated off of the standard of 16px text, so if your button is behind 1.2ems calculate 1.2 x 16px = 19.2px so you can go with a 21px or larger backround to encompass the line height properly.


Syndicate content

Try2Stop.Us | Contact Us | Log In | Try2Stop.Us © 2011