Changing post color in Next Saturday

  • Unknown's avatar
    jfn2nd · Member ·

    I’m just learning CSS, so this is probably a really basic question.

    I use the theme “Next Saturday”, and I am wondering if I can change the main Greenish post color? If I can, I’m interested in knowing what the code is like, so I know where to look on the style sheet. And, if I can change the green color, will one code change get rid of the color on the home page, and the individual posts/pages, or will I have to change the color in multiple places on the style sheet?

    Thanks

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    designsimply · Member ·

    Basic questions are welcome any time!

    Wow, there are quite a few accent colors for various things in Next Saturday. Here’s the main one to start: 

    #primary {
	background: burlywood;
}

    Looking for the whole set…

  • Unknown's avatar
    designsimply · Member ·

    Oh, replace “burlywood” with your color of choice.

  • Unknown's avatar
    designsimply · Member ·

    Woah, the color code appears 2 times, but the accent color code #7ED4A8 appears 32 times!

    First, there are a couple image elements that contain the green color, you would need to recreate these images with the colors you want and then upload them to your media librar and use the image URLs from there, or you might be able to just use different images for the left and right arrows. 

    #description-bar-shadow {
	background: url('http://s0.wp.com/wp-content/themes/pub/next-saturday/images/description-shadow.png?m=1391151751i') no-repeat;
}
.nav-previous a, .previous-image a {
background: url('http://s0.wp.com/wp-content/themes/pub/next-saturday/images/left-arrow.png?m=1391151751i') no-repeat;
}
.nav-next a, .next-image a {
	background: url('http://s0.wp.com/wp-content/themes/pub/next-saturday/images/right-arrow.png?m=1391151751i') no-repeat;
}

    With CSS, you can change out the colors based on what you see in the theme’s original stylesheet. I think this should do it for changing the green backgroud out. Of course, you’ll want to pick your own colors. I just picked some for illustration purposes: 

    /* ========== Change #6ab690 to #DEB887 ========== */
#primary,
#secondary {
	background: #DEB887;
}
/* ========== Change #5da581 to #5F9EA0 ========== */
blockquote {
	border-left: 2px solid #5F9EA0;
}
abbr, acronym, dfn {
	border-bottom: 1px dotted #5F9EA0;
}
hr {
	background-color: #5F9EA0;
}
#primary,
.entry-content img,
#content .gallery a img,
.format-image .image-wrapper img,
#comments li,
#comments ul li,
#comments .avatar,
#wp-calendar,
#wp-calendar tbody td {
 	border: 1px solid #5F9EA0;
}
.archive-title,
.entry-meta,
#respond input[type=text],
#respond textarea,
	-moz-box-shadow: 0px 0px 1px #5F9EA0;
	-webkit-box-shadow: 0px 0px 1px #5F9EA0;
	box-shadow: 0px 0px 1px #5F9EA0;
}
.entry-content table,
.comment-cont ent table,
#reply-title,
.widget_rss ul li,
.widget_twitter .tweets li {
	border-bottom: 1px solid #5F9EA0;
}
.entry-content td,
.comment-content td {
	border-top: 1px solid #5F9EA0;
}
.highlight-box,
#author-description,
#respond input[type=text],
#respond textarea {
	text-shadow: 0 1px 0 #5F9EA0;
}
.page-link a,
#wp-calendar {
 	box-shadow: 0 0 1px #5F9EA0;
}
/* ========== Change #5da581 to #5F9EA0 and change #579777 to #708090 ========== */
.highlight-box,
pre,
.archive-title,
.entry-meta,
#respond input[type=text],
#respond textarea {
	background: #5F9EA0;
	border: 1px solid #708090;
}
.entry-date-shadow,
.bypostauthor {
	background: #5F9EA0;
}
  • Unknown's avatar
    jfn2nd · Member ·

    That totally worked! Yay! Thank you so much!

    I’m ok with the green color in some places, as it’s a good accent color… the other thing I would like to change is the yellow color for the post dates (it’s a big yellow circle).

    I know this is about color, but, I’m wondering also … can the width of the post (main) column be changed, and made wider?

    Again, Thank You So Much!

  • Unknown's avatar
    thesacredpath · Member ·

    The Next Saturday theme just went to the very bottom of my theme list if you want to customize.

    :-)

  • Unknown's avatar
    thesacredpath · Member ·

    There are three overlapping circles. The top listing is the main color, the second is the next circle down, and the last is the bottom circle.

    .entry-date {
background-color: #F3D769;
}

.entry-date-bottom {
background-color: #D1B74C;
}

.entry-date-shadow {
background-color: #5DA581;
}
  • Unknown's avatar
    designsimply · Member ·

    The Next Saturday theme just went to the very bottom of my theme list if you want to customize.

    Heh. :)

  • Unknown's avatar
    jfn2nd · Member ·

    You are the best! Thanks!

    Maybe I’ll get around to customizing more of the colors… but, for now, I think I’ve got a color scheme I can live with.

    Thanks again for the quick reply, and for all your help!

  • Unknown's avatar
    thesacredpath · Member ·

    You are welcome.

  • Unknown's avatar
    thesacredpath · Member ·

    @designsimply, thank for adding in the missing backtick.

  • Unknown's avatar
    designsimply · Member ·

    @thesacredpath, :) I’ve got ya covered.

  • The topic ‘Changing post color in Next Saturday’ is closed to new replies.