Foren

One Page theme

Mason Stein, geändert vor 10 Jahren.

One Page theme

Junior Member Beiträge: 47 Beitrittsdatum: 05.12.12 Neueste Beiträge
Hey all,

a want to work with an "one page" theme that I was already working with for a CMS..
Now I created a new theme in liferay (6.2) and started playing around.

The only thing I wonder about are my template files (velocity or freemarker)..

Lets say I have easy structure:

1) NAVIGATION (item2Section1 // item2section2 // ...)
2) section1 (which would be page one in my old liferay theme)
section 2
3) footer

My navigation is working correctly if I use dummy content as sections.
The footer and sign in ect. is working correctly...

BUT: How do I get all Portlets deployed on "one page" and wrapped in a "section".

Does anyone have a hint for me?

THX a lot!!!!
thumbnail
zaheer mohammed saddapalli, geändert vor 10 Jahren.

RE: One Page theme

Regular Member Beiträge: 165 Beitrittsdatum: 15.01.08 Neueste Beiträge
Can you please elaborate more with screens?
Mason Stein, geändert vor 10 Jahren.

RE: One Page theme

Junior Member Beiträge: 47 Beitrittsdatum: 05.12.12 Neueste Beiträge
Hey,

right now I dont have the laptop with the running server with me to make a screenshot..

But:
I am refering to the code in the portal_normal.vm that is called to create the html code for "each page"...

<div id="content">
...
#if ($selectable)
$theme.include($content_include)
#else
$portletDisplay.recycle()
$portletDisplay.setTitle($the_title)
$theme.wrapPortlet("portlet.vm", $content_include)
#end

</div>


So if you have some pages with some portlets deployed on it, with a normal liferay theme everytime you click on a page, the portal_normal_vm creates the html
and embeds the above mentioned code.

But thats not what I want.
I want all liferay pages to be created INTO one html, wrapped into a tag like:

<section id="$nav_item.getName()"> (for instance "site one")
here should be:
#if ($selectable)
$theme.include($content_include)
#else
$portletDisplay.recycle()
$portletDisplay.setTitle($the_title)
$theme.wrapPortlet("portlet.vm", $content_include)
#end

</section>

<section id="$nav_item.getName()"> (for instance "site two")
here should be:
#if ($selectable)
$theme.include($content_include)
#else
$portletDisplay.recycle()
$portletDisplay.setTitle($the_title)
$theme.wrapPortlet("portlet.vm", $content_include)
#end

</section>

Can I iterate through all available sites to get for each:

<section id="$nav_item.getName()"> (for instance "site one")
here should be:
#if ($selectable)
$theme.include($content_include)
#else
$portletDisplay.recycle()
$portletDisplay.setTitle($the_title)
$theme.wrapPortlet("portlet.vm", $content_include)
#end

</section>

??

Sorry, my english might be so bad that I cannot make my self clear enough...
Roshan Qureshi, geändert vor 10 Jahren.

RE: One Page theme

Regular Member Beiträge: 159 Beitrittsdatum: 24.08.10 Neueste Beiträge
Dear Mason,

What is your requirement regarding page url?
If url change is allowed then its straight forward.
Please provide more details for your requirements.


Regards,
Roshan Qureshi
Mason Stein, geändert vor 10 Jahren.

RE: One Page theme

Junior Member Beiträge: 47 Beitrittsdatum: 05.12.12 Neueste Beiträge
Hey Roshan,

honestly there are no strict requirements about that at the moment.

Can you explain a bit more to me, how you would do it?

Many THX!!
Roshan Qureshi, geändert vor 10 Jahren.

RE: One Page theme

Regular Member Beiträge: 159 Beitrittsdatum: 24.08.10 Neueste Beiträge
Hey Mason,

If I am not wrong understood you have for example 2 pages. Theme means header and footer will be same for both pages but for first page you want to add lets say four portlets - a,b,c,d and on second page you want to show portlet e,f, g,h.

If this is the case you can use your theme with header and footer and in between drag and drop portlets,
For that you can use the default code in portal_normal.vm of classic theme which is as you stated before :
<div id="content">
<nav class="site-breadcrumbs" id="breadcrumbs">
<h1>
<span>#language ("breadcrumbs")</span>
</h1>

#breadcrumbs()
</nav>

#if ($selectable)
$theme.include($content_include)
#else
$portletDisplay.recycle()

$portletDisplay.setTitle($the_title)

$theme.wrapPortlet("portlet.vm", $content_include)
#end
</div>


Before that you need to select a proper page layout lets say if you want to show a,b,c,d one after one vertically with full page width you can select 1-column page layout. You can create your own layout if available are not suitable to you.
Sorry if I misunderstood. Hope this will help you to go ahead.

Regards,
Roshan Qureshi
Mason Stein, geändert vor 10 Jahren.

RE: One Page theme

Junior Member Beiträge: 47 Beitrittsdatum: 05.12.12 Neueste Beiträge
hey,

I think you understood me wrong.
I want to do something like this:

http://alvarotrigo.com/fullPage/#4thpage

All content is loaded into "one page" but the content is divided into several "sections.
I know how to create "normal themes" and I know the template files in velocity.

I just need an good idea how to put all stuff into "one page" ...

How can I put my portlets (from site one, lets say a b c) into section "one" and portlets from site 2, d e ... into section 2.. see a full working example below...






	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">	
	<title>fullPage.js plugin by Alvaro Trigo</title>
	<meta name="author" content="Alvaro Trigo Lopez">
	<meta name="description" content="fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple">
	<meta name="keywords" content="fullpage,jquery,alvaro,trigo,plugin,fullscren,screen,full">
	<meta name="Resource-type" content="Document">


	<link rel="stylesheet" type="text/css" href="jquery.fullPage.css">
	<link rel="stylesheet" type="text/css" href="example.css">

	<!--[if IE]>
		<script type="text/javascript">
			 var console = { log: function() {} };
		</script>
	<![endif]-->

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>	

	<script type="text/javascript" src="jquery.fullPage.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$.fn.fullpage({
				slidesColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
				anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage']
			});
		});
	</script>




<div class="section active" id="section0"><h1>Section</h1></div>
<div class="section" id="section1">
    <div class="slide active"><div class="wrap"><h1>Hello fullPage.js</h1></div></div>
    <div class="slide"><h1>This is an awesome plugin</h1></div>
    <div class="slide"><h1>Which enables you to create awesome websites</h1></div>
    <div class="slide"><h1>In the most simple way ever</h1></div>
</div>
<div class="section" id="section2"><h1>Just testing it</h1></div>
<div class="section" id="section3"><h1>Looks good</h1></div>




Suyash Bhalekar, geändert vor 8 Jahren.

RE: One Page theme

New Member Beiträge: 24 Beitrittsdatum: 04.09.12 Neueste Beiträge
Hi Mason Stein,

Have you got any solution? We are also trying to implement one page theme.
thumbnail
Andrew Jardine, geändert vor 8 Jahren.

RE: One Page theme

Liferay Legend Beiträge: 2416 Beitrittsdatum: 22.12.10 Neueste Beiträge
Are all the portlets Web Content Display portlets? or are you using custom portlets for the "sections" ... or is it a combination of both?
thumbnail
Rodrigo Abril, geändert vor 5 Jahren.

RE: One Page theme

New Member Beiträge: 7 Beitrittsdatum: 23.04.18 Neueste Beiträge

Guys, a little bit late... but for any wandering souls... I manage to make this work using "nested portlets" as the base for a fullpage.js section $('section#content #layout-column_column-1 ').fullpage({<br> &nbsp; &nbsp; &nbsp; &nbsp;sectionSelector: '.portlet-nested-portlets',<br> });