It would be good to fix the docs.  In addition to the mistake regarding the @import, it would be very helpful to explain and clarify how to get the .less versions of the bootstrap templates.  Are there any compatibility issues with them?  Framework uses bootstrap 3.3.7.  I downloaded bootswatch cosmo 3.4.1.  

The issue is that I don't see a skin.less file in main.less.  I tried importing bootswatch and bootswatch-variables files in various places but consistently get an error from Prepos.  

Is there an updated version of the article or can someone please provide guidance on how to enable bootswatch with framework?  Any help is appreciated.  

For a RED background within a HTML Module, use:

section-dark

in the CSS (Module Settings).

Ray

Could I send you a RED Skin, that works on mobile devices?  It is  a Red version of the Mojoportal Scout Skin.  All I need is a contact email.  This offer is free of any charges.  Thanks for using Mojo Portal as your CMS.

Note: I have sent you instructions, on downloading the Red Skin via your contact form at your website.  Hope it helps.

Are you using just one skin for desktop and mobile and it has responsive CSS?

Since adding this tag, the responsive skin does not didplay on my mobile and it uses the desktop skin.  Can anybody tell me why this might be?
      

In the case of that particular page the issue is just that the page content is all in a table. The table will not compress naturally.

This CSS will fix it so that all of the table content is visible on a phone:

.art-article table, table.art-article { max-width: 100%; }

Unfortunately that solution can result in table content looking "squished" sometimes (it really depends on the content). If you just want the user to be able to scroll, you can add this CSS instead:

.table-wrap { overflow-x: auto; max-width: 100%; }

And then in your HTML, wrap your table with a div with the class "table-wrap", like this:

<div class="table-wrap">
     <table>
          ...
     </table>
</div>

Hope this helps!

An example can be seen here:  Pre Christmas - Ormskirk Quiz League

The skin is based on artisteer31-bluenwhite and has been tweaked in Artisteer.

Any idea why?

 Problem solved with your solution.

Based on the classes currently being used by the site, the following CSS will add a down arrow to root-level menu items with children:

li.has-popup > a::after {
position: absolute;
content: "";
border-top: 5px solid #31a19b;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
display: inline-block;
top: 10px;
right: 28px;
}
li.has-popup span.t {
padding-right: 44px;
}

You'll need to add additional similar CSS to make arrows show on sub-menus if you wind up having sub-menu flyouts.

Otherwise, if you want to use the .AspNet-Menu-WithChildren class you'll need to set that as the class for menu items with children in your theme.skin. To do this, first you need to look in your layout.master for the "SiteMenu" control, and find if it has a MenuSkinId="" property. If it does, then open the theme.skin and search for whatever Skin Id is between the "" quotes. If it doesn't, then open the theme.skin and search for the   <portal:SiteMenu> with the SkinId "SiteMenu" - that should be the default.

Once you've found the right menu, add the setting LiCssClassWithChildren="AspNet-Menu-WithChildren" - This should make that class render on your menu items with children, that way any CSS you add for that class will work!

Don't forget you may need to reset the app after changing the theme.skin for it to reload. To do this browse to /Admin/ServerInformation.aspx on your site and click the "restart application" button. If no button appears, you'll need to touch the web.config in your wwwroot - just open it and type a space anywhere and save, that will also restart the app.

Hope this helps.

The site link: http://greenpolypack.hanwebfusion.com/about-us.aspx. Please advice.

Thanks.

Would you mind sending a link to the site so that we can take a look?

How to add the Menu Arrow? As checked and try add this code "li.AspNet-Menu-WithChildren > a", but the Menu Arrow still not appear. 

Please guide.

Thanks.

We've noticed this happen when we're using a CSS file that has already been minified and we keep MinifyCSS=true. Try setting MinifyCSS=false and "touch" the web.config.

Hope this helps,
Joe

When I reload my site after long time (1H) or first time on other computer "csshandler.ashx"  is pending  and load slowly (about 1min).

This is a problem when site load for first time.

This is my config for Cache:

CacheCssOnServer=true

CacheCssInBrowser=true

CombineCSS= true

MinifyCSS= true

 Can you help me for this problem?

Having bigged-it up I'm a bit embarrassed to "show and tell" as it's so simple at the moment, but it's https://maswell.org.uk 

Some of it's handcrafted (for instance I didn't spot the "Personnel List" Superflexi option 'til after I'd done my own, so there's something to refactor...

Anyway thanks once again

Ian

Thank you for the kind words. Your experience is very similar to our own.

There are some cool things in the works for mojo and SuperFlexi. It will be more flexible than ever before.

We'd love to see your new skin, by the way. 

Thanks again,
Joe

We've hosted Mojo sites for many many years.  As you can imagine, over time a number of our users have moved their sites elsewhere and, as site-hosting isn't our main business, we've been happy to see them go.  But this left a number that were looking decidedly long-in-the-tooth (mostly the ones that I had more personal responsibility for!).

Having played with a number of other options - Wix, Squarespace, Wordpress, I thought I'd have a go at throwing some effort at creating a new mojoPortal skin (based on framework) that would make the most of bootstrap etc, and I also decided to bite the bullet with SuperFlexi.  And I have to say I LOVE it!  

Most of our sites have fairly modest needs and I'm really enjoying being able to do all the customization I want, without having a million design and module options imposed on me (looking at you WP), keeping things nice & clean.

So a big thank you to the team, and long live mojoPortal!

Ian

We haven't tested it with Artisteer 4.3, if you purchase the plugin and it doesn't work with 4.3, we'll issue you a refund.

Thanks,
Joe

The Artisteer plugin is available here.

Thanks,
Joe

The best way to do this would be in CSS. 

1. In the root of the skin's folder, open the skin.config file and uncomment this line:
   <!-- <file>style-site.css</file> -->
2. Create a file in the root of the skin's folder named style-site.css and add the following to it:
   .head { background-color: Whatever-Color-Value-You-Want; } 
3. Go to Administration > Design Tools > Cache Tool and click the "Reset Skin Version Guid" button.

Hope this helps,
Joe

<h-e-a-d-e-r class="head" role="banner">

to

<h-e-a-d-e-r style="background-color:Tomato; class="head" role="banner">

Note: please take out the "-" in h-e-a-d-e-r  (The forum would not let be publish word <header .......

For a red background in the main (Top) site menu:

In (Skin)layout.master
change: 

" <header class="head" role="banner"> "

to

" <header style="background-color:Tomato; class="head" role="banner"> "

In theme.skin

change

" RootUlCssClass="nav navbar-nav sm sm-clean" "

to

" RootUlCssClass="nav navbar-nav sm sm-red" "

"This works for me"

Does anyone know how to change the background colour of the Top Nav (Main Site Menu)?  "Been looking at scripts for hours".

I am using the Scout Skin (But I am sure the solution would work for all skins).

Can you Help Please?

Best Regards

Had to add

 link rel="stylesheet" href="https://www.mojoportal.com//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css to the Layout Master

Thanks

Please can you guide me on this. I followed the instructions on this page

https://www.mojoportal.com/administration-menu.aspx

I cannot seem to see the icons in the Admin menu

Thanks

Not allowing to enter the fil csv.. so I added the adminmenu command on this page (1st post)

https://www.mojoportal.com/Forums/Thread.aspx?pageid=5&t=6904~-1

I've added   <file cssvpath="/Data/style/adminmenu/style.css" imagebasevpath="/Data/style/adminmenu/">none</file> to the style config but the admin icons do not show. Can you please guide me.

Thanks,

Uday

I've created a custom module in a new project folder. Copied the layout file from the features solution. Everything works but the topnav does not render correctly. Can you please guide me on what I am doing incorrectly

Thanks in advance

Yes this is possible. Any menu type created in the theme.skin with portal:FlexMenu as its tag can be used to display all pages/levels, and you can style it to look however you'd like. The primary settings that cause the menu to show all pages/levels are StartingNodeOffset="-1" and MaxDataRenderDepth="-1" - these options allow you to control the starting node for the menu and the depth it will go to underneath that node, but when given a value of "-1" they both will show all pages/levels.

Most horizontal menus use some CSS trickery or some JavaScript to float the top level items in line and hide the child elements until the parent is hovered on. Without any CSS/JavaScript, your menu should be a normal UL that displays vertically, so you can start from there and build any styles you like.

I don't suggest using <article> elements for your Outer Body Wrapper. Instead, consider the <section> element. For reasoning, see this: http://html5doctor.com/the-article-element/

That said, if you have a problem with missing headings, it is likely because of an issue in your theme.skin or because you have the "Show Title?" checkbox unchecked in the module's general settings.

Hope this helps.

Some other steps you can take:

1. Make sure you aren't setting a bunch of different font-family styles on individual elements - be clean and specific with your CSS.
2. Make sure your webfonts are being called early in the <head> of the document, and that any online source you use has a nice fast CDN.
3. If the flashing persists and really bothers you, set a "loading" period on your document by adding a loading class to the body, styling it to cover the site content and show a loading notice, then remove the loading class using script in the window load event.

Assuming you're still using the same skin, the style for the width of the vertical menu is set on the .art-content-layout .art-sidebar1 {} class, which is currently "225px" on desktop and "auto" on mobile. Find/replace this in your skin to change the width, but beware that you don't override the mobile-specific style which is set with !important after it (which increases its CSS specificity by 100).

It sounds like your development server is local so the images that populate the slider were loading instantly, but when requesting the images from the live site it took a moment for them to load, and the slider was setting its height before the images loaded. If you're using jQuery for your slider, you can fix this by initializing the slider in a $(window).on('load', function() { ... }); call. One popular solution for these loading problems is to use CSS to create a "loading" window where your slider will be, all styled with a "loading" class, with a preset minimum width/height, and then have the slider remove the "loading" class once it has all it's assets ready.

You can add the Child Page Site Map Module to your page by clicking "Edit This Page" in the admin toolbar, then selecting the feature from the dropdown list. If you want your whole site menu to move and show as a side-menu on every page, you'll need to change where it shows up in your layout.Master file in your skin - as a rule whether something is a top menu or a side menu is determined by your CSS and any JS interacting with the menu. 

If changes to your layout.Master aren't making a difference you might have the wrong skin selected in site settings. 

Otherwise you can use CSS to turn the link into a button. In .LESS you can use .loginmodule .lnkregister:extend(.btn all, .btn-primary all) { // extra styles here } - but in pure CSS you'll just want to copy the button styles in under the right class name.

Hope this helps.

Greg

Add this to your CSS. You can change your LESS files and recompile them to CSS or you can just add this to a new css file and reference it in your style.config file of your skin.

.top-pane .panelwrapper {
    width: 100%;
    padding: 0;
}

Hope this helps,
Joe

I wanted a similar structure with full-width for the top and bottom panes and the possibility to have a full-with banner in the central pane where content is generally 1200px.  I solved widening the whole site to 100% and adding a container class at 1200px  that I call for the content I want.

As Joe said it is a little css work. :-)

Hope it helps

Mari

Be sure you have followed the steps here and then it's just CSS from that point. You might have to tweak where in your layout.master you place the extra content panel as well.

If you can post a link to a page you are working on, we can help further.

Thanks,
Joe

I think the CSS selector for this text would be:

.site-statistics h3 label {}

The div with the site-statistics class on it also has the floatpanel class. That could be causing problems with your layout.

In the next version, we'll update the module so these classes can be configured.

Thanks,
Joe

see image at :

http://www.rossimassimiliano.it/upload/stats.jpg

There's no reason Bootstrap 4 can't be used with mojoPortal. Truth is, we've spent a lot of time on our Framework skin and it includes many of the things (i.e., flexbox) that Bootstrap 4 does (although implemented differently). 

For us to implement Bootstrap 4 with Framework would take a bit of time and the end result would be roughly the same capability we have now. With that said, it is important for others to be able to easily use mojoPortal without having to learn how we implemented CSS standards like flexbox in our Framework skin.

There are two short answers to this: 1) Bootstrap 4 can be implemented in mojoPortal; 2) we just haven't gotten around to creating a skin utilizing Bootstrap 4, yet. 

Thanks,
Joe

I need to redesign one of our Mojoportal sites and the ability to easily use Bootstrap 4 would strengthen the argument for keeping it in the Mojoportal fold.  

Equally if you have any reasons why I shouldn't go for Bootstrap 4 that would be useful to know before I get stuck in

Thanks

Ian

Your developer is probably correct about the CSS. The only way to fix that would be to adjust the CSS to be compatible with IE.

There are a lot of ways to do what you want to do. Your developer should be able to rewrite the CSS to be compatible with IE. mojoPortal doesn't control that CSS, it's part of your content, which you control.

Thanks,
Joe

We have created a responsive site, and the images on the page need to be rendered like a grid. This works fine onCrome and Firefox, but the images get aligned vertically (like in a single column) on IE. The developer tells me that this is due to a css element display: content.

Any help to get this issue resolved will be of great help.

The erring page is : http://airfleetmanagement.com.au/clients

The good news is that upgrading mojoPortal doesn't usually break things with skins. 

You can check out the "Upgrading Skins" doc for notes on what might need to be updated in your skin.

If you need or want some help with upgrading and making sure your skin gets upgraded as well, submit a ticket and we'll help you out. It should only take about an hour once we get started.

Thanks,
Joe

Question, I have a skin that looks and worked well about two releases ago, what is the chance of finding someone to convert my skin to work with the last two releases. And what would the cost be to do this work for me. I really like my skin and hate to go with something else.

Are you have any program for the skin compatible with bootstrap 4 in new update?

And when you can release new update?

Thank a lot.

how can I move the gallery pager down instead of up ?

I believe you need to place the logo files in the /data/sites/1/media/logos folder, not the /data/sites/1/logos folder. If that doesn't work let me know.

Thanks,

I have tried to read the documentation and I have searched for skins but I can't solv this.

How do I change menu from the little menu on top to a vertical menu on the left? I found the superflexi and made links that way but I want to move the real menu. Changes to layout.Master does not seem to matter.

Anyone help?

regards Ylva

I recenlty had to reinstall the OS on my laptop and installing Artisteer again the mojoPortal Export feature was missing.  Where can I find the download to reinstall. 

Thanks

I feel like an idiot now but after reading your reply I have realised my error

I have clicked the "?" next to the privacy link in the Admin setting then hit edit on that thinking I was editing my privacy policy when in fact I was only editing the Admin help help file :-)  I have now published the page and all is well I have also updated my Admin help file to say I am an idiot!

Thanks again

Joe

The Privacy Policy Url setting in the Site Settings only creates the URL for the link that the <portal:PrivacyPageLink ID="pp1" runat="server" /> control displays, but it does not create a CMS page for you.

You will need to create a page like normal and call it something like "Privacy" or "Privacy Policy" and uncheck the "Include in Menu" option, and then set your Privacy Policy Url setting in the Site Settings to the URL your new page created.

I hope this helps.
Elijah

Thanks for the portal

I am having problems displaying my privacy.aspx page on the site. I have wrote the content within the administration area on the CRM but the link to the actual page does not work. I have tried both

<portal:PrivacyPageLink ID="pp1" runat="server" />

the URL is  https://meashambowls.co.uk/privacy.aspx when I click the ? on the admin screen the content is there but the page is not showing

This can be done with some changes to the CKeditor js configuration. The best way to do this and ensure you don't lose your changes when you upgrade mojoPortal is to do the following:

1. Copy the /ClientScript/ckeditor-mojoconfig.js and paste it in the same folder with a custom name, i.e. ckeditor-julie.js.
2. Edit ckeditor-julie.js:
   1. insert config.autoParagraph = false; on line 11.
   2. insert the following on their own lines at the very bottom of the file, after the };
CKEDITOR.dtd['a']['div'] = 1;
CKEDITOR.dtd['a']['p'] = 1;
3. Save the ckeditor-julie.js file.
4. Open your user.config file and add this before the closing </appSettings>
   <add key="CKEditor:ConfigPath" value="~/ClientScript/ckeditor-julie.js" />
5. Open your web.config file, add a space to one of the comments in the file and then save it. This causes IIS to reload the web.config, which reloads the user.config.

Thank you,
Joe 

<a href="blah.com">

<div>

anything

</div>

</a>

When I try to do this, it gets rewritten (I'm using CKEditor) as:

<div>

<a href="blah.com">

anything

</a>

</div>

Is there any way to prevent this? I have a 3 column grid, with images in the backgrounds of each column, and text over the images. I want the whole column to be clickable. I want the text for SEO so don't want to make it all into an image.

Thanks!

Julie

Unfortunately this is something that has to be edited in the Layout.Master file on line 46 in the skin, as there's no way to add it as a setting yet.

HTH,
Elijah

There is a round-a-bout way to do this. First, get the module id of the module you want to link to. To do this, hover over the settings link for the module and make note of the number after the "mid" parameter. Next, create a new page in your menu and set the url for the full url of the page containing the module with #moduleNNN at the end, where NNN is the module id. So, if the module id is 456 and the page url is http://www.some.url/page, then the url you will enter for this menu item is http://www.some.url/page#module456

Hope this helps,
Joe

I guess I could also put all my content in 1 html module where I define the anchor tags appropriately.

I'm hoping someone has an easier way to do this. Thanks in advance!

<img width="40" height="40" src="http://www.gravatar.com/avatar/64e1b8d34f425d19e1ee2ea7236d3028.jpg?r=G&amp;s=40&amp;default=http%3a%2f%2fwave%2fData%2fSiteImages%2fanonymous.png" alt="Gravatar">

When you installed Event Calendar Pro did you enable it in your theme.skin file? I'm not sure what you mean by "full screen" but I assume that you mean you're having some display issues with the pro version and it seems most likely that would be caused by a skin issue. If it's not something simple like ECP not being configured in the theme.skin then I will need more information to help you properly, like knowing what skin(s) you're using and if you've added any custom CSS to your site that might cause the problem, etc.

Hope this helps

I have purchased the event calendar pro and downloaded mojoportal 2.6.  The free calendar displays full screen but the pro version only occupies a small section.  I have looked on the demo site and it is the same.  How can I make the pro calendar full screen?

Many thanks