Category: CSS

Google Font Pairing Made Easy

Looking to update your site’s font but not really sure what would look good? If you find a Google Font as a base font – Google offers pairing suggestions and then shows how they look with each other. This makes it easy to then pick a title font, body font, etc by seeing how they look together before you commit to one font or another.

Example:

Let’s say you really like the Google font Oswald as your title font, you can then adjust the fonts under the “Popular Pairings with Oswald” to see their suggested pairings in all their font weight possibilities. Overall – this is a huge help for both designers and design challenged people who are looking to make some typography changes quickly and easily. Thanks Google!

Remove Extra Spacing in Dropdown Menus (Bootstrap)

When working with Bootstrap dropdown menus – there is a gap when hovering over items in dropdown menus at the very top and very bottom of the menu. If it bothers you like it does me (when looking at a hover state of a menu item in the drop down), you can easily solve it by adding in one line of code:

nav.navbar-fixed-top .dropdown-menu {padding-top:0;padding-bottom:0}

Note: You may need to change the class of the navbar to match whatever you have in your code.

Before:

With that code – you can see the difference:

After:

Sometimes the extra/default spacing is fine – but there are other times where you need to get the hover state to go all the way to the top/bottom. With this simple CSS – you can easily make your designer happy.

Easily Align Fields in Columns with Gravity Forms

Recently while working with Gravity Forms on a project – we needed to set up a large form that would span two columns. Since this is something common – I decided to look first at the Gravity Forms documentation.

Per the documentation I found this:

In Gravity Forms 1.5 we added “Ready Classes”. Using these new classes, you can easily create more advanced alternative layouts for the fields in your forms. Essentially, Ready Classes are class names that you can add to the parent element surrounding each field to take advantage of pre-defined styles included in the default form stylesheet.

By simply adding a new class to your form field (Advanced > Custom CSS Classes) – you can easily create columns (2 or three) without any custom CSS classes to worry about. In seconds – I had the style I needed!

If you are looking to customize the layout for your Gravity Forms forms – do yourself a favor and read the following documentation: https://www.gravityhelp.com/documentation/article/css-ready-classes/ as it will save you a lot of time and frustration.

HOWTO: Add Custom Classes to Individual Items (wp_nav_menu)

The WordPress function wp_nav_menu() is a great way to give users the ability to control their menu items (WordPress 3.0+). You can easily add/delete/move menu items by using the WordPress admin. I recently was working on a site where I wanted to add a class to the first menu item – as the padding/border for this item needed to be different than the other menu items. Fortunately – this was very easy by doing the following:

  1. Click on the “Screen Options” tab at the top right of the admin panel when on the Menu admin page (Appearance > Menus).
  2. Select “CSS Classes” under “Show advanced menu properties”. (Also there are options to add a link target, description, and a link relationship).
  3. Edit your menu items and now notice there is a spot to add a class for each individual item.

This is a great way to add a “first” or “last” or anything else you want to add on certain items.

Why not just use the IDs?
I specifically did this because I was using multiple menus (same menu class) and instead of using the list item IDs to add custom CSS for multiple IDs – I simplified it by adding a “first” class that would then cover all my menus.

Remove Initial Flicker With Smooth Gallery

I recently created a site (in beta testing now) with Smooth Gallery and the client loved it.

The Problem:
The only issue was that upon the initial page load – all items in the gallery would flicker for a second or two while the first image loaded – causing this to not look professional at all.

The Solution:

  1. HTML: I took the example code:
    <div>
    
      <div class="imageElement" id="element">
          <h3>Item 1 Title</h3>
          <p>Item 1 Description</p>
          <a href="#" title="open image" class="open"></a>
          <img src="images/brugges2006/1.jpg" class="full" />
          <img src="images/brugges2006/1-mini.jpg" class="thumbnail" />
       </div>
     
     </div>
    

    I then added an ID to each div (id=”element1″) so that each div had a class of “imageElement” and a unique ID (element1, element2, etc).

  2. CSS: Now that I had IDs to style, I added the following to my style sheet:
    #element2 {display: none;}
    

By adding the 2 bits of code mentioned below, I was able to initially hide the content in the second div so that only the content in the first div appeared on page load. Once the script started running, it then changed the display from none to block automatically. Problem solved.

ShareThis Button Cut Off Fix

I have seen a lot of sites using the ShareThis button (including a few of mine) where the button in Safari was getting cut off (clipped) at the bottom. If this is happening to you – there is a quickfix. Add this line of CSS to your stylesheet and your button will no longer be cut off.

.stbutton {display:block;height:16px;}

SDAC Recommends: WP Plugin: Top Level Categories

If you have ever wondered how to clean up WordPress URLs by removing the /category/ from your URLs, check out the plugin: Top Level Categories. After you activate it, you can access your web pages that were once only reachable by: /category/web-design/ by now using just /web-design/.

Highlighted Navigation with WordPress

Ever wonder how to automatically highlight your tabs or navigation depending on the category, page, or post you are on? Wonder no more! To make this work, there are three bits of code you will need:

  • The header code to control the body ID (and to tell us what page we are on)
  • The navigation code
  • The CSS to control the highlight

For this example, I will use this web site as an example.

The header code

ID;
$parent = 1;
while($parent) {
$page_query = $wpdb-&gt;get_row("SELECT post_name, post_parent FROM $wpdb-&gt;posts WHERE ID = '$current_page'");
$parent = $current_page = $page_query-&gt;post_parent;
if(!$parent)
$parent_name = $page_query-&gt;post_name;
}
?&gt;

&lt;body id=&quot;"&gt;

The XHTML code (navigation)

<div>
<ul>
<li><a href="/index.php">Home</a></li>
<li><a href="/blog/">SDAC Blog</a></li>
<li><a href="/web_solutions/">Web Solutions</a></li>
<li><a href="/network_solutions/">Network Solutions</a></li><li><a href="/user_interface_solutions/">User Interface Solutions</a></li>
<li><a href="/custom_solutions/">Custom Solutions</a></li>
<li><a href="/search/">Search</a></li>
</ul>
</div>

The CSS code

#home #nav-home, #about_us #nav-home, #contactus #nav-home, #faqs #nav-home, 
#disclaimer #nav-home, #search #nav-search, 
#blog #nav-blog, #web_solutions #nav-websolutions, #network_solutions #nav-networksolutions, 
#user_interface_solutions #nav-userinterfacesolutions, 
#custom_solutions #nav-customsolutions, #tos #nav-home, #sitemap #nav-home {
	  background:url("images/tabs/active_tab_bg.gif") repeat-x;
      border-right:1px solid #676e78;
      }
          
#tabs li:hover, #tabs li:hover a {
	background: url("images/tabs/active_tab_bg.gif") repeat-x;
    color:#212933;
    }

General information
When you view the code for a page, you will notice that the header code will find out if the page viewed is infact a page. If it is a page, it gets the page parent (I use parent and child pages in my web site organization). The tabs are created with unique li IDs. So that a combination of #home (the body ID) and the #nav-home (li ID) will show as a highlighted tab. With this example, this case will only occur when we are on the home page because #home is a page (the home page) so the home tab will be highlighted. When we click on “SDAC Blog”, the body ID will then be #blog, so now the #blog #nav-blog combination will force the “SDAC Blog” tab to be highlighted. Take a look at the CSS to see where to define the “cases”.

Hopefully this took some of the mystery out of working with WordPress, navigation, and how to put everything together.

Good CSS Practices

I was recently asked to recommend and comment on some good CSS practices for a client and I thought I would pass some of them.

  • Use a table of contents. I always start my stylesheet(s) with a table of contents so I can easily locate particular styles in the future. I would recommend breaking your stylesheet into a few main areas like: header, main content, navigation, footer. The more sections you put in, the easier it is to read and edit at a later date.
  • Use a table of contents. If you notice your stylesheet is getting out of control (over 1,000 lines) consider using multiple style sheets. You could have one master style sheet, another for forms, another for specific pages, etc. You would then either link to a stylesheet that would have links to all the styleheets using @import or you could call in the stylesheets on a page by page basis statically or dynamically.
  • Start with a known, debugged code if possible. I have a library of layouts that I use when beginning a new project that I know work in multiple platforms on multiple browsers. I will be publishing these as soon as I have some free time.
  • Do not rely on CSS hacks, unless it is a last resort. Believe it or not, most things can be done with CSS code that will validate. As soon as you rely on hacks, your code becomes unpredictable with new browser releases. Stick to valid code that you know will work with past and future builds of browsers. There are a lot of hacks out there which seem like a quick and easy fix, but you will pay for it down the road.

I hope this helps! CSS is a little tricky and sometimes very frustrating, but in the end…clean code is very rewarding.