Using jQuery to Enhance Pages in Admin Mode

Since LightCMS gives you full control over your HTML, CSS and JS, it is possible to create designs that position elements in a way that obstructs the view of certain admin controls when the user is in admin mode. The best approach to correct such issues is to modify your CSS. But what if you can't find an easy CSS solution? As usual, jQuery is here to help. With a few additions to your JS, you can set CSS attributes that only apply when you're logged in and in admin mode.

This post assumes a basic knowledge of using JavaScript libraries. If you're not sure how to use JavaScript or jQuery with your LightCMS site, check out our blog post "Using jQuery with LightCMS".

Below is an example of a site in need of some fancy admin doctoring. The main area up top is called #featuredImages, and it's part of a custom jQuery photo gallery called cycle. Directly below #featuredImages are two blue boxes referred to as #cta.

The Front

The design looks great, but when you log in, you can see that the positioning applied to #cta causes it to block the "Add Element" button for the Featured Images region. Check out what the problem looks like below.

The Back

To clean this up, we can use jQuery for a simple fix. The following conditional statement will allow you to add jQuery that will apply only if the user is logged in and in admin mode:

  1. // Checks for Admin to apply fixes for backend
  2. if ( $('#adminbar #toolbar').length ) {

This checks for the presence of both the #adminbar and the #toolbar. Ensuring you are both logged in and in admin mode before applying the rest of the jQuery, below.

  1. // cycle when logged in
  2. $('#featuredImage').cycle({ 
  3.    fx: 'scrollHorz',
  4.    speed: 800,
  5.    next: '#next',
  6.    prev: '#prev',
  7.    cleartypeNoBg: false,
  8.    timeout: 0
  9. });
  10. $("#controls").show();
  11. $("#cta").css({'margin-bottom' : '-80px'}); 

The Result

So, what happened?

First, we targeted #featuredImgages and changed some of the custom photo gallery's settings for users in admin mode. We set the timeout to 0 so that you don't have to worry about it automatically scrolling when you try to edit it. We also set #controls to be shown, so you can switch between #featuredImages manually (you can see the "prev" and "next" buttons at the top of the image above).

Second, we added some CSS to be applied only when the user is in admin mode. We targeted #cta and then changed the CSS attribute margin-bottom, pushing the #cta section down so that it no longer covers the "Add Element" button. 

While this is a fairly simple example, you can see the possibility is here to add any amount of CSS to only be utilized when the user is in admin mode.  So whether you just want a visually clean site when you log in personally or if you're wanting to clean things up for your client, using jQuery to situationally alter your CSS can be a fantastic choice.