SharePoint will break your parallax background

Posted on: March 17, 2018

I have been creating a website at work in SharePoint recently, that had the layout created by an external agency. So they provided the HTML, CSS, and js for a home page and a second level page. This of course makes my job easier for making the website, as a lot of the work has been done. However, good old SharePoint still likes you to spend a decent amount of time fixing things that you really shouldn’t need to. Basically, there is a lot of CSS courtesy of core15.css that will override the custom stuff at certain points. Sometimes this means you then have to make your selector more specific, sometimes it means you have to reset the selector to its initial state, and sometimes it means you have to work out what the user-agent would have applied and actually set a rule for that! A bit of a pain all around. But one thing in particular really had me stumped for a bit.

As you may know, SharePoint does this weird thing of disabling scrolling (i.e. no vertical scroll bar) and then works out the size of the window, resizes its container elements to that size, and then sticks the scroll bar back on. Obviously it does this, why wouldn’t you? Anyway, the layout I was trying to implement had a parallax background using stellar.js. This (of course) broke, as the container it was in was only the height of the window. So how do you fix this? Fortunately it can just be done with CSS. The first thing is to stop that stupid height setting from constantly happening:
#s4-workspace {
height:auto !important;
}

Then, you will want to make sure you can actually scroll:

body {
overflow:visible;
}

and finally, you will probably need to be able to see your background, so add this to that body style too:
background-color: transparent;

After doing that, you should find that your parallax works, you see your background, and you don’t have that stupid resizing of the container elements ruining your life!


Mencarta

Link
Posted on: February 1, 2018

I recently decided that it may be worth my while to get some experience with WordPress. It seems like it’s one of those things that you are likely to encounter at some point (we have at least one site hosted on it at work, for example). But I needed a project to make it worthwhile. A podcast that I listen to, the Luke and Pete Show, has a feature most weeks called Mencarta. This is where they induct interesting events, people, things into Mencarta, which is their take on a modern-day Encarta Encyclopedia.

It’s a fairly basic site currently, and is the clearest indication yet that I am not a graphic designer, but it is a work in progress and has allowed me to get around the basics of WordPress development.


Learn and Visualise Flexbox

Link | Source
Posted on: December 8, 2017

The last few days at work I’ve been creating page layouts for some new websites. Given these were from scratch, rather than the recent swathe of updates to sites I have been doing I thought it was a good chance to apply some flexbox css. I have used it before a little in Angular applications, using Angular Flex-Layout, but hadn’t really used it natively.

Good old mate css-tricks has a nice little guide about what the settings are, but I was having a hard time remembering all the options and which one did what etc. I just couldn’t picture it. So I decided I would make a little tool for both visualising what each setting would do, and for then being able to copy and paste those css atributes straight into my work. I based what I was doing off the excellent Angular Flex-Layout demo here.

Please, check it out on Github (code) and if you have any suggestions feel free to contribute them.


Wedding

Link
Posted on: December 3, 2017

I got married a few weeks ago, and my main task in the preparation and planning for the wedding was to create a website. It was to server two purposes: provide all the details necessary for guests, and be the mechanism for RSVPs.

I made the website using Angular and Firebase, which was my first project with those two technologies. I really liked the component style of Angular (of course it is not unique to that), but the whole CLI made getting up and running and making changes very fast and easy. Firebase is fairly well documented, but not as completely as I would like. The same goes for AngularFire, though it did make a number of things easier. One of the best resources that I found was a channel on YouTube, Angular Firebase.


Fitz and Pieces

Link | Source
Posted on: December 3, 2017

This is a website I made to showcase my photography. For about a year I was shooting concerts for Amnplify and needed somewhere to upload galleries for my own use, that I could share with the artists. This site is built on a LAMP stack, and hasn’t been updated in a while (having a baby really cuts back on your concert going!) I am currently in the process of re-building this site as a FAN stack app (Firebase, Angular, and node.js).