Logo
en nl

CSS in Paspartout - 1. Quickstart

last updated: 15/02/2012
difficulty: hard
licenses: Pro, Biz, Shop

Introduction

This is not a guide on how to learn CSS but how to use CSS with Paspartout. On w3schools.com you will find a very good introduction to CSS. Don't worry, it is actually very easy once you get the hang of it.

The Editor

To edit the CSS head over to the ‘theme’ tab in your admin and select the subtab ‘advanced’. There you’ll find a button labeled 'CSS Editor'. You might find some instructions inside the editor. If that is the case just remove all of it to get started.

Structure

When you write CSS for Paspartout you are overwriting the existing CSS with your own. To get an idea of the HTML structure, here are some schematic views. They will soon be replaced with interactive schemes:

Portfolio
Blog
About

The .ppb class name

When writing CSS for Paspartout you will need to use write the full selector for each element you want to target. For example, if you want to customize the header you should do this:


If for example you want to target the header you should do this:


body.ppb .header { ... }


It’s important to prepend body.ppb because when only using div.header the original CSS will get priority.

The background (body) should be targeted with the following selector:


body.ppb { ... }


All projects, the wrapper for the posts, widgets, about info and about sidebar can be target with this selector:


body.ppb .jacket { ... }


If you want to target the projects in portfolio view only:


body.ppb .portfolio .project { ... }


This also works for:


body.ppb .blog .post { ... }


Or the images and text block in a post or the about page:


body.ppb .block { ... }


Mobile-specific CSS

By using the body.ppb selector you will only target desktop computers. To target mobile devices only you can use this selector:



body.ppb.mobile { ... }


Or only the iPad:


body.ppb.ipad { ... }


Or both desktop and mobile devices:


body.ppb.hybrid { ... }


More

We are working on more detailed documentation so keep an eye on this page.

related articles

CSS in Paspartout - 2. Images CSS in Paspartout - 3. Fonts CSS in Paspartout - 4. Google Fonts