Dark Mode

Open to all! Ask other shopowners for help.
PBR Streetgang
Member
Posts: 48
Joined: Fri Nov 19, 2021 4:09 pm
Phoenix Version:
Has thanked: 24 times

Re: Dark Mode

Post by PBR Streetgang »

Here's a good example. I identify the card header class and using the slider it grays the header where you see categories and what's new. Then I try to write this to do what the slider does, but it doesn't do anything. I'm sure I'm labeling it wrong or not including everything I need to include.

Code: Select all

card-header {
   background-color: #3d3a3a;
}
You do not have the required permissions to view the files attached to this post.


Join The Code Co-op to get access to your library in the Code Co-op Forum
heatherbell
Senior Contributor
Posts: 2540
Joined: Mon Oct 07, 2019 4:39 am
Phoenix Version:
Has thanked: 35 times
Been thanked: 243 times

Re: Dark Mode

Post by heatherbell »

PBR Streetgang wrote: Wed Apr 10, 2024 9:16 pm Then I try to write this to do what the slider does, but it doesn't do anything.
Firstly, you are targeting card-header, that is targeting an element.
If you want to target a class, it should be .card-header.
Read more and learn more generally here: https://www.w3schools.com/css/default.asp
Read more and learn more specifically here: https://www.w3schools.com/css/css_selectors.asp
Also note, after your user.css changes have been saved, make sure to hard refresh your browser or do this: https://phoenixcart.org/phoenixcartwiki ... ss_Changes
If it still doesn't change as expected, then go back to Dev Tools to see if some other style is overriding it.
Sometimes Bootstrap styles will override the user.css, that will be seen in the Dev Tools, so !important needs to be appended to the style to effect the change, for example, background-color: #3d3a3a !important;
PBR Streetgang
Member
Posts: 48
Joined: Fri Nov 19, 2021 4:09 pm
Phoenix Version:
Has thanked: 24 times

Re: Dark Mode

Post by PBR Streetgang »

Made a lot of progress today. Looking like I want it to now, but I'm still working with colors because it's pretty bland. If someone could help me change the few items I have note in this screenshot I'd really appreciate it. YOu can see the site here: https://www.finchfirearms.com
The alert block is only showing what I want it to, but for some reason the bottom border isn't showing. I think I messed it up in padding. Also, when you go to a product page The Sort By dropdown needs work and I need to move that down probably because of padding.
You do not have the required permissions to view the files attached to this post.
heatherbell
Senior Contributor
Posts: 2540
Joined: Mon Oct 07, 2019 4:39 am
Phoenix Version:
Has thanked: 35 times
Been thanked: 243 times

Re: Dark Mode

Post by heatherbell »

PBR Streetgang wrote: Thu Apr 11, 2024 10:50 pm change the few items I have note in this screenshot
You've applied the background-color to the a element, try removing it.
BTW, style changes targeting width classes like col-sm-12 are not advisable, your change has broken a lot of things.
CSS changes often need to be carefully targeted.
Some of your changes are shooting from the hip with a sawed off 12 gauge! ;)
You know that can get the job done but can have unintended consequences!
Look in the language file for the icons.
PBR Streetgang
Member
Posts: 48
Joined: Fri Nov 19, 2021 4:09 pm
Phoenix Version:
Has thanked: 24 times

Re: Dark Mode

Post by PBR Streetgang »

The 12 gauge analogy is exactly right! Thank for the input. I’ll make some changes.
PBR Streetgang
Member
Posts: 48
Joined: Fri Nov 19, 2021 4:09 pm
Phoenix Version:
Has thanked: 24 times

Re: Dark Mode

Post by PBR Streetgang »

Made those changes and everything is looking good. One final thing. I'd like to remove the phone and the @ down in contact us part. I'll put that information on the contact us page.
heatherbell
Senior Contributor
Posts: 2540
Joined: Mon Oct 07, 2019 4:39 am
Phoenix Version:
Has thanked: 35 times
Been thanked: 243 times

Re: Dark Mode

Post by heatherbell »

PBR Streetgang wrote: Fri Apr 12, 2024 2:47 pm One final thing. I'd like to remove the phone and the @ down in contact us part.
Already answered in previous post
heatherbell wrote: Fri Apr 12, 2024 6:19 am Look in the language file for the icons.
If someone's time saves your time or helps to develop your store then the Buy Me A Beverage button is an option :)


Join The Code Co-op to get access to your library in the Code Co-op Forum
Post Reply