Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts

Monday, 13 July 2009

Jacob Gibbins - Photography

Jacob Gibbins is arguably one of the South Wests most up and coming cycling photograher (his style's not just restricted to cycling but it is the main field he excels in). However what Jacob makes up in photography skills he slightly lacked in website design. So I decided to put my skills to use in helping a fellow Photographer/Cyclist out.

Now I'm not saying at all that I have good web design skills or coding skills but I do like to think I'm not terrible at either so here's what I made for Jacob:

His full site can be viewed: http://www.jacobgibbins.co.uk/

As always wherever I've tried where I can to make my work under creative commons act so feel free to nab the HTML and CSS (obviously all images are copyright to Jacob Gibbins so don't nab them!)

I've also uploaded the FLV file so feel free to use this also under creative commons. I tried to comment wherever I felt people might get confused. My plans are to make a proper loader bar between images and to tidy the code up some what. But I am getting married in less than 3 weeks so this website has slipped a tad in priorities!

The idea of this FLV file was to have an easily accessed and mostly protected set of Jacobs top 33 images. Sadly it really only works for landscape images but two portraits side by side also works! I wanted to create a flash file which meant Jacob wouldn't have to constantly edit some flash file to alter his top 33 images. I got around this by getting the flash file to search the folder "MainPhotos" on his server and grab the pre numbered images from there. So simply changing these images is all he needs to do to change his portfolio images. Making sure they have the same names and it should be simple as!

Wednesday, 8 April 2009

CSS in any SharePoint sites? (Tulip & Mysites)

One of the things which frustrates me about SharePoint is that you have these potentially very powerful sites which are just used as notice boards to contain Word Documents or PowerPoint’s. However if an Academic is wanting to produce something a little bit more like a standard website (web 1.0) they have to create HTML pages which lay in a document library, a student clicks on the documents and is escorted away from the SharePoint interface, (same can be said for Videos and Flash).

Since taking up my role and working with SharePoint, it’s been my constant mission to integrate all these cool learning resources within the pages of the Tulip sites (as in to maintain the left hand menu). This task has been helped with certain web parts which can handle WMV files or Flash files. However these are usually just stand alone web parts and lack any context for the information, and you can very easily end up with a messy page full of random web parts:



However one very handy web part is the MOSS editor, which is probably my favourite web part… if I had to rank it it would get an 8.4 (on a scale of 1-10, 10 being high)...

The MOSS editor is simply a html editor which allows you to use hyperlinks and objects etc without stripping them out, so you can embed a video into your Tulip or MySite and have some explanation text to give it context. This seemed all fine and dandy till it occurred to me… these sites are lacking any styles (which is obviously the most important thing with anything in E-Learning it has to look nice). A quick play with the editor it appeared there was no way to attach your own style sheets and any CSS added inline with the html would be stripped (obviously as it wouldn’t be W3C compliant but if the hack worked I wouldn’t be complaining). I initially gave up and figured I’d just have to kick it old school and use Tables, which as we all know are both a pain and are highly un-accessible.

I then discovered this nifty programme called SharePoint designer, (don’t be put off by the huge made by Microsoft stickers on it). Within SharePoint designer you can open any programme, module or Mysite as shown in the following images (click images to enlarge):









Once your site is open you should be greeted with something similar to what's attached below (I’ve switched to design mode), for this example all we really need to be concerned about is the “Attach Style Sheet” button as highlighted. You might want to look through this page and look at the code as I’m sure many other nifty hacks can be done.



Attach your desired Style Sheet which you’ve pre uploaded. Once you’ve done this you can then go back to your Moss editor web part and include class and id tags which call the CSS… bingo.

My general method of doing this is to create a folder or a document library called HTML making sure not to include it in the left hand menu and within it have all images and CSS used for the design... well hope this is of some use, feel free to comment/email if you need anything a bit clearer.