Change CSS based on User Role

  • Resolved rapportdesign

    (@rapportdesign)


    11 years, 2 months ago

    I’m trying to change CSS based on the Role of the Logged In User.

    Can anyone provide any good links, examples or anything else that may be of use?

    Any help would be greatly appreciated.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter rapportdesign

    (@rapportdesign)

    11 years, 2 months ago

    I think I’ve sussed this now… Not had chance to test fully.

    The following code detects the role and then appends a new class to an element.

    <?php
global $current_user, $wpdb;
$role = $wpdb->prefix . 'capabilities';
$current_user->role = array_keys($current_user->$role);
$role = $current_user->role[0];
echo $role;

if ($role == "myrole1")
  {
  echo "<p>Role 1</p>";
  }
else
  {
  echo '<script>document.getElementById("companyName").className += " mynewclass";</script>';
  }

?>
    Thread Starter rapportdesign

    (@rapportdesign)

    11 years, 2 months ago

    I’ve solved my problem now, although I’m sure there’s probably a better way to achieve the same results. If so, please let me know.

    The scenario is that I have 6 check boxes on a form and depending on the role of a user, I want 5 of the check boxes and labels hidden.

    The ideal solution would be to hide all of them and just pass the value assigned to the remaining checkbox automatically, but that’s something I’m not ready to tackle yet.

    The code I’ve used is as follows…

    First of all the PHP below detects the user role, appends a class to 5 of the 6 check boxes and calls 5 javascript functions to hide the labels…

    <?php
	global $current_user, $wpdb;
	$role = $wpdb->prefix . 'capabilities';
	$current_user->role = array_keys($current_user->$role);
	$role = $current_user->role[0];

	if ($role == "dawsonrentalstemperaturecontrolledsolutions") {
  	echo '<script>document.getElementById("cthermobil-mobile-kuhllager-gmbhk").className += "hideCategories";</script>';
		echo '<script>document.getElementById("cdawson-rentals-nederland-b-v").className += "hideCategories";</script>';
		echo '<script>document.getElementById("cmodulfroid-service").className += "hideCategories";</script>';
		echo '<script>document.getElementById("cdawson-rentals-polska-sp-zo-o").className += "hideCategories";</script>';
		echo '<script>document.getElementById("cdawson-rentals-ireland-ltd").className += "hideCategories";</script>';
		echo "<script language=javascript>hideThermobilMobileKuhllagerGmbHK()</script>";
		echo "<script language=javascript>hideDawsonRentalsNederlandBV()</script>";
		echo "<script language=javascript>hideModulfroidService()</script>";
		echo "<script language=javascript>hideDawsonRentalsPolskaSpzoo()</script>";
		echo "<script language=javascript>hideDawsonRentalsIrelandLtd()</script>";
  }
	else if ($role == "thermobilmobilekuhllagergmbhk") {
  	echo '<script>document.getElementById("cdawson-rentals-temperature-controlled-solutions").className += "hideCategories";</script>';
		echo '<script>document.getElementById("cdawson-rentals-nederland-b-v").className += "hideCategories";</script>';
		echo '<script>document.getElementById("cmodulfroid-service").className += "hideCategories";</script>';
		echo '<script>document.getElementById("cdawson-rentals-polska-sp-zo-o").className += "hideCategories";</script>';
		echo '<script>document.getElementById("cdawson-rentals-ireland-ltd").className += "hideCategories";</script>';
		echo "<script language=javascript>hideDawsonRentalsTemperatureControlledSolutions()</script>";
		echo "<script language=javascript>hideDawsonRentalsNederlandBV()</script>";
		echo "<script language=javascript>hideModulfroidService()</script>";
		echo "<script language=javascript>hideDawsonRentalsPolskaSpzoo()</script>";
		echo "<script language=javascript>hideDawsonRentalsIrelandLtd()</script>";
  }
	else if ($role == "dawsonrentalsnederlandbv") {
  	echo '<script>document.getElementById("cdawson-rentals-temperature-controlled-solutions").className += "hideCategories";</script>';
		echo '<script>document.getElementById("cthermobil-mobile-kuhllager-gmbhk").className += "hideCategories";</script>';
		echo '<script>document.getElementById("cmodulfroid-service").className += "hideCategories";</script>';
		echo '<script>document.getElementById("cdawson-rentals-polska-sp-zo-o").className += "hideCategories";</script>';
		echo '<script>document.getElementById("cdawson-rentals-ireland-ltd").className += "hideCategories";</script>';
		echo "<script language=javascript>hideDawsonRentalsTemperatureControlledSolutions()</script>";
		echo "<script language=javascript>hideThermobilMobileKuhllagerGmbHK()</script>";
		echo "<script language=javascript>hideModulfroidService()</script>";
		echo "<script language=javascript>hideDawsonRentalsPolskaSpzoo()</script>";
		echo "<script language=javascript>hideDawsonRentalsIrelandLtd()</script>";
  }
	else if ($role == "modulfroidservice") {
  	echo '<script>document.getElementById("cdawson-rentals-temperature-controlled-solutions").className += "hideCategories";</script>';
		echo '<script>document.getElementById("cthermobil-mobile-kuhllager-gmbhk").className += "hideCategories";</script>';
		echo '<script>document.getElementById("cdawson-rentals-nederland-b-v").className += "hideCategories";</script>';
		echo '<script>document.getElementById("cdawson-rentals-polska-sp-zo-o").className += "hideCategories";</script>';
		echo '<script>document.getElementById("cdawson-rentals-ireland-ltd").className += "hideCategories";</script>';
		echo "<script language=javascript>hideDawsonRentalsTemperatureControlledSolutions()</script>";
		echo "<script language=javascript>hideThermobilMobileKuhllagerGmbHK()</script>";
		echo "<script language=javascript>hideDawsonRentalsNederlandBV()</script>";
		echo "<script language=javascript>hideDawsonRentalsPolskaSpzoo()</script>";
		echo "<script language=javascript>hideDawsonRentalsIrelandLtd()</script>";
  }
	else if ($role == "dawsonrentalspolskaspzoo") {
  	echo '<script>document.getElementById("cdawson-rentals-temperature-controlled-solutions").className += "hideCategories";</script>';
		echo '<script>document.getElementById("cthermobil-mobile-kuhllager-gmbhk").className += "hideCategories";</script>';
		echo '<script>document.getElementById("cdawson-rentals-nederland-b-v").className += "hideCategories";</script>';
		echo '<script>document.getElementById("cmodulfroid-service").className += "hideCategories";</script>';
		echo '<script>document.getElementById("cdawson-rentals-ireland-ltd").className += "hideCategories";</script>';
		echo "<script language=javascript>hideDawsonRentalsTemperatureControlledSolutions()</script>";
		echo "<script language=javascript>hideThermobilMobileKuhllagerGmbHK()</script>";
		echo "<script language=javascript>hideDawsonRentalsNederlandBV()</script>";
		echo "<script language=javascript>hideModulfroidService()</script>";
		echo "<script language=javascript>hideDawsonRentalsIrelandLtd()</script>";
  }
	else if ($role == "dawsonrentalsirelandltd") {
  	echo '<script>document.getElementById("cdawson-rentals-temperature-controlled-solutions").className += "hideCategories";</script>';
		echo '<script>document.getElementById("cthermobil-mobile-kuhllager-gmbhk").className += "hideCategories";</script>';
		echo '<script>document.getElementById("cdawson-rentals-nederland-b-v").className += "hideCategories";</script>';
		echo '<script>document.getElementById("cmodulfroid-service").className += "hideCategories";</script>';
		echo '<script>document.getElementById("cdawson-rentals-polska-sp-zo-o").className += "hideCategories";</script>';
		echo "<script language=javascript>hideDawsonRentalsTemperatureControlledSolutions()</script>";
		echo "<script language=javascript>hideThermobilMobileKuhllagerGmbHK()</script>";
		echo "<script language=javascript>hideDawsonRentalsNederlandBV()</script>";
		echo "<script language=javascript>hideModulfroidService()</script>";
		echo "<script language=javascript>hideDawsonRentalsPolskaSpzoo()</script>";
  }

?>

    The Javascript functions to hide the labels are…

    <script>
	function hideDawsonRentalsTemperatureControlledSolutions() {
		jQuery('label[for="cdawson-rentals-temperature-controlled-solutions"]').hide ();
	}
	function hideThermobilMobileKuhllagerGmbHK() {
		jQuery('label[for="cthermobil-mobile-kuhllager-gmbhk"]').hide ();
	}
	function hideDawsonRentalsNederlandBV() {
		jQuery('label[for="cdawson-rentals-nederland-b-v"]').hide ();
	}
	function hideModulfroidService() {
		jQuery('label[for="cmodulfroid-service"]').hide ();
	}
	function hideDawsonRentalsPolskaSpzoo() {
		jQuery('label[for="cdawson-rentals-polska-sp-zo-o"]').hide ();
	}
	function hideDawsonRentalsIrelandLtd() {
		jQuery('label[for="cdawson-rentals-ireland-ltd"]').hide ();
	}
</script>

    The CSS used to hide the checkboxes is…

    .hideCategories {
	display:none !important;
}
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Change CSS based on User Role’ is closed to new replies.