Adding Extra Content Boxes

The template I was using for the content slider originally had 5 boxes, but I needed 6. At first, I was confused on how to add another box, but I found out how to do it in the CSS.

The mask's width is how long the site is. When I added another content div, I had to change 500% to 600%, as there were not 6 boxes. That part was simple enough, but the width also had to change otherwise the box would be pushed down below the rest of the site. The width percentage has to be 100 divided by the number of boxes, which in my case was 16.6.

Site Limitations

Whist making the site, I am finding various problems that I am finding hard to overcome, Some of which are not possible with my current HTML knowledge. One of these problems are with the background imagery. On the site I was inspired by, Pixelmess, they had different background images overlapping onto other divs, but I cannot figure out how to do this, so I have had to limit myself to one background per div. This also brings up the problem of different monitor sizes when it comes to making two background images link up, the images will look different on every screen. One way of solving this would be to have the backgrounds repeat on the x-axis, although this won't work for some as one end of an image will be linked with another.
The only way I have thought of overcoming this is to make very long versions of my background images. Although it takes up more space, I am pretty much guaranteed that these images will fit on any monitor size.

Another limitation was the amount of space I had for content. I didn't want the site to have a scrollbar, so I can't make the site too long. Therefore, I have to limit my space by using thumbnails with lightbox and sliders to fit all my content in a small space.

Uploading my Fonts

To get my fonts to work on my site, I used a site called Font Squirrel to mae working font faces with the fonts I had downloaded previously.

I used their @font-face generator to upload the fonts. I then had to download the folders with all the css and code necessary to get it working on my site.

This code linked the fonts to my site, I had two for both of the fonts I picked for my site.

I then had to specify where to show the font in my CSS

Changing my Content Sections

The slider template had its own layout template when I got it, and the navigation was on the content boxes itself. I had to changed the CSS of the page myself to have the navigation at the top of the page.

Here is the code for my navigation bar. The position of it is fixed so that it is always at the top of the page, even if the page is scrolling to another content box.
To get it to work with the content scroller, I had to add a class to the navigation div in the html, so it would work with the jQuery.

My content boxes were changed so I could add more content to them.

I also changed the background colour of the content box. This was done in RGB values so the transparency worked on the background. I wanted transparency so you could see the background images clearer.

The selected class works with the navigation. It puts a white border around the div you are currently on, which is useful for navigation.

Making My Backgrounds

Whilst making the site, I have found that making that background has been the most time consuming part of it, as many of these require drawing from scratch. For my backgrounds, I have looked at various existing levels and have given them my own personal style, and fit them into my site accordingly.

Whilst testing the slider on my site and trying to see how the backgrounds would fit together, I mocked up this sketchy version of a final background. After making this version, I then went over it again, but made it much more detailed. The lines are also neater, and were mainly done with the line tool in Photoshop.

This is part of my finished first background. The drawing is more detailed, and I imitated the style of the level from the game.

Getting the Content Slider to Work

I have now found the code for a content slider, one that works horizontally. I am starting to get it to work with my site, although there is not much to it yet as I am still planning out the background imagery.

This is how it looks so far. I need to change the colour scheme accordingly.

Starting to Build My Site

Before making the visuals, I want to make sure I can code the website properly and get that working. I am currently looking for a way to make the site scroll horizontally, but in the mean time I am going to plan out the sizes of the content divs and the navigation.