A short one here. When you are going to start theming SharePoint and need to figure out exactly what styles need to be changed, the best tool you can ever get is one like the Web Developer extension for FireFox. Now I hate FireFox, especially 3.x, but I run 2.x at work for the sole purpose of the WebDev extension. Right click on the page, select “Select CSS” under the CSS menu and click away. It will automatically pull CSS styles from the included sheets that pertain to the selected element. This will save hours of time digging through core.css and the page’s source HTML. Trust me.
You may be asking “What else will he post about?” Well, I plan to go through the actual creation of a master page file for the theme from Focused Games but first I have to figure out a few things like how to redo how SharePoint outputs stuff (tables - blegh!). Yeah, I am going that far because I am sick of seeing SharePoint sites that look like SharePoint. In between here and there I will keep touching on the general tidbits of information that may help.
Here is a good blog post about theming the SharePoint top navigation. Today’s post is all about CSS, so pull out your favorite design books… and then light them on fire because they will be of no use here. You’ll want to start off by pulling and probably printing the core.css file that is provided with SharePoint. It may also be a good idea to print the source code of your new non-designed master page. Why? This will give you an idea of what HTML code SharePoint produces and what CSS classes it uses.
Once that is done, go ahead and create a new CSS file in the “Style Library” of your site. Go into site settings for the main site and override the style sheet with that file. This can be found at the bottom. Now you are good to go! Almost… more to come soon.
Here is a little of the CSS you may be employing. This applies to the “Upload Document” style pages and gets rid of the background images and borders:
1
2
3
4
5
6
7
| div.ms-areaseparatorright,div.ms-areaseparatorleft,.ms-nav,td.ms-bodyareapagemargin,td.ms-pagebottommarginleft,
td.ms-pagebottommargin,td.ms-titlearealeft,div.ms-titleareaframe,td.ms-areaseparatorleft,td.ms-titleareaframe,
.ms-titlearearight .ms-areaseparatorright,td.ms-pagebottommarginright,td.ms-sitetitle,td.ms-globalTitleArea
{
border-color: #000;
background: transparent;
} |
I am beginning to do themes (master pages) for some SharePoint sites, so here is part 1 of an infinite number of parts (because of how difficult theming SP is) of “Theming SharePoint.”
Assumptions:
- Theming will be done in several ways.
- Any advanced theming will include modifying core template pages.
- The amount of modification is directly related to the number of work arounds needed.
- This is going to suck.
Initial Steps
- Copy default.master from main site catalog directory. Rename and open.
- Erase everything.
- Open default.master in new window.
- Add each individual part, one by one to the page without any layouts.
- I started with the header, copy pretty much everything over.
- Remove all table tags and __designer: attributes.
- Remove all div, p, b, and style tags.
After doing this, you should have a horrible looking page with all the content on it. The important piece here is to get the content working so it is possible to figure out what place holders do what. Next post will be about layouts, the CSS hacks and more.
Update (18:25): Added more detail to the last step. Basically strip everything but the place holders and the controls inside of them.
It is July and cyclists around the world knows what that means: the Tour de France! Unfortunately, Contador is not in the running this year after joining the Astana team. The Tour has been shaken in recent years because of doping problems, but hopefully this year serves as the turning point. Valverde has taken Stage 1 by showing off some immense power even after a climb to the finish. It is a long road ahead (pun intended) and it should be exciting.
I have been working on some new stuff, but unfortunately I have been sidetracked by work and more work. I can’t announce anything, unfortunately, but soon enough I will be freed and can get back to working on the new game. The new game itself is a long term project I will be working on to help to constantly and consistently update the Focused Games Framework. I am expecting it to take at least a year to a year and a half to finish. If you are a 3D Modeler and are interested in working on a game for free, let me know.
I have also developed a new theme for the Focused Games website. I designed it to be cleaner and have started to create the branding for FG as a company. This means color schemes (I have decided on a pastel pallete of blue, green and brown) as well as a logo, and business cards (of course). I am looking into turning it into an LLC, but am waiting until I move out of my parent’s house next year since I might have to found it in a different state.