Forums

Home » Liferay Portal » English » 3. Development

Combination View Flat View Tree View
Threads [ Previous | Next ]
toggle
Rajesh Chaurasia
Dropdowns for setting bg colour
July 8, 2012 8:35 AM
Answer

Rajesh Chaurasia

Rank: Junior Member

Posts: 88

Join Date: August 18, 2011

Recent Posts

Hi

I want to know how can we using vm implemenet a colour picker that can be used to set background colour ?
Any piece of code demonstrating the above or a colour picker will do a lot.

Warm Regards
Rajesh
Hitoshi Ozawa
RE: Dropdowns for setting bg colour
July 8, 2012 2:53 PM
Answer

Hitoshi Ozawa

Rank: Liferay Legend

Posts: 7990

Join Date: March 23, 2010

Recent Posts

For starter, have you looked at the following wiki page?

http://www.liferay.com/web/guest/community/wiki/-/wiki/Main/How+to+use+Liferay's+Color+Picker+in+own+portlets

You just have to paste the javascript code in velocity to get color picker to work.
Rajesh Chaurasia
RE: Dropdowns for setting bg colour
July 8, 2012 10:18 PM
Answer

Rajesh Chaurasia

Rank: Junior Member

Posts: 88

Join Date: August 18, 2011

Recent Posts

Thanks a lot
Rajesh Chaurasia
RE: Dropdowns for setting bg colour
July 9, 2012 12:20 AM
Answer

Rajesh Chaurasia

Rank: Junior Member

Posts: 88

Join Date: August 18, 2011

Recent Posts

I added the below piece of code of colur picker in my vm template which i setup for a web content and i got to see the colour picker in .the web content when i publised it.But when I select the colour inb web content display nothing happens, no colour change is seen and i get js error like Warning: Expected declaration but found '$'. Skipped to next declaration.
Kindly let me whaty else i need to do to apply bg colour change in web comntent display portlet.

<script type="text/javascript">

AUI().ready('aui-color-picker-base', function(A)
{
var colorNode = A.one('#primercolor');

window.colorPicker = new A.ColorPicker(
{
after: {
colorChange: function(val) {
var hex = '#' + this.get('hex');

colorNode.setContent('color: ' + hex);
colorNode.setStyle('backgroundColor', hex);
}
}
}
)
.render('#primerpicker');
});
</script>


<div id="primerpicker"/>
DarshanKumar N Bhatia
RE: Dropdowns for setting bg colour
July 9, 2012 1:24 AM
Answer

DarshanKumar N Bhatia

Rank: Junior Member

Posts: 85

Join Date: March 2, 2010

Recent Posts

Hi...

U can try this http://www.liferay.com/web/bradley.wood/blog/-/blogs/12052103

Write this function in main.js in theme:

AUI().ready(
'aui-io',
function(A) {
A.one('#skin-selector').delegate(
'click',
function(event){
var cssClass = event.currentTarget.attr('data-customCssClass');
if (cssClass) {
var body = A.getBody();
body.attr('class', cssClass + body.attr('class').replace(/skin-[a-z]+/g, ""));

A.io.request(
themeDisplay.getPathMain() + '/portal/session_click',
{
data: {
'theme_custom_css_class': cssClass
}
}
);
}
},'a'
);
}

);
--------------------------------
In init_custom.vm

#set ($theme_custom_css_class = $getterUtil.getString($sessionClicks.get($request, "theme_custom_css_class", "")))

#if ($panelsMinimized != "")
#set ($css_class = "${css_class} $theme_custom_css_class")
#end
------------------------------
in portal_normal.vm

<div id="skin-selector">
<a href="javascript:;" data-customCssClass="skin-none" class="skin-bttn-none">None</a>
<a href="javascript:;" data-customCssClass="skin-red" class="skin-bttn-red">Red</a>
<a href="javascript:;" data-customCssClass="skin-blue" class="skin-bttn-blue">Blue</a>
<a href="javascript:;" data-customCssClass="skin-green" class="skin-bttn-green">Green</a>
</div>

------------------------

In custom.css

#skin-selector {
background: #000;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
display: inline-block;
padding: 5px 0;
position: absolute;
right: 0;
top: 0;
}

#skin-selector a {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
display: block;
float: left;
height: 12px;
margin-right: 10px;
text-indent: -9999px;
width: 12px;
}

#skin-selector a:hover {
-moz-box-shadow: 1px 1px 5px #000;
-webkit-box-shadow: 1px 1px 5px #000;
box-shadow: 1px 1px 5px #000;
}

#skin-selector a.skin-bttn-red {
background: red;
}
#skin-selector a.skin-bttn-blue {
background: blue;
}

#skin-selector a.skin-bttn-green {
background: green;
}

#skin-selector a.skin-bttn-none {
background: white;
margin-left: 5px;
}

.skin-red {
background: red;
}

.skin-blue {
background: blue;
}

.skin-green {
background: green;
}

----------------------------------

HTH...
Rajesh Chaurasia
RE: Dropdowns for setting bg colour
July 9, 2012 4:25 AM
Answer

Rajesh Chaurasia

Rank: Junior Member

Posts: 88

Join Date: August 18, 2011

Recent Posts

Hi

I dont need this to do via theme .I want to do it using web content on which structures and templates have been applied.When the web content gets published ,i would like to see a color picker in webcontent display portlet that renders the web content .

Here is the code that does this , but i fail to change /a pply colour on web content

structure is :
<root>
<dynamic-element name="image" type="image_gallery" index-type="" repeatable="false"/>
<dynamic-element name="image_alt_tag_text" type="text" index-type="" repeatable="false"/>
<dynamic-element name="image_position" type="list" index-type="" repeatable="false">
<dynamic-element name="left" type="left" index-type="" repeatable="false"></dynamic-element>
<dynamic-element name="right" type="right" index-type="" repeatable="false"/>
</dynamic-element>
<dynamic-element name='title' type='text'></dynamic-element>
<dynamic-element name='text' type='text'></dynamic-element>
<dynamic-element name="link_url_1" type="text" index-type="" repeatable="false"/>
<dynamic-element name="link_name_1" type="text" index-type="" repeatable="false"/>
<dynamic-element name="open_in_new_window_url_2" type="list" index-type="" repeatable="false">
<dynamic-element name="no" type="no" index-type="" repeatable="false"></dynamic-element>
<dynamic-element name="yes" type="yes" index-type="" repeatable="false"/>
</dynamic-element>
<dynamic-element name="link_url_2" type="text" index-type="" repeatable="false"/>
<dynamic-element name="link_name_2" type="text" index-type="" repeatable="false"/>
<dynamic-element name="open_in_new_window_url_3" type="list" index-type="" repeatable="false">
<dynamic-element name="no" type="no" index-type="" repeatable="false"></dynamic-element>
<dynamic-element name="yes" type="yes" index-type="" repeatable="false"/>
</dynamic-element>
<dynamic-element name="link_url_3" type="text" index-type="" repeatable="false"/>
<dynamic-element name="link_name_3" type="text" index-type="" repeatable="false"/>
<dynamic-element name="open_in_new_window_url_4" type="list" index-type="" repeatable="false">
<dynamic-element name="no" type="no" index-type="" repeatable="false"></dynamic-element>
<dynamic-element name="yes" type="yes" index-type="" repeatable="false"/>
</dynamic-element>
<dynamic-element name="link_url_4" type="text" index-type="" repeatable="false"/>
<dynamic-element name="link_name_4" type="text" index-type="" repeatable="false"/>
<dynamic-element name="open_in_new_window_url_5" type="list" index-type="" repeatable="false">
<dynamic-element name="no" type="no" index-type="" repeatable="false"></dynamic-element>
<dynamic-element name="yes" type="yes" index-type="" repeatable="false"/>
</dynamic-element>
<dynamic-element name="link_url_5" type="text" index-type="" repeatable="false"/>
<dynamic-element name="link_name_5" type="text" index-type="" repeatable="false"/>
<dynamic-element name="open_in_new_window_url_6" type="list" index-type="" repeatable="false">
<dynamic-element name="no" type="no" index-type="" repeatable="false"></dynamic-element>
<dynamic-element name="yes" type="yes" index-type="" repeatable="false"/>
</dynamic-element>
</root>

and template is :
##
## Velocity Transform Template
##
#if( "$!image.getData()" == "" )
#set( $display_img = "display:none" )
#else
#set( $display_img = "display:block" )
#end


#if( "$!link_url_1.getData()" == "" || "$!link_name_1.getData()" == "" )
#set( $display_1 = "display:none" )
#set( $show_link1 = "" )
#else
#set( $display_1 = "display:block" )
#set( $show_link1 = "<a href=$link_url_1.getData()>Link1</a>")
#end
#if( "$!link_url_2.getData()" == "" || "$!link_name_2.getData()" == "" )
#set( $display_2 = "display:none" )
#set( $show_link2 = "" )
#else
#set( $display_2 = "display:block" )
#set( $show_link2 = "<a href=$link_url_2.getData()>Link2</a>")
#end
#if( "$!link_url_3.getData()" == "" || "$!link_name_3.getData()" == "" )
#set( $display_3 = "display:none" )
#set( $show_link3 = "" )
#else
#set( $display_3 = "display:block" )
#set( $show_link3 = "<a href=$link_url_3.getData()>Link3</a>")
#end
#if( "$!link_url_4.getData()" == "" || "$!link_name_4.getData()" == "" )
#set( $display_4 = "display:none" )
#set( $show_link4 = "" )
#else
#set( $display_4 = "display:block" )
#set( $show_link4 = "<a href=$link_url_4.getData()>Link4</a>")
#end
#if( "$!link_url_5.getData()" == "" || "$!link_name_5.getData()" == "" )
#set( $display_5 = "display:none" )
#set( $show_link5 = "" )
#else
#set( $display_5 = "display:block" )
#set( $show_link5= "<a href=$link_url_5.getData()>Link5</a>")
#end


<html>
<head></head>
<body>
<script type="text/javascript">

AUI().ready('aui-color-picker-base', function(A)
{
var colorNode = A.one('#primercolor');

window.colorPicker = new A.ColorPicker(
{
after: {
colorChange: function(val) {
var hex = '#' + this.get('hex');

colorNode.setContent('color: ' + hex);
colorNode.setStyle('backgroundColor', hex);
}
}
}
)
.render('#primerpicker');
});
</script>
<table>
<tr>
#if ("$image_position.getData()" == "left")
<td VALIGN="top">
<span style=$display_img><img style="vertical-align:text-top;margin-right:10px; margin-bottom:10px" src="$image.data" alt="$image_alt_tag_text.data" title="$image_alt_tag_text.data"/></span>
</td>
#end
<td><b>$title.getData()</b></td>
</tr>
<tr>
<td>&nbsp;</td>
<td align ="left">$text.getData()</td>
</tr>

</table>
<table>
<tr>
<td align="left" width="33%">&nbsp;$show_link1&nbsp;</td>
<td align="left" width="33%">&nbsp;$show_link2&nbsp;</td>
<td align="left" width="33%">&nbsp;$show_link3&nbsp;</td>
<td align="left" width="33%">&nbsp;$show_link4&nbsp;</td>
<td align="left" width="33%">&nbsp;$show_link5&nbsp;</td>
</tr>

</table>
<div id="primerpicker"/>
</body>
</html>
DarshanKumar N Bhatia
RE: Dropdowns for setting bg colour
July 9, 2012 9:32 PM
Answer

DarshanKumar N Bhatia

Rank: Junior Member

Posts: 85

Join Date: March 2, 2010

Recent Posts

Rajesh Chaurasia:
Hi

I dont need this to do via theme .I want to do it using web content on which structures and templates have been applied.When the web content gets published ,i would like to see a color picker in webcontent display portlet that renders the web content .

Here is the code that does this , but i fail to change /a pply colour on web content

structure is :
<root>
<dynamic-element name="image" type="image_gallery" index-type="" repeatable="false"/>
<dynamic-element name="image_alt_tag_text" type="text" index-type="" repeatable="false"/>
<dynamic-element name="image_position" type="list" index-type="" repeatable="false">
<dynamic-element name="left" type="left" index-type="" repeatable="false"></dynamic-element>
<dynamic-element name="right" type="right" index-type="" repeatable="false"/>
</dynamic-element>
<dynamic-element name='title' type='text'></dynamic-element>
<dynamic-element name='text' type='text'></dynamic-element>
<dynamic-element name="link_url_1" type="text" index-type="" repeatable="false"/>
<dynamic-element name="link_name_1" type="text" index-type="" repeatable="false"/>
<dynamic-element name="open_in_new_window_url_2" type="list" index-type="" repeatable="false">
<dynamic-element name="no" type="no" index-type="" repeatable="false"></dynamic-element>
<dynamic-element name="yes" type="yes" index-type="" repeatable="false"/>
</dynamic-element>
<dynamic-element name="link_url_2" type="text" index-type="" repeatable="false"/>
<dynamic-element name="link_name_2" type="text" index-type="" repeatable="false"/>
<dynamic-element name="open_in_new_window_url_3" type="list" index-type="" repeatable="false">
<dynamic-element name="no" type="no" index-type="" repeatable="false"></dynamic-element>
<dynamic-element name="yes" type="yes" index-type="" repeatable="false"/>
</dynamic-element>
<dynamic-element name="link_url_3" type="text" index-type="" repeatable="false"/>
<dynamic-element name="link_name_3" type="text" index-type="" repeatable="false"/>
<dynamic-element name="open_in_new_window_url_4" type="list" index-type="" repeatable="false">
<dynamic-element name="no" type="no" index-type="" repeatable="false"></dynamic-element>
<dynamic-element name="yes" type="yes" index-type="" repeatable="false"/>
</dynamic-element>
<dynamic-element name="link_url_4" type="text" index-type="" repeatable="false"/>
<dynamic-element name="link_name_4" type="text" index-type="" repeatable="false"/>
<dynamic-element name="open_in_new_window_url_5" type="list" index-type="" repeatable="false">
<dynamic-element name="no" type="no" index-type="" repeatable="false"></dynamic-element>
<dynamic-element name="yes" type="yes" index-type="" repeatable="false"/>
</dynamic-element>
<dynamic-element name="link_url_5" type="text" index-type="" repeatable="false"/>
<dynamic-element name="link_name_5" type="text" index-type="" repeatable="false"/>
<dynamic-element name="open_in_new_window_url_6" type="list" index-type="" repeatable="false">
<dynamic-element name="no" type="no" index-type="" repeatable="false"></dynamic-element>
<dynamic-element name="yes" type="yes" index-type="" repeatable="false"/>
</dynamic-element>
</root>

and template is :
##
## Velocity Transform Template
##
#if( "$!image.getData()" == "" )
#set( $display_img = "display:none" )
#else
#set( $display_img = "display:block" )
#end


#if( "$!link_url_1.getData()" == "" || "$!link_name_1.getData()" == "" )
#set( $display_1 = "display:none" )
#set( $show_link1 = "" )
#else
#set( $display_1 = "display:block" )
#set( $show_link1 = "<a href=$link_url_1.getData()>Link1</a>")
#end
#if( "$!link_url_2.getData()" == "" || "$!link_name_2.getData()" == "" )
#set( $display_2 = "display:none" )
#set( $show_link2 = "" )
#else
#set( $display_2 = "display:block" )
#set( $show_link2 = "<a href=$link_url_2.getData()>Link2</a>")
#end
#if( "$!link_url_3.getData()" == "" || "$!link_name_3.getData()" == "" )
#set( $display_3 = "display:none" )
#set( $show_link3 = "" )
#else
#set( $display_3 = "display:block" )
#set( $show_link3 = "<a href=$link_url_3.getData()>Link3</a>")
#end
#if( "$!link_url_4.getData()" == "" || "$!link_name_4.getData()" == "" )
#set( $display_4 = "display:none" )
#set( $show_link4 = "" )
#else
#set( $display_4 = "display:block" )
#set( $show_link4 = "<a href=$link_url_4.getData()>Link4</a>")
#end
#if( "$!link_url_5.getData()" == "" || "$!link_name_5.getData()" == "" )
#set( $display_5 = "display:none" )
#set( $show_link5 = "" )
#else
#set( $display_5 = "display:block" )
#set( $show_link5= "<a href=$link_url_5.getData()>Link5</a>")
#end


<html>
<head></head>
<body>
<script type="text/javascript">

AUI().ready('aui-color-picker-base', function(A)
{
var colorNode = A.one('#primercolor');

window.colorPicker = new A.ColorPicker(
{
after: {
colorChange: function(val) {
var hex = '#' + this.get('hex');

colorNode.setContent('color: ' + hex);
colorNode.setStyle('backgroundColor', hex);
}
}
}
)
.render('#primerpicker');
});
</script>
<table>
<tr>
#if ("$image_position.getData()" == "left")
<td VALIGN="top">
<span style=$display_img><img style="vertical-align:text-top;margin-right:10px; margin-bottom:10px" src="$image.data" alt="$image_alt_tag_text.data" title="$image_alt_tag_text.data"/></span>
</td>
#end
<td><b>$title.getData()</b></td>
</tr>
<tr>
<td>&nbsp;</td>
<td align ="left">$text.getData()</td>
</tr>

</table>
<table>
<tr>
<td align="left" width="33%">&nbsp;$show_link1&nbsp;</td>
<td align="left" width="33%">&nbsp;$show_link2&nbsp;</td>
<td align="left" width="33%">&nbsp;$show_link3&nbsp;</td>
<td align="left" width="33%">&nbsp;$show_link4&nbsp;</td>
<td align="left" width="33%">&nbsp;$show_link5&nbsp;</td>
</tr>

</table>
<div id="primerpicker"/>
</body>
</html>



From Ur code remove this line colorNode.setContent('color: ' + hex);

Here is My code to put color picker for back ground in web content:
Link : http://www.liferay.com/community/liferay-projects/alloy-ui/demo?title=community-liferay-projects-alloy-ui-demos-color-picker


<script>
AUI().ready('aui-color-picker-base', function(A) {
var colorNode = A.one('#color');

window.colorPicker = new A.ColorPicker(
{
after: {
colorChange: function(val) {
var hex = '#' + this.get('hex');
colorNode.setStyle('backgroundColor', hex);
}
}
}
)
.render('#demo');
});

</script>
<div id="demo">
Welcome to Liferay's Community! This space is where Liferay's open source community comes together to share knowledge, brainstorm new features, and build working relationships.</div>
<div id="color">
Welcome to Liferay's Community! This space is where Liferay's open source community comes together to share knowledge, brainstorm new features, and build working relationships
.</div>


HTH..............
Attachment

Attachments: Color Picker In Web Content.png (65.2k)
Rajesh Chaurasia
RE: Dropdowns for setting bg colour
July 11, 2012 11:30 PM
Answer

Rajesh Chaurasia

Rank: Junior Member

Posts: 88

Join Date: August 18, 2011

Recent Posts

I also want to save the backgorund colour that i set .I mean to say that if i refresh page the value of colour code should be retained .How can i do this ?
Rajesh Chaurasia
RE: Dropdowns for setting bg colour
July 13, 2012 1:31 AM
Answer

Rajesh Chaurasia

Rank: Junior Member

Posts: 88

Join Date: August 18, 2011

Recent Posts

I was able to persist the bg colour using structure and templateI
In structure I added a dynamic element list and eack child element of this had different colour codes.
On choosing one value I got the value in template and using that colour code I was able to set bg colour.
DarshanKumar N Bhatia
RE: Dropdowns for setting bg colour
July 13, 2012 1:53 AM
Answer

DarshanKumar N Bhatia

Rank: Junior Member

Posts: 85

Join Date: March 2, 2010

Recent Posts

Rajesh Chaurasia:
I was able to persist the bg colour using structure and templateI
In structure I added a dynamic element list and eack child element of this had different colour codes.
On choosing one value I got the value in template and using that colour code I was able to set bg colour.


Good emoticon

But How r u saving it in database...means after page refresh ...is color is reaming as per selected one.
is it possible to use "Color Picker" with template/structure ... ??
Rajesh Chaurasia
RE: Dropdowns for setting bg colour
July 14, 2012 12:38 AM
Answer

Rajesh Chaurasia

Rank: Junior Member

Posts: 88

Join Date: August 18, 2011

Recent Posts

I populated the values in xml (structure) and later applied the template on it.In template I pciked the value of bg_colour eleemnt and set it in templates' code.I am not storing anything in db as such.It is possible to use color picker in template.