Advanced Design Techniques for Content Management

Follow

++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.++

TABLE OF CONTENTS

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?

  • YOU
  • 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.
For more on classes and their creation, please visit the link below:
W3Schools.com
http://www.w3schools.com/cssref/sel_class.asp

Content Makeover with Mobile Ready Content Block or (MRCB)

Here's how to do a makeover on your content using a mobile content block.

Before the MakeoverAfter 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:

http://design.imodules.com/makeover

Building a Grid Layout with a MRCB

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 MRCB on to the stage for each additional row.
  • Repeat the steps for selecting 3 columns and adding content to each MRCB.

For multiple row layouts, follow these instructions to create additional space between rows.

  1. Drag a MRCB on to the stage in between each row.
  2. Select single column.
  3. Add a <div class=“paddingtop10”></div>.*
  4. Click Save and admire your new grid layout.

For additional predefined class options, visit the following link on the Design Blog:  http://designblog.imodules.com/column-snippets

Have more questions? Submit a request