Layout customizations

From Complete Cyclos documentation wiki
Jump to: navigation, search

Sometimes communities/organizations make Cyclos customizations. At this page you can find some common customizations with examples.


Wide layout

Some organizations prefer a wide (screen filling) layout. We made a customization that makes this possible. Be aware that this customization can only be applied system wide.

Example ((click image to view large size)

example

Files to change:

layoutTop.jsp

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://jakarta.apache.org/struts/tags/struts-tiles" prefix="tiles" %>
<%@ taglib uri="http://jakarta.apache.org/struts/tags/struts-bean" prefix="bean" %>
<%@ taglib uri="http://jakarta.apache.org/struts/tags/struts-html" prefix="html" %>
<%@ taglib uri="http://devel.cyclos.org/tlibs/cyclos-core" prefix="cyclos" %>

<c:set var="layoutColspan" scope="request" value="${empty loggedUser ? 1 : 2}" />


<div style="width: 100%">
        <div class="headerBar" colspan="${layoutColspan}" style="position:relative">
                <cyclos:includeCustomizedFile type="static" name="top.jsp" groupId="${param.login ? param.groupId : ''}" groupFilterId="${param.login ? param.groupFilterId : ''}" />
                <c:if test="${not empty loggedUser}">
                        <jsp:include page="/pages/general/loggedUserData.jsp" />
                </c:if>
        </div>
</div>

<div class="topContainer" id="topContainer" cellpadding="0" cellspacing="0" style="display:none">
<div class="topContainerBorder">
<div class="topTable" id="topTable" cellpadding="0" cellspacing="0">



    <c:if test="${mainLayout}">
        <div id="menuHolder" class="menuHolder">
                <ul id="menuContainer" class="menuContainer">
                        <script>var allMenus=[];</script>
                        <!-- Begin: Menu -->
                        <tiles:insert attribute="menu" />
                        <!-- End:   Left Menu -->
                        <div style="clear:both; margin:0; padding:0; font-size:0;line-height:0;"><!--&nbsp;--></div>
                </ul>
        </div>
        </c:if>

    <div valign="top" <c:if test="${!mainLayout}">style="width:100%"</c:if> class="tdContents ${standaloneLayout ? 'tdContentsStandalone' : ''}" id="tdContents">

layoutBottom.jsp

        </div>
</div>
</div>
</div>

<script>
try { $("topContainer").show(); } catch (e) {}
</script>

<div width="100%" cellpadding="0" cellspacing="0" style="color: #0067A3;font-family: Liberation sans,Arial,Sans-serif; font-size: 8pt;font-weight: bold;padding-top:40px; text-align:center;background:-moz-linear-gradient(center top, #FFFFFF, #FFFFFF 15%, #F5F5F5 100%);  background:-webkit-gradient(linear, center top, center bottom, color-stop(0%, #FFFFFF), color-stop(15%, #FFFFFF), color-stop(100%, #F5F5F5)); border-top: 1px solid #CCCCCC;height:60px">
    
Cyclos - Open Source Complementary Currency Software<br>
Contact: info@cyclos.org
 </div>

top.jsp

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://jakarta.apache.org/struts/tags/struts-bean" prefix="bean" %>
<%@ taglib uri="http://devel.cyclos.org/tlibs/cyclos-core" prefix="cyclos" %>
<div class="topBanner" id="topBanner" style="display:none;background-repeat: repeat-x;">
	<cyclos:customImage name="logo.jpg" style="float:left;padding-left:20px" />
	<div class="topBannerText"><bean:message key="top.message" /></div>
	
</div>
<script>
    if (self === top) {
        $('topBanner').show();
    }
</script>

For the top background image you can use a pixel wide image that will repeat itself. The image name is top_background.jsp and needs to be located in content management - system images. If you want a logo you need to upload an image with the name logo.jpg in in content management - custom images.

Container (Iframe)

It is possible to show Cyclos within an other website with the use of an Iframe. For this we create a 'container' option. When Cyclos is shown within in Iframe the top layout section will not be shown but just the status bar and Cyclos menu and windows. In order for customers to be redirected to the correct page you will need to set the "Global container page url" in local settings to the external URL. Note that it is also possible to set container (return URL) pages per group. This means that you can apply different containers for different groups and when users logout they will be redirected correctly to their corresponding container sites.


Here is an example how to include Cyclos within an Iframe:


Iframe example:

<html>
  <head>
    <title>Global container page</title>
  </head>
  <body>
	<br>
	<iframe src="http://localhost:8080/cyclos" style="width:1000px;height:2000px;border:1px solid black;border-radius:4px;moz-border-radius:4px;box-shadow:4px 4px 4px black">
	</iframe>
  </body>
</html>


Frameset example:

<html>
  <head>
    <title>Global container page</title>
  </head>
	<body>
		<frameset>
			<frame name="Cyclos" src="http://localhost:8080/cyclos">
		</frameset>  
	</body>
</html>


Login from websites

If you do not want to include Cyclos within the website (container option) you can also add a the Cyclos login form another web site.

This can be done with the following steps:

  1. Include a script from <cyclos root url>/externalLogin.js in your page. For example: http://www.cyclos.org/cyclos_en/externalLogin.js
  2. Create an HTML element which will contain the login form iframe. It may be any HTML container tag (table cell, div, paragraph...) with an unique id.
  3. Add a JavaScript event listener to the body load event which invokes a function defined by the externalLogin.js file: includeCyclosLogin(<container id>, [after logout url]).

For example, if you have an HTML element identified by 'loginContainer' and want to return to the same url as your site after logout, use: includeCyclosLogin('loginContainer', location.href). When the second argument is omitted, after logging out, the default Cyclos login page is shown.

The login form is rendered inside an IFrame, which has its dimensions set to the same value as the container element dimensions. This means that the container element should be large enough to display the entire login form. An automatic resize cannot be done because normally Cyclos and the web server will run on distinct domains, and it's illegal in JavaScript that two frames on distinct domains interact with each other.