Page 5 of 6 FirstFirst ... 3456 LastLast
Results 41 to 50 of 52
  1. #41
    Join Date
    Feb 2009
    Posts
    581
    Plugin Contributions
    0

    Default Re: Support Thread - Responsive Color Changes for 155

    Quote Originally Posted by gunni View Post
    @ 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?
    Last edited by CaroleAs; 26 Aug 2017 at 01:22 PM.

  2. #42
    Join Date
    Feb 2009
    Posts
    581
    Plugin Contributions
    0

    Default Re: Support Thread - Responsive Color Changes for 155

    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.

  3. #43
    Join Date
    Aug 2010
    Location
    Israel
    Posts
    261
    Plugin Contributions
    0

    Default Re: Support Thread - Responsive Color Changes for 155

    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) .

  4. #44
    Join Date
    Feb 2009
    Posts
    581
    Plugin Contributions
    0

    Default Re: Support Thread - Responsive Color Changes for 155

    Quote Originally Posted by gunni View Post
    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!

  5. #45
    Join Date
    Aug 2010
    Location
    Israel
    Posts
    261
    Plugin Contributions
    0

  6. #46
    Join Date
    Apr 2010
    Posts
    884
    Plugin Contributions
    0

    Default Re: Support Thread - Responsive Color Changes for 155

    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!
    Last edited by Feznizzle; 31 Oct 2017 at 08:24 PM.

  7. #47
    Join Date
    Jan 2004
    Location
    N of San Antonio TX
    Posts
    6,343
    Plugin Contributions
    8

    Default Re: Support Thread - Responsive Color Changes for 155

    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."

  8. #48
    Join Date
    Apr 2010
    Posts
    884
    Plugin Contributions
    0

    Default Re: Support Thread - Responsive Color Changes for 155

    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!

  9. #49
    Join Date
    Jan 2004
    Location
    N of San Antonio TX
    Posts
    6,343
    Plugin Contributions
    8

    Default Re: Support Thread - Responsive Color Changes for 155

    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); */

  10. #50
    Join Date
    Apr 2010
    Posts
    884
    Plugin Contributions
    0

    Default Re: Support Thread - Responsive Color Changes for 155

    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! :)

 

 
Page 5 of 6 FirstFirst ... 3456 LastLast

Similar Threads

  1. v155 Responsive Classic (built in to Zen Cart v1.5.5) [Support Thread]
    By picaflor-azul in forum Templates, Stylesheets, Page Layout
    Replies: 435
    Last Post: 27 Nov 2017, 02:14 PM
  2. v151 Tableau Responsive Theme - Support Thread
    By numinix in forum Addon Templates
    Replies: 589
    Last Post: 24 Nov 2017, 02:32 AM
  3. Autoresponder+ for ZC v1.3.x [support thread]
    By Steven300 in forum All Other Contributions/Addons
    Replies: 229
    Last Post: 28 Jun 2017, 12:32 AM
  4. v155 Responsive Classic (built in to Zen Cart v1.5.5) [Support Thread]
    By picaflor-azul in forum Addon Templates
    Replies: 0
    Last Post: 17 Mar 2016, 12:30 AM
  5. v154 Order Steps Responsive [Support Thread]
    By davewest in forum Templates, Stylesheets, Page Layout
    Replies: 0
    Last Post: 5 Jul 2015, 06:11 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR