Error on Notepad Theme for CSS customization

  • Unknown's avatar

    I added custom CSS code to modify most of the brown on the notepad theme to black —
    blockquote {
    background:url(‘img/blockquote.png’) no-repeat 4px 0;
    font:italic 1.1em/1.4em Georgia, “Times New Roman”, Times, serif;
    color:black;
    padding:0 0 0 26px;
    }

    body {
    font:normal .81em/1.5em Arial, Helvetica, sans-serif;
    color:black;
    margin:0;
    }

    a {
    color:black;
    text-decoration:underline;
    outline:none;
    }

    #header ul.menu ul {
    position:absolute;
    top:18px;
    left:-10px;
    background:black url(‘img/subnav-gradient.png’) repeat-x;
    border:solid 1px #c5c5a2;
    z-index:1;
    -webkit-box-shadow:0 1px 4px #c5c5a2;
    -moz-box-shadow:0 1px 4px #c5c5a2;
    box-shadow:0 1px 4px #c5c5a2;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    padding:8px 0 10px;
    }

    #header ul.menu ul li {
    background:none;
    margin:0;
    padding:0;
    }

    #header ul.menu ul li a,#header ul.menu ul .current_page_item a,#header ul.menu ul .current-menu-item a {
    color:black;
    font-weight:normal;
    text-shadow:0 0;
    }

    #header ul.menu ul li a {
    color:black;
    font-weight:normal;
    text-shadow:0 0;
    width:200px;
    background:none!important;
    padding:7px 0 7px 15px;
    }

    #header ul.menu .current_page_item li a,#header ul.menu .current-menu-item li a,#header ul.menu ul li a {
    color:black;
    background:none;
    text-shadow:0 0;
    font-weight:normal;
    }

    #header ul.menu ul ul {
    padding:0;
    }

    #header ul.menu ul ul li {
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    padding:8px 0 10px;
    }

    #header ul.menu ul ul .current_page_item,#header ul.menu ul ul .current-menu-item {
    background-color:black;
    background:none;
    color:#fff;
    }

    .post-title a {
    text-decoration:none;
    color:black;
    }

    .post-title a:hover,.post-title a:focus {
    color:black;
    }

    .post-date {
    font:bold 1.2em/1.2em Arial, Helvetica, sans-serif;
    color:black;
    width:80px;
    text-align:right;
    position:absolute;
    margin:-30px 0 0 -96px;
    padding:0;
    }

    When I click on preview the page is still brown on the header preview but when I click preview on another page I see the black. What am i doing wrong in custom css?

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

  • Unknown's avatar

    The preview doesn’t always work. On the page that doesn’t change, force refresh the browser window and it should then pick up the changes.

    You do however need to fix the “relative” URLs in your CSS. Your CSS file is saved in a different location from the original and that means the relative URLs break. You need to put in the full absolute URL starting with http:// where there are relative URLs like img/blockquote.png .

    A full URL for the stuff in the CSS for your site would be like this:

    http://s2.wp.com/wp-content/themes/pub/notepad/img/nav-bg.png

    Really though, if you are not changing a particular declaration in a selector, then you should not include it in your CSS. You should only put the specific selectors and the specific declarations that you are adding or changing into your custom CSS and keep “add to existing…” selected and your changes will override the original declarations.

  • The topic ‘Error on Notepad Theme for CSS customization’ is closed to new replies.