Admin Area Print Style Sheets

10 posts by 5 authors in: Forums > CMS Builder
Last Post: July 5, 2011   (RSS)

By InHouse - September 15, 2010

My brain left the building early today without checking with me first.

Where can I go to adjust CMSB Admin area style sheets? And is there support for print-only stylesheets? I used to know this. [:/]

J.

Re: [InHouse] Admin Area Print Style Sheets

By Chris - September 15, 2010

Hi InHouse,

If you View Source in the admin, you'll see:

<!-- CSS -->

<link rel="stylesheet" href="3rdParty/SimplaAdmin/css/reset.css" type="text/css" media="screen" /><!-- Reset Stylesheet -->
<link rel="stylesheet" href="3rdParty/SimplaAdmin/css/style.css" type="text/css" media="screen" /><!-- Main Stylesheet -->
<link rel="stylesheet" href="3rdParty/SimplaAdmin/css/invalid.css" type="text/css" media="screen" /><!-- Invalid Stylesheet. This makes stuff look pretty. Remove it if you want the CSS completely valid -->
<link rel="stylesheet" href="3rdParty/SimplaAdmin/css/blue.css" type="text/css" media="screen" /><!-- options: green, blue, red -->
<!--[if lte IE 7]><link rel="stylesheet" href="3rdParty/SimplaAdmin/css/ie.css" type="text/css" media="screen" /><![endif]-->
<link rel="stylesheet" href="3rdParty/jqueryPlugins/thickbox.css" type="text/css" media="screen" />
<link rel="stylesheet" href="3rdParty/jqueryPlugins/uploadify/uploadify.css" type="text/css" media="screen" />

That HTML is generated by cmsAdmin/lib/menus/header_css.php — so if you want to, you can change things there.

You should be able to add print-specific CSS rules with the MEDIA attribute:

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

Of course, any changes you make to the CMS Builder source files will need to be made again if you ever want to upgrade, so document your changes carefully! :)

I hope this helps! Please let me know if you have any questions.
All the best,
Chris

Re: [InHouse] Admin Area Print Style Sheets

By Dave - September 15, 2010

Also, check out /cmsAdmin/custom.css.readme

Hope that helps!
Dave Edis - Senior Developer
interactivetools.com

Re: [Dave] Admin Area Print Style Sheets

By InHouse - September 16, 2010

Thanks to you both, Chris and Dave.

That put me on the right track.

J.

Re: [Dave] Admin Area Print Style Sheets

By InHouse - September 16, 2010

Just to further this discussion, the use of the custom.css file is great for presentational styles, but a print style sheet must be called as a separate file with call similar to:

<link href="css/reset_styles.css" rel="stylesheet" type="text/css" media="all"/>
<link href="css/screen_styles.css" rel="stylesheet" type="text/css" media="screen,projection"/>
<link href="css/custom_print_styles.css" rel="stylesheet" type="text/css" media="print"/>

Unless I'm missing something, there would have to be something like a custom_print.css file as well. CMSB would look for this file by default and assign it to the media="print" parameter.

An example of why this would be done would be to hide the left column (#sidebar) from the printed version of the backend page, or to hide the .spacedTable classed items which serve no purpose on a printed page.

Re: [InHouse] Admin Area Print Style Sheets

By Chris - September 16, 2010

Hi InHouse,

If you'd rather use a plugin than edit the CMS Builder sources, you can add extra code to the very end of the <head /> tag with the 'admin_head' plugin hook. I've attached an example plugin.

I hope this helps! :)
All the best,
Chris

Re: [chris] Admin Area Print Style Sheets

By InHouse - September 17, 2010

Hi Chris,

That sounds very promising indeed! I didn't get the attachment with the message though, and would welcome seeing it.

J.

Re: [Chris] Admin Area Print Style Sheets

By degreesnorth - July 4, 2011

Just following up on this post. If I wanted to change the entire Admin area of CMS builder to say 11px (so more fits on a page), do I need to change all the sheets or just a specific one?

thanks

Re: [degreesnorth] Admin Area Print Style Sheets

By Damon - July 5, 2011

Hi,

To change admin font size you just need to edit this style sheet:
/3rdParty/SimplaAdmin/css/style.css

To get you started, find this code:

table.data th {
padding: 3px;
}

and change to this:

table.data th {
padding: 3px;
font-size: 11px;
}

Make note of your changes so that if you upgrade this installation in the future, you can quickly go in and make the same changes again.

Hope that helps!
Cheers,
Damon Edis - interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/