Posts Tagged ‘web design’

May 1st, 2010

More WordPress Templates

The building block of most sites is a portfolio!

I just created more custom theme page templates for the up coming VW Pro WordPress theme releases.
These are for portfolios or basically anything you want in this type of layout.
They are page templates that you can assign a category to and create endless portfolio type pages..

Horizontal Layout
Vertical Layout

As you can see in the vertical layout, the text is automatically converted to an excerpt and shrunk so the layout is even in size.

In both layouts the images are automatically cropped and linked via FancyBox jQuery light box effect animated popup display of the full size image as seen here when clicking on the images posted.

The images are inserted in the post via the custom post options in the post editor included with VW Pro Themes.

Tags:


Posted in:

WP Theme Options

Comments:

No Comments »

April 9th, 2010

Styling Lists with Images

This is a web developer insider trick.
As most people know, when you add the property list-image to style a list you have almost no control over where the image lands.
This is particularly ugly when comparing different browsers or when your image sits to high, low or almost on the text of your list.

I’m going to show you how to style a list item with a tick and keep full control over where the image lands.
First thing is to through out the list-style-image property as it is useless.
Use a normal background property.

Select All
1
2
3
4
5
6

ul.tick li {
	list-style:			none;
	background:		url('images/tick.png') no-repeat 0 1px;
	padding:			0 0 0 24px;
	line-height:		1.4em;
}

Doing this you can not only use the background positioning values but also the padding property.
For this tick I am pushing it down 1px with the top position property and adjusting the distance between the text and the icon with 24px of left padding.

Using these properties for list style images instead of the actual list-style property gives you full control.

  • Something
  • Something
  • Something
  • Something
  • Something
  • Something
  • Something
  • Something
  • Something
  • Something
  • Something
  • Something

Tags:


Posted in:

CSS

Comments:

No Comments »