Multiple Theme

[dvdcut]

i been thinking about Multiple Theme long time, can we have option to have multiple theme? i think it will only need css modification, anyone else thinking about this? or i have lost my mind :D

[pihome-shc]

@dvdcut it is going to he hell of job to do all css. first you need to take out all css code from exiting css files, and then save it in one file to call it default theme, and then each theme would have its of css file. i dont know any other way of doing this may be your or someone else have better idea, but i dont mind having option to alternate theme.

[sandreialexandru]

How about creating another folder called "themes" witch would contain sub-folders with the css files? The folders tree would look like "/themes/theme_name/css/". A php script could copy (overwrite) the css folder into the destination folder. Every theme path first gets inserted into database and $src gets value from there. The GUI would have a dropdownlist with all the themes.
Not a php expert but maybe something like:

<?php
$src = "/var/www/themes/dark/css";
$dest = "/var/www/css";

//version 1
shell_exec("cp -r $src $dest");

//verson 2
copy($src,$dest)
?>

[sandreialexandru]

And maybe add this to the php code so there wouldn't be problems with browser cache

header("Expires: Tue, 01 Jan 2000 00:00:00 GMT");
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

[dvdcut]

creating folder is the right way to do this, but i think copying css file for selected theme doesn't sound right, what all these theme sellers do? there must be better way doing this.

[sandreialexandru]

I believe that multiple theme changing modes exist, but they must be implemented. I believe that overwiting files is the simplest way to go, rather than changing the base theme(file paths) in order to add more themes.

[dvdcut]

i was googling around and here is one from stackoverflow
Comparison of web template engines
not sure if we can use this or not, but first task would be to extract all the relevent CSS and dump into one basic css file and from there one if any one want to chagne they can feel free.

if we have css only we can simply use following code can do:

if($user_theme_selected == 'basic')
{
      echo '<link href="/css/theme-basic.css" type="text/css" rel="stylesheet"></link>';
}
else if($user_theme_selected == 'premium')
{
      echo '<link href="/css/theme-premium.css" type="text/css" rel="stylesheet"></link>';
}
else
{
      echo '<link href="/css/theme-default.css" type="text/css" rel="stylesheet"></link>';
}

[pihome-shc]

i think first extracting css from exiting css is the way to start this, once we have that anyone can have their own style and we can start modifying or each one can modify the theme as you please and if you want to include in PiHome you are welcome.

[dvdcut]

@sandreialexandru you want to to work with me on this one? we can work on this to extract all the css code from all css files, what you say?

[sandreialexandru]

Please let me try something this weekend. I have an idea about how I can merge css files.

[sandreialexandru]

Searched for all the css files that are used for GUI and only 2 files need to be modified index.php and header.php .
I have merged all css files into a single one named style.css , which has the path thme/base/style.css

I'm sorry that i cannot test this right now, as i am not home and i haven't got a RaspberryPI nearby.
If someone can test and if it is ok, i can make a pull request.

test.zip

[pihome-shc]

@sandreialexandru
just tried your css, and its all blue, looks like lots of code is missing.

[sandreialexandru]

I guess it is not as simple as i thought or maybe i have missed something. I'll keep working on this, maybe with the help of @dvdcut .

[pihome-shc]

There has to some sort of simple solution for this.

…

On 9 May 2020, at 17:56, sandreialexandru ***@***.***> wrote: I guess it is not as simple as i thought or maybe i have missed something. I'll keep working on this, maybe with the help of @dvdcut . — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[dvdcut]

@sandreialexandru i m in, let me know what you want me to do,

[sandreialexandru]

I'm guessing that I might have missed something while merging the *.css files found in css folder and sub-folders. Maybe it needs to be re-merged.

[dvdcut]

my plan was to extract css code line by line, i know it wasn't easy but i dont say any other way,
we can leave fonts related code as it like font-awesome-4.7.0, glyphicons, ionicons-2.0.1
All CSS files

	<!-- Bootstrap Core CSS -->
	<link href="css/bootstrap.min.css" rel="stylesheet">
	
	<link href="css/animate.css" rel="stylesheet">
	
	<!-- MetisMenu CSS -->
	<link href="css/plugins/metisMenu/metisMenu.min.css" rel="stylesheet">
	
	<!-- DataTables CSS -->
	<link href="css/plugins/dataTables.bootstrap.css" rel="stylesheet">
	
	<!-- extra line added later for responsive test -->
	<link href="css/plugins/dataTables.responsive.css" rel="stylesheet">
	
	<!-- animate CSS -->
	<link href="css/plugins/animate/animate.css" rel="stylesheet">
	
	<!-- Custom CSS -->
	<link href="css/sb-admin-2.css" rel="stylesheet">
	
	<!-- Datetimepicker CSS -->
	<link href="css/plugins/datepicker/bootstrap-datetimepicker.css" rel="stylesheet">
	
	<!-- Custom Fonts awesome-->
	<link href="fonts/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
	
	<!-- Custom Fonts ionicons-->
	<link rel="stylesheet" type="text/css" media="screen" href="fonts/ionicons-2.0.1/css/ionicons.min.css">

We should focust on following:

	<!-- Bootstrap Core CSS -->
	<link href="css/bootstrap.min.css" rel="stylesheet">
	
	<!-- MetisMenu CSS -->
	<link href="css/plugins/metisMenu/metisMenu.min.css" rel="stylesheet">

	<!-- Custom CSS -->
	<link href="css/sb-admin-2.css" rel="stylesheet">
	
	<!-- Datetimepicker CSS -->
	<link href="css/plugins/datepicker/bootstrap-datetimepicker.css" rel="stylesheet">
	

[dvdcut]

what do you think of these two?
https://github.com/csstidy-c/csstidy

http://iceyboard.no-ip.org/projects/css_compressor/combine

[pihome-shc]

following two would be more important some items in bootstrap.min.css gets overwritten in sb-admin-2.css. may be there is way automatically combine this but so far i can not see anything and google failed to bring anything useful. may be it is manual work.

<!-- Bootstrap Core CSS -->
	<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
	<link href="css/sb-admin-2.css" rel="stylesheet">

[sandreialexandru]

@dvdcut tools look good, but they are used to minify the resulted css file.
@pihome-shc you are right, manual work needs to be done.
I have tried another simple merging but GUI is broken again.

[pihome-shc]

@sandreialexandru lets start extracting code item by item, i know it is not going to be simple task.

[dvdcut]

this is more difficult then i thought, but even after extracting all css we still need to somehow manage switch between theme, for example if you have Homebridge installed and you can switch between theme right there and i think it is done through ajax. i m going to extract css in next few days and i'll share what i have don, may be someone with better knowledge of ajax can help us on this.

[dvdcut]

here is extracted file, but I also realise most of the custom code is in sb-admin-2.css, and we don't need to extract everything, may be few parts need to be brought in from bootstrap.min.css.
@sandreialexandru can you test this?

default.zip

[sandreialexandru]

Yes, I can. I will test your version and give you my feedback. I have been working on an "extraction" myself.

[sandreialexandru]

@dvdcut I'm sorry but your version does not work
This is how it looks:

I'm trying to browse through the site and use the "inspector" to select all the used css code, but it is a lot to do. I have to be careful at repeating elements.

[dvdcut]

i left all the other css in place and added mine at the end.

[dvdcut]

@sandreialexandru i did the same thing, but i also noticed that most of the customization is in sb-admin-2.css

[dvdcut]

@sandreialexandru, did you made any progress? do you need any hlep?

[sandreialexandru]

I've managed to get to the point where I cannot merge boostrap.min.css. I have done some testing and untill now, it is working with only two css files (excluding fonts and icons css). The web interface is a bit faster and I did not find any broken elements. Please help with some testing.

Replace bootstrap.min.css and copy pihome_css.css into /var/www/css
Edit header.php . Replace

<!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
	
	<link href="css/animate.css" rel="stylesheet">

    <!-- MetisMenu CSS -->
    <link href="css/plugins/metisMenu/metisMenu.min.css" rel="stylesheet">
	    <!-- DataTables CSS -->
    <link href="css/plugins/dataTables.bootstrap.css" rel="stylesheet">
	<!-- extra line added later for responsive test -->
	<link href="css/plugins/dataTables.responsive.css" rel="stylesheet">
	<!-- animate CSS -->
	<link href="css/plugins/animate/animate.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="css/sb-admin-2.css" rel="stylesheet">

	<!-- Datetimepicker CSS -->
	<link href="css/plugins/datepicker/bootstrap-datetimepicker.css" rel="stylesheet">

with

<!-- Bootstrap Core CSS -->
   <link href="css/bootstrap.min.css" rel="stylesheet">
 
   <link href="css/pihome_css.css" rel="stylesheet">

css.zip

[pihome-shc]

@sandreialexandru
i will test this later and report back the update.

[dvdcut]

@sandreialexandru i tested your css files and i have no issues so far, now its time to customize some items to see how easy it would be.

[pihome-shc]

i can confirm your css.zip file is working great,

[dvdcut]

can we make this official update then?