boards customization

Hi ,

To display a default search text , you can try something like this.

jQuery('.lia-search-input-message').val('Search HELLDIVERS Forums');

NOTE: If you do this ,you would have to include a script for making the value empty , on click.

Something like ,

$('.lia-quilt-column-06 .lia-search-input-message').focus(function(){
if($('.lia-quilt-column-06 .lia-search-input-message').val()==fillerText)
{
          $('.lia-quilt-column-06 .lia-search-input-message').val('');
}
});
$('.lia-quilt-column-06 .lia-search-input-message').focusout(function(){
if($('.lia-quilt-column-06 .lia-search-input-message').val() =='')
{
$('.lia-quilt-column-06 .lia-search-input-message').val(fillerText);
}
});

2. I am not sure of this (as I cannot see the site) but to display some text beneath the search box , you can use something like this.

jQuery('.lia-search-input-message').after(jQuery('<p>This is your text</p>'))

You may have to change the selector as per your requirement , and you can make it more specific if needed. But I hope it gives you an idea.

Thanks,

Sam

bhupen Yes, this can be done, this is a custom page and not a board page, so you can make changes to this specific page easily.

For the first requirement, you can try:

Write this code in header inside the wrapper.

<#if http.request.url?contains("/t5/custom/page/page-id/heldiver")>

<@liaAddScript>
(function($) {
        $(document).ready(function() {
 
	var watermark = 'Search HELLDIVERS Forums';
 
	//init, set watermark text and class
	$('#messageSearchField').val(watermark).addClass('watermark');
 
	//if blur and no value inside, set watermark text and class again.
 	$('#messageSearchField').blur(function(){
  		if ($(this).val().length == 0){
    		$(this).val(watermark).addClass('watermark');
		}
 	});
 
	//if focus and text is watermrk, set it to empty and remove the watermark class
	$('#messageSearchField').focus(function(){
  		if ($(this).val() == watermark){
    		$(this).val('').removeClass('watermark');
			}
		});
	});
})(LITHIUM.jQuery);
</@liaAddScript>

<#else>
<!-- other cases -->
</#if>

 2. As this is a custom page, so you can add a Custom Component on the layout of this page from Studio, and keep it under the search bar, and add your description in the custom component you just created.

I hope this helps.

@ Alok. correct its a simple page but I want to implement this same on board. can you please suggest me some poitner for that??
is it possible to implement it on board?

URl for board page:
http://stage.community.us.playstation.com/t5/HELLDIVERS/bd-p/helldivers

Rather than add more JS... you could try creating a custom forum page (this is different than a stand alone custom page, and the naming convention would need to be something like ForumPage.Helldriver, similar to the instructions here), then applying that to the Helldriver board via the admin > Helldriver (manage) > content > Custom Pages.

This would then allow you to add a custom content area or component below the search bar with text specific to Helldriver, that would only appear on this particular board that has this custom forum page/layout applied to it.

As for the search bar issue, you should be able to add a text string specific to search bar on this custom forum page. something like..

page.search.post_from_search@page:ForumPage.Helldriver@component:search-encapsulation = Search Helldriver Board

 Remeber though, if you create this and push to prod from studio, you'll need to manually set the custom page for the helldriver board in prod after the push. But hey, less JS to have the page load.

Hope that helps.