++You must have advanced knowledge of CSS and HTML in order to use these tips. If you like the look of these customizations, but aren't ready to tackle it yourself, contact your Account Manager for more information.++
- Taking Control of Your Content with CSS
- Going Back to Class with CSS Classes
- Content Makeover with Mobile Ready Content Blocks
- Building a Grid Layout with a Mobile Ready Content Block
Taking Control of Your Content with CSS
What is an overwrite.css file?
The overwrite.css is an external CSS file that allows admins the ability to style elements within an HTML document.
Where is the overwrite.css located?
Click the Document Icon in the WYSIWYG editor.
Then locate your overwrite.css file.
Overwrite.css will be blank by default. In order to make changes to the overwrite.css, you must first delete it from the document manager.
Upload the new overwrite.css file from your desktop.
Who is the Owner of the overwrite.css file?
- Talk to your Account Manager or Project Manager to see if this is right for you.
Going Back to Class with CSS Classes
Now that you have your overwrite.css file up and running, you can start working with classes!
- Classes are defined by YOU in either the overwrite.css file or a style block.
- Classes can be applied to any HTML element in order to change the default appearance of that element.
Content Makeover with Mobile Ready Content Blocks
Here's how to do a makeover on your content using a mobile content block.
|Before the Makeover||After the Makeover|
Tools we will be using for this makeover include …
- The Encompass “Mobile Ready Content Block”
- Overwrite.css + Classes
- Content + Images
Start by adding a Mobile Ready Content Block module to the page.
Click the edit icon on the newly added block.
For this example we'll to select the 70/30 split. This will allow us to push the image to the right without actually pushing it too far beyond the site's width.
Now we'll add content to the left column only. The right column is to be left empty.
After you have added your content, with the editor open we are going to click on the HTML button in order to add in our classes.
Here's the HTML view. You can copy and paste the code into another editor (Dreamweaver or Notepad++) for easier editing.
The first block of content will be wrapped in a <p> paragraph tag and have the “largeText” class applied to it.
If the image is to show a caption, it will need to be wrapped in a <div></div> tag and have the classes “imgRightOff” and “imgWrap” applied to the div. If no caption, the classes can be added directly to the <img> tag.
Click Save and you're done!
NOTE: A word of caution when using the “imgRightOff” class. If media queries are not being used to prevent the image from going off the screen in mobile devices, you might not use this class.
Here's your new content:
The following link will provide you with a working example of the Makeover and more:
Building a Grid Layout with a Mobile Ready Content Block
Tables are not mobile-friendly, and it's time to start using the Mobile Ready Content Block to its fullest potential. Mobile Ready Content Block benefits:
- Cost effective
- Stackable for mobile devices
- Flexible for all devices
- Allow you to control columns and design
For this example we will be selecting the 3 column option in order to build the grid layout.
Many of the same steps from the “Content Makeover” are used to create the Grid layout.
- Add content.
- Wrap content in the following wrapper <div class=“imgWrap”>image + content goes here</div>
But how do we make more rows?
- Drag a new mobile ready content block on to the stage for each additional row.
- Repeat the steps for selecting 3 columns and adding content to each mobile ready content block.
For multiple row layouts, follow these instructions to create additional space between rows.
- Drag a mobile ready content block on to the stage in between each row.
- Select single column.
- Add a <div class=“paddingtop10”></div>.*
- Click Save and admire your new grid layout.
Visit the Column Layout Snippets page to get more information.