Changing the gradient in the Hive default theme

cmscritic · 2012-09-06 15:57:18

I’m quite impressed with 4.5 and it’s new look for both the front and back end of the system. I had planned to use it for my personal site (I get tired of WordPress at times) but want to be able to modify the gradient used in the theme. The problem is, I suck at figuring out how to match the colors nicely to come up with a good gradient. My primary color that i use on all of my sites is #006699 and I simply need a gradient that uses that color for my nav bar, buttons and for when items on the nav are hovered. Basically, I’m looking for a blue version of the hive theme using this color: #006699

I’m unsure if that makes perfect sense or not. I’ve tried using css gradient generators but haven’t had much luck coming up with a good fit.

Any help would be hugely appreciated and i’m happy to tip via paypal.

zero · 2012-09-06 18:58:00

Try these:
#398ebb to #00476a
#549fc5 to #003a57
#4888a8 to #003a57

and for hover:

to #006699
#79b5d3 to #1878a8
#79b5d3 to #006699

joebaich · 2012-09-07 01:43:25

Assuming your top menu bar is 40px high too, you could try as a start point and tweak from there:

background-image:-moz-linear-gradient(50% 0% -90deg,rgb(0,144,184) 0%,rgb(0,102,153) 100%);
background-image:-webkit-gradient(linear,50% 0%,50% 100%,color-stop(0, rgb(0,144,184)),color-stop(1, rgb(0,102,153)));
background-image:-webkit-linear-gradient(-90deg,rgb(0,144,184) 0%,rgb(0,102,153) 100%);
background-image:-o-linear-gradient(-90deg,rgb(0,144,184) 0%,rgb(0,102,153) 100%);
background-image:-ms-linear-gradient(-90deg,rgb(0,144,184) 0%,rgb(0,102,153) 100%);
background-image:linear-gradient(-90deg,rgb(0,144,184) 0%,rgb(0,102,153) 100%);
height:40px;
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff0090b8,endColorstr=#ff006699,GradientType=0)";
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff0090b8,endColorstr=#ff006699,GradientType=0);

Or better still, take @philwareham’s offer

Last edited by joebaich (2012-09-07 01:56:57)

tye · 2012-09-07 01:57:21

Bloody hell Phil…. I got a site which needs coding – still feeling generous :) :)

cmscritic – I’d jump on that quick sharpish

joebaich · 2012-09-07 02:05:53

tye wrote:

Bloody hell Phil…. I got a site which needs coding – still feeling generous :) :)

It is a generous offer, and the fact that Phil has coded his TXP 4.5 CSS work using Compass and SASS and so can produce an amended cmscritic blue version faster than a speeding bullet doesn’t diminish that.

wet · 2012-09-07 05:08:23

cmscritic wrote:

I’m quite impressed with 4.5 and it’s new look for both the front and back end of the system.

Glad you like it! If you’d need any help for pouring your impressions into an article on CMSCritic do not hesitate to ask ;)

philwareham · 2012-09-07 07:39:05

Yeah, all the colours used in the theme are Sass variables so they can be changed in seconds. Any sass users can grab the sass files from my GitHub repo.

zero · 2012-09-07 09:18:27

joebaich wrote:

background-image:-moz-linear-gradient(50% 0% -90deg,rgb(0,144,184) 0%,rgb(0,102,153) 100%); 8<snipped the rest >8

I’m glad all those percentages have disappeared from the default css! I much prefer the understandable #006699! Thanks, Phil!

zero · 2012-09-07 14:50:11

Do you ever get tired of all those numbers, percentages, letters that don’t make words, funny brackets, symbols and intense left-brain activity? Glad it’s Friday?

Here’s a beautiful book that contains every RGB colour that exists. Would love to get my hands on it!

philwareham · 2012-09-07 14:55:55

I preferred it when we used to have lovely names for our HTML colours like SaddleBrown and LemonChiffon.

zero · 2012-09-07 15:04:19

philwareham wrote:

I preferred it when we used to have lovely names for our HTML colours like SaddleBrown and LemonChiffon.

Now there’s a project! Find lovely names for 16.7 million colours :-)

Textpattern CMS

Textpattern CMS support forum

#1 2012-09-06 15:57:18

Changing the gradient in the Hive default theme

#2 2012-09-06 18:58:00

Re: Changing the gradient in the Hive default theme

#3 2012-09-07 01:43:25

Re: Changing the gradient in the Hive default theme

#4 2012-09-07 01:57:21

Re: Changing the gradient in the Hive default theme

#5 2012-09-07 02:05:53

Re: Changing the gradient in the Hive default theme

#6 2012-09-07 05:08:23

Re: Changing the gradient in the Hive default theme

#7 2012-09-07 07:39:05

Re: Changing the gradient in the Hive default theme

#8 2012-09-07 09:18:27

Re: Changing the gradient in the Hive default theme

#9 2012-09-07 14:50:11

Re: Changing the gradient in the Hive default theme

#10 2012-09-07 14:55:55

Re: Changing the gradient in the Hive default theme

#11 2012-09-07 15:04:19

Re: Changing the gradient in the Hive default theme

Board footer