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.

3 comments (Add your own)

1. Dan C wrote:
A simpler approach if you aren't needing to edit the cycle slideshow would be just to apply a class to the body tag with jQuery, giving you the ability to just write normal css for making a change in the admin view. Works better if you have to make several css changes and no JavaScript ones. Great tip guys!

Mon, August 29, 2011 @ 11:21 PM

2. Adam wrote:
Hi, i'm trying to use the IF statement in this example to initiate .removeClass(); but it isn't working. Can someone help me out with this? My code below...


// Checks for Admin to apply fixes for backend
if ( $('#adminbar #toolbar').length ) {
$('#navcontainer').removeClass('navpositioning');
}


Basically I just want to remove the navpositioning class when in LCMS but it just won't work.

Fri, September 16, 2011 @ 10:49 PM

3. Adam wrote:
I FINALLY got it with this if statement.

$(document).ready(function(){
var n = $("#adminbar #toolbar").length;
if (n > 0) {
$("#navcontainer").removeClass("navpositioning");
}
else {}
});

Fri, September 16, 2011 @ 11:26 PM

Add a New Comment

Enter the code you see below:
code
 

Comment Guidelines: No HTML is allowed. Off-topic or inappropriate comments will be edited or deleted. Thanks.

Tags

Archive

Try it yourself. It's free.

Takes less than 60 secondsNo commitmentNo payment information required

Sign Up for Free