Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Opera Browser Displays Wrong Header Color
#1
I'm using GS with the original Innovation theme. I've made extensive changes in styles.css (all through the admin Theme editor). Basically, I've changed the color pallet to a medium and dark green. I also edited the header gradient to reflect the green pallet, from a medium to dark green top to bottom.

I've viewed my changes in Firefox, IE, Safari, Chrome, and Opera. All browsers display the new colors correctly except for Opera.

Opera displays the page content, side bar, and footer colors as expected. However, it displays the original blue gradient header instead of the green gradient.

I've cleared the cache and restarted Opera, but it continues to display the blue. I even checked to see what Opera is caching, and it shows the green gradient in the source.

Anyone else experience weird display colors with Opera? Is there something I need to address to make sure Opera sees what other browsers see?
Reply
#2
URL please !

And version of Opera, Operating System etc.
|--

Das deutschsprachige GetSimple-(Unter-)Forum:   http://get-simple.info/forums/forumdisplay.php?fid=18
Reply
#3
(2013-04-16, 16:51:43)Connie Wrote: URL please !

And version of Opera, Operating System etc.

Site URL http://www.fundingtealeye.com/index-original/

Also a completely separate installation, it's gray instead of green and the results are the same. http://www.dablue.net/index.php

About Opera and OS
Version 12.15
Build 1748
Platform Win32
System Windows Vista
Browser identification Opera/9.80 (Windows NT 6.0) Presto/2.12.388 Version/12.15
Reply
#4
I like the colours, especially the green.

I am looking at your css at line 33
Code:
.header {
    /*background: #6B94B4;
    background: -moz-linear-gradient(top, #6B94B4 0%, #316594 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6B94B4), color-stop(100%,#316594));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6B94B4', endColorstr='#316594',GradientType=0 );
    */
    background: #6B94B4;
    background: -moz-linear-gradient(top, #0f696d 0%, #094346 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0f696d), color-stop(100%,#094346));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0f696d', endColorstr='#094346',GradientType=0 );
    height:80px;
    border-bottom:#094346 1px solid;
}

I take it the commented out part is the original? There was a background flat colour, then gradient declarations for mozilla then webkit then the dreaded IE filters but there never was a gradient for opera or non-specified browsers, just the blue background.

You have changed the colours for mozilla, webkit and IE but Opera still shows the plain blue backgound, and I don't think that single filter is enough to make all IE versions fall into line either but I wouldn't care enough to want to find out.

These browser specific gradient things will make your brain sweat in no time. I normally find an online background gradient css generator and just copy and paste the code and touch the wood of my chair leg while I do it. Or at least just change that
Code:
background: #6B94B4;
to the green so when the gradients don't work you get a flat green, or forget all the browser specific stuff and just put in a single W3C declaration and a background colour as fallback (and your site will load faster).

HTH. I could be wrong.
Reply
#5
http://www.colorzilla.com/gradient-editor/
NEW: SA Admin Toolbar Plugin | View All My Plugins
- Shawn A aka Tablatronix
Reply
#6
(2013-04-17, 00:04:53)Timbow Wrote: I like the colours, especially the green.

These browser specific gradient things will make your brain sweat in no time. I normally find an online background gradient css generator and just copy and paste the code and touch the wood of my chair leg while I do it. Or at least just change that
Code:
background: #6B94B4;
to the green so when the gradients don't work you get a flat green, or forget all the browser specific stuff and just put in a single W3C declaration and a background colour as fallback (and your site will load faster).

HTH. I could be wrong.

I made that change, and sure enough!!

Oh wow, now I just fill silly. I couldn't figure out the purpose of that separate background color, cause I initially check everything in Fire Fox, and changing that had no effect on the gradient. So... now I know. Opera just displays that single color, now I just have to find something that works with the rest of the page colors.

Thanks!!

(2013-04-17, 00:18:24)shawn_a Wrote: http://www.colorzilla.com/gradient-editor/

Ultimate indeed. I actually used the gradient editor in photo shop when creating the colors I wanted. Of course, PS doesn't generate the CSS code.

Thanks, Shawn.
Reply
#7
Don't feel silly. html5 remains absurdly complicated. In theory it will become simpler.

I think that maybe at the time Opera just didn't do gradients, but now it does, so you can have an even more complicated css until they all agree on the syntax that has already been agreed anyway.
Reply
#8
That website gives you all the prefixes
I think its o-
NEW: SA Admin Toolbar Plugin | View All My Plugins
- Shawn A aka Tablatronix
Reply




Users browsing this thread: 1 Guest(s)