CSS Tutorials Archives - Web Designers Academy

Change the color of JUST ONE WordPress menu entry

Sometimes there is a special feature or a unique page that you want to draw a bit more attention to… but how? One way is to make just one WordPress menu entry a different color so that stands out from the rest. It’s pretty easy to change the color of just one WordPress menu entry,…

Show and Hide Different Content On Mobile Devices & Desktops

You don’t always order the exact same pizza, so why display the exact same content on mobile devices AND on desktops? Here’s how to show and hide different content on mobile devices and desktops. The first thing you need to understand is that there are MANY ways to show and hide content on mobile devices…

What is the difference between padding and margin?

This is a beginner tutorial, if you’re familiar with margin and padding you might want to skip this one. We love getting emails from you guys with all sorts of interesting questions and ideas and one recurring question that we’ve received many times is “what is the difference between margin and padding”? This guide will…

Make a DIY sticky header in Genesis (WordPress)

It’s something that I’ve seen in a lot of websites recently and oddly enough… a client asked me for it just this week. After gettin’ my nerd on and trying a bunch of convoluted ways to make the header sticky, I DIY’d it and made a super-simple version that I want to share with you……

Genesis Column Class Cheatsheet

I don’t know about you, but probably 97% of websites we make have columns on the homepage. It’s a nice way of displaying short intro content and makes it a bit more visually interesting than free flowing paragraph text (like what you are reading now). What’s cool about Genesis + Dynamik Website Builder is that…

How to remove that stubborn submenu outline

I don’t know why it requires CSS to fix this. Dynamik Website Builder has a ton of options. To be more specific (as I can be without spending the rest of my day counting) it has HUNDREDS of options. You can change colors, font, width or basically every little tiny piece of a website… but…

Be different. Learn how to center the logo and navigation menu

Sometimes you gotta break the mold. You have to disengage autopilot and take control. See, the majority of sites on the Internet have the logo left-aligned in the header. Bbbbbuuuuuuutttt… why? It’s because most of us consume the Internet like we read a book, when we first look at a website we start by looking at the top…

LOOKIN’ GOOD: How to add icons to your menu navigation

Notice anything new here? Look up. Up. No, not at the ceiling… up above this text in the menu bar. Checkout the menu entries for the Toolkit, Designs and Wp Triggers… see those icons? [looks up… starts to salivate] BOOM! Awesome sauce in tha house (actually.. it’s on the menu!) Want some of that sauce? This…

Automatically Put A Border Around All Images (In The Content Area)

Some people love, love, love borders around all the content area images, some… well… don’t. If you are not sure what I’m talking about, take a look at these two images: Which one do you like better? If you like the one with the border (left) = read on my border-loving friend If you like…

Make Images Spin Using a Bit of CSS

Sometimes just a little WOW makes a big difference. Ever since we launched the Web Designer’s Academy, people have been asking about that fancy red spinning nametag in the sidebar. See it over there? Move your mouse over it. It spins! Cool, right? It’s a simple css effect that adds just a little something interesting to a page.…