Machu Picchu Color Palette for Dusk to Dawn

designsimply · Member · Apr 5, 2012 at 8:04 pm

To change out the color scheme for the Dusk to Dawn theme on WordPress.com, including the CSS3 linear gradients, try this Machu Picchu inspired color palette by adding the following to your Appearance → Custom Design → CSS page:

#super-super-wrapper {
	background:linear-gradient(bottom,rgb(34,34,34) 0%,rgb(136,136,85) 30%,rgb(34,51,34) 90%);
	background:-o-linear-gradient(bottom,rgb(34,34,34) 0%,rgb(136,136,85) 30%,rgb(34,51,34) 90%);
	background:-moz-linear-gradient(bottom,rgb(34,34,34) 0%,rgb(136,136,85) 30%,rgb(34,51,34) 90%);
	background:-webkit-linear-gradient(bottom,rgb(34,34,34) 0%,rgb(136,136,85) 30%,rgb(34,51,34) 90%);
	background:-ms-linear-gradient(bottom,rgb(34,34,34) 0%,rgb(136,136,85) 30%,rgb(34,51,34) 90%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#222222',endColorstr='#223322');
	background:-webkit-gradient(linear,left bottom,left top,color-stop(0,#222),color-stop(0.3,#885),color-stop(.9,#232));
}

#main {
	background:#576f2c;
}

#content {
	background:white;
	border-radius:3px;
}

#site-title a {
	color:#576f2c;
}

a {
	color:#232;
}

.entry-header {
	border-left:6px solid #3f7f00;
}

.entry-title a:hover {
	color:#3f7f00;
	text-decoration:underline;
}

input#s {
	background:#121 url('http://s1.wp.com/wp-content/themes/pub/dusk-to-dawn/images/search.png?m=1391151086i') no-repeat 10px 8px;
}

#colophon,#content .nav-previous a,#content .nav-next a {
	background-color:#050f05;
	color:#3f7f00;
}

#site-generator {
	color:#444;
}

If you’d like to try adjusting the colors on your own, copy the code above and swap out the colors.

If you come up with particularly awesome color palette for your Dusk to Dawn theme, post are reply here and let us know about it! :)

raincoaster · Member · Apr 5, 2012 at 8:07 pm
Copy link
I have a question about Dusk to Dawn. Using the regular theme options, I changed the background colour to green. Unfortunately, this wiped out the gradient. Is there a non-Custom CSS way to get the gradient back?
designsimply · Member · Apr 5, 2012 at 8:11 pm
Copy link
Raincoaster! I was totally going to mention the color palette example was inspired by your request from earlier. Updates to the code have made it so you can customize the colors using CSS3 rules, and you do need to have the Custom Design upgrade in order to make changes like this. Many updates have been made to allow CSS3 code through, the editor has been updated to Ace, and more updates are on the way.
raincoaster · Member · Apr 5, 2012 at 8:19 pm
Copy link
But the gradient is standard on Dusk to Dawn, UNTIL you change the colour. Why does the gradient go away then?
designsimply · Member · Apr 5, 2012 at 8:22 pm
Copy link
The default background color in the Appearance → Background page is only for solid colors, not specialized CSS3 gradients like Dusk to Dawn uses.
thesacredpath · Member · Apr 5, 2012 at 8:36 pm
Copy link
@raincoaster, you could create a gradient image with transparency (PNG) and add that in addition to the solid color and the image would overlay the color.
thesacredpath · Member · Apr 5, 2012 at 8:38 pm
Copy link
Oops, sorry about the duplicate. Not sure how that happened.

@designsimply, nice job and I really like the colors.
designsimply · Member · Apr 5, 2012 at 8:39 pm
Copy link
Already caught the duplicate for ya. :) Thanks about the colors!!
axn700 · Member · Apr 9, 2012 at 2:40 pm
Copy link
Thanks.