Support Thread - Responsive Color Changes for 155

gunni:

@ http://challengemehq.com
@ stylesheet_colors_split.css:
around line 166:
#logowraper - change the color to red in the code and see the top part where the logo is going red (background).

Thanks! Now, I know I am working on the correct file.
Now to figure out all those other names of elements.

Now, if I change to something with a hex code, like #496e9c, it does not change. Does it have to have certain "code" to take on a hex?

Something must be wrong at another level. I am editing the file directly on the server (through my cPanel), and saving after making a change. But then, when I refresh my page, I don't see the change. Then I reverted the color to blue, but I still don't see it. I wonder if my cache is blocking it, as I can see the change on another computer. Hum... So the stylesheet change works... just not the ovbious way I was looking at it! Thank you very much. You kind of helped me solve one problem.

When chaging CSS files you need to make a hard refresh to the browser...
If working with Chrome, press Shift + F5
Regarding the Hex code, looks OK as you wrote it above (#496e9c) .

gunni:

When chaging CSS files you need to make a hard refresh to the browser...
If working with Chrome, press Shift + F5
Regarding the Hex code, looks OK as you wrote it above (#496e9c) .

Oooooooooh! THAT might explain why I was not seeing anything. I never knew of this shortcut! Mystery solved!!! I can keep on going!

THANK YOU!

:thumbsup:

Hi,

I'm curious why this mod uses both rgb and hex?

It wouldn't bother me, accept that the last value of rgba is opacity. And I discovered that the default css included in the mod (stylesheet_colors_split.css) has many instances where hex is given along with rgba, but the rgba specifies something other than "1".

For instance, on line #23:
a.list-more {background-color:#6699cc;background-color:rgba(102,153,204,0.6);}

Perhaps other css is applying an opacity to that hex, so the rgba is matching it?

But this presents the very real possibility of accidentally using two totally different colors.

It's my understanding that there may be some advantage to rgba over hex for animations, but other than that rgba vs hex comes down to personal preference. I happen to prefer hex, but would happily switch to rgba on a case by case basis.

Is there some specific reason for calling both that I'm missing here? Like maybe some popular browser refuses to process hex?

I'm early on in my template and considering killing all rgba references that have a hex specified. If unexpected results crop up, I can deal with them as they come.

Can you see any reason I shouldn't do that?

Thanks!

EVERYTHING is optional. -- NOTHING is forever.

Here's the background. RGBA was added for three purposes.

First, and primary, is that it gives an illusion of items floating over or under a menu, etc. That feature alone alerts the mobile user that information may be above or below what is currently on the screen.

Second, it removes some of the "harshness" that results from using web-safe colors (did you know there are only 216?!?). Anything other than a web-safe color is just throwing the dice and hoping the customer's browser will get close to the color you selected.

Third, it was not added in case the browser could not handle hex but, the hex was added for browsers that could not handle the rgba as rgba and css3 are the next steps in web design. In fact, the browser has to accept CSS3 in order for the rgba call to work. You can google "css3 compliant browsers" to get a gist of which ones work presently.

That said, I have to reemphasize the beauty of open source. DO WITH AS YOU PLEASE.

If you want strict colors, either remove the rgba calls or change the percentage to 1 from 0.whatever. Shouldn't be any problem unless you miss a 0 or . in your replace.
Some would say you might be "clinging tenaciously to the trailing edge of technology." :P:smartalec:

That was an absolutely fabulous reply, thank you!

Man, I googled the heck out of "rbg vs hex", read gobs of articles, and found almost zip pointing to the advantages of rgb. Your explanation was concise, succinct, and straight to the point. Awesome.

Ok, so rgb is the way of the future. And hex covers legacy browsers. Neither hex nor rgb are "web safe" colors, in the sense that I can be sure every screen will represent exactly the same.

Alright, I'm on board with using both.

But I'm still nervous about using anything other than strict rgb colors, unless I can be certain an opacity is being applied to the correlated hex. I'd hate to go to the effort of building in backward compliance, only to accidentally make mistakes like putting black text over a dark hex/rgb color, never realizing the rgb was less than 1 but no opacity applied to the hex.

I mostly use the Chrome inspector while working. But default, the hex is usually struck out. Guess I'll just start checking the hex by disabling rgba in the inspector when I see them.

Thanks again. I'm really not clinging to anything, I'm just trying to learn!

No problem, learning is what I try to do every day.

The reason you see the hex un-selected is that your browser is CSS3 Compliant. No browser will attempt to show both, just the one that is most compatible.
It's a work in progress, but look at allpecansDOTcom/155e for an example of the background "peeking" through.

Note that the background image can be seen as you scroll up and down BUT, the sideboxes have a background that allows the text to still be legible without blocking the picture.

You'll note that the background-color for the left/right containers, productDescription, and cartInstructions have ONLY the rgba call in the stylesheet. While the white background is a good way to "clear up" the text, you would not want it to divert to solid white if the browser were not CSS3 compatible.

Now do the F12, find the indexDefaultMainContent and add the call background-color:rgba(255,255,255,0.2); to that element.

Note how it makes the text more legible. Excellent discussion at the link in post #33
/* background-color: rgba(255,255,255,0.3); */

Very educational, thanks!

I fiddled with your site. Tagging indexDefaultMainContent with the white rgba worked right out of the bag, of course. But interestingly (to me), I couldn't get the same effect with hex. I could have sworn I'd been able to achieve similar translucency with hex before. The hex for white is #FFFFFF and adding 33 (#FFFFFF33) should have gotten me there, but I couldn't do it. Maybe I used a webkit or something before? Or maybe I was thinking about applying translucency to layers in photoshop, totally unrelated to CSS. Dunno.

Anywho, rgba has firmly proved it's value to me! :)

Translucence is often misused when talking about transparency. Transparency is generally associated with clear. The more correct term for how well you can "see" through something is opacity.

Where you may be confused is that, in order to have 20% opacity in the #FFFFFF, the 33 is added at the beginning rather than at the end AND the result should be eight (8) versus six (6) characters. Had you entered #33FFFFFF, it would have worked IF your browser supported it.

It is the old method and doesn't give the non-compatible browser any alternative. Another reason for the dual calls in the css.:yes:

Mentioned it in an earlier thread but, http://tinyurl.com/y929h5f6 is a good read. Especially near the end of the article. Click on View Demo just before the Conclusion.:cool:

My browser must not support it because that's how I had it originally, with 33 in front.

Fabulous article, hit the nail right on the head. And the demo was highly cool, thanks!

Will this work with version 155e & 155f?

I've loaded it on all the 1.5.5 series and current github files for1.5.6. All work.

Will be looking at github files for 1.6.0 later this week.

Remember that we suggest loading the current ZC, use Clone a Template to make the template "yours", then load the mod to YOUR_TEMPLATE. That way, you always have the responsive_classic to fall back on if something breaks.

Thank you so much.

Just getting started with ZenCart. So far I like it much better than the old osCommerce, not that I was very good with that.

Again thank you for the quick reply, add-on and guidance.

jhande1:

Thank you so much.
Just getting started with ZenCart. So far I like it much better than the old osCommerce, not that I was very good with that.
Again thank you for the quick reply, add-on and guidance.No Problem. Got lots of relatives in the Keene, W Swanzey area. You'll find that, unlike other forums, the folks here at Zen Cart really are like family and want to help. That's one of the things that brought me here from OsC some 14 years ago.

dbltoe:

No Problem. Got lots of relatives in the Keene, W Swanzey area. You'll find that, unlike other forums, the folks here at Zen Cart really are like family and want to help. That's one of the things that brought me here from OsC some 14 years ago.

Years ago the osc forum was a bit more friendly/family like but it seemed to change.

So far searching the forum here it does give a nice family feel, glad to be here.

Moved from CT to NH in 2000. Wife and I lived in Keene for about a 1 1/2 years, to much like city in CT. Moved 3 1/2 hours north where it's quite and rural.

Hello,

I installed the color changer 1.1a to test zencart build @ https://www.salvagecrate.com. I noticed in the CSS checker I get 1 error.

Sorry! We found the following errors (1)
URI : http://www.salvagecrate.com/includes/templates/responsive_classic/css/stylesheet.css
291 #filter-wrapper select

Is this normal ? Or did i mess something up ? This is not my live site , i am just trying to get ready before i try this on the main site.

I used https://jigsaw.w3.org/css-validator/

Should I even worry about this ? I noticed some big name sites like ebay and amazon give tons of errors too and they work just fine.

I love what you said in the photo about btw. I have it as a reminder so i keep to whats important. I saw what you said about css errors and just wanted to make sure I had none.

My actual site is http://missingcord.com. As you can see instead of trying to spend all day trying to make it pretty , I just used the default color for responsive classic and made my store logo colors match it.

dbltoe:

Congratulations, you have now created 21+ stylesheet errors that could really screw up the way a browser presents your site to the world. IF it shows it at all!

I was asked in this thread about these 21+ stylesheet errors.
Where could you see them as errors?

I checked in all browsers and a few mobil devices https://www.idtagsonline.com/test/ colors appear are normal.

Thank you.

I installed the color changer 1.1a to test zencart build @ www.salvagecrate.com. I noticed in the CSS checker I get 1 error.

Sorry! We found the following errors (1)
URI : http://www.salvagecrate.com/includes...stylesheet.css
291 #filter-wrapper select

Is this normal ? Or did i mess something up ? This is not my live site , i am just trying to get ready before i try this on the main site.@jasonshanks. It looks like you made an addition in that area and might have missed something when doing a copy and paste.
Although the line numbers are different, the line 291 in your stylesheet.css> #filter-wrapper select{width5%;height:35px;}should be> #filter-wrapper select{width**:**5%;height:35px;}Note the missing colon.

HTH