Archive

Archive for the ‘Branding’ Category

Adding a custom welcome message to your SharePoint 2010 site

July 5, 2011 6 comments

I wanted to share a quick tip on how to change the welcome message of your SharePoint 2010 site.  In SharePoint 2007, it used to say “Welcome, Matt Huber”.  Now it just says your display name like “Huber, Matt”.  Well, I’m going to take it one step further!

I’m there there are a bunch of different ways to do this…but there’s a method I’ve used in the past.

Reference JQuery on your custom master.page in the <head> tag…like this:

<script type="text/javascript" src="link to your JS"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $(".s4-trc-container-menu span a").prepend("Welcome Back ");
    });
</script>

Welcome Back

That should do it!  You can use this technique to change all kinds of things.  Let me know what you think or if you have any other tips on how to do this!

Advertisements
Categories: Branding

Changing hover-styles on SharePoint elements

This one has caused some headache for me when branding things like the “Site Actions” menu and other hover-over-able elements.  Here’s the technique I use:

  1. Find an element you want to style (in this case, I’ll use the Site Actions Menu)
  2. Select the element with IE Dev Toolbar or Firebug
  3. Get the class or ID name.  The hover equivalent usually has an appended “hover” on the name.  For instance:  .ms-siteactionsmenu = .ms-siteactionsmenuhover
  4. Verify the style name by finding the style in corev4.css… but not modifying corev4.css or bad things will happen!
  5. Add the desired attributes to the new css selector in your overriding style sheet and enjoy =)

Here’s an example:

Siteactions_non-hover

Siteactions_hover

new Siteactions_hover

Normal Site Actions

Normal Site Actions Hover

New Site Actions Hover

In this case, the Site Actions Hover is transparent with my new ribbon style.
Unfortunately, SharePoint doesn’t always utilize the :hover selector.  It does for certain elements..like a:hover…but not always.  For these fringe cases, you can use the above method to change those hovering elements.
Categories: Branding

Diablo 3 SharePoint Branding

December 20, 2010 Leave a comment

In my BuckeyeSPUG presentation about Branding Sharepoint 2010 sites, I said I would share the presentation with everyone.  When I was building this branding solution…I had a BLAST.  I’ve never been so pumped to brand SharePoint.  I learned a lot from this exercise…. find something you want to do and integrate it with something you like.

I’m making the presentation available now… but in the future, I’ll make the master.pages available.  Below is a screen shot of the publishing master.page:

Teamsite master.page:

I might just have to create a World of Warcraft or Starcraft II branding solution for SharePoint.  Even better… maybe let you change the branding from the ribbon!  Stay tuned…

Branding Presentation file

As a side note, the HTML and CSS was provided to me by Blizzard through the Diablo 3 fansite kit. All I did was integrate the Start Master.pages from Randy Drisgill with this HTML + CSS and viola…Diablo 3 SharePoint!

Categories: Branding

How to: Remove default SharePoint images from Site Collections

December 4, 2010 Leave a comment

The images for newly created Team Sites and Publishing Sites are just… awful. They are the typical corporate images that show happy faces working =)

Only kidding…they definetly have their place.

But…sometimes they just don’t fit on newly created sites. For instance, I’m creating a Diablo 3 (www.diablo3.com) set of Master.pages for my upcoming talk (December 16th @ BuckeyeSPUG). If you know anything about Diablo 3, those default images just don’t fit.

Initially, my plan was to change the images with JQuery. Unfortunetly, that didn’t work. Document.Ready() was required and would flash the old image before the new one would load. So I just hide them. Heres the CSS I implemented:

Team Site Image:

div.ms-rte-layoutszone-inner > p > img[src="/_layouts/images/homepageSamplePhoto.jpg"]
{
	display:none;
}

 

Publishing Site Image:

div.ms-rtestate-field > img[src="/SiteCollectionImages/home.jpg"]
{
	display:none;
}

If you need to display those images, I would set the width to 100%.   That way, the image will now scale properly in your custom layout.

Categories: Branding