CSS dynamically changing advice

Wappler General Need Help
1

Just trying to get a sense as to how I could go about this.

I have a css rule called .textcolor { color: #333; } and in my page it is obviously called with <p class="textcolor">My Text</p>

What if I wanted to change tht colour depending on a condition, so lets say the user has just visited a page called blue.php then navigated from there to this page, I want that user to see all the text in blue, and if they were on the page red.php and navigated to this page then i want all the text to be red. If they just came from any other default page then it must remain dark grey.

How do I go about trying to handle this based upon the route they took to get to the page.

I am kind of thinking about css variables, and a session cookie storing a value that does not get reset unless certain pages are visited.

2

Forgot, just an apology for not being very active this last month or so, I have been working day and night on a massive project, 1700 page website in 3 months as a single person, lol, not even close to half way yet.

EDIT: @George, just thinking about this now but do you think Wappler will have any issue managing and maintaining a site this size considering it is mostly made up of static content in .php files. Before I go too far should i split this into multiple projects possibly. Just unsure, maybe this is not even a possible problem, but rather safe than sorry i suppose.

2 Likes
3

My current project has 3.165 files if all files and images (including wapper files) are counted., no problems managing it

Edit. Just counted 2,000 of them are images, didn’t realise there were that many so maybe not that big after all

4

One way I could think of to achieve this is by using Dynamic Attribute Class Toggle & Variable.
But this will require setting all conditions on all elements you need to set the color.

Add a variable and set the value to whatever event is happening - bluepage, redpage etc. Or you could use query variable or state manager, as per your setup.
Then set toggle conditions as:
dmx-class:makered="var1.value == 'redpage'" dmx-class:makeblue="var1.value == 'bluepage'" and so one.

This sort of seems like a hack, but its the best I could think of for now.

1 Like
5

you are doing something wrong :joy:

6

Found a better solution. :sweat_smile:
Instead of class toggle, use the styling dynamic attribute & variable.
The variable should contain the hex or name of color. Then set style for desired elements as:
dmx-style:color="var1.value"

But you will still have to set this on all elements where you need to change the color.

1 Like
7

@Hyperbytes, yes sadly this website has 1700 pages as just the physical pages, they supplied me with 36gb of high resolution images which I have optimised and landed up with 27000 images in total, which already, I know I have had problems with FTP adding more than 10000 images into a single images folder, so I have split them up into various categories and landed up with the largest folder of images having 7800 pictures in it.
I have not had any issues so far, but before I go too far I just wanted to ensure there were no known limitations to this.

@mrbdrm, lol, as soon as I asked the question, i knew someone was going to give that answer, because it is probably the answer i would have given too, lol.
Sadly with the instructions and unlimited restrictions this client wants, the only way i can do this is with multiple pages. I will probably land up with about 150 vastly different template files in the end, but they need to be single files because of the changes that will be needed.
I have tried to think of multiple ways to do this dynamically as I normally would with a database but there are just too many things that could go wrong when they need alterations made.

@nshkrsh, yes this is exactly what I figured i would need to do, but i have never used css variables so was hoping i could add a variable there instead. The easiest solution i can think of is setting the style sheet externally with all the things that never change, then setting an inline style rule on each page, inside a condition saying

if color == 1 then style=“colour:blue;” else if session variable == 2 then style=“colour:red”

I know this is not the correct syntax etc. but just giving an idea, of one possible solution that I had hoped i might even find a better way around.

8

What about making different css file for each specific theme.

then use it like:

<link rel="stylesheet" href="css/red.css" dmx-bind:disabled="session.theme != 'red'">
<link rel="stylesheet" href="css/blue.css" dmx-bind:disabled="session.theme != 'blue'">
4 Likes
9

haha Patrick, I knew you would save the day, very clever idea, and far simpler, lol lol lol, can not believe i never even imagined doing that, thank you. Love it.

10

Mine should, finally have around 10,000 at 3 sizes i.e. 30,000 images, i thought that was bad enough but thankfully it is a CMS function so the customer has the job of image uploading images, not me, Wappler does the image manipulation on upload
But 17000 static pages? There must be a way to automate some of that?
Feel free .to bounce any ideas over to me

11

I don't know if I've ever FTP'ed 10,000 images in one go, but one of my customers has almost 33,000 images in a single folder on their website. I'm not aware of any issues with this. It's certainly more convenient to have them all in one place. I have another customer with almost 200,000 in a single folder (on a Windows server, on a LAN). I don't know if there is a practical limit.

12

how about one css file and you set what needed to be changed in the css to be a session variable

:root {
  --color: #333;
}

but i dont know if we could use app connect inside css file
but with this you only need one css file for unlimited options and no ifs

13

@Hyperbytes, thanks so much, it is 1700 17 hundred pages of static, not 17000 17 thousand, lol, I would never finish.
The client unfortunately is upgrading their website from a dynamic site i made about 4 years ago, and we have spent the last 4 years arguing because all of a sudden they will want one image larger than all the rest, so in other words lets say i have a page with 3 columns and each has a product spanning 4 columns, then they phone and say, ahh we have a super special product, can you make it span all 12 columns, which i then have to explain to them that all 400 product pages are the same, and the data comes in dynamically from the database, so i can make it that way on 400 pages, or i can just do one as a custom page but it will take longer and cost more.
Of course they never understand, after many many fights with them, and almost loosing this client 3 times, they have said I must redo the site in such a way that if they want something different to every other page then that what they want.
I am charging them tripple, and have a 4 month deadline rather than the first build where i only had a month, but it looks like the only time saving is going to be by using templates to make each page.

@TomD, I do not really know if the amount of images in a folder over FTP has a limit, but I do know that on a mac in cyberduck as an FTP Client, that when i open a folder with 10000 or more images in it, it throws a warning to tell me it will take a while, and then becomes very unresponsive, so when i want to add another 10 images every week or so I often land up having to do it through the cPanel File Manager rather as Cyberduck just takes way too long.

@mrbdrm, that might also be a good solution, i will have to try that out, thanks for the idea.

My original question was really just an example, but what is really the use is.
I have a website that has logos and colours all geared towards bush safaris, with browns and greens and a logo of a giraffe. Over the years they have started adding many island destinations to the website as well, and sometimes they have holiday packages that include 5 days in the bush and 5 days on an island resort.
The island stuff looks out of place with Giraffe logos and greens and browns, so they want the island stuff to all be blues with a logo of a turtle, which seemed easy, however here is the trick.
If the user goes onto the homepage which will remain a bush feel, and clicks on an island page, it must all change to the island theme, then from there if they click a generic page like the about us page, it must all remain in the island theme, if they specifically click a bush page then the theme will change to bush theme, and if they clicked a generic page like about us again, then it must be bush theme.
So a single about us page could be bush or island theme depending on where they are starting from.

Therefore i need to store something that tells the next page when opening what theme colours to show.

Hope that makes sense.

14

@psweb Sorry, typo! Must be a way of setting multiple templates and configuring which template use dynamically but i guess you are well through it now so best stick with what you have.

15

so is the theme change effect the page structure?

16

Patrick's solution seems spot on for this. And if there is something you can't theme with CSS, you can use inline PHP.

17

It luckily should not impact structure although the different logos are slightly different in size and proportion so it might push things more over, but I do not think so.

18

then i dont see the need to make all these pages. you could do it with css and js with cookies.
the issue is not creating all these files but the maintenance is going to be a nightmare

19

Hi @patrick , I realise this is 5 years ago now, but I have the same issue in that different customers will want different colour schemes and your solution seemed to be the perfect solution ... Stylesheet for each customer and then disable the stylesheets for all the customers who arent use the app at the time.
Unfortunately I can't seem to get it to work, Ive tried just about every combo including using disabled instead of the dmx-bind:disabled and nothing seems to work.
Do you have any thoughts or any other easy way to accomplish this.

Many thanks

Nigel