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:
parent
0409033285
commit
bb3bbb387a
|
@ -7,18 +7,211 @@
|
||||||
</compatibility>
|
</compatibility>
|
||||||
<theme id="generic-configurable" name="generic-configurable-theme">
|
<theme id="generic-configurable" name="generic-configurable-theme">
|
||||||
<settings>
|
<settings>
|
||||||
<setting configurable="true" key="background-image-name" type="text" />
|
<setting configurable="true" key="show-powered-d4science" type="checkbox" value="false" />
|
||||||
<setting configurable="true" key="portlet-topper-css-attributes" type="text" />
|
<setting configurable="true" key="show-eu-flag" type="checkbox" value="true" />
|
||||||
<setting configurable="true" key="navbar-background-color" type="text" />
|
<setting configurable="true" key="header-background-css-attributes" type="textarea" />
|
||||||
<setting configurable="true" key="navbar-tabselected-color" type="text" />
|
<setting configurable="true" key="div-wrapper-css-attributes" type="textarea" />
|
||||||
<setting configurable="true" key="navbar-tabhover-color" type="text" />
|
<setting configurable="true" key="div-wrapper-image-name" type="text" />
|
||||||
<setting configurable="true" key="login-button-color" type="text" />
|
<setting configurable="true" key="portlet-topper-css-attributes" type="textarea" />
|
||||||
<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-name" type="text" />
|
<setting configurable="true" key="footer-website-url" 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-website-name" type="text" />
|
<setting configurable="true" key="footer-text-about" type="text" />
|
||||||
<setting configurable="true" key="footer-text-about" type="text" />
|
<setting configurable="true" key="body-background-color">
|
||||||
<setting configurable="true" key="show-eu-flag" type="checkbox" value="true"/>
|
<![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>
|
</settings>
|
||||||
</theme>
|
</theme>
|
||||||
</look-and-feel>
|
</look-and-feel>
|
|
@ -85,7 +85,6 @@ div#wrapper {
|
||||||
@include respond-to(phone, tablet) {
|
@include respond-to(phone, tablet) {
|
||||||
padding-top: 2px;
|
padding-top: 2px;
|
||||||
}
|
}
|
||||||
/*background: #fff url(@theme_image_path@/custom/splash.jpg) center top no-repeat;*/
|
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
margin-top: -5px;
|
margin-top: -5px;
|
||||||
min-height: 600px;
|
min-height: 600px;
|
||||||
|
@ -96,8 +95,8 @@ div#wrapper {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
header#banner {
|
.aui header#banner {
|
||||||
background-color: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.aui .btn {
|
.aui .btn {
|
||||||
|
@ -190,7 +189,7 @@ footer {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: 3px;
|
margin-bottom: 3px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
padding: 15px 15px 0;
|
padding: 15px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/* --- End Custom */
|
/* --- End Custom */
|
||||||
|
@ -222,7 +221,7 @@ footer {
|
||||||
}
|
}
|
||||||
|
|
||||||
.poweredBy-link {
|
.poweredBy-link {
|
||||||
margin-top: 16px;
|
margin-top: 25px;
|
||||||
float: right;
|
float: right;
|
||||||
a:hover {
|
a:hover {
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
|
|
Binary file not shown.
Before Width: | Height: | Size: 6.7 KiB |
Binary file not shown.
After Width: | Height: | Size: 9.3 KiB |
|
@ -4,12 +4,9 @@
|
||||||
|
|
||||||
*#
|
*#
|
||||||
|
|
||||||
#if ($theme.getSetting("background-image-name") !="")
|
#if ($theme.getSetting("div-wrapper-image-name") !="")
|
||||||
#set ($background-image-name = $themeDisplay.getPathThemeImages() + "/custom/" + $theme.getSetting("background-image-name"))
|
#set ($div-wrapper-image-name = $themeDisplay.getPathThemeImages() + "/custom/" + $theme.getSetting("div-wrapper-image-name"))
|
||||||
#else
|
#else
|
||||||
#set ($background-image-name = $themeDisplay.getPathThemeImages() + "/custom/default_background.jpg")
|
#set ($div-wrapper-image-name = $themeDisplay.getPathThemeImages() + "/custom/default_background.jpg")
|
||||||
#end
|
#end
|
||||||
|
|
||||||
#if ($theme.getSetting("portlet-topper-css-attributes") !="")
|
|
||||||
#set ($portlet-topper-css-attributes = $theme.getSetting("portlet-topper-css-attributes"))
|
|
||||||
#end
|
|
||||||
|
|
|
@ -21,9 +21,25 @@
|
||||||
<style>
|
<style>
|
||||||
#if ($theme.getSetting("portlet-topper-css-attributes") !="")
|
#if ($theme.getSetting("portlet-topper-css-attributes") !="")
|
||||||
.aui .portlet-topper .portlet-title {
|
.aui .portlet-topper .portlet-title {
|
||||||
$portlet-topper-css-attributes
|
$theme.getSetting("portlet-topper-css-attributes")
|
||||||
}
|
}
|
||||||
#end
|
#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") !="")
|
#if ($theme.getSetting("navbar-background-color") !="")
|
||||||
.aui #navigation .navbar-inner {
|
.aui #navigation .navbar-inner {
|
||||||
background: $theme.getSetting("navbar-background-color");
|
background: $theme.getSetting("navbar-background-color");
|
||||||
|
@ -92,11 +108,13 @@ $theme.include($body_top_include)
|
||||||
#end
|
#end
|
||||||
|
|
||||||
<header id="banner" role="banner">
|
<header id="banner" role="banner">
|
||||||
|
#if ($theme.getSetting("show-powered-d4science") == "true")
|
||||||
<div class="poweredBy-link">
|
<div class="poweredBy-link">
|
||||||
<a href="http://www.d4science.org" target="_blank" class="$logo_css_class">
|
<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>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
#end
|
||||||
<div id="heading">
|
<div id="heading">
|
||||||
<h1 class="site-title">
|
<h1 class="site-title">
|
||||||
<a class="$logo_css_class" href="$themeDisplay.getPortalURL()" title="#language_format ("go-to-x", ["D4Science Gateway"])">
|
<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
|
#end
|
||||||
|
|
||||||
</header>
|
</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">
|
<div id="content">
|
||||||
<!-- nav id="breadcrumbs">#breadcrumbs()</nav -->
|
<!-- nav id="breadcrumbs">#breadcrumbs()</nav -->
|
||||||
|
|
Loading…
Reference in New Issue