DOWNLOAD DEMO
Current Version: 2.4.0.4 2014-07-18
Need a hand? Join the community.

Important Skin Changes

As mojoPortal content management system continues to evolve it is fairly common that new CSS is added over time for new or changed features. During upgrades we never touch existing skins in your site in case you have customized them. We do update the skins in /Data/skins but not the ones used by sites, these are located under /Data/Sites/[SiteID]/skins and we never touch those. Therefore it is a good idea to keep an eye on changes mentioned in the blog release announcements. Below is a list of changes that have occurred over various version releases.

Version 2.3.9.5

We updated to jQuery 1.9 and jQueryUI 1.10.0. As a result, you may find that custom plugins you are using are not working correctly. Ideally you should look for updated versions of any plugins, but if needed you can add this property on <portal:ScriptLoader ID="ScriptLoader1" runat="server" IncludeJQueryMigrate="true" /> in the layout.master file of your skin. All Artisteer skins need this because their jQuery code is not yet compatible.

If you are using a Superfish menu, and adding the mojosuperfish.js script reference in your layout.master file, you should update that to mojosuperfish150.js

Version 2.3.9.4

With the addition of new options for displaying a short author bio on Html content instances and in the Blog, you may need to add some CSS to style it. The following is an example of CSS I added to some of the included skins:

div.authorinfo { clear: both; }
div.authorinfo a.avatar, div.authorinfo a.avatar img, div.authorinfo img { float:left; }

Version 2.3.9.0

The divLeft, divCenter, and divRight (and divAlt1 and divAltContent2)can be changed from <asp:Panel to <portal:LayoutPanel and you can add a non-visual control: <portal:LayoutDisplaySettings ID="LayoutDisplaySettings1" runat="server" /> that allows setting a few properties from theme.skin to control which css classes are assigned to the layoutpanels.

Version 2.3.8.9

We added support for Facebook Comments as a new option. For it to work you need to add this in layout.master just below the GoogleAnalytics top control which is just inside the body element:

<portal:FacebookSdk ID="fbsdk" runat="server" />

Version 2.3.7.6

Custom skins need one of these added to the style.config file to support the new Audio and Video Players:

<!--
These are for jPlayer used in the Audio Player and Video Player features. Choose one of these 3 to style these features.
If you include the allskins one, it contains both of the skins for jPlayer and then you can specify which skin is used by setting this custom CSS class to either bluemonday or pinkflag. Or to reduce the total amount of CSS you can choose one of the other files and include only one of the skins for the media player.
-->
<!--
<file cssvpath="/Data/style/jplayer/allskins.css" imagebasevpath="/Data/style/jplayer/">none</file>
<file cssvpath="/Data/style/jplayer/bluemonday/jplayer.blue.monday.css" imagebasevpath="/Data/style/jplayer/bluemonday/">none</file>
<file cssvpath="/Data/style/jplayer/pinkflag/jplayer.pink.flag.css" imagebasevpath="/Data/style/jplayer/pinkflag/">none</file>
-->
<file cssvpath="/Data/style/jplayer/bluemonday/jplayer.blue.monday.css" imagebasevpath="/Data/style/jplayer/bluemonday/">none</file>

We made changes in mojoPortal to support Artisteer 3.1. The changes required making some things even more flexible to support the markup variations in Artisteer 3.1 vs previous versions of Artisteer. Skins created in older Artisteer versions need the theme.skin file to be updated as a result, as do skins based on the jQueryUI skin.

To update an existing skin created in Artisteer 3.0, download the extra-skins.zip from our codeplex download page and copy the theme.skin file from one of the artisteer30 skins included in the zip.

Similarly to update a skin created in Artisteer 2.4/2.6, copy the theme.skn file from one of the artisteer24 skins.

For really old Artisteer skins based on artisteer-greenlagoon you can copy the theme.skin file from the artisteer-greenlagoon skin in the extra-skins.zip

For skins based on jqueryui-1, we have updated that skin in the /Data/skins folder so you can copy the theme.skin file from there.

Version 2.3.7.0

We added the main CSS to the help page, in some cases this may cause a problem if you have a background image or color that obscures the help content. You should be able to fix it by adding this to your CSS:

body.help-page
{
color:black;
background-color: white;
background-image: none;
}

We also changed the behavior of the alternate content panes so that if they have no content they are hidden by default. If this poses a problem for your skin, you can revert to the previous behavior by setting HideEmptyAlt1="false" and/or HideEmptyAlt2="false" on the portal:StyleSheetCombiner control in your layout.master.

<portal:StyleSheetCombiner HideEmptyAlt1="false" HideEmptyAlt2="false" …

to revert to the previous behavior.

Version 2.3.6.6

If you are using any of the Artisteer skins or skins based on the jqueryui-1 skin, there are a few new entries needed in the theme.skin file. Other skins do not need these changes.

Skins based on jqueryui-1 need this:<portal:OuterWrapperPanel runat="server"
   ExtraCssClasses="ui-widget"
  />
 
<portal:OuterBodyPanel runat="server"
  ExtraCssClasses="ui-widget-content ui-corner-bottom"
  />

Skins based on Artisteer-24* or artisteer-30* need this:

<portal:OuterWrapperPanel runat="server"
   Element="div"
   ExtraCssClasses="art-post"
   RenderContentsOnly="false"
   LiteralExtraTopContent="<div class='art-post-tl'></div><div class='art-post-tr'></div><div class='art-post-bl'></div><div class='art-post-br'></div><div class='art-post-tc'></div><div class='art-post-bc'></div><div class='art-post-cl'></div><div class='art-post-cr'></div><div class='art-post-cc'></div><div class='art-post-body'>"
   LiteralExtraBottomContent="</div><div class='cleared'></div>"
   DetectSideColumn="true"
   SideColumnxtraCssClasses="art-block"
   SideColumnLiteralExtraTopContent="<div class='art-block-tl'></div><div class='art-block-tr'></div><div class='art-block-bl'></div><div class='art-block-br'></div><div class='art-block-tc'></div><div class='art-block-bc'></div><div class='art-block-cl'></div><div class='art-block-cr'></div><div class='art-block-cc'></div><div class='art-block-body'>"
   SideColumnLiteralExtraBottomContent="</div>"
  />

<portal:OuterBodyPanel runat="server"
   Element="div"
   ExtraCssClasses="art-postcontent"
   RenderContentsOnly="false"
   DetectSideColumn="true"
   SideColumnxtraCssClasses="art-blockcontent"
   SideColumnLiteralExtraTopContent="<div class='art-blockcontent-tl'></div><div class='art-blockcontent-tr'></div><div class='art-blockcontent-bl'></div><div class='art-blockcontent-br'></div><div class='art-blockcontent-tc'></div><div class='art-blockcontent-bc'></div><div class='art-blockcontent-cl'></div><div class='art-blockcontent-cr'></div><div class='art-blockcontent-cc'></div><div class='art-blockcontent-body'>"
   SideColumnLiteralExtraBottomContent="</div><div class='cleared'></div>"
   />

Skins based on artisteer-greenlagoon or artisteer-swirly1 need this:

<portal:OuterWrapperPanel runat="server"
   Element="div"
   ExtraCssClasses="art-Post"
   RenderContentsOnly="false"
   LiteralExtraTopContent="<div class='art-Post-tl'></div><div class='art-Post-tr'></div><div class='art-Post-bl'></div><div class='art-Post-br'></div><div class='art-Post-tc'></div><div class='art-Post-bc'></div><div class='art-Post-cl'></div><div class='art-Post-cr'></div><div class='art-Post-cc'></div><div class='art-Post-body'>"
   LiteralExtraBottomContent="</div><div class='cleared'></div>"
   DetectSideColumn="true"
   SideColumnxtraCssClasses="art-Block"
   SideColumnLiteralExtraTopContent="<div class='art-Block-tl'></div><div class='art-Block-tr'></div><div class='art-Block-bl'></div><div class='art-Block-br'></div><div class='art-Block-tc'></div><div class='art-Block-bc'></div><div class='art-Block-cl'></div><div class='art-Block-cr'></div><div class='art-Block-cc'></div><div class='art-Block-body'>"
   SideColumnLiteralExtraBottomContent=""
  />
 
<portal:OuterBodyPanel runat="server"
   Element="div"
   ExtraCssClasses="art-Postcontent"
   RenderContentsOnly="false"
   DetectSideColumn="true"
   SideColumnxtraCssClasses="art-BlockContent"
   SideColumnLiteralExtraTopContent="<div class='art-BlockContent-tl'></div><div class='art-BlockContent-tr'></div><div class='art-BlockContent-bl'></div><div class='art-BlockContent-br'></div><div class='art-BlockContent-tc'></div><div class='art-BlockContent-bc'></div><div class='art-BlockContent-cl'></div><div class='art-BlockContent-cr'></div><div class='art-BlockContent-cc'></div><div class='art-BlockContent-body'>"
   SideColumnLiteralExtraBottomContent="</div><div class='cleared'></div>"
   />

Version 2.3.6.4

In order to support the new feature that allows you to configure a custom CSS class on the body from page settings, change the opening body element in your layout.master file like this:<body class="pagebody" id="Body" runat="server"> 

Add these to the style.config for your custom skins: 

<file cssvpath="/Data/style/common/style.css" imagebasevpath="/Data/style/common/">none</file>
<file cssvpath="/ClientScript/markitup/skins/html/style.css" imagebasevpath="/ClientScript/markitup/skins/html/">none</file>

<!-- choose one of these for colorbox used in the Image Gallery -->
  <!--
  <file cssvpath="/ClientScript/colorbox/colorbox.css" imagebasevpath="/ClientScript/colorbox/">none</file>
  <file cssvpath="/ClientScript/colorbox/cb_mojo_dark1.css" imagebasevpath="/ClientScript/colorbox/">none</file>
  <file cssvpath="/ClientScript/colorbox/cb_mojo_light1.css" imagebasevpath="/ClientScript/colorbox/">none</file>
  <file cssvpath="/ClientScript/colorbox/cb_mojo_light2.css" imagebasevpath="/ClientScript/colorbox/">none</file>
  -->
<file cssvpath="/ClientScript/colorbox/cb_mojo_dark1.css" imagebasevpath="/ClientScript/colorbox/">none</file>

Version 2.3.6.1

We revamped the PageLayout.aspx page and it needs this new css:

   .pagelayout .addcontent{float: left; margin: 0 0 20px; }
   .pagelayout .panelayout { clear: both; margin: 0 0 20px 0; padding: 0;}
   .pagelayout .panelayout h2 {text-align: center; margin: 0 10px 10px 0;}
   .pagelayout .regularpanes{margin: 0 auto; width: 630px; clear: both;}
   .pagelayout .pane{float: left; clear: none;margin: 20px 0 20px 0; position: relative;}
   .pagelayout .layoutcenter{margin: 20px 30px;}
   .pagelayout .layoutalt1,
   .pagelayout .layoutalt2{float: none;clear: both; width: 190px; margin: 0 auto; position: relative;}
   .pagelayout .altlayoutnotice{margin-bottom: 20px;}
   .pagelayout .panelistbox{position: relative; width: 190px;}
   .pagelayout .pane select {width: 170px; margin-right: 10px;}
   .pagelayout .layoutbuttons{right: 0; top: 5px; position: absolute;}
   .pagelayout .layoutbuttons input{display: block; margin-bottom: 10px;}

 

Version 2.3.5.8

The following CSS is needed for the Scroller feature in the Feed Manager:.feedscroller {
    border:2px solid #E5E5E5;
    background-color:#E5E5E5;
    text-align:center;
    position:relative; display:block; overflow:hidden;
}
.feedscroller .rsswrapper { position:relative; display:block; overflow:hidden; height:250px; }
.feedscroller .rssentries { position:absolute; }

The following CSS is needed for the Flickr Gallery:

.hidden{ display:none; }

.fthumbs img{ padding:5px; margin:5px; -moz-box-shadow:#333 2px 2px 5px; -webkit-box-shadow:#333 2px 2px 5px; cursor:pointer; }
span.btn{
    padding:10px; margin-left:5px;
    display:inline-block; cursor:pointer;
    font:12px/14px Arial, Helvetica, sans-serif; color:#aaa; background-color:#eee;
    -moz-border-radius:8px; -webkit-border-radius:8px; border-radius: 8px;
    -moz-box-shadow:#999 2px 0px 3px; -webkit-box-shadow:#999 2px 0px 3px; box-shadow: #999 2px 0px 3px;
}

span.btn.pages{ background-color:#fff;}
span.btn.pages:hover, span.btn.pages.sel { background-color:#f3f3f3; color:#999; }
span.btn:hover, span.btn.sel{ background-color:#000; }
.galleryinfo{ position:relative; display:inline-block; margin-top:10px; }

This CSS is needed to style the login inputs:

.login .signinbox, .login .passwordbox { width:15em; }

 

Version 2.3.5.4

Thanks to Steve Railsback it is now easy to use icons for the administration menu links by adding this to your style.config file:

<file cssvpath="/Data/style/adminmenu/style.css" imagebasevpath="/Data/style/adminmenu/">none</file>

Version 2.3.5.3

We added support to allow use of icons in the menu for Artisteer skins. For Artisteer skins, in order to hide them by default add this to the stylemojo.css file:

.art-menu .t img { display:none;}
.art-vmenu .t img { display:none; }

For other skins add this:

.AspNet-Menu .img{display:none;}

 

Version 2.3.4.5

Changed search results to more semantically correct ordered list element.

Add this to CSS so it doesn't show number bullets.
ol.searchresultlist { list-style-type:none; }
Need to add this for Bing Maps:
.bmap { position:relative; }

Version 2.3.4.1

Add this to style.config:<file cssvpath="/ClientScript/greybox/gb_styles.css" imagebasevpath="/ClientScript/greybox/">none</file>
<file cssvpath="/Data/style/forums/style.css" imagebasevpath="/Data/style/forums/">none</file>

Add this to your style.css:

ol.formlist { list-style:none; margin: 0px; }
li.settingrow { list-style:none; }
div.sitemap .AspNet-TreeView-Collapse {
    background: url('collapse.gif') 0 0 no-repeat;
    width: 15px; margin-right: 5px;
    float:left; cursor: pointer; line-height: 15px;
}
.AspNet-TreeView-Hide { display:none;}
div.sitemap a.AspNet-TreeView-Expand, div.sitemap a.AspNet-TreeView-Collapse { text-decoration: none; }

Version 2.3.3.4

Added an alternative file manager based on jQuery, you need to add this to your style.config to add the needed styles for the new file manager:
<file cssvpath="/Data/style/qtfile/default.css" imagebasevpath="/Data/style/qtfile/">none</file>

Version 2.3.3.2

Added consistent styles for GridView. Many features including the traditional File Manager and Shared Files features use GridView. We actually have a choice of built in GridView themes and you can choose the one you like best and add it to your style.config file. The following choices are possible:
<file cssvpath="/Data/style/gridview/ChromeBlackGridView.css" imagebasevpath="/Data/style/gridview/">none</file>
<file cssvpath="/Data/style/gridview/ChromeGridView.css" imagebasevpath="/Data/style/gridview/">none</file>
<file cssvpath="/Data/style/gridview/GlassBlackGridView.css" imagebasevpath="/Data/style/gridview/">none</file>
<file cssvpath="/Data/style/gridview/SoftGreyGridView.css" imagebasevpath="/Data/style/gridview/">none</file>
<file cssvpath="/Data/style/gridview/WhiteChromeGridView.css" imagebasevpath="/Data/style/gridview/">none</file>
<file cssvpath="/Data/style/gridview/YahooGridView.css" imagebasevpath="/Data/style/gridview/">none</file>