Support

    You are here:  
  1. Home
  2. Support
  3. alkali
Toggle Submenu
  1. Forums
  2. Recent
  3. Categories
  4. Tags
  5. Users
  6. Badges
Support is currently Online
Add a reply View Replies (2)

Resolved Checkbox styling

  1. stip
    stip
  2. General
  3. Thursday, June 08 2017, 11:48 AM
Hi guys,

I would like to make buttons from the checkboxes in the search in the frontend.
Like this site:
https://warmonderhof.nl/echt-warmonderhof/oud-studenten/warmonderhoffers-wereldwijd

Now the easy profile is a little bit different in code and a tiny customization would make it allot easyer.



	<label>

	<input type="checkbox">

        Labelname

	</label>


Easyer to style would be to span the Label.




	<label>

	<input type="checkbox">

        <span>Labelname<span>

	</label>


I than can use css like this:



label span {

color:#fff;

font-size:14px;

    display:block;

    border:1px solid #F26F37;

    padding:5px;

    cursor:pointer;

    font-weight:normal;

background: #C6E0ED;

 background-image: linear-gradient(to bottom, #FF0000 0px, #f94848  100%);

}



input[type="checkbox"]:checked + span {

    background-color:#C6E0ED;

 background-image: linear-gradient(to bottom, #C6E0ED 0px, #C6E0ED  100%);

}


Now i have no idea how to grab it and style this label, and change label if checked.
This would be a really easy update but a core change if i do it if i am not mistaken.

Is it something for an update or can you tell me what file i need to change?

Thank you so much!
Responses (2)
admin
admin Accepted Answer
Admin
Hi,
this is highly not recommended.

I think the best way is to manage this via a simple javascript like this:
jQuery(document).ready(function(){

	var check_button_class = 'btn btn-default btn-xs'; // you can customize here

	var check_button_class_active = 'btn-success'; // you can customize here

	jQuery('label.checkbox').each(function(){

		var self = jQuery(this);

		var active = self.find('input').prop('checked');

		self.hide();

		if(active) self.after('<span class="'+check_button_class+' '+check_button_class_active+'" data-checkbox="'+self.find('input').attr('id')+'">'+self.text()+'</span>');

		else self.after('<span class="'+check_button_class+'" data-checkbox="'+self.find('input').attr('id')+'">'+self.text()+'</span>');

	});

	jQuery('.btn[data-checkbox]').each(function(){

		var self = jQuery(this);

		self.click(function(){

			self.toggleClass(check_button_class_active);

			var checkbox = jQuery('#'+self.attr('data-checkbox'))

			checkbox.attr("checked", !checkbox.attr("checked"));

			checkbox.change();

		});

	});

});

something like this not require CSS style. In the above function we manage style of buttons with already existing Bootstrap classes, of course you can customize it.

NOTE: function like this will works for all checkboxes in your site, so we recommend you to add some other selector, for example if you need this only for search module then replace "'label.checkbox" with ".jsn_search_module label.checkbox"
  1. more than a month ago
  2. General
  3. # 1
stip
stip Accepted Answer
Hi Guys,

It took a while but now i added this javascript.
Its awesome!

Thanks!
  1. more than a month ago
  2. General
  3. # 2
  • Page :
  • 1


There are no replies made for this post yet.
However, you are not allowed to reply to this post.

Request Support

Support is currently Online
Ask a Question
Official support hours:
Monday To Friday except Saturday and Sunday
From 09:30 To 17:00

Support Availability

Working days: Monday to Friday. The support staff is not available on weekends; in the most of cases tickets will not be answered during that time.

Reply time: Depending on the complexity of your support issue it's usually between a few minutes and 24 hours for paid members and about one week for free members. When we expect longer delays we will notify you.

Guidelines

Before you post: read the documentation and search the forums for an answer to your question.

When you post: include Site Details if you request a support (you can use the form below the reply in Site Details tab).

Auto Solved Question: If after a week the author of the post does not reply to a request by moderator, the question will be marked as resolved.

Language: only English

Search Users

Easy Profile® is not affiliated with or endorsed by Open Source Matters or the Joomla Project. Joomla is Free Software released under the GNU/GPL License.

We use a few cookies

Our site uses non fat, delicious cookies which help us improve your user experience. You can read more about it in our Legal page.