Need help? Check out our Support site, then


Machu Picchu Color Palette for Dusk to Dawn

  1. 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') 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! :)

  2. 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?

  3. 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.

  4. But the gradient is standard on Dusk to Dawn, UNTIL you change the colour. Why does the gradient go away then?

  5. The default background color in the Appearance → Background page is only for solid colors, not specialized CSS3 gradients like Dusk to Dawn uses.

  6. @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.

  7. Oops, sorry about the duplicate. Not sure how that happened.

    @designsimply, nice job and I really like the colors.

  8. Already caught the duplicate for ya. :) Thanks about the colors!!

  9. Thanks.

Topic Closed

This topic has been closed to new replies.

About this Topic