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!

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
{
color:#990000;
font-family:arial;
font-size:1.15em;
font-weight:bold;
}

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:call-template>
        </xsl:variable>
        <xsl:variable name=”SafeImageUrl”>
            <xsl:call-template name=”OuterTemplate.GetSafeStaticUrl”>
                <xsl:with-param name=”UrlColumnName” select=”‘ImageUrl’”/>
            </xsl:call-template>
        </xsl:variable>
        <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:call-template>
        </xsl:variable>
        <xsl:variable name=”LinkTarget”>
            <xsl:if test=”@OpenInNewWindow = ‘True’” >_blank</xsl:if>
        </xsl:variable>
        <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>
                <a href=”{$SafeLinkUrl}” target=”{$LinkTarget}” title=”{@LinkToolTip}” class=”readmorelink”>
                  read more
                </a>

            </div>
        </div>
    </xsl:template>

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 {
display:block;
text-indent:-9999px;
background:transparent url(‘../Images/ergoimages/readnewsitem.jpg’) top left no-repeat;
color:#666666;
margin:10px 0 0 0 !important;
padding:0;height:27px;
font-family:arial;
font-size:1.15em;
font-weight:bold;
}

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.

I spent a lot of time trying to put SharePoint in a nice place where it could flourish without being bullied by other sites that conform to accessibility standards. So you can probably understand my anger when I discovered that my new masterpage and css broke the drag and drop functionality.

When in Edit Mode, you try and drag and drop a WebPart from one WebZone to another it ill throw up a Javascript Error and the functionality wont work. Even though this functionality only works in IE it does present a customer use problem.

At first I used Neil Mosafi’s solution of using his JavaScript fix, at first it worked but I saw it only worked periodically, so the problem still existed.  I searched and I searched and found nothing. I then looked at using the CSS to control the problem which I believe is that the webparts don’t exist now because they are divs and not tables (?)

I’m not a techy so I tend not to delve into the problems as much as they do, I just look at why it doesn’t work and what is the easiest fix.

body {
margin: 5px;
padding: 0;
text-align: center;
font-family:Arial;
font-size:62.5%;
background:#ffffff;
position:relative;
}

I found adding Position:Relative to the body fixes this, I tried doing this on all the WebPart TD tags but it didn’t work and it got tiresome and annoying, I have found that this has worked but SharePoint being SharePoint it doesn’t wondering unexplained things, so time will tell if this has really fixed the problem.