++You must have advanced knowledge of CSS and HTML to use these tips. If you like the look of these customizations but are not ready to tackle it yourself, contact your Customer Success 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 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. 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?
- YOU
- Talk to your Customer Success 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!
- You define classes in either the overwrite.css file or a style block.
- You can apply the Classes to any HTML element to change the default appearance of that element.
W3Schools.com
http://www.w3schools.com/cssref/sel_class.asp
Content Makeover with Mobile-Ready Content Blocks
Here is how to do a makeover on your content using a mobile content block.
| Before the Makeover | After the Makeover |
|---|---|
Use the below tool to makeover:
- 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, select the 70/30 split. This allows us to push the image to the right without pushing it too far beyond the site's width.
Now add content to the left column only. The right column is to be left empty.
After you have added your content, click on the HTML button to add in our classes with the editor open.
Here is the HTML view. You can copy and paste the code into another editor (Dreamweaver or Notepad++) for easier editing.
The first block of content gets wrapped in a <p> paragraph tag and has 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, you can add the classes directly to the <img> tag.
Click Save.
NOTE: A word of caution when using the “imgRightOff” class. If you do not use the media queries to prevent the image from going off the screen on mobile devices, you might not use this class.
Here' is your new content:
The following link will provide you with a working example of the makeover and more:
http://design.imodules.com/makeover
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 select the 3 column option to build the grid layout.
You can use many of the same steps from the “Content Makeover” to create the grid.
- 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 onto the stage for each additional row.
- Repeat the steps for selecting three 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.