mojoPortal Tips: Keeping it Simple – Unformatted Blocks

One of the really great benefits of a CMS (content management system) like mojoPortal is that the UI design is self-contained and consistent due to the use of “skins”, custom web UI designs created specifically for mojoPortal websites. mojoPortal ships with almost 30 skins pre-packaged into the application, and there are a number of mojoPortal consulting partners who can create custom “skins”, based upon website design requirements. Artisteer is also a great choice for creating mojoPortal skins, depending on the complexity of your project. However, there will be times that you may wish to override the built-in CSS in order to display a feature such as a slider or rotator in mojoPortal, especially on the front page.  Read more for the details…

One approach is to create a separate skin to be used specifically for that page; however, that may be more complex than what you need.

mojoPortal features have the ability to define a specific CSS to be applied to that feature. You’ll find this under the “settings” link on any feature you’ve already included in your mojoPortal installation, for instance. Look for the field labeled “Custom CSS Class”. In the CSS examples below, I used the custom CSS class “OverRide”.  Bear in mind that the class won’t apply directly to the feature; you’ll have to define your nested classes, as leveraged in mojoPortal’s default layout.

This example will affect the content in the center panel features, and is designed to be used with skins that do not leverage the graphic-based rounding.

.OverRide .art-postcontent
{
    background-color:transparent!important;
    background-image:none!important;
    border:none!important;
}

This CSS addresses the rounded corner behavior that is implemented by a “frame” of CSS-formatted divs.

.OverRide .art-post-tl,.OverRide .art-post-tc,.OverRide .art-post-tr,.OverRide .art-post-br,.OverRide .art-post-bl,.OverRide .art-post-bc,.OverRide .art-post-cr,.OverRide .art-post-cl,.OverRide .art-post-cc
{
    background-color:transparent!important;
    background-image:none!important;
    border:none!important;
}

.OverRide .art-block-tl,.OverRide .art-block-tc,.OverRide .art-block-tr,.OverRide .art-block-br,.OverRide .art-block-bl,.OverRide .art-block-bc,.OverRide .art-block-cr,.OverRide .art-block-cl,.OverRide .art-block-cc
{
    background-color:transparent!important;
    background-image:none!important;
    border:none!important;
}

.OverRide .art-blockcontent-tl,.OverRide .art-blockcontent-tc,.OverRide .art-blockcontent-tr,.OverRide .art-blockcontent-br,.OverRide .art-blockcontent-bl,.OverRide .art-blockcontent-bc,.OverRide .art-blockcontent-cr,.OverRide .art-blockcontent-cl,.OverRide .art-blockcontent-cc
{
    background-color:transparent!important;
    background-image:none!important;
    border:none!important;
}

The result? A “blank” feature that can contain an alternate display, suitable for your website’s design needs.

Looking for quality mojoPortal Hosting? Look no further than Arvixe Web Hosting!

Tags: , , | Posted under MojoPortal | RSS 2.0

Author Spotlight

Carole Bennett

Carole Bennett is the founder and principal of IndigoTea. As a professional IT consultant, Carole has provided solutions for companies as diverse as Verizon, Frito-Lay, Capital One Auto Finance, and Zales Jewelers, parlaying a unique talent for acting as a translator between the worlds of business challenges and technology solutions. She considers multi-tasking skills gained from simultaneously 1) managing a fire performance troupe, 2) raising a family, and 3) working as a full-time IT consultant excellent preparation for her current career incarnation as the driving force behind IndigoTea. "Fire-breathing redhead on a mission" is not just a metaphorical description!

Leave a Reply

Your email address will not be published. Required fields are marked *


5 − 3 =

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>