Stylify Me offers an easy way to generate a very light style guide. It will show you a site’s background colors, Typography (fonts, sizes, colors and text samples) and a screenshot of the home page. It also shows sample image dimensions, but it looks like it only pulls a few images from the home page, so that’s kind of confusing. Also if your type is white, it doesn’t show since the page background is white.

May be good for very basic use, but it doesn’t replace a detailed style guide by any means.

Just recently I did some WordPress development work for a graphic design company. I thought their portfolio section was quite nice and used a few custom NextGen Gallery templates to pull it off. Here’s how I did it (mostly so I can do it again easily, but I hope this might help someone else too!).

Here’s a screenshot of the finished album:

NGG Custom Album

And here’s one of the galleries:

NGG Custom Gallery

(This post assumes you’ll need both Albums and Galleries, if that’s not the case, skip ahead as needed.)

After setting up each of the galleries and the album in NGG with some sample photos, I made two custom templates based off the existing NGG ones: album-clientname.php from album-extend.php, and gallery-clientname.php from gallery-caption.php. To make these, open the NGG plugin and you’ll find the original templates in the /view folder. Copy them and paste them into a new /nggallery  folder in your theme, then change the names as needed. Don’t forget to then go to the album and gallery pages in your site and change the shortcode to match the new template names:

[ album id=1 template=clientname] and [ nggallery id=1 template=clientname]

You’ll remove that extra space between the opening bracket and the first word in your own shortcode.

Here is the code for album-clientname.php:

And the code for gallery-clientname.php:

I didn’t change them too much; in the gallery template I removed some unneeded code and added a container around the alttext (which I’m using for the title on top of the thumbnail). In the album template, I removed the photo number and moved the album title, again adding a container to make it easier to style with CSS.

Here are the styles for the album – pretty simple:

Here’s the styling for the galleries:

For the gallery, I also needed to use a modified page-title on those pages that would show over the header image:

I made a new page template called page-galleries.php to use for the gallery pages so I’d have a body style I could hook into.

All in all this took about an hour to do, start to finish. I think it’s a nice-looking portfolio and I hope you find this useful!

I haven’t found one yet.

My current holy grail is a Bootstrap-like responsive menu that I can use in non-Bootstrap custom themes. I followed the few tutorials on how to do this in the last week, but none of them wound up working (or not working like I expected them too).

I’m going to try Rachel Baker’s BootstrapWP (I’ve read lots of good things about its high quality of coding) and see if I can figure out how to get the menu into one of my custom themes based on Hybrid. I know it can be done, but I’m not enough of a programmer to easily get how to do it. Once I figure it out, I’ll post my solution here.

I like a good-looking menu. I want one I can use across the board for any WordPress custom theme.

This is a new feature for my blog, I’ll try to make sure it really is a ‘weekly’ one… This week’s wrap-up includes a few notable posts about recent web design trends – and what’s no longer trendy! Enjoy.

  1. Stephanie Hamilton writes about 10 Beautiful Website Color Palettes That Increase Engagement at The Daily Egg. Nice palette choices; I just finished a design with a palette very similar to The Big Top.

  2. Paul Feakins writes about the flat color trend he’s observed recently in Web Design Trends: Flat Color.
  3. Chris Brown writes about The What, Why and How of Textures in Web Design for Web Design Tuts+.
  4. Joshua Johnson writes about 5 Former Design Trends That Aren’t Cool Anymore (So Stop Using Them) at Design Shack.

 

I love Gravity Forms, it’s one of my go-to plugins for all WordPress installs. Last week a client gave me the form fields for a new form and some of them needed a word counter to limit words to 300 in textareas. I found two possible solutions for adding maximum word count in Gravity Forms after a bit of searching, but neither worked for me (not being a programmer, I didn’t know how to fix them). But my programmer friends at CodeGeek stepped in and came up with this solution.

Here’s the Javascript which is saved in /themes/mytheme/js/ (it could also be put in an HTML block within the form itself, but we may want to use it on several other forms so made it available site-wide):

Then in functions.php, call the script:

Then in the Gravity Form for fields that need the word count, add the class ‘els-word-count[300]’ in the Advanced tab for CSS Class Name. Change [300] as needed for the maximum words that can be added to that particular field.