Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

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

cmscritic
Member
From: Edmonton, Alberta, Canada
Registered: 2009-07-09
Posts: 29
Website

Changing the gradient in the Hive default theme

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.

Offline

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

zero
Member
From: Lancashire
Registered: 2004-04-19
Posts: 1,443
Website

Re: Changing the gradient in the Hive default theme

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

and for hover:
  1. to #006699
    #79b5d3 to #1878a8
    #79b5d3 to #006699

Gud One Blog
Wondrous Healing Wondrous ways to a healthy old age

Offline

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

joebaich
Member
From: DC Metro Area and elsewhere
Registered: 2006-09-24
Posts: 507
Website

Re: Changing the gradient in the Hive default theme

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)

Offline

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

tye
Member
From: Pottsville, NSW
Registered: 2005-07-06
Posts: 858
Website

Re: Changing the gradient in the Hive default theme

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

cmscritic – I’d jump on that quick sharpish

Offline

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

joebaich
Member
From: DC Metro Area and elsewhere
Registered: 2006-09-24
Posts: 507
Website

Re: Changing the gradient in the Hive default theme

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.

Offline

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

wet
Developer
From: Lenzing, Austria
Registered: 2005-06-06
Posts: 3,267
Website

Re: Changing the gradient in the Hive default theme

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

Offline

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

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,532
Website GitHub Twitter

Re: Changing the gradient in the Hive default theme

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.

Offline

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

zero
Member
From: Lancashire
Registered: 2004-04-19
Posts: 1,443
Website

Re: Changing the gradient in the Hive default theme

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!


Gud One Blog
Wondrous Healing Wondrous ways to a healthy old age

Offline

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

zero
Member
From: Lancashire
Registered: 2004-04-19
Posts: 1,443
Website

Re: Changing the gradient in the Hive default theme

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!


Gud One Blog
Wondrous Healing Wondrous ways to a healthy old age

Offline

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

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,532
Website GitHub Twitter

Re: Changing the gradient in the Hive default theme

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

Offline

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

zero
Member
From: Lancashire
Registered: 2004-04-19
Posts: 1,443
Website

Re: Changing the gradient in the Hive default theme

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


Gud One Blog
Wondrous Healing Wondrous ways to a healthy old age

Offline

Board footer

Powered by FluxBB