Features side by side

Post here for help with installing or upgrading mojoPortal pre-compiled release packages. When posting in this forum, please provide all relevant details. You may also want to review the installation or upgrading documentation.

If you have questions about using the source code or working with mojoPortal in Visual Studio, please post in the Developer forum.

Post here for help with installation of mojoPortal pre-compiled release packages

When posting in this forum, please try to provide as many relevant details as possible. Particularly the following:

  • What operating system were you running when the bug appeared?
  • What database platform is your site using?
  • What version of mojoPortal are you running?
  • What version of .NET do you use?
  • What steps are necessary to reproduce the issue? Compare expected results vs actual results.

You may also want to review the installation or upgrading documentation.

If you have questions about using the source code or working with mojoPortal in Visual Studio, please post in the Developer forum.

This thread is closed to new posts. You must sign in to post in the forums.
10/12/2009 12:40:42 PM
Gravatar
Total Posts 15

Features side by side

Hi all

I was wondering how is it possible to  put several features side by side horizontally in the center place rather than stacking them vertically?

Regards

NG

10/12/2009 2:01:22 PM
Gravatar
Total Posts 18439

Re: Features side by side

Sorry but this is not possible to put them side by side in the center, you can put them side by side by using the columns left center and right.

10/12/2009 2:12:55 PM
Gravatar
Total Posts 15

Re: Features side by side

Hi Joe

Thanks for your reply. Is it possible that I make a module and put left div inside it and remove it from the main theme and use left div to put these modules in it? It would be good idea that two custom places can be accommodated in the feature page like other CMS systems that can be used for special themes. I just want to know what is the best way to do it. As I need to put several news feeds beside each other or a row of ad rotators.

 

Regards

NG

10/12/2009 2:17:24 PM
Gravatar
Total Posts 2202

Re: Features side by side

Hi NG,

I did this recently with a custom module. Let me go look up my code and I will post it here.

-Joe D.

10/12/2009 2:22:55 PM
Gravatar
Total Posts 18439

Re: Features side by side

Sorry but no, mojoportal doesn't work like other cms's. I think you are used to using cms's that are built with interpreted scripting languages. They have some advantages because you can cobble things together with include files but they have some disadvantages too.

It is possible to create a custom module and put other modules inside it and do layout as you like, but not all module will work well in that case. Specifically modules that have additional supporting pages cannot be used this way easily and module that use friendly urls like th blog cannot be used this way. But for some modules it can be done. See this blog post by Joe Davis for an example where he wanted to include several modules inside tabs, but like I say its not an appropriate technique for all modules so your mileage may vary.

Keep in mind that within the html module you can do layout too, so its not needed to put multiple html modules together like this and its less database hits to just use one, like I have on the home page of this site, it may look like 3 content instances but its just one with 3 columns layout inside it. This video explains about our content templates which include some column layouts.

Hope it helps,

Joe

10/12/2009 3:57:29 PM
Gravatar
Total Posts 15

Re: Features side by side

 

Great! Thanks for the comments, they were really helpful. I knew about TinyMCE templates. They are good for static HTML and they can accomodate almost anything, which is good. But their problem is that they don't support dynamic data. I need similar sort of functionality that can handle dynamic data possible from other modules so I don't need to rewrite the whole thing. I guess the code you pointed at Joe Davis blog was a cool idea. Can I use similar method to include other modules? Like I create a wrapper and put div inside and then find the module IDs and include them. If this is going to work, I don't really understand why can't we do it dynamicly? Like we put a admin UI for it that you can get a list of active modules with their ID and you just assign those to this wrapper. I don't know still that much of ASP.NET and Mojoportal. So I don't know if it is going to work. But I guess it would be a good feature as you can play around with site layout easier.

10/12/2009 4:44:56 PM
Gravatar
Total Posts 2202

Re: Features side by side

To paraphrase what Joe Audette said, wrapping modules inside of custom modules to acheive a special layout will be hit and miss. Some modules (like the Feed Manager and HTML Module) will work fine, whereas others (like the Calendar and Contact Form) will not. My blog post needs to be updated as it demonstrates how to use the Contact Form inside of UI widgets, but that really doesn't work. The end result of following my blog post is that the Contact form can not be submitted because each form wants to be filled out for the Submit function to work. I corrected this by using the ASP.NET tab control instead of the UI widgets.

At any rate, to acheive what you want to do:

  1. Create a new file named WhatEverYouWant.ascx.
  2. Add the following to the file:

<%@ Control Language="C#" ClassName="MultiModuleInTabsModule.ascx" Inherits="mojoPortal.Web.SiteModuleControl" %>
<%@ register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="portal" %>

<%@ Import Namespace="mojoPortal.Business" %>
<%@ Import Namespace="mojoPortal.Business.WebHelpers" %>
<%@ Import Namespace="mojoPortal.Web.Framework" %>
<%@ Import Namespace="mojoPortal.Web.Controls" %>
<%@ Import Namespace="mojoPortal.Web.Editor" %>
<%@ Import Namespace="mojoPortal.Net" %>
<script runat="server">
  protected void Page_Load(object sender, EventArgs e)
  {
  }
</script>

<div id="eventticker">
  <div class="floatpanel">
    <div class="floatpanel section" style="width: 47%;">
      <portal:ModuleWrapper ID="ModuleWrapper1" runat="server" ConfigureModuleID="100" />
    </div>
    <div class="floatpanel section" style="width: 47%">
      <portal:ModuleWrapper ID="ModuleWrapper2" runat="server" ConfigureModuleID="102" />
    </div>
  </div>
</div>

3. Change the ConfigureModuleID's to match the modules you want to wrap.

4. Upload the file to your site in the /Modules directory.

5. Create a new Feature using the "Administration > Advanced Tools > Feature Installation" tool.

I will post here when I have updated my blog.

Hope this helps,
Joe

10/12/2009 4:54:24 PM
Gravatar
Total Posts 18439

Re: Features side by side

Hi Joe,

You can probably work around the contact form issues if you wrap each inside a

<asp:UpdatePanel id="foo" runat=Server">
<ContentTemplate>

</ContentTemplate> 
<asp:UpdatePanel>

so it does an ajax postback

if not I will consider it a bug as I'm sure I can fix it by making the validation group for each contact form unique.

Best,

Joe

10/12/2009 5:06:41 PM
Gravatar
Total Posts 2202

Re: Features side by side

Good to know. I don't know that it is a bug necessarily but if you want to adjust the validation group, that would be cool, then one could have multiple instances of the contact form on one page without any problem.

The AjaxControlToolkit Tab control worked out real nice for me. You can check it out here: http://acckc.org/contact-us.aspx.

I am going to re-write my blog post to account for the postback.

Thanks,
Joe

6/25/2012 7:10:12 AM
Gravatar
Total Posts 21

Re: Features side by side

Hi Guys,

Sorry for re-opening such an old post but i'm having a few issues.

I have created a custom header and footer section using alternative content placeholder so I now have a top and bottom content area. In the footer content area I want to have a plain bit of html, a contact form, and a twitter feed side by side so I tried creating a custom module using the method in this discussion but nothing appears on the page in the new footer section. If I add an existing module to the new footer content area then it appears but if I add my module to the footer content area nothing appears. Have I missed something?

 

Heres my module code:

 

<%@ Control Language="C#" ClassName="MyNewFooter.ascx" Inherits="mojoPortal.Web.SiteModuleControl" %>
<%@ register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="portal" %>

<%@ Import Namespace="mojoPortal.Business" %>
<%@ Import Namespace="mojoPortal.Business.WebHelpers" %>
<%@ Import Namespace="mojoPortal.Web.Framework" %>
<%@ Import Namespace="mojoPortal.Web.Controls" %>
<%@ Import Namespace="mojoPortal.Web.Editor" %>
<%@ Import Namespace="mojoPortal.Net" %>
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
    }
</script>

<div id="eventticker">
   <div class="floatpanel">
     <div class="floatpanel section" style="width: 47%;">
       <portal:ModuleWrapper ID="ContactFormWrap" runat="server" ConfigureModuleID="ContactForm" />
     </div>
     <div class="floatpanel section" style="width: 47%">
       <portal:ModuleWrapper ID="TwitterProfileModuleWrap" runat="server" ConfigureModuleID="TwitterProfileModule" />
     </div>
   </div>
</div>

6/25/2012 7:48:04 AM
Gravatar
Total Posts 18439

Re: Features side by side

ConfigureModuleID is supposed to be the integer module id of the content instance not that title or name of it. To find the module id put it on a page as normal then visit the settings page and it will be the url parameter mid

 

6/25/2012 8:03:48 AM
Gravatar
Total Posts 21

Re: Features side by side

Ah thank you Joe that saved me a lot of head scratching!

6/25/2012 10:14:10 AM
Gravatar
Total Posts 2202

Re: Features side by side

Hi,

With the addition of the "Custom CSS Class" option some time ago, this is actually a lot easier now and you don't need to use ModuleWrapper at all. Also, the limitation on which modules you can use is gone if you use the method below.

For example, if you have two modules that you want side-by-side all you have to do is create some CSS classes and rules, and add those classes to the module settings for each module.

Add this to your CSS:

.float-left { float: left; margin-right: 15px; }
.float-left + .float-left { margin-right: 0; }
.float-left + .float-left:after { content: ""; clear: both; height: 0; display: none; } /* this clears the float so you don't mess up the layout */

Click the settings link next to modules you want side-by-side and add "float-left" (without quotes) to the "Custom CSS Class" option. 

HTH,
Joe D.

 

6/29/2012 4:01:54 AM
Gravatar
Total Posts 355

Re: Features side by side

If you'd like, here's a more detailed article, with some screenshots:

http://blog.arvixe.com/mojoportal-tip-how-to-break-out-of-the-mold-and-into-the-grid/

as well as a live site using the techniques mentioned:

http://www.mechanicalmama.com

You must sign in to post in the forums. This thread is closed to new posts.