Welcome, Guest
Username: Password: Remember me

TOPIC: changing question div layout per group

changing question div layout per group 2 years 7 months ago #76788

  • chrisadam
  • chrisadam's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 4
  • Karma: 0
Hi guys how can I apply CSS design elements to only effect certain groups..?

Such as I want to create a layout that looks like one way in group 1 and in group 2 questions, I want them to have some side to side, some in columns and some in rows..

I know in css and html I can edit the entire quesiton section and have done so, but how do I apply certain layout looks only to certain groups?

(or even within groups so I can move things around)

IS there a way to identify group layouts in css?


Thank you
Chris
The administrator has disabled public write access.

Re: changing question div layout per group 2 years 7 months ago #76792

  • DenisChenu
  • DenisChenu's Avatar
  • OFFLINE
  • Moderator Lime
  • Posts: 6451
  • Thank you received: 844
  • Karma: 249
Hello,

In group by group and all in one, all group are surrounded by a div id="group$GroupNumber"

The you can use some cs like that:
#group122{background:red}
#group123{background:green}

Denis
The administrator has disabled public write access.

Re: changing question div layout per group 2 years 7 months ago #76797

  • tpartner
  • tpartner's Avatar
  • NOW ONLINE
  • LimeSurvey Team
  • Posts: 4272
  • Thank you received: 806
  • Karma: 369
If using group-by-group mode, you can use JavaScript to add a group-specific class to the body element. Add the following to the end of template.js:
	$(document).ready(function() {
 
		// Find the group ID
		if($( 'input#fieldnames' ).length != 0) {
			var fieldNames = $( 'input#fieldnames' ).attr('value');
			var tmp = fieldNames.split('X');
			var gID = tmp[1];
		}	
 
		// Add a group-specific class to the body element
		$('body').addClass('group-'+gID+'');	
 
	});

Then in template.css, something like this:
body.group-122 {
    /* some rule */
}
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
The administrator has disabled public write access.
Moderators: ITEd
Time to create page: 0.139 seconds
Donation Image