Want more MiniCard goodness? Purchase the premium pack to gain access to the in-built AJAX RSS feed module, several new sub-themes, priority support, and the warm fuzzy feeling you get by supporting the author! Premium is £25 GBP.

I am releasing my MiniCard theme for wordpress which supports hCard/vCard microformats, tonnes of social networks, showing some portfolio items (optional), and more – all controllable from its own Theme Config page. This theme is free and licensed under GPL – there is also a premium pack available with many theme variations, and the footer feed functionality.

Read more for more information and the download links. I hope you find this theme useful and spread the word

About the Theme

MiniCard is a social network/business card WordPress theme inspired by Tim Van Damme’s excellent website. The theme lets you add links to all the social networking sites you may be a member of, and post useful information such as bio’s and contact details. It also has built in hCard support and (optionally) lets you offer a vCard for visitors to download your contact information.

Another useful feature, for those with portfolios, is the ability to set up a portfolio category in which you can set up items to feature below your card. These items are shown as thumbnails/galleries and pop up in a lightbox when clicked.

To control all of the features of MiniCard the theme comes with a useful admin panel for setting up your networks, theme options, and contact details for your hCard.

Since this is only a lightweight mini theme, widgets are not supported. You can however run a mini blog and make posts – these are all styled and fully supported.

To summarise:

• MiniCard is free to download and licensed under GPL
• Loads of social networks supported
• (Optional) Ajax Loading of main navigation links
• Portfolio functionality with lightboxes
• Theme Config section and instructions in WordPress admin
• Built in hCard/vCard support
• Comes with the default theme
• Each theme contains several variations – burst, diagonal stripe, horizontal stripe, vertical stripe, tartan.

Setting up the social page

If on the Settings > Reading page you have ‘posts’ shown on the front page, the social networking page will show by default. Otherwise if you are setting the front page make sure you give it the ‘home’ template.

About the Premium Pack

The MiniCard theme itself is free, however I have created a premium pack which simply ‘slots in’ to the free theme. This pack contains:

• Feed functionality – pull in RSS feeds or your choice, for example your own blog and your twitter posts. Loaded in using AJAX so the page loads faster.
• Several sub-themes -
  • Blue Anvil Blue
  • Black
  • Grey
  • Pink
  • Helveticard (minimalist theme based on Jon Hicks’ design for Helvetireader)

You also get a warm fuzzy feeling inside knowing that you have helped support the author (me).

Screenshots

Demo

I personally set up my MiniCard Theme to demonstrate the theme in use. You will notice the feed below my card – this is part of the premium pack.

Download MiniCard (free)

Download MiniCard from the WordPress Themes Directory →

Purchase the Premium Pack (£25)

Support

Questions? Bug Reports? Feedback? Contact me – priority will be given to premium pack purchasers.

Licence & Donate

The MiniCard theme is licensed under GPL (http://www.opensource.org/licenses/gpl-3.0.html). You may remove the link back in the footer, but I would appreciate if your attributed my work. Remember, the more popular the theme becomes, the more likely it is maintained and updated in the future.

If you wish to make a donation because you like this theme, you can use the ‘Buy me a coffee’ link below, buy the premium pack, or both

I’ve seen the ‘web 2.0′ layout (full width background, centred content) done in some pretty wacky and different ways, the worst being a background image and then fixed height sections laid on top (if the content wraps or the text is resized…bam..broken layout).

Because of this I am going to demonstrate the method I use – content strips. Hopefully this will be useful to CSS beginners who want to code this type of layout.

Essentially, what you do is treat each section, or ‘strip’, separately and layer them like a cake.

Lets take a commonly used design and demonstrate what I mean.

In the above design as you can see we have a header, a content (with two sub sections), and a footer. The footer and header require a full width background. So, horizontally we can see 3 strips – header, content, footer.

1
2
3
4
5
6

<div id="header"><p>Header</p></div>
<div id="content">
    <div class="mainContent"><p>Main Content</p></div>
    <div class="subContent"><p>Sub Content</p></div>
</div>
<div id="footer"><p>Footer</p></div>

Using CSS we can style each strip, leaving them all as full width elements. Header and footer should get a tiled background image each, and the text should be aligned center (text-align:center;).

1
2
3
4
5
6

.inner {
    width:700px;     /* Limits its width */
    margin:0 auto;   /* Makes this inner div centered */
    text-align:left;    /* Parent strips have center aligned text */
    overflow:hidden; /* To clear floats */
}

Our HTML now looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<div id="header">
    <div class="inner">
        <p>Header</p>
    </div>
</div>
<div id="content">
    <div class="inner">
        <div class="mainContent"><p>Main Content</p></div>
        <div class="subContent"><p>Sub Content</p></div>
    </div>
</div>
<div id="footer">
    <div class="inner">
        <p>Footer</p>
    </div>
</div>

See how it works? Each strip can have its own background this way, and can shrink and grow to fit it’s content without breaking the layout.

As I said before, this is my preferred method of coding these kind of layouts and it has not failed me yet. I hope you found this useful.

It’s Here! PSD To WordPress Theme service

You supply the PSD / JPG / PNG of the design and we’ll make it into a full WordPress Theme, with a full CSS layout, widget ready and give you great support, all this in 2 – 6 days without breaking the bank.

We’ll slice up the images, craft the code, browser test and use SEO methods to ensure it ranks well in Google too. We cut no corners, every line of code is of the highest quality and every part of your theme will be crafted with great attention to detail. Simple!

On another note, I’d like to hear if anyone has an opinion on the ThemeSlice website; i’m hoping it looks good enough to eat Most of the time I spent designing it I was hungry…

In this post I will suggest some methods of marking up your search boxes, and show a neat way of styling it using css and a few images.

First things first

Lets think about what is needed. For a search box we need:

1. A form element
2. A text input
3. A submit button

Also, ideally we need a label element for accessibility reasons so that users know what purpose the input element has (you can read more about labels and accessibility at 456 Berea St).

Therefore, here is the markup we could use for our form:

1
2
3
4
5
6
7

<form action="page.html" method="post">
      <div>
            <label for="search">Search:</label>
            <input id="search" name="search" type="text" />
            <input alt="Search" src="img/search.gif" type="image" />
      </div>
</form>

This is pretty much the way most people would do it, but Im going to challenge this for the following reasons:

1. We rarely want the label visible after styling
2. Hiding the label with display:none can cause accessibility issues (link)
3. Other methods of hiding the label can also cause issues (link)
4. I want a method that does not require hiding the label…

Therefore I have come up with the following; this may have drawbacks which I’m hoping people will discuss in the article comments, any here goes:

1
2
3
4
5
6

<form id="searchform" action="page.html" method="post">
      <div>
            <input id="search" name="search" type="text" />
            <label for="search"><input title="Search" alt="Search" src="img/search3.gif" type="image" /></label>
      </div>
</form>

My reasoning behind this is, we still get the association between label and form element, the input has alt text of ‘Search’ which means this is what (in theory) the screen reader should pick up. Because this label doubles as the submit button we also don’t have to hide it. This method is also pretty easy to style. Lets get on to that now.

Styling the form

To style my form I will use 3 images: left curve, a gradient and the submit button. I could use a 4th image and tile it for the top and bottom borders, but for this Im just going to use css borders on the input box.

Now for the css:

#searchform div {
    /* This div will have the left image as a background */
    background: url(search1.gif) no-repeat left top;
    padding: 0 10px;
    margin: 0;
    line-height: 1;
}
#searchform #search {
    /* Im going to apply a top and bottom border to this input so that it fits with my images and give it the gradient background */
    border-top:2px solid #999;
    border-bottom:2px solid #999;
    border-left:0;
    border-right:0;
    background: #fff url(search2.gif) repeat-x top;
    padding: 3px 2px 2px 0;
    height: 15px;
}
#searchform input {
    /* Some reset styles to make my form elements play nice */
    vertical-align: top;
    margin: 0 !important;
    line-height: 1;
    outline:0 !important;
}

Internet explorer plays up a bit regarding input positioning but this can be overcome with a conditional comment to add a pixel of padding to the input box:

1
2
3

<!--[if lte IE 7]>
      <style type="text/css" media="screen">#searchform #search {     position:relative;     margin-top:-1px !important; }</style>
<![endif]-->

Heres what it looks like:

Mission accomplished?

It looks nice, but how accessible and semantic do you think the code is? I personally think its better than simply hiding the label but I could be wrong. Discuss below!

In this article I demonstrate an easy method of creating pull quotes from a block of text using jQuery (a JavaScript library), CSS, and the html span element. I hope you find this method useful.

The code

To use the easy pull quote script you need the javascript and the css code, then a simple span surrounding what you want to be in the pullquote.

Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

// When the page is ready...
$(document).ready(
   function()
   {
 
	   	// Easy Pullquotes by Mike Jolley
                // Go through each span element with a classname of "pullquote"
		$('span.pullquote').each(function() {
                        // Get the text of the span
			text = $(this).text();
                        // Get rid of unwanted charactors
			text=text.replace( /\((.*)\)/gi, " " );
                        // Check if this is to be a right or left pull quote and output it
			if ($(this).is(".right")) 
				$(this).parent().before('<blockquote class="pullquote right"><p>&quot;'+ text +'&quot;</p></blockquote>');
			else
				$(this).parent().before('<blockquote class="pullquote"><p>&quot;'+ text +'&quot;</p></blockquote>');
		});
                // End pull quote code
   }
);

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

blockquote.pullquote {
	padding:12px 0;
	margin: 5px 15px 8px 0;
	float:left;
	width:180px;
	text-align: center;
	border-top:3px double #ccc;
	border-bottom:3px double #ccc;
        border-left:0;
        border-right:0;
	line-height:1.6em;
        background:#fefefe;
}
blockquote.pullquote.right {
	margin: 5px 0 8px 15px;
	float:right;
}
blockquote.pullquote p {
	margin:0 !important;
	font-size:1.4em;
	color:#666;
	font-weight:bold;
}

Instructions

For a left aligned pull quote simply wrap the text you want in the quote with a span with the classname “pullquote”:

<p>Lorem ipsum dolor sit amet <span class="pullquote">purus mollis dictum</span>.</p>

For a left aligned pull quote also add the “right” classname:

<p>Lorem ipsum dolor sit amet <span class="pullquote right">purus mollis dictum</span>.</p>

Demo:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum felis. Aliquam elit urna, dapibus id, gravida non, fermentum sit amet, libero. Aenean posuere ante at tellus. Nulla pharetra justo nec tellus. Cras feugiat sapien quis metus. Donec bibendum. Nam eget augue. Phasellus eu nisi. Vivamus tincidunt blandit leo. Integer eu mi et purus mollis dictum.

Mauris imperdiet lectus a ante. Nunc vestibulum lacus eu tortor. Sed et risus. Morbi orci leo, posuere adipiscing, pharetra ut, fringilla in, risus. Morbi auctor aliquam neque. Vivamus id lacus sit amet felis porta tincidunt. Pellentesque vehicula. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce a elit fringilla turpis nonummy ultrices. Pellentesque in pede. Phasellus non dolor et metus venenatis nonummy. Proin sit amet eros vitae mi tempus convallis. Mauris vel dui sit amet risus facilisis luctus. Sed quis orci. Phasellus vitae velit ac mauris viverra pellentesque. Curabitur eros.

Acknowledgments

My Easy pull quotes were inspired by Roger Johansson’s automatic pull quotes which use normal JavaScript and CSS to achieve the same effect.

First I found the “JQuery Corner” plugin for rounded corners, but was disappointed that it did not include smooth, anti-aliased corners.

I then did some more google-trawling and found this post, which contained a modified version of Curvy Corners for use with JQuery. Now this script was much much better.

However…the filesize was a massive 40kb, way too big for production use, and to make things worse the code was not compatible with packer so I could not reduce the filesize.

Well, I got busy, and fixed the errors. It is now fully packer friendly meaning easy rounded corners in JQuery at only 9kb 8kb 15kb 20kb 16kb 10kb. Excellent. Read more for the download link.

Demo and download

You can also grab the plugin from Google Code.

The packed version is only 10kb, the uncompressed version is 23kb (thats half the size of the original script!).

Quick example

To make a curvy cornered box simply use:

1

		$('.round_this').corner();

Thats all there is too it. A great script!

For more information on Curvy Corners, check out its official site.!

*Edit: Found a small error in IE7 with the backgroundPosition property, fixed now. New file uploaded.

*Edit 2 – 25th Sep 07: More optimizations, smaller file!

*Edit 3 – 29th Sep 07: More optimizations, smaller file, and demo page up!

*Edit 4 – 6th March 08: New version up with better background image support.

*Edit 5 – 19th May 08: No extra padding, safari fixed, larger filesize to reduce overhead and increase speed.

*Edit 6 – 9th Aug 08: General fixes from feedback

*Edit 7 – 7th Oct 08: Major overhaul to improve compatibility with other plugins

*Edit 8 – 2nd June 09: Now compatible with jquery 1.3.2 – All future updates will be on Google Code (http://code.google.com/p/jquerycurvycorners/) – Hence im closing comments here. Post your contributions either on google code or in the forum.

O, and as an added bonus you get to see old pictures of me and download some games I made years ago! lol

1. How did you get started in the business?

Well, I dont remember the exact date, but in year 9 at school I believe (2000/2001) I started to have an interest in making computer games using a program called gamemaker, it was then when I wanted to have a website to showcase my amateur creations.

I discovered Frontpage Express, yes that evil program from Microsoft. My first ever site was called “MJ2K games” and had some horrible URL which was impossible to remember. The layout was of course table based, but served its purpose.

*Offtopic

I had a dig around and found some of my old games, hehe, you can download the best ones below, but if they blow up your computer I take no responsibility; use at own risk.

Download penguin panic // Screenshot

Download penguin panic lock up // Screenshot

*Back on topic

It was after that, I got hooked to websites. I made clan sites, fan sites etc, and gradually learned more about HTML.

In 2004 I started at college, doing a computer course. There was not much website work until the second year. I created a website for a school, it was still table based though. It was at this point I started using dreamweaver to make sites. During the lessons I was amazed by a site this guy made using CSS, this was when my passion for websites truly began.

From that point I self-studied in the majority of my free time, bagging small jobs for friends. I focused my learning on CSS and XHTML, which was a great decision as its got me where I am today. I also created “Blue Anvil”, not the wonderful site you see today, just a basic site. I dropped dreamweaver, and since then I’ve used text editors.

In 2005/2006 I took web design up “full-time”, even though still at college, I registered as self-employed and have been working happily as a freelancer since. Since then I’ve expanded my skill-set to include PHP and JS, which have also been a great help at college.

At the end of 2006 I started getting into wordpress, this has proved to be one of main things I work on.

2. What kept you going in those early years?

Shear determination to be the best, and the joy of creating things. Website creation is fun in my eyes, and I love getting ideas that are in my head on screen.

3a. Did you ever feel like you weren’t good enough or you would never make it in this industry?

Yes I did, mainly because I saw all the fantastic stuff other designers were doing. I did nearly give up after a bad client experience, but in the end that made me more determined, and now I believe my work is nearly top notch .

3b. How did you work through that?

Perseverance, learning from mistakes, and talking to other designers. I also asked peoples opinions more, because I always criticized my own work too much.

4. Do you look at others today and think “Wow, I wish I were that good”?

Sometimes, but at the end of the day I am what I am, and know even that if I see some fantastic work by someone else, Ill get to that level one day.

In fact, seeing excellent work motivates me to increase my own standards.

5. How do you measure success?

I measure my success on client satisfaction, wage, and popularity.

Popularity of my blog is important to me, I don’t want to blog to nothingness, and it shows people are genuinely interested in what I do if my blog is popular.

Wage is important because obviously I have living costs .

But client satisfaction – If I do a job and the client says “wow, thats great” then I consider that to be the greatest success of all.

6. By your standard, do you think you are successful?

To a certain degree perhaps, but I know there is always room for improvement, and ways to being even more successful. I think i’m definitely on my way to being successful, so I will continue doing what I do, and improve as I go.

Me now

Who’s next?

I’m tagging friends Anthony Brewitt, William Smith, Mike Cherim, and Kevin Barber. Look forward to your posts

I hope they please you, and you enjoy them as much as I enjoyed making them! Better yet, enjoy them more than I enjoyed making them because some of them were a pain in the butt to make lol.

In total their are 118 icons in each size set, sizes are 16×16 ($20 USD), 24×24 ($30 USD), and 32×32 ($30 USD). All three sets together cost $65 USD. They all come in .png format and are suitable for the web.

To purchase, please use the buy now buttons and make sure to provide your email address, or contact me separately, so I can send you the icons via email.

Icon requests via comments please, I plan to grow the collection if need be.

Whats with the name?

Why are they called Rivera? Because Steve Weintraub on gtalk said the colours reminded him of work by Diego Rivera, and I liked the name so it was settled.

Stop jabbering, show me some icons!

Rivera Web 32×32 Icon set (118 icons)

Rivera Web 24×24 Icon set (118 icons)

Rivera Web 16×16 Icon set (118 icons)

Get all 3 sets:

To order all 3 sets (16×16, 24×24, 32×32) use the buy button below. After receiving payment I will email you the icon pack in zip format.

XFN (XHTML Friends Network) is a microformat which represents relationships between people with hyperlinks and the use of a simple HTML tag.

They can represent colleagues, contacts, sweethearts, friends and more!

Based on the XFN icon set by Wolfgang Bartelme I have created a small set of mini icons (9×10 pixels) to represent these links between people. I have also made a CSS file which shows the relevant icon when the correct XFN rel tag is present.

How to create an XFN link

XFN links are very simple to create, they simply list the relationships in a ‘rel’ tag in the anchor, for example:

<a href="http://blue-anvil.com" rel="me">Blue Anvil</a>

The above example show a link to my site, therefore marked as ‘me’ in the ‘rel’ tag. To create your own, you can use the official XFN creator which is a very nice, simple, tool.

My Icons

First off, the icons. As i said before, i based them on the icons by Wolfgang Bartelme found on the Microformats icons website.

Download the icons here. – Downloaded 885 times.

My mini-icons are free to use, just don’t claim them as your own, and a link would be nice

My CSS

My CSS file, basically, looks for a present REL tag, then styles the link based on the present styles. It cascades, picking out the right icon depending on the rel tag.

It works with modern browsers that support CSS pattern matching.

Download the CSS file here. – Downloaded 785 times.

See it all working

I have set up a demo page showing the icons and css file, which you can view here.

I hope you find my icons prove useful!

Ive rounded up my favorite methods, and this entry will show you how to use them, and when to use them.

Method 1 – Stick the image in the Heading tag

This method simple involves putting your logo in a heading tag, and giving it relevant alt and title attributes. It works well with simple logos, but if you want cool rollovers etc, you will need a different method.

(X)HTML

<h1>
   <a href="home.htm" title="homepage">
      <img src="logo.gif" alt="Site name" />
   </a>
</h1>

Suits – Simple logo’s with an alt tag, and possibly a link

Pro’s – Alt text should remain visible with images off, logo visible when CSS disabled

Con’s – No css rollovers, you must resort to Javascript

Method 2 – Phark Method – modified

This method involved using a CSS background image to show the logo. If CSS is disabled you still see the heading text, however with images off and CSS on the logo is hidden, which is a shame.

It works by indenting the text out of sight, and showing the background image. I use this one when I have a transparent logo, e.g. A transparent png, since other methods (like Gilder/Levin below) show the heading text underneath the image.

My modded code below also allows pretty rollovers, a nice addition.

(X)HTML

<h1>
    <a title="Homepage" href="home.htm">
    <span>
        Site name
    </span></a>
</h1>

CSS

h1 a span
{
    	height:164px;
    	width:219px;
    	background: url('logo.png') no-repeat;
    	text-indent: -5000px;
}
h1 a:hover span, div#header h1 a:focus span
{
    	height:164px;
    	width:219px;
    	background: url('logoHover.png') no-repeat;
    	text-indent: -5000px;
}

Suits – Headings when you want a link, and your logo is transparent.

Pro’s – Text displayed when images off, transparent images work, css rollovers work.

Con’s – Breaks with images off and CSS on.

Method 3 – Gilder/Levin Method – modified

This method is my favorite when using opaque images. It works by hiding the text with a background image via CSS, it does however need some un-semantic markup; but thats a small price to pay. The span is basically positioned to cover up the header text, thats the reason it needs to be opaque. And remember; the width and height must match the image!

(X)HTML

<h1 id="header">
	Site name<span></span>
</h1>

CSS

h1#header
{
      margin:0; padding:0;
      position:relative;
      width:316px; height:29px;
      overflow:hidden;
}
h1#header span
{
      display:block;
      position:absolute;
      width:316px; height:29px;
      margin:0; padding:0;
      background:url(logo.gif) top left no-repeat;
}

Suits – Headings when you want a link, and your logo is opaque.

Pro’s – Text displayed when images off and also when CSS off.

Con’s – Cannot use a transparent image.

Conclusion

So they were my favorite methods, but are they best? DO you have better solutions? Leave a comment and tell me your views on image replacement.

Related reading

• Revised Image Replacement
• JavaScript Image Replacement
• MIR: Image Replacement
• Using Background-Image to Replace Text