Oct 04 2010

Pencil Icon VS. Drop Down Actions Menu - Fight!

If you've used DotNetNuke for any length of time, I'm sure you've discovered the quick edit pencil icon and the Modules Action drop down menu as ways to edit your content. I'm also sure that you've noticed these two features "fight" for the same space on the page, which can become somewhat annoying.

There are two different paths you can take to adjust this overlap issue.

Method 1: Remove the ability to use the quick edit pencil icons.

  1. Navigate to Admin - Site Settings - Advanced Settings - Usability Settings
  2. Uncheck the box labeled "Inline Editor Enabled?"
  3. Click Update.
  4. Congratulations, the pencil icons will no longer be displayed on your site.

Method 2: Adjust the CSS for the quick edit pencil icon.

  1. Using your favorite FTP program, download the portal.css file located in the following folder:
    /Portals/{Specific Portal}/portal.css
  2. Add the following CSS code to your portal.css file.
    .eipbackimg{
        margin-left:15px;
    }
    
  3. Save and upload the file back to its original location.
  4. Congratulations, the pencil icons will now display 15 pixels to the right of Modules Action drop down arrow.

before and after screenshot of the quick edit pencil icon placement adjustment

Hopefully this helps you and/or your clients as you work with your various instances of DotNetNuke on a daily basis.


Cheers