How to create Single page theme design- site structure

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

7/6/2017 10:42:39 AM
Gravatar
Total Posts 98

How to create Single page theme design- site structure

Hello

New mojoportal design is very nice and modern.

I like to know how can I create a theme for mojoprtal to create site like Single Page design layout. similar this one http://www.templatemo.com/live/templatemo_497_upper or what you implement in mojoportal home page.

 

Is there any tutorial or guide which help me to do similar design / page layout?

 

Thanks

 

7/10/2017 10:25:19 AM
Gravatar
Total Posts 182
Community Expert

mojoPortal Hosting & Design @ i7MEDIA!

Re: How to create Single page theme design- site structure

Hi Ashian,

To implement a design like the one you linked I would create the skin just like usual, but when creating the menu items I would provide full URLs, with hash values at the end to indicate anchors that a script on the page could read to determine which "page" to move to. So you'd create your pages with URLs like http://www.example.com/#home, and http://www.example.com/#firstgallery. Then when you create your content markup you'd wrap the contents of each block in a div with an ID to match, so id="home" and id="firstgallery". Next you'd set your JavaScript to iterate through the menu items and add an event listener for click events to each, which would run a function that pulls the hash value out of the link URL and searches the page for an element with a corresponding ID, and then runs your animation or scroll function to bring that content to the forefront for the end user.

Hope this helps.

7/14/2017 9:34:30 AM
Gravatar
Total Posts 98

Re: How to create Single page theme design- site structure

Thank you for your reply and useful notes.

another question about design like mojoportal home page. I see that before each html module, there is a 

<section class="outerwrap main-banner has-banner-icons" ....>

which help to add some css details. how is it possible?

 

 

 

7/14/2017 6:32:44 PM
Gravatar
Total Posts 182
Community Expert

mojoPortal Hosting & Design @ i7MEDIA!

Re: How to create Single page theme design- site structure

Hi Ashian,

In our theme.skin within the skin, we define the outerwrap to use an html5 <section> element, like this:

<portal:OuterWrapperPanel runat="server" 
    RenderContentsOnly="false"
    CssClass="outerwrap"
    RenderId="false"
    Element="section"
/>

Then we add module-specific classes via the "Custom CSS Class" module setting, and those classes are applied to the outerwrap. In this case, we added the module as usual, then clicked the "settings" link, found the input labeled "Custom CSS Class", and typed in "main-banner has-banner-icons" as classes specifically for the home page banner module - this allows us to use the simple HTML module but produce many different kinds of styles/layouts with it.

Hope this helps!

7/15/2017 9:16:05 AM
Gravatar
Total Posts 98

Re: How to create Single page theme design- site structure

Hello Isaac 

Thank you so much, Perfect ...