Support Thread - Responsive Color Changes for 155

[dbltoe]

Link wont help. However I can give you the color css file or whatever file you think could be causing the problem.

You may think that, but (seriously) think about that.

Which would I rather do? Spend time going through your site to fix the problem or just send you a file/filename and be done with it?

The request for a link is in the Posting Tips for a reason. What could be done in minutes with a link, you want me to spend hours back and forth guessing each time?

I'm happy to help. I just need a little help from you as well. Like your original post. Maybe if we knew which colors you changed? Was is simply a font color change in a Nav bar? More involved I would GUESS since you are seeing a big difference.

Help us out here.

[pixelpadre]

The problem does not exist for my earlier v155 sites just the latest 155f. Colors changed were the two bars above and below the header wrapper. I will also add that I changed the color of the hamburger successfully.

[dbltoe]

I would LOVE to be able to lead you out of the darkness on this, BUT...

1. If both the earlier and 155f sites are using responsive_classic with our mod, what is the difference that makes the colors not work? I ask because, if they are NOT both using responsive_classic with our mod, it stands to reason one would work and one might not. At least I hope so.
2. In the other post, you mentioned that you "changed line 27" and that worked. There is only one line 27 in any of the modded template's css files that deals with a color. That line is in the stylesheet_colors_split.css for an a:hover. You will need to make bookmarklets to view the hover on an Android phone.
3. I know where several bars are located (retired military), but you don't mention what bars you are talking about. Please don't answer, "the green ones."
4. You did mention the headerWrapper, but you didn't specify whether you meant the headerWrapper call in the css (way far away from line 27 BTW) or the headerWrapper line when viewing the source, or some other location.
5. You also mentioned you managed to change the hamburger. That is a fontawesome icon that is controlled by stylesheet_css_buttons.css. It is not part of the mod and, unless physically changed, is the same all over as far as colors.

I'll make one last try for one eensy bit of information. What is the name of the file in which you changed line 27? See number 2, above.

[pixelpadre]

I would LOVE to be able to lead you out of the darkness on this, BUT...

1. If both the earlier and 155f sites are using responsive_classic with our mod, what is the difference that makes the colors not work? I ask because, if they are NOT both using responsive_classic with our mod, it stands to reason one would work and one might not. At least I hope so.
2. In the other post, you mentioned that you "changed line 27" and that worked. There is only one line 27 in any of the modded template's css files that deals with a color. That line is in the stylesheet_colors_split.css for an a:hover. You will need to make bookmarklets to view the hover on an Android phone.
3. I know where several bars are located (retired military), but you don't mention what bars you are talking about. Please don't answer, "the green ones."
4. You did mention the headerWrapper, but you didn't specify whether you meant the headerWrapper call in the css (way far away from line 27 BTW) or the headerWrapper line when viewing the source, or some other location.
5. You also mentioned you managed to change the hamburger. That is a fontawesome icon that is controlled by stylesheet_css_buttons.css. It is not part of the mod and, unless physically changed, is the same all over as far as colors.

I'll make one last try for one eensy bit of information. What is the name of the file in which you changed line 27? See number 2, above.

Sorry if I misled you. I am not using any mods, just classic responsive theme. The hamburger color is controllable in css. The stylesheet_colors.css can be seen here with line 27 mainwrapper (not headerwrapper) color...amongst others. floridavoterregistration.com/stylesheet_colors.css. Like I said, it appears this is a limitation of classic responsive out of the box. Not a big deal having no colors for the android version. I just wasted a lot of time trying to figure out why desktop changes but android does not.

[pixelpadre]

Ok. So I cloned and installed. Slick. For whatever reason......out of the box CR will not modify android colors. Someone should chase that down because clearly, your mod will change android colors.

[dbltoe]

You've come across the major reason we created the mod for changing color. If you look at the stylesheet (you know you could have posted it with the # symbol) you'll see the following:

/*bof font colors*/body, .messageStackSuccess, .messageStackCaution, #tagline, #productQuantityDiscounts table, .categoryListBoxContents a, h2.greeting a {color:#000000;}
a:link, #navEZPagesTOC ul li a, a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, .sideBoxContent a:visited, fieldset fieldset legend, #navBreadCrumb a:visited, #siteinfoLegal a, h3.rightBoxHeading a:hover, h3.leftBoxHeading a:hover, .cartTotalDisplay, .cartOldItem, .specialsListBoxContents, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .list-price, .itemTitle a, h2.greeting, #icon, h1, .header .fa-bars {color:#05a5cb;}
a:visited, .cat-count, .itemTitle a:hover, h2.greeting a:hover {color:#666;}
a:active {color:#0000ff;}
h2, h3, .cartAttribsList, #cart-box {color:#444;}
.blue{color:#05a5cb !important;}
.blue:hover{color:#036f89 !important;}
.alert {color: #8b0000;}
legend, .specialsListBoxContents a, .centerBoxContentsAlsoPurch a, .centerBoxContentsFeatured a, .centerBoxContentsSpecials a, .centerBoxContentsNew a, .productPriceDiscount{color:#333;}
.messageStackWarning, .messageStackError, #navMainWrapper, #navMain ul li a, #navCatTabsWrapper, #navCatTabs li a, #navCatTabs li a:hover, #navCatTabs li:hover, #navEZPagesTop, #navEZPagesTop li a, .pagination li a, #navSuppWrapper, #navSupp li a, #siteinfoIP, #siteinfoLegal, #bannerSix, #siteinfoLegal a:hover, h2.centerBoxHeading, h3.rightBoxHeading, h3.leftBoxHeading, h3.rightBoxHeading a, h3.leftBoxHeading a, .seDisplayedAddressLabel, TR.tableHeading, #shippingEstimatorContent h2, #shippingEstimatorContent th, #checkoutConfirmDefault .cartTableHeading, #filter-wrapper, .navSplitPagesLinks a, .current, .productListing-rowheading a, .productListing-rowheading a, .prod-list-wrap, #productQuantityDiscounts table tr:first-child td, #reviewsWriteHeading, #sendSpendWrapper h2, #accountDefault #sendSpendWrapper h2, #gvFaqDefaultSubHeading, #checkoutPayAddressDefaultAddress, #checkoutShipAddressDefaultAddress, #accountLinksWrapper h2, h2#addressBookDefaultPrimary, #myAccountPaymentInfo h3, #myAccountShipInfo h3, #myAccountPaymentInfo h4, #myAccountShipInfo h4, input.submit_button, input.submit_button:hover, input.cssButtonHover, span.normal_button{color: #ffffff;}
.cartNewItem {color:#33cc33;}
.productSpecialPrice, .productSalePrice, .productSpecialPriceSale, .productPriceDiscount {color:#ff0000;}
.categoryListBoxContents a:hover, .categoryListBoxContents:hover a{color:#05a5bc;}
.list-more{color:#fff !important;}
/*bof background colors*/
body, #mainWrapper, #headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #contentMainWrapper, #headerWrapper, .sideBoxContent, .rightBoxContent, .rowOdd, #productQuantityDiscounts table, #accountLinksWrapper {background:#fff;}
input:focus, select:focus, textarea:focus,  .specialsListBoxContents:hover, .centerBoxContentsSpecials:hover, .centerBoxContentsAlsoPurch:hover, .centerBoxContentsFeatured:hover, .centerBoxContentsNew:hover, .categoryListBoxContents:hover, .sideBoxContentItem:hover, .productListing-odd, #pinfo-right, #sendSpendWrapper {background:#f4f4f4;}
#mainWrapper {background:#00308f;}
.messageStackCaution {background-color:#ffff66;}
fieldset, .rowEven, #shippingEstimatorContent tr:nth-child(odd), #order-comments, ul.list-links li:hover, ol.list-links li:hover, #no-products, .listing-wrapper:nth-child(odd), #reviews-write-wrapper, #gvFaqDefaultContent, #checkoutPayAddressDefault .instructions, #checkoutShipAddressDefault .instructions, #addressBookDefault .instructions, #myAccountNotify, #myAccountGen, .reviews-wrapper, #accountHistInfo table td, #prevOrders td, #myAccountPaymentInfo, #myAccountShipInfo, #accountDefault #sendSpendWrapper{background:#eee;}
 .tableHeading{background-color:#e9e9e9;}
*************

Note that #mainWrapper is listed twice in the body color call and once separately. If I recall, it is listed in stylesheet.css as well.

Whichever loads last is king. You can put #00308f in a call twenty times, but if the last-loading stylesheet has #fff -- you're gonna get white.

AND>>>> Now that I've seen the site, I can tell you that the color is never going to show on any mobile phone UNLESS you force the phone to show at least one of the the side columns. By default, the left and right columns do NOT display on a mobile phone.

If you want to see that the color is really there, change the background on line 18 of stylesheet_colors.css to none or to the #00308F. Or, place your mouse over the right-hand side of your browser and drag the browser so it closes to the left. At approximately 1000px, the desktop will show the same as the android.

IOW, it's been doing what it was supposed to do by default from the beginning.

[pixelpadre]

Couple of things. I am back to square one.

204: #navMainWrapper {background-color:#0a4d90;background-color:rgba(10,77,144);} if I change the color on this line the desktop works as expected...but android is still stuck on a default color.

Also I am not following you on displaying left and right columns on an android.

Also dragging firefox to small window gives a different result from an android.

[pixelpadre]

Unfortunately firefox element inspection is not possible on an android, otherwise we would not be having this discussion.

[dbltoe]

204: #navMainWrapper {background-color:#0a4d90;background-color:rgba(10,77,144);}

First, the line is invalid unless you add the a value to the rgba call. I don't believe the line will be accepted. Should be something like

204: #navMainWrapper {background-color:#0a4d90;background-color:rgba(10,77,144,0.7);}

Also, you need to run buy a lotto ticket while you can Or maybe not. Depends on whether or not you think it's lucky to find the two biggest things that go away on a mobile phone.

The mainWrapper is hidden by the center column in the phone view because the side columns (categories on the left and Search on the Right) are not shown on a phone unless they are forced to be. Otherwise they are accessed by the hamburger. The navMainWrapper is replaced in responsive mode by the css buttons with the hamburger.

So, you're two for two. Unless you get out the explosives and really blow up what Zen Cart is designed to do on a phone, you will never see the background colors of the mainWrapper OR the navMainWrapper. Depending on the tablet screen size, you may see the navMainWrapper on a tablet. The iPad shows the navMainWrapper in landscape but not portrait.

[pixelpadre]

We are getting close but still far away. Your default powder blue with the hamburger is still on my android, yet my desktop shows a different color. And its not the cache.