Tutorials

CSS Menus: Sliding Door Validation

I love making dynamic menus of all kinds, and trying to find ways to merge various forms and sorts of dynamic menus. What I don’t like is making menus that rely on any code other then CSS. It’s a personal preference of mine as I find that it keeps site speed faster. Now understand, often it doesn’t scrape off a lot of time, but for image-heavy sites every little bit counts.

There is a nifty version of the horizontal menu called a “Sliding Doors” menu. In this the background image(s) are set up so that they grow or shrink with the size of the text. This keeps your Menus looking beautiful and retains their dynamic styling even when text is expanded greatly.

A List Apart, one of my favorite resources, has an interesting take on the sliding door menu style. Yet as I was working on the newer version of my own menu, I decided to test the CSS to make sure everything validated properly. I was surprised to find that in the CSS 2.1 validation that an error occurred. It wasn’t a critical error and was more of a specific need for the CSS level of validation as per the W3C rules for CSS 2.1, but it was enough to make me wonder.

For me to validate “clear” (with no Errors at all) I had to add a width selector to part of the CSS Style for the menu. Apparently a float requires the width selector to be within the same style.

#main_nav li {
float : left;
width : auto;
margin : 0;
padding : 0;
background : url(../images/right_menu_border.png) no-repeat right bottom;
}

In the tutorial from A List Apart this wasn’t listed, and to be honest it’s not entirely necessary (at the time of this article) because leaving it out doesn’t effect the code’s function. It’s merely needed in order to validate the CSS for level 2.1 in the clear.

By Adding auto to my width selector I filled in the requirement for clear validation without effecting my layout.

AdRotate Banner Flexibility!

One of the problems I had with AdRotate was that the widget form doesn’t allow for multiple widgets to show different groups of banners in a sidebar. (At the time of this writing.) At least, not using the WordPress admin panel.  But, after reading through the site I realized you can ad banners everywhere. No really…, everywhere!

Thinking about that I realized we can even add them to our headers, or better yet use it to replace the header image entirely! *shock*

Now one thing I’ve always wanted to do is to have my “skins” change for the seasons. More over the images (that would be an amazing plugin!) would change while the structure of the site remained the same. I’m sure this could be done by using a PHP script that changes a CSS document per a certain time period. But I’m not PHP wizard… yet.

But then I got to thinking, and that is a dangerous thing as I begin to experiment. I may not be able to use AdRotate that way straight out of the box, ( although with the new “timed” ads it -may- be possible to at least change the header per season, there is an experiment to do to be sure) but it can be hand-coded into the theme of the site. The Plugin’s support website offers a list of code snippets. You can even add individual or random rotating ads to a post or page, inside the post or page! It doesn’t have to stay inside the widget!

Amazing.

How so?  Easy!

First you’ll need to install the plugin. You can either do this by hand by downloading the plugin, or if you have WordPress 2.7 installed you can go into the Plugins Panel and do a search for banners, ads, adrotate, or other such words and look for it in the list. Installing it through the Plugins panel is a lot faster.

Now the next thing you may want to do, if you can, is add the \banners (<– note the ‘s’) folder to you wp-content folder. (wp-content\banners ~ don’t forget that ‘s’). This is where you can put all kinds of banners that you will want to use.  How ever, sadly, you cannot organize them into sub-folders in order to keep like-images together. You must label them in a way that you will be able to distinguish them.

What’s this do? AdRotate can attach images to the banner rotate code so you don’t have to type out a huge line of code. Not to mention you can -change- what the image is with a simple few clicks if you use the %image% inside of you image tag. (<img src=”%image”>) All you have to do is upload the images into the banners folder and then pick the image from the Banner Admin Panel.

Sweet.

Next you need to log into WordPress and add your banners and links. These can be affiliate links, or they can be general links, it doesn’t really matter.

Set up your groups first, this is done under the mainPlugins Panel under the Manage Banners link. Create groups to help keep yourself organized.

Then under the Posts Panel you can find the Write Banner link where you can start adding your banners!   So, next is to start adding banner code and images!

Under the Settings Panel is an option for AdRotate. This is the opt-in / opt-out to help the creator with determining how the plugin is being used and what the creator can fix it to be more beneficial. It’s a study, nothing more. But, you can opt to not have your specific information sent. None of the information is sold and may only be shared in a stsitical analysis. Make sure you set these settings to what you are most comfrotable. Me. I left myself opt’ed -in. ;)

Once this is done then you need to decide where your banners are going to go. Doing a quick design prior to this will help you get an idea of what it will look like. If the banners are too big, you’ll need to re-size them and re upload them. Far as I know AdRotate doesn’t re-size banners for you, you still have to do that by hand in general.

Each of the tags or PHP snippets goes into specific locations. The first number in the PHP code displays banners from a specific group, where the the second is the specific banner ID number. In the shortcode the group and banner numbers are a bit more obvious as you have to type them out.  You can find these group and banner ID numbers in the Manage Banner link in your main Plugins Panel.

Make sure you book mark the install list for future reference!

~

Side note: In the most recent update (as of this posting) the creator has added a CTR (Click Through Ratio) to give you and idea of how your banners are doing!

Suggestion: Donate to this man if you use this Plugin and make money from it. It’s such a powerful and useful plugin, even a dollar or two is a nice thank you. It’s kind of like tipping your waiter. ;) ~ Drakenhart

WordPress.tv? Yes! Video Tutorials Ahoy!

WordPress got wise, real wise. They’ve started to populate their new domain, WordPress.tv, with videos. This tickles me in ways I can barely begin to describe.

First: I’m a person who is very much supportive of people using the proper ending to their domains. The endings were created to help differentiate between content types. This way people would know from first glance just what the company is, does, and it’s intents.

  • .com –> Commercial Business (Drakenhart Studios.com is being held by a friend currently. Lost contact.)
  • .net –> Network (We are in our own way a network. Rather then just offer you our business end and sales pitch, we offer a form of community and continued service. Links to places that benefit our clients and viewers, and connections to our clients’ sites for people to check out!)
  • .org –> Organization, like the World Wild Life Fund or the Red Corss, etc.
  • .tv –> Television of other form of video media. (Thus WordPress.tv offering a site Full of helpful, online walkthroughs and tutorials. Bonus!)
  • .biz –> General Business
  • .us –> General Web Site located in the United States
  • .info –> Informational site, often like a wikipedia and the like.
  • .me –> No joke, this is a website that is about you.
  • .mobi –> Mobile phones. Yep.

And so forth…

Why else? Video Tutorials rock in my book! Reading a manual and jumping back and forth between pages, versus  actually seeing what is being describe are two very different ways of learning. “Visual” people learn best by watching or interacting. “Abstract” people learn best from reading or looking at diagrams. I am a visual leaner rather then an abstract-text learner. So watching the videos as they -show- me what to do is exceedingly more helpful then slogging through pages after pages of Codex – of which some of it is not up to date!

Down side / Up side: It is not a “community” per say. Only certain people are allowed to post videos, unlike YouTube. This means a greater quality. This also means slower wait times as they put up more and more specific tutorials. They have to put the basics up first!

Go check it out! :)

Designing a WordPress Theme (2.7)

Welcome viewers.

If you are like me, you’ve scoured the web for more information in a more concise and basic form. The WordPress Codex is great, but huge and bulky. Buying the next “how to” book may only leave you behind as the CMS upgrades over time.

So what I offer here is the most up to date listing of information, tutorials, links, reviews and pointers to try and help you along in your designing needs. WordPress may seem daunting, with all of it’s php code and not-quite stero-like instructions. But once it is broken down, yuo are good to go.

There are two paths that diverge from here. Basic Theme editing and more Advanced Theme editing. Basic Theme editing uses WordPress’ general settings, and some plugins. A slightly more techincal (Intermediate) aspect of Basic Theme editing  is using the WordPress internal editor and some knowledge of either php code or WordPress’s Template Tags. The Advanced Theme-styling requires a bit more boldness as you either convert a current theme to fit your needs by editing the php code, css files, and the templae tags, OR you start from scratch, using other themes as your reference point.

Choose your preference!

  • Basic Theme Styling.
  • Intermediate Theme Styling
  • Advanced Theme styling I
  • Advanced Theme styling II

*note* Updated as I am able. Keep this page bookmarked, or subscribe to my rss for site updates.

Turning a WordPress Blog into a CMS for Websites

In the Beginning….

This has been a rather educational experience and then some. Suffice to say everyone is trying to sell something, and often they are trying to sell you convenience wrapped up in a pretty little package. Not here. My services are by far much different, though I too can offer you that same convenience by doing much of this work for you for a fee.

Instead I would rather share with you the information and sites I’ve discovered that helped me. Yet as I do this I hope I do not “shoot myself in the foot” in the process of sharing what I’ve learned. I am a Web Designer after all.

So with a little bit of extra work, a lot of searching, and carefully selecting my keywords in the search engines, I’ve dug up quite a bit of information. This is my Journey into Word Press to CMS conversion.

Wait. What?

CMS? For the non-tech-talk savvy, a CMS is short hand for “Content Management System” among other acronyms. What “Content Management System” means, to put it simply, is the back-end code that makes publishing web pages easier. It does the work of the monotonous tasks that normally must be done by hand. It does all of the of coding each page, for every page, in a site. All you have to do is create content!

It takes most of the repeated tasks, like coding the header and footer that are the same for every page, and does it for you while yet making sure it looks the same for every page.  Well that’s a “Cliff Notes ™” version of the idea. For a clearer and more specific definition, here is a Wikipedia Article on CMS for your perusal.

General Overview

So the idea here is that we are using WordPress to facilitate website building by changing the Blog software a bit.  To some this may be “cheating”, but to others it is a form of efficiency and speed. To be sure, one should always give credit where credit is due. So here is a cheerful ‘hats off’ to the various creative minds that have put in the work and effort to make WordPress what it is today!