Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Machu Picchu Color Palette for Dusk to Dawn

  1. designsimply
    Staff

    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. raincoaster
    Member

    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. designsimply
    Staff

    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. raincoaster
    Member

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

  5. designsimply
    Staff

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

  6. thesacredpath
    Member

    @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. thesacredpath
    Member

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

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

  8. designsimply
    Staff

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

  9. axn700
    Member

    Thanks.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags