gCubeSystem
/
generic-configurable-theme
16
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

added color picker for selecting color, made customisable header and body 

git-svn-id: http://svn.research-infrastructures.eu/public/d4science/gcube/trunk/portal/liferay62-plugins/generic-configurable-theme@141915 82a268e6-3cf1-43bd-a215-b396298e98cf
This commit is contained in:
Massimiliano Assante 2017-01-30 15:55:36 +00:00
parent 0409033285
commit bb3bbb387a
6 changed files with 233 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

217
src/main/webapp/WEB-INF/liferay-look-and-feel.xml
View File

@ -7,18 +7,211 @@
</compatibility>
<theme id="generic-configurable" name="generic-configurable-theme">
<settings>
<setting configurable="true" key="background-image-name" type="text" />
<setting configurable="true" key="portlet-topper-css-attributes" type="text" />
<setting configurable="true" key="navbar-background-color" type="text" />
<setting configurable="true" key="navbar-tabselected-color" type="text" />
<setting configurable="true" key="navbar-tabhover-color" type="text" />
<setting configurable="true" key="login-button-color" type="text" />
<setting configurable="true" key="footer-background-color" type="text" value="#555"/>
<setting configurable="true" key="footer-website-name" type="text" />
<setting configurable="true" key="footer-website-url" type="text" />
<setting configurable="true" key="footer-website-name" type="text" />
<setting configurable="true" key="footer-text-about" type="text" />
<setting configurable="true" key="show-eu-flag" type="checkbox" value="true"/>
<setting configurable="true" key="show-powered-d4science" type="checkbox" value="false" />
<setting configurable="true" key="show-eu-flag" type="checkbox" value="true" />
<setting configurable="true" key="header-background-css-attributes" type="textarea" />
<setting configurable="true" key="div-wrapper-css-attributes" type="textarea" />
<setting configurable="true" key="div-wrapper-image-name" type="text" />
<setting configurable="true" key="portlet-topper-css-attributes" type="textarea" />
<setting configurable="true" key="footer-website-name" type="text" />
<setting configurable="true" key="footer-website-url" type="text" />
<setting configurable="true" key="footer-website-name" type="text" />
<setting configurable="true" key="footer-text-about" type="text" />
<setting configurable="true" key="body-background-color">
<![CDATA[
AUI().ready(
'aui-color-picker-popover',
function(A) {
var AllControls = A.all("#regularlayoutsAdminLookAndFeelSettingsPanelContent .control-group");
AllControls.setStyle('marginBottom', '5px');
var nodePicker = A.one("#[@NAMESPACE@]body-background-color");
nodePicker.ancestor().setStyle('float', 'left');
nodePicker.ancestor().setStyle('marginRight', '10px');
nodePicker.setStyle('width', '74px');
nodePicker.setStyle('borderLeftWidth', '30px');
nodePicker.setStyle('borderLeftColor', nodePicker.get('value'));
var colorPicker = new A.ColorPickerPopover({
trigger: nodePicker,
zIndex: 99
}).render();
colorPicker.on('select', function(event) {
var color = event.color;
event.trigger.set('value', color);
nodePicker.setStyle('borderLeftColor', color);
});
}
);
]]>
</setting>
<setting configurable="true" key="navbar-background-color"
type="text">
<![CDATA[
AUI().ready(
'aui-color-picker-popover',
function(A) {
var AllControls = A.all("#regularlayoutsAdminLookAndFeelSettingsPanelContent .control-group");
AllControls.setStyle('marginBottom', '5px');
var nodePicker = A.one("#[@NAMESPACE@]navbar-background-color");
nodePicker.ancestor().setStyle('float', 'left');
nodePicker.ancestor().setStyle('marginRight', '10px');
nodePicker.setStyle('width', '74px');
nodePicker.setStyle('borderLeftWidth', '30px');
nodePicker.setStyle('borderLeftColor', nodePicker.get('value'));
var colorPicker = new A.ColorPickerPopover({
trigger: nodePicker,
zIndex: 99
}).render();
colorPicker.on('select', function(event) {
var color = event.color;
event.trigger.set('value', color);
nodePicker.setStyle('borderLeftColor', color);
});
}
);
]]>
</setting>
<setting configurable="true" key="navbar-tabselected-color"
type="text">
<![CDATA[
AUI().ready(
'aui-color-picker-popover',
function(A) {
var AllControls = A.all("#regularlayoutsAdminLookAndFeelSettingsPanelContent .control-group");
AllControls.setStyle('marginBottom', '5px');
var nodePicker = A.one("#[@NAMESPACE@]navbar-tabselected-color");
nodePicker.ancestor().setStyle('float', 'left');
nodePicker.ancestor().setStyle('marginRight', '10px');
nodePicker.setStyle('width', '74px');
nodePicker.setStyle('borderLeftWidth', '30px');
nodePicker.setStyle('borderLeftColor', nodePicker.get('value'));
var colorPicker = new A.ColorPickerPopover({
trigger: nodePicker,
zIndex: 99
}).render();
colorPicker.on('select', function(event) {
var color = event.color;
event.trigger.set('value', color);
nodePicker.setStyle('borderLeftColor', color);
});
}
);
]]>
</setting>
<setting configurable="true" key="navbar-tabhover-color"
type="text">
<![CDATA[
AUI().ready(
'aui-color-picker-popover',
function(A) {
var AllControls = A.all("#regularlayoutsAdminLookAndFeelSettingsPanelContent .control-group");
AllControls.setStyle('marginBottom', '5px');
var nodePicker = A.one("#[@NAMESPACE@]navbar-tabhover-color");
nodePicker.ancestor().setStyle('float', 'left');
nodePicker.ancestor().setStyle('marginRight', '10px');
nodePicker.setStyle('width', '74px');
nodePicker.setStyle('borderLeftWidth', '30px');
nodePicker.setStyle('borderLeftColor', nodePicker.get('value'));
var colorPicker = new A.ColorPickerPopover({
trigger: nodePicker,
zIndex: 99
}).render();
colorPicker.on('select', function(event) {
var color = event.color;
event.trigger.set('value', color);
nodePicker.setStyle('borderLeftColor', color);
});
}
);
]]>
</setting>
<setting configurable="true" key="login-button-color" type="text">
<![CDATA[
AUI().ready(
'aui-color-picker-popover',
function(A) {
var AllControls = A.all("#regularlayoutsAdminLookAndFeelSettingsPanelContent .control-group");
AllControls.setStyle('marginBottom', '5px');
var nodePicker = A.one("#[@NAMESPACE@]login-button-color");
nodePicker.ancestor().setStyle('float', 'left');
nodePicker.ancestor().setStyle('marginRight', '10px');
nodePicker.setStyle('width', '74px');
nodePicker.setStyle('borderLeftWidth', '30px');
nodePicker.setStyle('borderLeftColor', nodePicker.get('value'));
var colorPicker = new A.ColorPickerPopover({
trigger: nodePicker,
zIndex: 99
}).render();
colorPicker.on('select', function(event) {
var color = event.color;
event.trigger.set('value', color);
nodePicker.setStyle('borderLeftColor', color);
});
}
);
]]>
</setting>
<setting configurable="true" key="footer-background-color" type="text" value="#555">
<![CDATA[
AUI().ready(
'aui-color-picker-popover',
function(A) {
var AllControls = A.all("#regularlayoutsAdminLookAndFeelSettingsPanelContent .control-group");
AllControls.setStyle('marginBottom', '5px');
var nodePicker = A.one("#[@NAMESPACE@]footer-background-color");
nodePicker.ancestor().setStyle('float', 'left');
nodePicker.ancestor().setStyle('marginRight', '10px');
nodePicker.setStyle('width', '74px');
nodePicker.setStyle('borderLeftWidth', '30px');
nodePicker.setStyle('borderLeftColor', nodePicker.get('value'));
var colorPicker = new A.ColorPickerPopover({
trigger: nodePicker,
zIndex: 99
}).render();
colorPicker.on('select', function(event) {
var color = event.color;
event.trigger.set('value', color);
nodePicker.setStyle('borderLeftColor', color);
});
}
);
]]>
</setting>
</settings>
</theme>
</look-and-feel>

9
src/main/webapp/css/custom.css
View File

@ -85,7 +85,6 @@ div#wrapper {
@include respond-to(phone, tablet) {
padding-top: 2px;
}
/*background: #fff url(@theme_image_path@/custom/splash.jpg) center top no-repeat;*/
background-size: 100% 100%;
margin-top: -5px;
min-height: 600px;
@ -96,8 +95,8 @@ div#wrapper {
margin-left: 0;
}
header#banner {
background-color: transparent;
.aui header#banner {
background: transparent;
}
.aui .btn {
@ -190,7 +189,7 @@ footer {
margin-top: 0;
margin-bottom: 3px;
text-align: left;
padding: 15px 15px 0;
padding: 15px;
}
}
/* --- End Custom */
@ -222,7 +221,7 @@ footer {
}
.poweredBy-link {
margin-top: 16px;
margin-top: 25px;
float: right;
a:hover {
opacity: 0.7;

BIN
src/main/webapp/images/custom/PoweredByD4Science.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.7 KiB

BIN
src/main/webapp/images/custom/powered-by-d4science.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.3 KiB

9
src/main/webapp/templates/init_custom.vm
View File

@ -4,12 +4,9 @@
*#
#if ($theme.getSetting("background-image-name") !="")
#set ($background-image-name = $themeDisplay.getPathThemeImages() + "/custom/" + $theme.getSetting("background-image-name"))
#if ($theme.getSetting("div-wrapper-image-name") !="")
#set ($div-wrapper-image-name = $themeDisplay.getPathThemeImages() + "/custom/" + $theme.getSetting("div-wrapper-image-name"))
#else
#set ($background-image-name = $themeDisplay.getPathThemeImages() + "/custom/default_background.jpg")
#set ($div-wrapper-image-name = $themeDisplay.getPathThemeImages() + "/custom/default_background.jpg")
#end
#if ($theme.getSetting("portlet-topper-css-attributes") !="")
#set ($portlet-topper-css-attributes = $theme.getSetting("portlet-topper-css-attributes"))
#end

24
src/main/webapp/templates/portal_normal.vm
View File

@ -21,9 +21,25 @@
<style>
#if ($theme.getSetting("portlet-topper-css-attributes") !="")
.aui .portlet-topper .portlet-title {
$portlet-topper-css-attributes
$theme.getSetting("portlet-topper-css-attributes")
}
#end
#if ($theme.getSetting("body-background-color") !="")
.aui body {
background-color: $theme.getSetting("body-background-color");
}
#end
#if ($theme.getSetting("div-wrapper-css-attributes") !="")
.aui div#wrapper {
$theme.getSetting("div-wrapper-css-attributes")
}
#end
#if ($theme.getSetting("header-background-css-attributes") !="")
.aui header#banner {
$theme.getSetting("header-background-css-attributes");
}
#end
#if ($theme.getSetting("navbar-background-color") !="")
.aui #navigation .navbar-inner {
background: $theme.getSetting("navbar-background-color");
@ -92,11 +108,13 @@ $theme.include($body_top_include)
#end
<header id="banner" role="banner">
#if ($theme.getSetting("show-powered-d4science") == "true")
<div class="poweredBy-link">
<a href="http://www.d4science.org" target="_blank" class="$logo_css_class">
<img src="$themeDisplay.getPathThemeImages()/custom/PoweredByD4Science.png" alt="D4Science Infrastructure" hspace="5" />
<img src="$themeDisplay.getPathThemeImages()/custom/powered-by-d4science.png" alt="D4Science Infrastructure" hspace="5" />
</a>
</div>
#end
<div id="heading">
<h1 class="site-title">
<a class="$logo_css_class" href="$themeDisplay.getPortalURL()" title="#language_format ("go-to-x", ["D4Science Gateway"])">
@ -115,7 +133,7 @@ $theme.include($body_top_include)
#end
</header>
<div class="container-fluid" id="wrapper" style="background-image: url($background-image-name)" >
<div class="container-fluid" id="wrapper" style="background-image: url($div-wrapper-image-name)" >
<div id="content">
<!-- nav id="breadcrumbs">#breadcrumbs()</nav -->