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

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

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

Hi Chris,

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

J.

Re: [InHouse] Admin Area Print Style Sheets

By Chris - September 17, 2010

Oops — here it is. :)
All the best,
Chris
Attachments:

custom_head_code.php 1K

Re: [Chris] Admin Area Print Style Sheets

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/