Styling the Publishing Console in SharePoint

So, I’ve been asked to style up a SharePoint site, and I’ve come across a really stupid bit of code

The Publishing Console is the control for showing all the ‘edit page’, ‘check in’, ‘approve’, etc. functionality for publishing pages. You’ve gotta use it.

Complaint 1: It assumes that it’s going to be inside a table.

The control produces a table row – a <tr> . Hellooo? Anybody here of accessibility? Trying to avoid Tabled designs? Thanks guys, you’ve made that easy.

Complaint 2: Styling through JavaScript

So, the publishing control has these bits of padding at either end. Irritatingly, they’re hard to get rid of. They also position div tags below the table row that the console produces. This is shown on the right. So, what style contains the code for that? Um, none. That style is set in EditMenu.js, not in any style.

What bloody idiot decided to build such an inflexible, unstylable control, and did it in this way? There is no need for it to be done this way. I’ve now got to fight passed this, or write my own publishing console. Great. I’m happy with the out of box console, I just want to change it’s style a bit – creating a new control is excessive (though instructions are here).

Okay, slightly calmer edit – okay, yes, I can copy and change the Publishing Console itself – the file is straight forward enough – and hook it up as a delegate control. But I shouldn’t have to.

Success – I got rid of the end space. I realised that I could turn off display of the non-breaking spaces that hold the end padding open – and that annoying JavaScript doesn’t turn the visibility of the inner div tags back on!.ms-consoletitleareaframe, .ms-consoletitleareaframebottom
{
width:0px;
padding:0px;
margin: 0px;
background-color: #ffffff;
background-image: none;
display: none;
}

Advertisements
Styling the Publishing Console in SharePoint

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s