styling for Admin pages

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

This thread is closed to new posts. You must sign in to post in the forums.
12/13/2010 12:58:52 PM
menagerie56
Gravatar
Total Posts 130
View Posts

styling for Admin pages

Hello,

I'm running on 2.3.5.3 MSSQL multi site mode.  The container width for my layout (center fixed) is narrower than some of the administration pages(ex: Page Settings and Edit Page) so that the admin sections get cut off (right column content isn't even visible).  The easy answer would be for me to use a wider layout, except that I'm conforming to our University's standards.  What I'd like to do is style the Admin pages container div to be larger, but I can't find a way to do so that affects only the Admin pages (any Admin tags are already within the container divs).  Preferably I'd like to be able to set this at the skin level, but could probably work with having it at the root level (affecting all of my child sites).

I'm sure there is some glaringly obvious easy answer that I am overlooking.  If anyone has any ideas, I'd really appreciate it.

Thanks!

~ Beth

12/13/2010 2:07:00 PM
Jamie E
Gravatar
Total Posts 1203
View Posts
Proud member of the mojoPortal team

Help support mojoPortal!
Add-on modules

Re: styling for Admin pages

Hi Beth, Joe Davis requested adding an admin CSS class to all admin pages back in October. I see in my own copy (2.3.5.6, built from source) that there is indeed an "admin" class rendering on the div just inside of divCenter.

So, if you have the admin CSS class appearing, you can do this:

.admin {width:1000px !important;}

This will cause the admin portions of the page to "stick out" on the right side, but that's just a cosmetic issue--the important thing is that you will be able to get to everything you need to.

If you don't see the admin class when inspecting the rendered output of your site (try FireBug, if you don't have it), I'm sure it will be available to you in the next release of mojoPortal.

I'd be interested to hear feedback on how this works for you, and if you run into any trouble using it.

Jamie

12/13/2010 3:27:57 PM
menagerie56
Gravatar
Total Posts 130
View Posts

Re: styling for Admin pages

Thanks for the info Jamie.

The trouble I'm having is that I need to affect the #wrapwebsite or .container styles, which divCenter is in.  Thanks for the ideas about widening the .admin div (which I do have present).  It's a shame, though, as the users don't understand the caveats and it just 'looks bad' to them.  I fiddled around with the default site skin (making it larger and then setting the 'View' skin at the page level) but that didn't work either because the log in page and Site Map reflect the larger layout.

~ Beth

12/13/2010 3:46:25 PM
Jamie E
Gravatar
Total Posts 1203
View Posts
Proud member of the mojoPortal team

Help support mojoPortal!
Add-on modules

Re: styling for Admin pages

Okay, I think I understand. I don't know of a way to dynamically override the width at the higher level divs with things as they are. If Joe could add the "admin" CSS class to the higher divs on admin pages as well as the ones they are on now, we could do it for sure. I'm using Artisteer skins, so I think I'd need an admin class dynamically added to the div that has class "art-sheet" to make things work the way you're describing. The problem is that this div is defined in layout.master without an ID, and I don't know if divs within layout.master can even be dynamically tweaked like that via code.

There are smarter CSS folks out there than me, so maybe one of them can come up with a clever way for you to do this.

Jamie

12/13/2010 4:24:54 PM
Joe Davis
Gravatar
Total Posts 2253
View Posts

Re: styling for Admin pages

Hi,

You could use the jQuery.addClass() method to add a class to the Body element but you would need to tell jQuery when to add the class. I whipped this up real quick so be sure to test it thoroughly, but it should work for you.

<script type="text/javascript">
    $(document).ready(function(){
        if (window.location.pathname.indexOf('/Admin/') > -1)
        {
            $(document.body).addClass('adminpage');
        }
    });
</script>

With this in place, you can create selectors for class on any page under /Admin/ by placing .adminpage before the class. For instance, to set rules on the center-leftmargin div:

.adminpage .center-leftmargin{width: 1000px;}

These rules should be placed at the bottom of your Style.css file to ensure they get applied properly.

HTH,
Joe D.

12/13/2010 5:14:41 PM
Jamie E
Gravatar
Total Posts 1203
View Posts
Proud member of the mojoPortal team

Help support mojoPortal!
Add-on modules

Re: styling for Admin pages

Hey Joe, nice workaround! I always overlook the JavaScript option.

12/14/2010 2:50:36 PM
menagerie56
Gravatar
Total Posts 130
View Posts

Re: styling for Admin pages

Excellent idea!  Thanks very much! ~ Beth

You must sign in to post in the forums. This thread is closed to new posts.