Last changes to colour in theme Piano black

  • Unknown's avatar
    cuplet · Member ·

    I’ve been changing the default background colours in theme Piano Black from shades of black to shades of purple, but I’ve noticed one area that I’d overlooked! It’s in the comments section, and I’ve tried lots of different things having checked the source code, but I’m struggling to work out how to change the background colour for this bit. I thought it might be in the comment-author vcard part of the source code, but haven’t been able to work out the CSS to affect any changes here. Ideally, I’d like this:

    1. the background colour for the “comments box” (is this the “comment-author vcard”?) to be the same as the site title, which is set to #3f3050.
    2. the background colour of the “comment reply box” (is this the comment-content”?) to be the same as the footer.entry-meta, which is set to #614979
    3. the background colour of the leave a comment here field (is this the “comment-form-field comment-textarea”?) be the same as the footer.entry-meta, which is set to #614979.

    I’ve managed to change the font colour in some of these areas, but am also looking at changing the font colour in the following areas:

    comments title and reply title – I need to put in something along these lines I think, but this particular variation isn’t working, so some clarification on what I’ve done wrong here would be great:

    .comments-title h2 {
    color:#3f3050;
    }

    .reply-title h3 {
    color:#3f3050;
    }

    If anyone could help me unpick this, I would greatly appreciate it! :)

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

  • Unknown's avatar
    designsimply · Member ·

    1. the background colour for the “comments box” (is this the “comment-author vcard”?) to be the same as the site title, which is set to #3f3050.
    2. the background colour of the “comment reply box” (is this the comment-content”?) to be the same as the footer.entry-meta, which is set to #614979

    To adjust the comment background colors in the Piano Black theme, try starting with this and adjust the colors from there:

    .commentlist li.comment {
	background: #614979;
	border: 1px solid #403351;
}

.commentlist > li.comment.bypostauthor,
.commentlist .children > li.comment.bypostauthor {
	background-color: #403351;
	border-color: #322642;
}

    To find which selectors to use, I used the Chrome browser and I right-clicked on the the comment area and selected “Inspect Element.” Then I clicked on the HTML items in the web browser section until I found ones where there was a background or background-color set. If you use Firefox, there is an add-on called Firebug that will give you a similar web inspector browser tool and other browsers also have similar options.

  • Unknown's avatar
    designsimply · Member ·

    3. the background colour of the leave a comment here field (is this the “comment-form-field comment-textarea”?) be the same as the footer.entry-meta, which is set to #614979.

    The background color for the leave a comment form uses some transparency via RGBA color values. You can change them out like this:

    .highlander-dark #respond #comment-form-comment,
.highlander-dark #comment-form-share-text-padder {
	-moz-box-shadow: 2px 2px 3px rgba( 64, 51, 81, 0.55 ) inset;
	-webkit-box-shadow: 2px 2px 3px rgba( 64, 51, 81, 0.55 ) inset;
	box-shadow: 2px 2px 3px rgba( 64, 51, 81, 0.55 ) inset;
	background: #614979;
	background: rgba(97, 73, 121, 0.7);
	border: 1px solid #322642;
	border: 1px solid rgba( 50, 38, 66, 0.13 );
}

.highlander-dark #respond .comment-form-service {
	background: #403351;
	background: rgba( 64, 51, 81, 0.15 );
}

    Adjust the color codes as necessary.
    http://en.wikipedia.org/wiki/Web_colors#CSS_colors

  • Unknown's avatar
    designsimply · Member ·

    I noticed that some of the images in your latest post aren’t working.
    http://cup-let.com/2012/04/06/going-geek/

    If you delete images from the media library and they were used in posts, then that will break the image references. To fix it, you should re-upload and re-insert the images into the post again or re-insert different images from the media library.

  • Unknown's avatar
    cuplet · Member ·

    designsimply, you are quite simply awesome. as always, your brilliant knowledge has answered all my questions. You make my blog look fantastic!

    And thank you for mentioning about my missing pics. I was aware of it, but my laptop has been out of commission for a few weeks, so I’ve been unable to get to the pics to reattach them. But it’s back now, so expect one awesome looking website fully operational later in the day :D

  • Unknown's avatar
    designsimply · Member ·

    Your blog looks so great! I love how the transparency in the main content column looks.

  • The topic ‘Last changes to colour in theme Piano black’ is closed to new replies.