Tag Archives: css

SumoMe Fixes

Posted on by

Update March 23, 2015: This does not work for the current version of SumoMe. But I will keep it up to help with similar situations.

The folks at Appsumo.com have released a free WordPress plugin called SumoMe that is available at http://sumome.com.

You can install SumoMe by either by adding a script to your header (if you are not using WordPress) or by installing their WordPress plugin.

Once you install it and create an account, you have the option of adding two apps:

Twilighter is a slick app that takes the text that is selected on your page and sets up a Twitter tweet using the selected text and creating a short URL back to the page from which it was selected. Your visitor can then make adjustments and click the submit button to tweet it.

The other app is List Builder which opens a modal subscription form that only asks for an email address. You can export the collected addresses as a CSV file.

List Builder caused a problem with this site where the form was showing up behind my header graphic. The problem was the z-index for that DIV element was not high enough. Adding the following code to my style.css file fixed the problem by increasing the z-index value.

.sumome-popup {
     z-index: 11111 !important;
}

Another issue I wanted to fix was the fact that the SumoMe has a control tab that appears in the upper right and visitors can see it. That control tab is of zero use to a visitor, so it is just clutter, yet I will need the tab to change settings. The best solution for now is to make it visible only if an administrator is logged into the site. Please note this code only works if your site is running on WordPress. A hat tip to koningdavid for posting the answer to a similar problem on StackOverflow.com.

Add a style sheet file called visitor.css with the following code:

#sumotest-badge {
     display:none !important;
}

In your theme’s function.php file, add the following:

function visitor_stylesheet()
{
     if (!current_user_can( 'manage_options' )) {

          wp_register_style('visitor_css', get_stylesheet_directory_uri() . '/visitor.css', array(), '1.0', 'all');
          wp_enqueue_style('visitor_css');
     }
}
add_action('wp_enqueue_scripts', 'visitor_stylesheet');

The visitor_stylesheet function checks if the current visitor to the site is an administrator (if the user can “manage_options”, then the user is an administrator). If the user is not an admin, then the visitor.css file is loaded for the user. The CSS code in visitor.css tells the browser to hide the #sumotest-badge DIV element.

Those are my fixes for SumoMe.

Happy cooking!

 

Enhanced by Zemanta

WordPress 3’s New Menus

Posted on by

WordPress 3 has brought forth some new tricks like the customizable navigation menus which make it very easy to set up your own menus using a GUI. You can define and drag-and-drop the order of the menu items, and WordPress will output them as an unordered list (<ul><li>…</li></ul>).

Rather than try to explain it myself, just head over to Justin Tadlock’s post about the menus.

One missing piece was filled by John The Developer where I needed to add a custom class to the last menu item.  I was displaying a menu horizontally and using “margin-right” to space the menu items (inside <li> tags) apart, but I didn’t want that margin on the last item.  Here is John’s 8 lines of code solution.

Then in my CSS file, I defined “last-item” class as:

li.last-item {
     margin-right: 0 !important;
}

I did try using the pseudo-class of li:last-child which worked fine in Chrome and Firefox, but it did not work for Internet Explorer because IE has yet to recognize pseudo-classes.

Update Bonus: Want to add some collapsing menu goodness? Check out Daneomatic.com’s post.