Building My “Boxed” Demo Site – Part 1

Boxed is one of a handful of WordPress websites that I’ve set up to demonstrate some of the different formats that can be achieved using my favourite WordPress theme, GeneratePress with its Premium modules.

Please note that this is an affiliate link, as described on my Privacy and Cookie Notice page. I am happy to recommend GeneratePress and you can find out why it’s my favourite theme by reading my blog post “Flexible, Customisable WordPress Themes“.

The Boxed site demonstrates the following:

  • colours and fonts set using GeneratePress Premium’s customiser options
  • the “separate containers” layout
  • different backgrounds for the body and content areas of the site
  • blog posts with a masonry grid layout
  • a navigation menu on the side of the page.

The layout of the site is inspired by the “Sider” GeneratePress site which uses CSS code to move the navigation menu to the side.

  • This first article explains how I set up and customised the website and then added code based on the “Sider” site to move the navigation menu.
  • Part two will be about using the FooGallery and Smart Slider 3 plugins to add galleries and a slideshow.

Read moreBuilding My “Boxed” Demo Site – Part 1

CSS Controls Your Site’s Appearance

Use CSS to decorate your website

A WordPress theme includes a style sheet containing CSS (Cascading Style Sheets) code that determines the appearance of the elements of the website – from the size and colour of the text, to the way the images line up on the page.

For example, if I want to add a blue dashed border around my images, as shown below, then I could do it by adding this CSS to the style sheet:

“border: dashed 2px #4c5ea0;”

cakes

Read moreCSS Controls Your Site’s Appearance