A place where we talk SharePoint, web design, inspirations, trends and everything in between.

Tag Archives: Branding

Squashed SharePoint site when viewing Properties in Edit Mode

I have finally found a fix to a really annoying bug in SharePoint that squishes my site when I have edited a Web Part!

In side the SharePoint master page everything is set to Height:100% – EVERYTHING, even I feel I am set to Height:100% when I have finished looking at the damn code! Removing these can cause all kinds of hidden issues so my rule of thumb is if CSS can bully in line styles then let it go to town them!

The problems crop up when you want to add a custom footer that combined with a small resolution causes this…


As you can see this isn’t very user friendly and looks pretty poor. Well I used my trusty tool set of web apps to find out the cause and hopefully a fix and I feel I have found one. If you use this line of CSS code in your style sheets it will increase the height of the properties pane on the right hand side.

#MSO_tblPageBody {
 height:500px !important;

This is the fix I have found which has worked for me – if anyone knows a better one or an improvement on mine then feel free to share!

Customising the Content Query Web Part list results

Example of Read More Links

The CQWP is a fantasic webpart my only two annoyances are that you can only do 3 rules on the filtering and the second is that the results are a bit rubbish in terms of styling, look and feel.

There are two ways you can customise these results. First way is to put a DIV wrapper around the results and style them that way which is ok when you want to do text styling such as color change, style and padding which you can see in the orange box. You can do this by using the styles below but remember – you need to put a DIV wrapper around the Web Part Zone and/or Web Part.

#blogbox .link-item,
#blogbox .link-item a:link,
#blogbox .link-item a:visited,
#blogbox .link-item a:active

When looking into this I first tried to style the A tag that is used for the TITLE which read ‘New version of Free2Teach launched’ which worked ok until there was a long title line that wrapped around and underneath. This caused it to visually break and look poor. I then thought I am going to have to do this properly if I want to do it!

What I did was very very simple, I started by opening up ItemStyle.xsl inside the XSL Style Sheets within the Style Library. Next I took a copy of this file (very important!) and then added the following below. I set the template name to ‘ReadMoreLink’ so I could remember it when selecting it in the CQWP settings.

<xsl:template name=”NewLinkDefault” match=”Row[@Style=’NewLinkDefault’]” mode=”itemstyle”>
        <xsl:variable name=”SafeLinkUrl”>
            <xsl:call-template name=”OuterTemplate.GetSafeLink”>
                <xsl:with-param name=”UrlColumnName” select=”‘LinkUrl'”/>
        <xsl:variable name=”SafeImageUrl”>
            <xsl:call-template name=”OuterTemplate.GetSafeStaticUrl”>
                <xsl:with-param name=”UrlColumnName” select=”‘ImageUrl'”/>
        <xsl:variable name=”DisplayTitle”>
            <xsl:call-template name=”OuterTemplate.GetTitle”>
                <xsl:with-param name=”Title” select=”@Title”/>
                <xsl:with-param name=”UrlColumnName” select=”‘LinkUrl'”/>
        <xsl:variable name=”LinkTarget”>
            <xsl:if test=”@OpenInNewWindow = ‘True'” >_blank</xsl:if>
        <div id=”linkitem” class=”item”>
            <div class=”link-item”>
             <xsl:call-template name=”OuterTemplate.CallPresenceStatusIconTemplate”/>    
                <a href=”{$SafeLinkUrl}” target=”{$LinkTarget}” title=”{@LinkToolTip}”>
                    <xsl:value-of select=”$DisplayTitle”/>
                <a href=”{$SafeLinkUrl}” target=”{$LinkTarget}” title=”{@LinkToolTip}” class=”readmorelink”>
                  read more


What I have simply done is coped the full A reference and copied it underneath and set the class to ‘readmorelink’ and added the following css to my style sheet and it should work 🙂

.readmorelink {
background:transparent url(‘../Images/ergoimages/readnewsitem.jpg’) top left no-repeat;
margin:10px 0 0 0 !important;

Adding Custom Styles to the RichTextEditor (RTE) in SharePoint

SharePoint Rich Text Editor

Whilst doing some branding work for a client I was asked ‘can we have different text colors’. I instantly thought of hours of HTML teaching and had visions of brightly coloured pages illuminating fire red, yellow and radioactive greens! So what I needed to do was lock it down so the client can dictate the colors but the users can set them.  The best way to do this is give them a selection of custom styles they can use for titles that are outside of the standard h1, h2 & h3 that are set.

.ms-rteCustom-CustomStylesh1 { color: #990000; font-size:3em;font-weight:bold;}
.ms-rteCustom-CustomStylesh2{ color: #666666;font-size:2em;font-weight:bold; }
.ms-rteCustom-CustomStylesh3{ color: #cccccc;font-size:1em;font-weight:bold; }

The way it works it by adding .ms-rteCustom-NEWSTYLENAME the RTE will pick up this style and will insert the desired styling.

awards & recognition
PinkPetrol on PinkPetrol on PinkPetrol on PinkPetrol on PinkPetrol on PinkPetrol on Find Web Agency