Change navbar skin on the fly

This public forum is for user-to-user discussions of PHPMaker. Note that this is not support forum.
Post Reply
kirondedshem
User
Posts: 642

Change navbar skin on the fly

Post by kirondedshem »

Ive seen admin lte template and i can change the skin in class of body from skin-blue to something like skin-green and others via jquery and it changes automatically.

But phphmaker sort of overides these somehow and when i do the same, the colours just get lost so it doesn't work like expected.

Isthere anything I can do to impliment this coz what i want is to show a different navbar and menu skin for different user groups upon login, I dont really want to change all the css like the table themes etc, I just want navbar and menu skin to change like in admin lTE template.


Webmaster
User
Posts: 9425

Post by Webmaster »

Try:

  1. Include AdminLTE's _all-skins.min.css in header.php,
  2. Change the CSS class for the <body> tag by either server side or client side code. If you change by server event, modify the global variable $EW_BODY_CLASS.

kirondedshem
User
Posts: 642

Post by kirondedshem »

Worked like a charm. for those who want it.


smpsrllc
User
Posts: 72

Post by smpsrllc »

Hello

Can you explain more details about the process

Thank you


kirondedshem
User
Posts: 642

Post by kirondedshem »

Can you explain more details about the process

1.download the admin LTE theme and extract it(you can go to thier home page if you dont hav eit yet)
2.search the file called "_all-skins.min.css", it should be in folder "AdminLTE-master\dist\css\skins"

  1. copy that file and paste it into somewhere in your project, eg I paste mine into a folder called "custom_plugins" which is located in my root folder.
    NOTE:seems this file is what contains the neccessary things to make the theme classes change on the fly like they should

4.Include this file into your project, so put this line in global->all pages->page head:
<link rel="stylesheet" type="text/css" href="custom_plugins/_all-skins.min.css">

Thats it, now you should be able to change navbar theme colors automatically like it is in ADMIN LTE by setting skin-XXXX on body where XXXX is the chossen theme class

for example below am setting navbar theme to green or blue depending on which user level is logged in, go to global->all pages->page_loading and paste

// Page Loading event
function Page_Loading() {
//echo "Page Loading";

//change skin
if(CurrentUserLevel() == 2)
{
$EW_BODY_CLASS = "hold-transition skin-green";
}
elseif(CurrentUserLevel() == -1)
{
$EW_BODY_CLASS = "hold-transition skin-blue";
}

}


smpsrllc
User
Posts: 72

Post by smpsrllc »

Hello

Thanks for your answer.

Phpmaker automatically generates the adminlte/css/skins/. Folder

I follow the next steps and it does not work.

My solution was:

Include this file in your project, so put this line in global-> all pages-> page head:

<link rel="stylesheet" type="text/css" href="adminlte/css/skins/_all-skins.min.css">
<?php
if(CurrentUserLevel() == -1)
$EW_BODY_CLASS = "hold-transition skin-green";
else
$EW_BODY_CLASS = "hold-transition skin-blue";
?>

It's great, thanks for sharing.


smpsrllc
User
Posts: 72

Post by smpsrllc »

Hello

This only change the header.

In phpmaker have many themes, change the Header and tables.
It's possible change all.

Thank you.


smpsrllc
User
Posts: 72

Post by smpsrllc »

On the use of themes, I investigated

There are 2 files that change
1- ewcfg14.php 2 lines

define ("EW_PROJECT_STYLESHEET_FILENAME", "phpcss/demo2018.css", TRUE); // Project stylesheet file name
$EW_BODY_CLASS = "hold-transition skin-blue";

2- header.php 1 line

<link rel = "stylesheet" type = "text/css" href = "<? php echo $EW_RELATIVE_PATH?> adminlte/css/<? php echo ew_CssFile (" AdminLTE.css ")?>">

My solution is
1- Choose a theme for example blue and generate these 2 files demo2018.css AdminLTE.css
2- In folder phpcss/ rename demo2018.css >>> phpcss/demo2018-blue.css
and folder adminlte\css rename file AdminLTE.css >>> AdminLTE-blue.css
3- Choose other theme Maroon and generate again these 2 files demo2018.css AdminLTE.css
4- In folder phpcss/ rename demo2018.css >>> phpcss/demo2018-maroon.css and folder adminlte\css rename file AdminLTE.css >>> AdminLTE-maroon.css
5- so on with all the themes that you want.
6- Include this code in your project, so put this line in Server Events ->global-> all pages-> page head:

if(CurrentUserLevel() == -1) {
$EW_BODY_CLASS = "hold-transition skin-blue";
?>
<link rel="stylesheet" type="text/css" href="<?php echo $EW_RELATIVE_PATH ?>adminlte/css/<?php echo ew_CssFile("AdminLTE-blue.css") ?>">
<?php
}
else {
$EW_BODY_CLASS = "hold-transition skin-yellow";
?>
<link rel="stylesheet" type="text/css" href="<?php echo $EW_RELATIVE_PATH ?>adminlte/css/<?php echo ew_CssFile("AdminLTE-maroon.css") ?>">
<?php
}

7- Edit ewcfg14.php and comment this line

//define ("EW_PROJECT_STYLESHEET_FILENAME", "phpcss/demo2018.css", TRUE); // Project stylesheet file name

8- Edit header.php and put this code the start the file

if(CurrentUserLevel() == -1)
define("EW_PROJECT_STYLESHEET_FILENAME", "phpcss/demo2018-blue.css", TRUE); // Project stylesheet file name
else
define("EW_PROJECT_STYLESHEET_FILENAME", "phpcss/demo2018-maroon.css", TRUE); // Project stylesheet file name

It's working, the bad is the step 7 and 8 there is put manual

Somebody the solution for integrade automatic from phpmaker the step 7 and 8

The idea is that each user chooses the theme than they like the most and save in your profile.

Thank you.


Post Reply