Below we will continue with more information for intermediates. We will assume you have some experience using CSS for designing your platforms.
Color codes in CSSCSS recognizes a number of words for colors, like navy and yellow. But apart of these, you will often encounter color codes like #33CC66. This is called a hex code. You can use characters from 1 to 9 and A to F to create different combinations. The first 2 characters define the amount of red, the middle 2 define the amount of green, and the last 2 define the amount of blue. Experiment with different combinations to create different colors.
Custom FontsIn a platform, you can make use of custom font, using the @font-face tag. For support across multiple browsers, you need to use the font in .ttf, .eot, .woff and .svg format. You can upload these files in the Assets tab and need to be referred to in the @font-face tag. When declaring your font-family, keep in mind to specify a font to fall back on, like Helvetica or Arial.
Important tips & tricks for styling a CMNTY platform
- The <body> tag always has a class that holds the name of the current page.
- The with id root is the page wrapper, and the right place for your page background.
- The holds a spot for your platforms logo/name. In the header, you will find #root > header h1 a { in which your platform name will automatically appear. You can make this appear by setting the value of the text-indent property to 0. This is also the right place for a custom logo.
- The <div> with id header_wrapper is the right place for a custom background image in the header.
- The <div> with id wrapper wraps the content of the site, specifically the <div> with id main and the sidebar. This is the right place for defining the background color of the content.
- The <div> with id main is where the module of your page will appear.
- The <aside> with id sidebar is where most platforms hold their widgets.
- Content created in the backend with redactor (text editor) will always get the class redactor-content.
- There’s also a number of empty divs like id wrapper-top and wrapper-bottom. These are the <div> that will contain widgets, should the page be configured this way.
- Some classes will begin with ajax- and js-. These classes are for javascript purposes, and should not be used.
Responsiveness
CMNTY platform in its default form is designed for responsive web design. Which means that the design will automatically adjust to the resolution of the device on which the platform is viewed. You can see this behavior when you decrease the browser width. One of the first things you should see disappear is the sidebar. Also, font size will scale down, items become smaller and content gets shorter. This is something to keep in mind when designing a platform.
For this purpose, we use media queries or @media in CSS. For example, using @media only screen and (max-width: 768px) { you can write specific CSS for an iPad in landscape mode.
A few reminders for responsive CSS:
- Use percentages wherever you can. That way your design will scale down on lower resolutions.
- Define your font-size in em, not pixels. This way font size will also scale.
- Be careful adjusting the width of the sidebar. The #main div has a fixed width, which can cause the sidebar to slide under it. Pay attention in your media queries that sidebar and #main are well adjusted to each other.
- On smaller devices, like smartphones and tablets, the sidebar completely disappears from sight. An arrow pointing to the left will appear in the upper right corner of your screen, the sidebar will appear when you click on it.
Support for (older) browsers and devices
Sometimes your CSS will yield unexpected results in an older browser. To be able to write browser-specific CSS, we offer two possibilities. For problems with Internet Explorer, you can use the tab IE9 Only.
On top of that, the platform supports Modernizr which allows browser-specific CSS. It provides the tag with a number of classes based on the device that is currently displaying the platform. With this, you can write CSS specifically for Internet Explorer 8 by preceding your CSS selector with html.ie8. It is also possible to write CSS specifically for tablets and smartphones. Let your selector be preceded with html.touch and your CSS will only apply for devices with a touchscreen.
Here you can read more about this.
Useful links
The platform uses Bootstrap for buttons, drop-downs, and other interface elements.