Printable View
Thanks! Now, I know I am working on the correct file.Quote:
Originally Posted by gunni
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) .
Oooooooooh! THAT might explain why I was not seeing anything. I never knew of this shortcut! Mystery solved!!! I can keep on going!Quote:
Originally Posted by gunni
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! :)