• Where in this CSS /*
    Theme Name: Pop Music
    Theme URI: http://test.qualitywordpress.com/?preview_theme=popmusic
    Description: Pop music is a tribute to popular artists and bands in the world today.
    Version: 1.0
    Author: qualitywordpress.com
    Author URI: http://qualitywordpress.com
    */

    /* General */

    body {
    margin: 0;
    background: url(“images/bg.gif”);
    }

    h1, h2, h3, h4 {
    margin: 0;
    }

    img {
    border: 0;
    }

    .clear {
    clear: both;
    height: 1px;
    overflow: hidden;
    }

    /* Page */

    #page {
    margin: 0 auto;
    width: 1004px;
    }

    /* Header */

    #header {
    width: 1004px;
    height: 369px;
    background: url(“images/header.jpg”) no-repeat;
    position: relative;
    }

    /* Header – Info */

    #header #header-info {
    position: absolute;
    top: 40px;
    left: 500px;
    }

    #header #header-info h1 {
    color: #ffffff;
    font: normal 35px “Century Gothic”, Verdana;
    }

    #header #header-info h1 a {
    color: #ffffff;
    text-decoration: none;
    }

    #header #header-info .description {
    color: #ffffff;
    font: bold 12px “Century Gothic”, Verdana;
    }

    /* Header – Menu */

    #header #header-menu {
    position: absolute;
    top: 0px;
    left: 26px;
    height: 53px;
    }

    #header #header-menu ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    height: 53px;
    }

    #header #header-menu ul li {
    float: right;
    height: 53px;
    margin-right: 8px;
    font: bold 10px/43px “Century Gothic”, Verdana;
    color: #ffffff;
    text-transform: lowercase;
    background: url(“images/header_menu_left.gif”) no-repeat;
    }

    #header #header-menu ul li a {
    color: #ffffff;
    text-decoration: none;
    padding: 0 40px;
    background: url(“images/header_menu_right.gif”) no-repeat right top;
    display: block;
    }

    #header #header-menu ul li a:hover {
    text-decoration: underline;
    }

    #header #header-menu ul li ul {
    display: none;
    }

    /* Header – Topbar */

    #header #topbar {
    position: absolute;
    top: 170px;
    left: 0px;
    width: 1004px;
    height: 201px;
    color: #ffffff;
    font: normal 12px “Century Gothic”, Verdana;
    }

    #header #topbar h3 {
    font: bold 15px “Century Gothic”, Verdana;
    color: #ffffff;
    }

    #header #topbar ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    }

    #header #topbar ul li {
    padding-top: 12px;
    color: #ffffff;
    font: normal 12px “Century Gothic”, Verdana;
    }

    #header #topbar ul li a {
    color: #ffffff;
    text-decoration: none;
    }

    #header #topbar ul li a:hover {
    text-decoration: underline;
    }

    /* Header – Topbar – Boxes */

    #header #topbar #topbar-left {
    width: 170px;
    padding: 35px 33px;
    float: left;
    }

    #header #topbar #topbar-center {
    width: 306px;
    float: left;
    padding: 12px 0 0 30px;
    }

    #header #topbar #topbar-right {
    width: 367px;
    float: left;
    padding: 12px 0 0 30px;
    }

    /* Main */

    #main {
    width: 1004px;
    background: url(“images/main.gif”) repeat-y;
    }

    #main-top {
    width: 1004px;
    background: url(“images/main_top.gif”) no-repeat;
    }

    #main-bottom {
    width: 992px;
    padding-left: 12px;
    min-height: 60px;
    background: url(“images/main_bottom.gif”) no-repeat left bottom;
    }

    /* Main – Content */

    #content {
    float: left;
    width: 570px;
    padding: 6px 16px 0 16px;
    }

    /* Main – Content – Post */

    #content .post {
    color: #FFFFFF;
    float: left;
    margin-bottom: 16px;
    width: 554px;
    padding: 7px;
    background: #03181B;
    }

    /* Post – Title */

    #content .post .post-title {
    width: 554px;
    height: 51px;
    color: #FFFFFF;
    font: bold 12px “Trebuchet MS”, Verdana;
    }

    #content .post .post-title a {
    color: #FFFFFF;
    text-decoration: none;
    }

    #content .post .post-title a:hover {
    text-decoration: underline;
    }

    #content .post .post-title .post-date {
    float: left;
    background: url(“images/post_date.gif”) repeat-x;
    width: 50px;
    height: 51px;
    color: #ffffff;
    text-align: center;
    text-transform: uppercase;
    margin-right: 10px;
    font: bold 10px/15px “Trebuchet MS”, Verdana;
    }

    #content .post .post-title .post-date span {
    margin-bottom: 2px;
    display: block;
    font: bold 16px/34px “Trebuchet MS”, Verdana;
    }

    #content .post .post-title h2 {
    padding: 4px 0 3px 0;
    color: #FFFFFF;
    font: bold 19px “Verdana”, Verdana;
    }

    #content .post .post-title h2 a {
    color: #FFFFFF;
    text-decoration: none;
    }

    #content .post .post-title h2 a:hover {
    text-decoration: underline;
    }

    /* Post – Entry */

    #content .post .post-entry {
    font: normal 12px/18px “Trebuchet MS”, Verdana;
    color: #FFFFFF;
    padding: 0 4px;
    width: 546px;
    }

    #content .post .post-entry a {
    color: #FFFFFF;
    text-decoration: none;
    }

    #content .post .post-entry a:hover {
    text-decoration: underline;
    }

    #content .post .post-entry .more-link {
    font: bold 12px/20px “Trebuchet MS”, Verdana;
    color: #FFFFFF;
    float: right;
    padding-bottom: 5px;
    }

    #content .post .post-entry .more-link a {
    color: #FFFFFF;
    text-decoration: none;
    }

    #content .post .post-entry .more-link a:hover {
    text-decoration: underline;
    }

    /* Post – Info */

    #content .post .post-info {
    padding: 10px 4px 0 4px;
    width: 546px;
    clear: both;
    font: bold 12px “Trebuchet MS”, Verdana;
    color: #FFFFFF;
    }

    #content .post .post-info a {
    color: #FFFFFF;
    text-decoration: none;
    }

    #content .post .post-info a:hover {
    text-decoration: underline;
    }

    /* Post – Comments */

    #content .post h3 {
    color: #FFFFFF;
    font: bold 17px “Verdana”, Verdana;
    margin: 25px 0 5px 0;
    padding: 0 4px;
    width: 546px;
    }

    #content .post .comments {
    padding: 0 4px;
    width: 546px;
    font: normal 12px/18px “Trebuchet MS”, Verdana;
    color: #FFFFFF;
    }

    #content .post .comments a {
    color: #FFFFFF;
    text-decoration: none;
    }

    #content .post .comments a:hover {
    text-decoration: underline;
    }

    #content .post .comments ol {
    margin: 10px 0 10px 0;
    padding-left: 25px;
    }

    #content .post .comments ol li {
    padding: 5px;
    }

    #content .post .comments ol li.alt {
    background: #000000;
    }

    #content .post .comments ol li cite {
    color: #FFFFFF;
    font-style: normal;
    font-weight: bold;
    }

    #content .post .comments ol li cite a {
    color: #FFFFFF;
    text-decoration: none;
    }

    #content .post .comments ol li cite a:hover {
    text-decoration: underline;
    }

    #content .post .comments ol li .commentmetadata a {
    color: #FFFFFF;
    text-decoration: none;
    }

    #content .post .comments ol li .commentmetadata a:hover {
    text-decoration: underline;
    }

    #content .post #commentform {
    margin: 0;
    font: normal 12px/18px “Trebuchet MS”, Verdana;
    color: #FFFFFF;
    padding: 0 4px;
    width: 546px;
    }

    #content .post #commentform a {
    color: #FFFFFF;
    text-decoration: none;
    }

    #content .post #commentform a:hover {
    text-decoration: underline;
    }

    /* Main – Sidebar */

    .sidebar {
    float: left;
    width: 189px;
    font: strong 15px/18px “Century Gothic”, Verdana;
    color: #000000;
    padding: 7px 0;
    }

    .sidebar a {
    color: #000000;
    text-decoration: none;
    }

    .sidebar a:hover {
    text-decoration: underline;
    }

    /* Sidebar – Titles */

    .sidebar h3 {
    padding-left: 18px;
    font: bold 15px/34px “Century Gothic”, Verdana;
    text-transform: lowercase;
    color: #ffffff;
    height: 46px;
    width: 189px;
    background: url(“images/sidebar_title.gif”) no-repeat;
    }

    /* Sidebar – Menus */

    .sidebar ul {
    margin: 0 0 20px 18px;
    padding: 0;
    list-style-type: none;
    }

    .sidebar ul li {
    color: #000000;
    font: normal 12px/26px “Century Gothic”, Verdana;
    }

    .sidebar ul li a {
    color: #000000;
    text-decoration: none;
    }

    .sidebar ul li a:hover {
    text-decoration: underline;
    }

    /* Sidebar – Forms */

    .sidebar #searchform {
    margin: 0 auto;
    padding: 15px 0 25px 0;
    width: 145px;
    text-align: center;
    }

    .sidebar #searchform #s {
    width: 145px;
    }

    /* Sidebar – Tables */

    .sidebar #calendar_wrap {
    margin: 5px auto 20px auto;
    width: 120px;
    }

    .sidebar #calendar_wrap caption {
    font-weight: bold;
    }

    .sidebar #calendar_wrap #today {
    font-weight: bold;
    }

    /* Sidebar – Texts */

    .sidebar .textwidget {
    padding: 0 10px 20px 10px;
    }

    /* Footer */

    #footer {
    margin-top: 15px;
    width: 1004px;
    height: 62px;
    background: url(“images/footer.gif”) repeat-x;
    color: #A8A8A8;
    font: normal 10px/15px “Century Gothic”, Verdana;
    text-align: center;
    }

    #footer a {
    color: #595959;
    text-decoration: none;
    }

    #footer a:hover {
    text-decoration: underline;
    }

    would I change the background color from black to white? Even if it’s just the post’s background color I’d be happy. I love my theme and really don’t want to change it but my readers are having a hard time seeing the light text on the dark background

Viewing 4 replies - 1 through 4 (of 4 total)
  • For changing themes general background you don’t need to change any code, just in case this is the part

    body {
    margin: 0;
    background: url("images/bg.gif");
    }

    Basically, what you have to do now is go to your theme’s directory and find this image
    wp-content/themes/popmusic/images/bg.gif
    open it with whatever image editing software you got, change it’s color and save it. Either overwrite the file bg.gif or just create a new one, but then you have to edit the name of the file in the presented code above.

    As for the post background color and text color you have to directly edit theme’s style.css file.
    This is what you have to edit

    #content .post {
    		color: #FFFFFF; change to #666999;
    		float: left;
    		margin-bottom: 16px;
    		width: 554px;
    		padding: 7px;
    		background: #03181B; change to white #FFFFFF;
    	}

    Be noted that the background should be white and the text black or any other color you see fit 🙂
    Plus keep in mind that there’s some other editing for the post title and details, you should change their colors too else they will be unreadable.

    Just change the body or post

    background: #fff; /*that’s to change it to white*/

    🙂

    Thread Starter poisonapplesauce

    (@poisonapplesauce)

    wow thank you guys so much, I have been trying to get this whole blogging thing down, but alas I am so picky about themes that it seems impossible. Thanks again ya’ll 🙂

    Resolved!.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Changing background color’ is closed to new replies.