We have a repository that where we've uploaded a few of our solutions. I think it would be great if we made that public and had more on it. We'll add it to the list for sure!

Thanks,
Joe

It would be very cool if there was a public repository of SuperFlexi Solutions. Especially with the cshtml support, SuperFlexi is a great tool. I think it could help mojoPortal if there more solutions out in the "wild" so to speak.

Thanks,
Bill

On this page it says:
https://www.mojoportal.com/docs/superflexi

Because of the way the stored content interacts with the solution, it is a very bad idea to change what Solution a SuperFlexi module is using after you've already created your items. Don't do that unless you're sure you know what you're doing. Instead, unpublish the module and create a new one to add a different type of solution to your page.

We could probably make some sort of control to lock it, with a button to unlock and a warning prompt.

I'm pretty sure you can switch between solutions without losing data but I'd have to test it again to be sure. Also, some solutions are compatible with each other; vertical tabs and horizontal tabs are one example however with the razor view functionality we've built, those two solutions could become one solution once we build the module level solution settings feature.

Thanks,
Joe

Even as an admin I'd rather not even have the option to make that change once it's saved. Better to just delete and add new. Not sure if there's a way to lock that up/disable once set?

Is there any chance that we could have some extra solutions for Flexi ? 
please email me at support@microquiz.net

thank you

For example, on this site we're working on the home page has four solutions (banner rotator, process slider, testimonial rotator and gallery). All SuperFlexi solutions that need some global settings ideally. I use the advanced setting and then some CSS overrides in a skin as needed.

http://westwind.proactivedesign.net

We can add a setting in .sfmarkup for that fairly easily, I think.

ckEditor being forced was an intentional decision a few years ago but I don't remember why. I think it was due to how the controls are added or something like that. We'll look at it again and see what we can do. To be honest, we'd like to implement a different wysiwyg altogether. It only takes time. lol...

Thanks,
Joe

We have run into the same situation. What do you think of a special control that can be referenced in the .sfmarkup file which the Module Settings page will load that has those kinds of settings?

Thanks,
Joe

The WYSIWYG should also ideally be inherited from the site settings selection (TinyMCE/CKEditor). Currently it defaults to CK I believe no matter the setting choice.

Often with solutions (I've created dozens), I'd like to set global values such as background color, background image selection, number of columns, various sizes (say images for gallery), and other things like this. Based on how this is structured I think this is a more difficult request than it sounds, but thought I'd throw it out there.

The intended purpose of icon-blocks-base.css is to include any styles that are required for the proper display of the SuperFlexi Solution. That said, we've assumed that people are working with skins built off of our Framework, and that means they'd already include styles for the bootstrap grid ("col-") or flexbox grid ("fb-") classes, so we don't normally include them there. It is best to keep your custom styles in style.css because icon-blocks-base.css may be overwritten if you update to a newer version of the solution - particularly if the solution you're using is located in /data/SuperFlexi and not in /data/sites/#/SuperFlexi, as the former may be overwritten whenever you update mojoPortal. This is likely why Eric suggested earlier that you copy the solution and change the name and GUID, as that will prevent overwrites regardless of location.

As for a better way to style things, it depends. If your skin already includes the bootstrap / flexbox grids, you ought to be able to achieve a 4 column layout without custom CSS at all - you would just change the classes in the .sfMarkup file as Eric already suggested (to clarify, this is located just a bit below the ItemsRepeaterMarkup change you already made in the .sfMarkup).

If your skin doesn't support those grids, the solution you have should work fine as long as you don't care too much about different sized screens. If you look on a phone, you probably don't want the icon blocks to be in a row there. If you are concerned with this, the following CSS should offer a starting point to making the solution mobile friendly:

/* Mobile styles are the defaults, wider styles overwrite / add to them. */
.icon-blocks-module .icon-blocks .row div.flex-children {
	text-align: center;
}

/* Simple breakpoint at 768px. Your styles will now only apply to screens
   768px in width and above, leaving the phone styles to be default 100% blocks.
   You may want to adjust the 768 value depending on your needs. */
@media (min-width: 768px) {
	.icon-blocks-module .icon-blocks .row div.flex-children {
		width: calc(25% - 30px);
		float: left;
		padding-left: 15px;
		padding-right: 15px;
		text-align: center;
	}
}

There are of course many ways to accomplish anything in CSS, in my experience usually the "better" one is just whichever one solves your problem in the fewest lines of code. So if your site isn't adapted for mobile at all, don't bother adding a media query, and if your site uses bootstrap / fb-grids already, avoid adding any new CSS by utilizing them properly.

Hope this helps!

I had already changed ItemsRepeaterMarkup itemsPerGroup="4" but it was the additional $_Items[3]_$ I needed to add.

I can't find where to edit div class="col-md-3 flex-children flex-stretch fb-wrap". It's not in my style.css or any other css file in my site.

The web developer added this into my style.css  -  width: calc(33.33% - 30px); - I had to change that to 25% and I get the 4 in a row. If I comment it out, the Block Title does not wrap. This is the code they used:

.icon-blocks-module .icon-blocks .row div.flex-children {
   width: calc(33.33% - 30px); <-- I  changed this to 25%
   float: left;
   padding-left: 15px;
   padding-right: 15px;
   text-align: center;

Is there a better way of styling this? Would it be better to move the icon-blocks-module styling into the icon-blocks-base.css?

Thank you for taking the time to respond.

Kind regards, Sandy

<ItemsRepeaterMarkup itemsPerGroup="4"><![CDATA[<div class="row icon-blocks__row flex-children flex-stretch">$_Items[0]_$$_Items[1]_$$_Items[2]_$$_Items[3]_$</div>]]></ItemsRepeaterMarkup>

and

<div class="col-md-3 flex-children flex-stretch fb-wrap">

The DIV col-md-3 may depend on your skin CSS. So play with that. There may be padding and margin tweaks to make as well. I'd copy the solution with a new name and GUID, instead of modifying the stock version.

And SuperFlexi caches so after making a markup change edit one of the items in the solution which seems to clear the cache. Make sure your changes are taking effect before you pull your hair out making changes and nothing is happening.

I am not an experienced web developer but have some general knowledge and understanding. I have read up about SuperFlexi and the icon blocks. I had a web developer configure this feature but they put some of the code in the style.css and some is in the icon-blocks-base.css.

I want to change the default dimensions of the icon blocks, to 4 or 5 columns, ie 4 or 5 blocks per row.

I changed the itemsPerGroup to 4  in the .sfMarkup file but this hasn't changed anything.

Am I on the right track or can this not be changed?

Kind regards, Sandy

I need guidance on the steps for the installation. My inability to install the slider

is negatively affecting the progress of my project.

Best regards,

ichukwulobe

Hope all of you are ok.

I'm trying to use the slider feature in a second site using folder, not subdomain, but i'm geting the folowing error:

 

Server Error in '/' Application.

Object reference not set to an instance of an object.

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.NullReferenceException: Object reference not set to an instance of an object.

Source Error:
 

An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.

Stack Trace:
 

[NullReferenceException: Object reference not set to an instance of an object.] SuperFlexiUI.FieldUtils.ParseFieldDefinitionXml(ModuleConfiguration config, Guid siteGuid) +623 SuperFlexiUI.FieldUtils.EnsureFields(Guid siteGuid, ModuleConfiguration config, List`1& savedFields, Boolean deleteOrphanedFieldValues) +79 SuperFlexiUI.EditItems.PopulateCustomControls() +219 SuperFlexiUI.EditItems.Page_Load(Object sender, EventArgs e) +320 System.Web.UI.Control.OnLoad(EventArgs e) +105 mojoPortal.Web.mojoBasePage.OnLoad(EventArgs e) +20 System.Web.UI.Control.LoadRecursive() +67 System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +3784

I've readed some topics about this feature and can't find what i'm missing.

The most strange thing is that I don't have the "Features" Tab on site setings. It goes from Site Mapings to API Keys.

Here are the System informations from the admnistration menu:

System Information

mojoPortal Version 2.7.0.0 MSSQL

Operating System Microsoft Windows NT 6.3.9600.0

ASP.NET Info 4.0.30319.42000 Running in Full Trust

Server Time Zone Hora oficial do Brasil

Server Local Time (GMT -3) 6/30/2020 3:22:19 PM

Greenwich Mean Time (GMT/UTC) 6/30/2020 6:22:19 PM

Feature Versions 

FeatureSchema Version

blog 2.6.1.9

contactform 0.0.0.6

eventcalendar 0.0.0.6

feed-manager 1.0.1.1

forums 2.2.0.5

imagegallery 0.0.0.8

kdmediaplayer 1.0.0.1

linksmodule 1.0.0.9

pollfeature-byChristianFredh 0.0.0.5

sharedfiles 1.1.0.0

superflexi 0.0.1.7

surveyfeature 1.9.0.0

To make the title work on the image tag, the image field's sortOrder needs to be lower than the title field's sortOrder. So for instance, changing the sortOrder of image to 115 works, because that is lower than the order of title but still higher than the order of mylinkbox. 

As for the CSS, there must be something in your skin that's changing the element which wraps all of the settingrows in your solution. If you can open your field page (sign in and click the edit link on an item in the solution), and user the browsers tools (f12) to inspect the page, you can look and see what element is wrapping all of the settingrows and change the div[id$="_customControls"] selector to match it, then everything should work. I should also mention that the CSS I provided only works in modern browsers, IE10 and below do not support flex box.

Hope this helps!

That worked great, thanks!

Note: I tried to add title="$title$" to the image tag and that did not work. Since title comes before image, I thought that would work.

Also, the '_customControls' flex addition did not work. I changed the ID to 'ctl00_mainContent_customControls' but that did not help.

Thanks, Doug

The problem you're having is caused by sort orders.  I believe earlier when I explained how the ordering needed to work I said it backwards to what I meant, sorry about any confusion! Here is an accurate description: When you have a field which uses another field's token in it's value (return bool or pre/post token strings included), the field which uses the token in it's value must have a lower sortOrder than the field which is identified with the token.

In the code below, I have fixed the sort orders and also wrapped your $image$ with an img tag via pre/post, and as a bonus I included some CSS to make the visual order in which your inputs appear the same as what you had originally even though they're rendered in a different order for SuperFlexi's sake. You can put your sortOrder values to whatever they need to be in order to be processed correctly, but still control the order that the inputs display in by changing the "order-#" class in the editPageControlWrapperCssClass value.

    <Field
        name="title"
        label="Title"
        controlType="TextBox"
        required="false"
        requiredMessageFormat="Title is required."
        token="$title$"
        isSearchable="true"

        editPageControlWrapperCssClass="settingrow order-1"
        editPageLabelCssClass="settinglabel"
        editPageControlCssClass="forminput"
        sortOrder="120"
    />

    <Field
        name="target"
        label="Target Attribute Code (_blank)"
        controlType="TextBox"
        required="false"
        requiredMessageFormat="Title is required."
        token="$target$"
        isSearchable="true"

        editPageControlWrapperCssClass="settingrow order-2"
        editPageLabelCssClass="settinglabel"
        editPageControlCssClass="forminput"
        sortOrder="130"
    />

    <Field
        name="makeitalink"
        label="Make My Textbox A Link?"
        controlType="CheckBox"
        token="$makeitalink$"
        sortOrder="100" 

        checkBoxReturnBool="false"
        checkBoxReturnValueWhenTrue="$url-token$"
        checkBoxReturnValueWhenFalse="$image$"

        editPageControlWrapperCssClass="settingrow order-3"
    />

    <Field
        name="image"
        label="Slide Image"
        controlType="ImagePicker"
        required="false"
        requiredMessageFormat="Slide Image is required for each box."
        token="$image$"

        editPageControlWrapperCssClass="settingrow order-4"
        editPageLabelCssClass="settinglabel"
        editPageControlCssClass="form-control"
        sortOrder="140"
    >
        <PreTokenString>
            <![CDATA[<img src="]]>
        </PreTokenString>
        <PostTokenString>
            <![CDATA[" />]]>
        </PostTokenString>
    </Field>

    <Field
        name="mylinkbox"
        label="My URL"
        controlType="LinkPicker"
        token="$url-token$"
        sortOrder="110"

        editPageControlWrapperCssClass="settingrow order-5"
    >
        <PreTokenString>
            <![CDATA[<a href="]]>
        </PreTokenString>
        <PostTokenString>
            <![CDATA[" title="$title$" alt="$title$" target="_blank">$image$</a>]]>
        </PostTokenString>
    </Field>

    <Styles>
        <Style>
            <![CDATA[
                div[id$="_customControls"] {
                    display: flex;
                    flex-flow: row wrap;
                }

                .settingrow {
                    flex: 0 1 100%;
                }

                .order-1 {
                    order: 1
                }
                .order-2 {
                    order: 2
                }
                .order-3 {
                    order: 3
                }
                .order-4 {
                    order: 4
                }
                .order-5 {
                    order: 5
                }
            ]]>
        </Style>
    </Styles>

Hope this helps!

 <Field

        name="title"

        label="Title"

        controlType="TextBox"

        required="false"

        requiredMessageFormat="Title is required."

        token="$title$"

        isSearchable="true"

        editPageControlWrapperCssClass="settingrow"

        editPageLabelCssClass="settinglabel"

        editPageControlCssClass="forminput"

        sortOrder="100"

    />

    <Field

        name="target"

        label="Target Attribute Code (_blank)"

        controlType="TextBox"

        required="false"

        requiredMessageFormat="Title is required."

        token="$target$"

        isSearchable="true"

        editPageControlWrapperCssClass="settingrow"

        editPageLabelCssClass="settinglabel"

        editPageControlCssClass="forminput"

        sortOrder="102"

    />

    <Field

        name="makeitalink"

        label="Make My Textbox A Link?"

        controlType="CheckBox"

        token="$makeitalink$"

        sortOrder="112"

        checkBoxReturnBool="false"

        checkBoxReturnValueWhenTrue="$url-token$"

        checkBoxReturnValueWhenFalse="$image$"

    />

    <Field

        name="mylinkbox"

        label="My URL"

        controlType="LinkPicker"

        token="$url-token$"

        sortOrder="120"

    >

        <PreTokenString>

            <![CDATA[<a href="]]>

        </PreTokenString>

        <PostTokenString>

            <![CDATA[" title="$title$" alt="$title$" target="_blank">$image$</a>]]>

        </PostTokenString>

    </Field>

    <Field

        name="image"

        label="Slide Image"

        controlType="ImagePicker"

        required="false"

        requiredMessageFormat="Slide Image is required for each box."

        token="$image$"

        editPageControlWrapperCssClass="settingrow"

        editPageLabelCssClass="settinglabel"

        editPageControlCssClass="form-control"

        sortOrder="110"

    />

In order to properly understand what's going on I kind of need to see more of the field definition file. For instance, I need to know where $image$ and $title$ are being defined. Can you post the fields with the tokens $image$, $title$, and the one which the PostTokenString you showed below is being defined, and keep them in the same order which they appear in the field definition file?

Thanks

I'm trying to nest elements in the PostTokenString

        <PostTokenString>

            <![CDATA[" title="$title$" alt="$title$" target="_blank">$image$</a>]]>

        </PostTokenString>

I have the 'make it a link' swap working, but I want the link to wrap an image. Is this sort of thing possible with the PrePost string feature?

Thanks, Doug

There are a few ways to go about this. Probably the easiest way is to use the <PreTokenString> and <PostTokenString> attributes on your field. So for the $link$ field in your field definition file, add something like the following:

<PreTokenString><![CDATA[
            <a href="
        ]]></PreTokenString>
        <PostTokenString><![CDATA[
            "> My Link Text</a>
        ]]></PostTokenString>

In the case that you want your link text to be determined by another field, you can use the token of that field in place of "My Link Text", but only if the fields are in the correct order. The field determining the text must be above the field using the token.

If you have a more complex interaction that you need there are other options which I can explain, just let me know.

Hope this helps!

Basically, I'd like to have some of the content markup in the SuperFlexi solution display only if the non-required field is used. Is there a way to surround HTML inside the ItemMarkup with a tag that says if the field is used, then display the markup ,otherwise don't show it. An example would be a link: <a href="$link$"> Currently, if $link$ is empty, then the display would be <a href=""> which still creates an anchor tag. This is only an example, there are many cases where adding conditional logic would be helpful.

Thanks, Doug

Sorry I missed this from February.

I will email a release candidate to you now.

Thanks,
Joe

I change to subdomain model, in folder based multi site, I have this problem

Any update on my case?

Hi Ashian,

Is your problem solved? I think my problem same as yours.

Thanks and Regards,

Ricky S

With multisites, are you using folder-based or domain/hostname based?

We have another release in testing now. I'll be sure to check out this scenario.

Thanks,
Joe

I am using SuperFlexi on Multisite, it work fine in Master Site, but in a child site I always get an error "[NullReferenceException: Object reference not set to an instance of an object.]"

at FieldUtils.cs at Function ParseFieldDefinitionXml.

Please Advice.

the detail error is below:

================================================================================================= 

Line 907:        protected override void OnLoad(EventArgs e)
Line 908:        {
Line 909:            base.OnLoad(e);
Line 910:
Line 911:

[NullReferenceException: Object reference not set to an instance of an object.]
   SuperFlexiUI.FieldUtils.ParseFieldDefinitionXml(ModuleConfiguration config, Guid siteGuid) +767
   SuperFlexiUI.FieldUtils.EnsureFields(Guid siteGuid, ModuleConfiguration config, List`1& savedFields, Boolean deleteOrphanedFieldValues) +163
   SuperFlexiUI.EditItems.PopulateCustomControls() +321
   SuperFlexiUI.EditItems.Page_Load(Object sender, EventArgs e) +655
   System.Web.UI.Control.OnLoad(EventArgs e) +95
   mojoPortal.Web.mojoBasePage.OnLoad(EventArgs e) in D:\Master\mojoportal-master_used\Web\Components\mojoBasePage.cs:909
   System.Web.UI.Control.LoadRecursive() +59
   System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +678

===============================================================================

Thanks and Regards,

Ricky S

Is there any way I can use them immediately? 

I can confirm this is a bug in mojoPortal 2.7 for MySQL. I have it fixed in my branch and will test it, along with some other changes, tonight. I hope to have a bugfix release ready this week.

Thanks,
Joe

MySql.Data.MySqlClient.MySqlException (0x80004005): Fatal error encountered during command execution. ---> MySql.Data.MySqlClient.MySqlException (0x80004005): Parameter '?IsDeleted' must be defined.
   at MySql.Data.MySqlClient.Statement.SerializeParameter(MySqlParameterCollection parameters, MySqlPacket packet, String parmName, Int32 parameterIndex)
   at MySql.Data.MySqlClient.Statement.InternalBindParameters(String sql, MySqlParameterCollection parameters, MySqlPacket packet)
   at MySql.Data.MySqlClient.Statement.BindParameters()
   at MySql.Data.MySqlClient.PreparableStatement.Execute()
   at MySql.Data.MySqlClient.MySqlCommand.ExecuteReader(CommandBehavior behavior)
   at MySql.Data.MySqlClient.MySqlCommand.ExecuteReader(CommandBehavior behavior)
   at MySql.Data.MySqlClient.MySqlCommand.ExecuteScalar()
   at MySql.Data.MySqlClient.MySqlHelper.ExecuteScalar(MySqlConnection connection, String commandText, MySqlParameter[] commandParameters)
   at MySql.Data.MySqlClient.MySqlHelper.ExecuteScalar(String connectionString, String commandText, MySqlParameter[] commandParameters)
   at SuperFlexiData.DBFields.Update(Guid siteGuid, Guid featureGuid, Guid definitionGuid, Guid fieldGuid, String definitionName, String name, String label, String defaultValue, String controlType, String controlSrc, Int32 sortOrder, String helpKey, Boolean required, String requiredMessageFormat, String regex, String regexMessageFormat, String token, String preTokenString, String postTokenString, String preTokenStringWhenTrue, String postTokenStringWhenTrue, String preTokenStringWhenFalse, String postTokenStringWhenFalse, Boolean searchable, String editPageControlWrapperCssClass, String editPageLabelCssClass, String editPageControlCssClass, Boolean datePickerIncludeTimeForDate, Boolean datePickerShowMonthList, Boolean datePickerShowYearList, String datePickerYearRange, String imageBrowserEmptyUrl, String options, Boolean checkBoxReturnBool, String checkBoxReturnValueWhenTrue, String checkBoxReturnValueWhenFalse, String dateFormat, String textBoxMode, String attributes, Boolean isDeleted, Boolean isGlobal, String viewRoles, String eeditRoles)
   at SuperFlexiBusiness.Field.Update()
   at SuperFlexiBusiness.Field.Save()
   at SuperFlexiUI.FieldUtils.SaveFieldsToDB(List`1 definedFields, Guid siteGuid, Guid featureGuid, Boolean deleteOrphans)
   at SuperFlexiUI.FieldUtils.EnsureFields(Guid siteGuid, ModuleConfiguration config, List`1& savedFields, Boolean deleteOrphanedFieldValues)
   at SuperFlexiUI.EditItems.PopulateCustomControls()
   at SuperFlexiUI.EditItems.Page_Load(Object sender, EventArgs e)
   at System.Web.UI.Control.OnLoad(EventArgs e)
   at mojoPortal.Web.mojoBasePage.OnLoad(EventArgs e)
   at System.Web.UI.Control.LoadRecursive()
   at System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint)

I'm running 2.7.0.0 version and just purchased Form wizard pro,,

Thank you in advance

I just noticed that I made a mistake when updating some of the methods for SuperFlexi and the sfMarkup file isn't re-read properly after setting the solution in the module settings. I've fixed this in the repo and will be publishing a minor version update this week. In the mean time, you should be able to work around this problem by choosing a new solution, saving the settings and then going back and choosing the original solution again.

Thanks,
Joe

Thoughts?

With the bootstrap accordion only ".active" items are opened. We opened the first one by default with a script that is included on line 135 of the accordion.sfMarkup file. You can fully delete this or comment it out and it should cause all items to be closed until they are clicked.

For reference, here is the script (it finds the first item with data-toggle="collapse" and clicks it):

 <Script position="bottomStartup" name="AccordionInit"><![CDATA[$(document).ready(function(){$('.accordion__items').each(function(){$(this).find('[data-toggle="collapse"]').eq(0).click()})});]]></Script>

Hope this helps!

Question: I've been playing around with the accordion solution trying to set the default state to all closed. I personally think for most uses you'd want the default closed (FAQ, support questions, etc). The point of a list like this is to save space and let the user select the option they are interested in. Opening the first one by default defeats the purpose a little.

With the old accordion I used a trick like this in the skin (can't seem to modify for Flexi)

<script type="text/javascript">// <![CDATA[ $('div.mojo-accordion-nh').accordion({active:false, collapsible:true, heightStyle: "content", autoHeight:false, fx:{opacity:'toggle',duration:'fast'}}); // ]]></script>

Any smart ideas before I spend too many hours tinkering?

This is probably due to the CSS caching.

If that's the case, to fix this issue you'll need to add a query parameter to the CSS file call, for instance add "?v=1" on line 115 of the icon-blocks.sfMarkup:

<Style name="imageBlockBaseCSS" href="resources/image-blocks-base.css?v=1"></Style>

This will cause the browser to pull in the latest changes.

I hope this helps,
Elijah

I would like to add a few more colours to the drop-down list - SuperFlexi Icon Block.

I have made some changes to icon-blocks SFfields (Added Grey & Yellow)

<Options>
            <Option name="Default" value="default" />
            <Option name="Light Blue" value="light-blue" />
            <Option name="Green" value="green" />
            <Option name="Purple" value="purple" />
            <Option name="Orange" value="orange" />
            <Option name="Red" value="red" />
            <Option name="Grey" value="grey" />
            <Option name="Yellow" value="yellow" />
        </Options>

And changed resources/icon-blocks-base bu adding:

.icon-block__item--grey:hover,
.icon-block__item--grey:focus,
.icon-block__item--grey:active {
  background-color: #6a6969;
  -webkit-transition: background-color 300ms ease;
  transition: background-color 300ms ease;
}
.icon-block__item--yellow:hover,
.icon-block__item--yellow:focus,
.icon-block__item--yellow:active {
  background-color: #dfdd2a;
  -webkit-transition: background-color 300ms ease;
  transition: background-color 300ms ease;
}

However, I can not see any changes - but the options are in the list!

What am I missing "Can you give some feedback please".

Best Regards

Ray

Any chance you could include more SuperFlexi Solutions - Crying Out for some more changes/additions to MojoPortal - PLEASE.

Ray

Mari - As Ashian mentioned, to get features to show up on child sites, you need to add them using the "Features" tab in the Site Settings of the child site. Our Multi-Tenancy documents mention this. 

Ashian - You are correct. SuperFlexi does use GetSiteRoot, which doesn't include the path to child site folders. We've changed SuperFlexi to use SiteUtils.GetNavigationSiteRoot and this fix will be released next week.

Thank you,
Joe

Do you add superFelxi from Features tab of site settings to child site?

when we use folder based multi site, method GetSiteRoot() from WebUtils.cs still return site URL without older as Site root, and therefore  urls created in SuperFlexiHelper.cs are not valid and need to add folder name between main site url and SuperFlexi tools URLs

I am trying to use SuperFlexi in a multi site installation but when I try to configure the features in the child site I do not see Superflexi among the available features. How did you manage?

Is there a workaround similar to this https://www.mojoportal.com/Forums/Thread.aspx?pageid=5&t=13756~1 to use SuperFlexi in child sites?

Thanks in advance

Mari

I try to use superflexi on multisite installation, but when I use it on child sites,( folder based) I can't manage module. it setting link point to main site url not current site, and when try to reach add slide page by direct url, I got Object referenced error message.

how can I setup superflexi on child sites?

Thanks for your help

I fully support this request for more solutions - Many Thanks - In advance!

The newest version has these additional options:

• Chemical List
• Icon Panels
• Image Slider
• Product Categories

I'm particularly interested in the new Image Slider.

Is there any chance you could add another skin (Like Scout), and with the SuperFlexi solutions included.  I can remember you displaying a demo skin with a site background image as a feature - do you still have it?, can you publish it?  Many Thanks.

Best Regards

If you are using the Scout skin, you can get that effect on your newsletter module by adding the "newsletter-cta" class to the Custom CSS Class option on your Newsletter Signup module instance. If you want to use it on another module, add the same class to its Custom CSS Class option. If you want to change the background image, you will need to duplicate the newsletter-cta CSS in the skin and change newsletter to something else in your duplicate. Then, you can change the image in the CSS of your duplicate. Finally, you would use duplicate-cta for the Custom CSS Class wherever you want to use it (of course, swap out duplicate with whatever you named it).

If you're not using the Scout skin. You can try copying the CSS for the newsletter-cta class from the scout skin to your skin. This may work but you will probably have to tweak some things to get it to work with your skin.

Thanks,
Joe

Within the demo site, you have a Parallex Effect (at the newsletter sign up section).... how did you do this?  is it available in SuperFlexi?

I'm not sure what "sections" you're talking about. In general though, these kinds of things would be handled in the skin. 

Thank you,
Joe

This is fixed in the release of mojo that will be released very soon. The workaround detailed by Isaac on this thread will work for you as well.

Thanks,
Joe D.

I am enjoying building sites with the Super Flexi solutions (more please).

Is there a way to reduce the amount of space between sections?  The padding between sections is too large.

This is why we didn't release that solution, it has problems with the video portion. We'll try to figure it out and get the download Isaac published updated.

Thanks,
Joe

I can add the solution to a page and the images load just fine; however, when I select type video I cannot play the video.

Is there a setting in the solution or a script I need to add to make it work?  

You can download that superflexi solution here: http://www.mojoportal.com/data/superflexi/solutions/image-slider.zip

Hope this helps!

I have installed version 2.6 and I'd like to user the SuperFlexi "Image Slider" that i saw in the demo homepage, but in the standard version you didn't make it available (the number of solutions is lower than the demo).
Is there anyway to retrieve the solution folder?
Thank you in advance.

Marco

I am having a similar issue. I am in the process of working on a local site that has been successfully upgraded to 2.6 using the scout skin. 

I can successfully modify all content as needed however when i try to modify the footer custom menu settings i get the dreaded

Sorry, you are not allowed to edit this content. If you have questions about your permissions, please contact a site administrator.

I don't believe I can follow the same solution provided above on the footer menu.  any help you can provide would be greatly appreciated.. 

FYI, I am getting the same error on the demo site.. 

Here are the steps to reproduce...

• Open the demo site
• login as admin
• scroll to the bottom footer and click the settings link
• you should get the message as described above. 

I am going to modify the values in the database table for now to get it going and will monitor here for a solution.. 

Mari

We've been looking into a fix for this issue. For now, you can change the titles without accessing code, here's the steps:

1. Click "Administration" in your admin bar on the left.
2. Click "Content Manager".
3. Find your module(s) that you'd like to modify the settings for (you can search by title or by feature type or both)
4. Click "Publish/delete" on the far right of the module(s) listing in the content manager table.
5. Find any page you'd like to publish the module to (you can create a page that only administrators can see for this purpose, if you'd like).
6. Click the green plus button next to that page's name in the table.
7. Click the checkbox that appears in the "published" column.
8. Then click the "update" button.
9. Now you can scroll down to your footer and hit "settings" and it should let you in to edit the settings, including the moduletitle.

I know this is a bit of a hassle, but at least it doesn't require editing any skin code.

Hope this helps!

I have installed version 2.6 with Scout skin (and I love it), I was tryng to modify the settings of the super-flex pane containing the custom menu by clicking the settings link on the page, but the system says

"Sorry, you are not allowed to edit this content. If you have questions about your permissions, please contact a site administrator.

Return to Site Home"

The problem is that I am a site administrator.

I've seen I can modify the titles via code  modifying the layout.master, but what happens if I have to modify without accessing the code? Can I do it?

Thanks in advance.

Mari

This is running mojoPortal 2.6.

Are you running the mojoPortal 2.6 release or are you building from the repository?

We're working on some additional functionality for SuperFlexi that we have working MSSQL but we haven't gotten the MySQL side done yet. So, if you're building from the repo and wanting to use MySQL, you could run into problems.

Thanks,
Joe

When adding a SuperFlexi component to a page I get a "The given key was not present in the dictionary." error, I am running the page locally with a mysql database that's on an external server.

Could this be because of capitalization, when installing I had change capitalization in setup/applicaations/blog/schemaupgradescripts/mysql/2.6.1.9 because MySQL on a Linux host is case sensitive, maybe it failed to create some SuperFlexi tables somewhere?

This is what I see in terms of superflexi tables:

`i7_sflexi_fields`, `i7_sflexi_items`, `i7_sflexi_searchdefs`, `i7_sflexi_values`

Microsoft .NET Framework Version:4.0.30319; ASP.NET Version:4.7.2556.0
MySQL version 5.6.35

Stack trace:

[KeyNotFoundException: The given key was not present in the dictionary.]
   System.ThrowHelper.ThrowKeyNotFoundException() +36
   System.Collections.Generic.Dictionary`2.get_Item(TKey key) +52
   MySql.Data.MySqlClient.CharSetMap.GetCharacterSet(DBVersion version, String CharSetName) +53
   MySql.Data.MySqlClient.MySqlField.SetFieldEncoding() +288
   MySql.Data.MySqlClient.NativeDriver.GetColumnData(MySqlField field) +352
   MySql.Data.MySqlClient.NativeDriver.GetColumnsData(MySqlField[] columns) +39
   MySql.Data.MySqlClient.Driver.GetColumns(Int32 count) +111
   MySql.Data.MySqlClient.ResultSet.LoadColumns(Int32 numCols) +26
   MySql.Data.MySqlClient.ResultSet..ctor(Driver d, Int32 statementId, Int32 numCols) +59
   MySql.Data.MySqlClient.Driver.NextResult(Int32 statementId) +170
   MySql.Data.MySqlClient.MySqlDataReader.NextResult() +130
   MySql.Data.MySqlClient.MySqlDataReader.Close() +69
   MySql.Data.MySqlClient.MySqlConnection.Close() +60
   MySql.Data.MySqlClient.MySqlHelper.ExecuteReader(String connectionString, String commandText, MySqlParameter[] commandParameters) +137
   SuperFlexiUI.Widget.Page_Load(Object sender, EventArgs e) +272
   System.Web.UI.Control.OnLoad(EventArgs e) +103
   System.Web.UI.Control.LoadRecursive() +68
   System.Web.UI.Control.LoadRecursive() +162
   System.Web.UI.Control.LoadRecursive() +162
   System.Web.UI.Control.LoadRecursive() +162
   System.Web.UI.Control.LoadRecursive() +162
   System.Web.UI.Control.LoadRecursive() +162
   System.Web.UI.Control.LoadRecursive() +162
   System.Web.UI.Control.LoadRecursive() +162
   System.Web.UI.Control.LoadRecursive() +162
   System.Web.UI.Control.LoadRecursive() +162
   System.Web.UI.Control.LoadRecursive() +162
   System.Web.UI.Control.LoadRecursive() +162
   System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +1381

You should be able to get it working with the following steps:

1. In your markup definition file, change the CSS file name on line 111 (assuming no other changes) to include "?v=2" after it, like this:

   <Style name="ContentSliderBase" href="resources/content-slider-base.css?v=2"></Style>

2. After this, log in to your site as an administrator and click the "Edit Slide" link on your Banner Slider. This forces the markup definition cache to clear, which will update it with the "?v=2" in the markup output, which in turn will cause your browser to request the CSS file again instead of pulling it from cache.

Hope this helps!

I use Banner slider solution on my new site. the problem is that css files attach to this solution are cached. 

I made some changes on css file, but it's content doesn't reloaded. while I add some query string at end of css url it shows the correct data but still on main css file old content used.

I try to rename the css file and also change the markup file. but markup file still try to load old file name ( css file ) and cached file loaded.

I try all setting about css cache on web.config and css tools on administration without success. stop the web site on IIs and restart it but still same result.

Would you please help me to solve the problem?

Thanks

Mehdi

Yes, we're planning on releasing more solutions and selling a few as well.

The solutions we release with mojoPortal are self-contained meaning they have all of the css and javascript needed for them included within the solution. You can make changes to the css if you want to by editing the solution files. I suggest you read the SuperFlexi documentation for an understanding of what does what.

The CSS for the Banner Slider solution is in /data/SuperFlexi/Solutions/Banner Slider/resources/content-slider-base.css

Thank you,
Joe

The SuperFlexi feature has brought our websites, up-to-date, = Many thanks for that new feature.   Do you plan to sell or upgrade any more solutions?

My Main Question:

The flexi banner has a dark (grey) overlay.... can I remove (or edit) that in any way?

I have tried to locate it in css main file but I am unable to find it.

If you include CSS in your main.css file that should work, but you might need to hit ctrl+shift+r in your browser to clear your local cache, and/or in mojoPortal go to Administration > Advanced Tools > Design Tools > Cache Tool and click the "Reset Skin Version GUID" button on that page to see the differences.

As far as adding other colors, it's pretty simple. I'd recommend a CSS setup like this:

.colored-section {
    background-color: #a1b8c6; /* Put your default color here */
    color: #fff;
    margin: 20px auto;
    padding: 30px 20px;
    position: relative;
    text-align: center;
}

.blue-section {
	background-color: #478fcc;  /* Put your blue color here */
}

.red-section {
	background-color: #e42026;  /* Put your red color here */
}

.green-section {
	background-color: #4daf4e; /* Put your green color here */
}

.purple-section {
	background-color: #903e97;  /* Put your purple color here */
}

.orange-section {
	background-color: #e16b26;  /* Put your orange color here */
}

Then, to customize your colors simply replace the hex values (the series of 6 characters after the # in the 'background-color' rule) with a proper CSS color value for whatever colors you want to use.

Remember, if you want to continue using the .LESS advantages of a skin, you'll need to include this code in your skin.less file and recompile the main.css file using prepros - adding CSS directly to the main.css means that CSS will be overwritten if anyone ever does recompile the .LESS, so don't do that unless you're sure you don't care about .LESS.

Hope this helps!

The CSS for colour backgrounds that I have found most useful are:

(use the following CSS Codes for changing the blocks):  section-dark  or  section-grey

This is a great feature - do you have any more like this?  It would be ideal for skin development.

ie "section-gold" or "section-yellow"  would be great - I have tried to code this but it never works!

Many Thanks

Ray

I tried putting it into main.css but it does not work!

Just a little more help please.  Thank you.

A CSS Class is a bit of code that goes in your skin and changes the rules that the browsers use to display a webpage. For instance, if you put the following CSS in your skin:

.blue-section {
    background: #478fcc;
    color: #fff;
    margin: 20px auto;
    padding: 30px 20px;
    position: relative;
    text-align: center;
}

And then create a module on your site, click "settings", and type the CSS Class name "blue-section" into the "Custom CSS Class" input and save, you should see a change in the way the module displays (to have a blue background, some padding, and text inside it will be centered and white). Note that you may need to clear your cache and/or reset your Skin GUID to see the changes.

You can define your classes however you like, but ultimately this comes down to skin design.

Hope this helps!

Many thanks for your answer - please tell me more!

I don't know how to creat a CSS class (that fills a colour into the section).

This would be a great feature.

Many thanks.

Yes, you can use the "Custom CSS Class" input on your module settings to add classes to them, and then define those classes to have background colors in your CSS. The blue sections in the mojoPortal site skin use this method.

Hope this helps!

Is there a method of filling some page sections with colour (just like the Flexi Icon Block)?

I would like to fill the background of some sections (to help with the overall look/theme).  I note that the Mojoportal main Site has a darker blue in some sections.  Many Thanks.

We're glad you like it! The Banner / Slider Solution will adapt its height automatically based on the content you add to each item. If you want to show images without content, you could always paste the following into the source view of the  "Slide Content" editor on your item edit page:

<div style="height: 400px;">
	<!-- don't delete this div, editor -->
</div>

The HTML comment saying "don't delete this div" in the code block above is there to prevent CKEditor from deleting the div because it thinks it is empty. Make sure you include this, unless you have customized your CKEditor config to prevent it from eating empty elements. It also helps prevent future content editors from deleting it if they're not sure why it's there.

Then adjust the "height" value. You could also give it a custom class and control your height via CSS, if you need a responsive height. We wanted to keep the module simple and mobile-friendly, which basically meant not setting any heights (apart from the min-height necessary for the slide controls) rigidly. Using the content to set the height means the slides will always be big enough to display their content, so you don't have overflow issues - but it also means you have to choose the image carefully, with the content in mind.

Hope this helps!

Firstly let me say a big thank you to the Mojoportal team for their hard work in getting SuperFlexi working/included with this CMS.  "Outstanding Feature".

My question is about the height of the Banner - How can I control this?  I can not see any options in the settings.