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.
Removed Controls
Remove the following controls from your layout.master and theme.skin files. If you're using these in custom code, you should remove them from there as well.
- portal:MailboxLink
-
portal:MyPageLink
- portal:mojoRating
- mp:CornerRounderTop
- mp:CornerRounderBottom
HTML Element
Add the following to the HTML element in your layout.master files.
id="Html" runat="server"
FontAwesome
We use FontAwesome for a few things around mojoPortal but it's not required. If your skin doesn't use FontAwesome and you would like to have some pretty icons in a few places (like the Admin Menu) add this to the head of your layout. Master.
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
CommentsWidget
We changed a lot of the markup for the CommentsWidget which is used in the blog, the Comments module and the Page Comments feature. We suggest rewriting your CSS to support the new markup and CSS classes. If you would rather use the old CSS Classes, you can add the following to your theme.skin.
<portal:CommentsWidget runat="server"
OuterPanelCssClass="bcommentpanel"
InnerPanelCssClass="postlistwrap"
ItemWrapperCssClass="postwrapper postcontainer"
DateWrapperCssClass="forumpostheader"
ItemBodyCssClass="postbody"
LeftPanelCssClass="postleft"
RightPanelCssClass="postright"
UsernameWrapperCssClass="forumpostusername"
AvatarWrapperCssClass="forumpostuseravatar"
RevenueWrapperCssClass="forumpostuserattribute"
/>
theme.skin changes
-
When we changed out the File Manager we had the opportunity to clean out some hard coded images that were added to the Administration Drawer items out of the code. This used to be done via a setting in the user.config.
Now instead of adding things to the in the user.config and touching the web.config, just add the code below into your skins theme.skin file.
<portal:FileManagerLink runat="server" LinkImageUrl="~/Data/SiteImages/folder_explore.png" />
<portal:AdminMenuLink runat="server" LinkImageUrl="~/Data/SiteImages/key.png" />
<portal:PageTreeLink runat="server" LinkImageUrl="~/Data/SiteImages/sitemap.png" />
<portal:NewPageLink runat="server" LinkImageUrl="~/Data/SiteImages/page_white_add.png" />
<portal:PageEditFeaturesLink runat="server" LinkImageUrl="~/Data/SiteImages/page_white_edit.png" />
<portal:PageEditSettingsLink runat="server" LinkImageUrl="~/Data/SiteImages/page_white_wrench.png" />
style.config changes
-
Colorbox has been updated and now has a different path to each style. The code below shows what you'll need to update in your style.config. In the future, we suggest that skin developers add a colorbox theme into their skin and not use these calls in the style.config.
<file cssvpath="/ClientScript/colorbox/colorbox-dark-1/colorbox.css" imagebasevpath="/ClientScript/colorbox/colorbox-dark-1/">none</file>
<file cssvpath="/ClientScript/colorbox/colorbox-dark-2/colorbox.css" imagebasevpath="/ClientScript/colorbox/colorbox-dark-2/">none</file>
<file cssvpath="/ClientScript/colorbox/colorbox-dark-3/colorbox.css" imagebasevpath="/ClientScript/colorbox/colorbox-dark-3/">none</file>
<file cssvpath="/ClientScript/colorbox/colorbox-light-1/colorbox.css" imagebasevpath="/ClientScript/colorbox/colorbox-light-1/">none</file>
<file cssvpath="/ClientScript/colorbox/colorbox-light-2/colorbox.css" imagebasevpath="/ClientScript/colorbox/colorbox-light-2/">none</file>
CSS changes
- The new CKEditor configuration requires this CSS. Add it to one of your skin CSS files. If you don't want to add this CSS, you need to add
<add key="CKEditor:ConfigPath" value="~/ClientScript/ckeditor-mojoconfig-legacy.js" /> to your user.config.
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-justify { text-align: justify; }
.text-indent-1 { text-indent: 40px; }
.text-indent-2 { text-indent: 60px; }
.text-indent-3 { text-indent: 80px; }
.font-xsmall { font-size: 60%; }
.font-small { font-size: 80%; }
.font-normal { font-size: 100%; }
.font-large { font-size: 120%; }
.font-xlarge { font-size: 140%; }
/* Responsive Styles | Comment out this media query if your skin is not responsive */
/* Media Query Start */
@media (max-width: 767px) {
.image-left,
.image-right {
display: block;
margin: 0 0 10px;
text-align: center;
}
img.image-left,
img.image-right {
display: table;
margin: 0 auto 10px;
vertical-align: top;
}
}
/* Media Query End */
.image-center {
display: block;
margin: 0 0 10px;
text-align: center;
}
@media (min-width: 768px) {
.image-left {
float: left;
margin-right: 10px;
}
.image-right {
float: right;
margin-left: 10px;
}
}
.image-captioned figcaption {
font-size: small;
margin: 10px 0;
opacity: 0.7;
}
- Class on Related Posts list in Blog is now spelled correctly. Replace
brelatedosts with brelatedposts.
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
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;
}
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 layout panels.
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" />
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.skin 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.
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 {
background-color: white;
background-image: none;
color: black;
}
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.
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>"
/>
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>
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 {
margin: 0 10px 10px 0;
text-align: center;
}
.pagelayout .regularpanes {
clear: both;
margin: 0 auto;
width: 630px;
}
.pagelayout .pane {
clear: none;
float: left;
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 {
margin-right: 10px;
width: 170px;
}
.pagelayout .layoutbuttons {
position: absolute;
right: 0;
top: 5px;
}
.pagelayout .layoutbuttons input {
display: block;
margin-bottom: 10px;
}
The following CSS is needed for the Scroller feature in the Feed Manager:
.feedscroller {
background-color: #E5E5E5;
border: 2px solid #E5E5E5;
display: block;
overflow: hidden;
position: relative;
text-align: center;
}
.feedscroller .rsswrapper {
display: block;
height: 250px;
overflow: hidden;
position: relative;
}
.feedscroller .rssentries {
position: absolute;
}
The following CSS is needed for the Flickr Gallery:
.hidden {
display: none;
}
.fthumbs img {
box-shadow: #333 2px 2px 5px;
cursor: pointer;
margin: 5px;
padding: 5px;
}
span.btn {
background-color: #eee;
border-radius: 8px;
box-shadow: #999 2px 0px 3px;
color: #aaa;
cursor: pointer;
display: inline-block;
font: 12px/14px Arial, Helvetica, sans-serif;
margin-left: 5px;
padding: 10px;
}
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 {
display: inline-block;
margin-top: 10px;
position: relative;
}
This CSS is needed to style the login inputs:
.login .passwordbox {
width: 15em;
}
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>
We added support to allow the 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;}
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; }
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; }
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>
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>
As of version 2.2.7.7, we implemented a solution to combine and minify CSS files in the skins. All the included skins have been updated. If using an older custom skin you need to update your skin as follows:
- Delete the code from lines 30 to 185.
- Add
align-items: center; on line 27.
- Add the following code after line 29:
-
When we changed out the File Manager we had the opportunity to clean out some hard coded images that were added to the Administration Drawer items out of the code. This used to be done via a setting in the user.config.
Now instead of adding things to the in the user.config and touching the web.config, just add the code below into your skins theme.skin file.
<portal:FileManagerLink runat="server" LinkImageUrl="~/Data/SiteImages/folder_explore.png" />
<portal:AdminMenuLink runat="server" LinkImageUrl="~/Data/SiteImages/key.png" />
<portal:PageTreeLink runat="server" LinkImageUrl="~/Data/SiteImages/sitemap.png" />
<portal:NewPageLink runat="server" LinkImageUrl="~/Data/SiteImages/page_white_add.png" />
<portal:PageEditFeaturesLink runat="server" LinkImageUrl="~/Data/SiteImages/page_white_edit.png" />
<portal:PageEditSettingsLink runat="server" LinkImageUrl="~/Data/SiteImages/page_white_wrench.png" />
-
Colorbox has been updated and now has a different path to each style. The code below shows what you'll need to update in your style.config. In the future, we suggest that skin developers add a colorbox theme into their skin and not use these calls in the style.config.
<file cssvpath="/ClientScript/colorbox/colorbox-dark-1/colorbox.css" imagebasevpath="/ClientScript/colorbox/colorbox-dark-1/">none</file>
<file cssvpath="/ClientScript/colorbox/colorbox-dark-2/colorbox.css" imagebasevpath="/ClientScript/colorbox/colorbox-dark-2/">none</file>
<file cssvpath="/ClientScript/colorbox/colorbox-dark-3/colorbox.css" imagebasevpath="/ClientScript/colorbox/colorbox-dark-3/">none</file>
<file cssvpath="/ClientScript/colorbox/colorbox-light-1/colorbox.css" imagebasevpath="/ClientScript/colorbox/colorbox-light-1/">none</file>
<file cssvpath="/ClientScript/colorbox/colorbox-light-2/colorbox.css" imagebasevpath="/ClientScript/colorbox/colorbox-light-2/">none</file>
- The new CKEditor configuration requires this CSS. Add it to one of your skin CSS files. If you don't want to add this CSS, you need to add
<add key="CKEditor:ConfigPath" value="~/ClientScript/ckeditor-mojoconfig-legacy.js" /> to your user.config.
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-justify { text-align: justify; }
.text-indent-1 { text-indent: 40px; }
.text-indent-2 { text-indent: 60px; }
.text-indent-3 { text-indent: 80px; }
.font-xsmall { font-size: 60%; }
.font-small { font-size: 80%; }
.font-normal { font-size: 100%; }
.font-large { font-size: 120%; }
.font-xlarge { font-size: 140%; }
/* Responsive Styles | Comment out this media query if your skin is not responsive */
/* Media Query Start */
@media (max-width: 767px) {
.image-left,
.image-right {
display: block;
margin: 0 0 10px;
text-align: center;
}
img.image-left,
img.image-right {
display: table;
margin: 0 auto 10px;
vertical-align: top;
}
}
/* Media Query End */
.image-center {
display: block;
margin: 0 0 10px;
text-align: center;
}
@media (min-width: 768px) {
.image-left {
float: left;
margin-right: 10px;
}
.image-right {
float: right;
margin-left: 10px;
}
}
.image-captioned figcaption {
font-size: small;
margin: 10px 0;
opacity: 0.7;
}
- Class on Related Posts list in Blog is now spelled correctly. Replace
brelatedosts with brelatedposts.
- Open layout.master file in a text editor and replace this:
<portal:StyleSheet id="StyleSheet" runat="server" />
with this
<portal:StyleSheetCombiner id="StyleSheetCombiner" runat="server" />
- Add this to the bottom of the <head>:
<portal:ScriptLoader id="ScriptLoader1" runat="server" />
- Copy the file style.config from any of the other skins into your custom skin. This file is a list of css files to include and combine.
- Review the list of included CSS files in the style.config. The names of CSS files in included skins have also changed over time, so your CSS files may not be named the same as existing skins and you may need to edit the style.config file to include the correct names for your skin. You should include all the css files in your skin folder in the list, except for the IESpecific CSS files.
- Due to the way our CSSHandler combines and minifies the CSS included in the style.config list, it has to resolve the URLs for background images in CSS to fully qualified URLs. For this to work, any background image URLs you specify in your CSS files need to be single quoted like this: url('someimage.png'), otherwise it can break the CSS because of failure to resolve the images.
Last Modified by Joe Davis on Apr 11, 2024