All images lost in Misty Look

  • I bought the CSS upgrade and thought I’d take a look at the CSS for Misty Look. Somehow (I’m not sure how) I managed to alter something, and all the images seem to have vanished (header, RSS feed etc). I’m not at all clear what happened or how to fix it – any suggestions very welcome. The code is below.

    * {
    margin:0;
    padding:0;
    }

    p {
    line-height:1.6em;
    margin:.7em 0;
    }

    dl {
    margin:1em 0;
    }

    dt {
    font-weight:bold;
    }

    dd {
    margin:.5em;
    padding:0;
    }

    .entry img {
    background:url(‘img/shadow.gif’) no-repeat right bottom;
    border:none;
    border-top:#eee 1px solid;
    border-left:#eee 1px solid;
    padding:4px 10px 10px 4px;
    }

    .entry a img {
    border:none;
    background:url(‘img/shadow.gif’) no-repeat right bottom;
    border-top:#eee 1px solid;
    border-left:#eee 1px solid;
    padding:4px 10px 10px 4px;
    }

    .entry .wp-smiley,#wpstats {
    background:none;
    border:0;
    padding:0;
    }

    .clear {
    clear:both;
    height:20px;
    }

    blockquote {
    color:#666;
    background:url(‘img/blockquote.gif’) no-repeat left top;
    margin:1em;
    padding:0 0 10px 50px;
    }

    fieldset {
    border:none;
    }

    body {
    background:#f9f9f0;
    font:76%/1.6em verdana, tahoma, arial, sans-serif;
    color:#333;
    text-align:center;
    margin:0;
    }

    a {
    text-decoration:none;
    }

    a:link,a:visited {
    color:#265e15;
    }

    a:hover,a:active {
    border-bottom:#963 1px solid;
    }

    h1,h2,h3,h4,h5,h6 {
    font-family:Georgia, Verdana, Arial, Serif;
    }

    #container {
    border:#ccc 1px solid;
    background:#fff;
    width:780px;
    position:relative;
    text-align:left;
    margin:0 auto;
    }

    #navigation {
    background:transparent;
    overflow:hidden;
    width:760px;
    position:relative;
    text-align:left;
    font-family:Trebuchet MS,Tahoma, Verdana, Arial, Serif;
    letter-spacing:1px;
    margin:20px auto 0;
    }

    html #navigation {
    height:1%;
    }

    #navigation ul li {
    float:left;
    list-style-type:none;
    margin:0 5px 0 0;
    }

    #navigation ul li a {
    border:#dedede 1px solid;
    border-bottom:none;
    display:block;
    font-weight:bold;
    color:#666;
    text-decoration:none;
    background:#ededed;
    padding:2px 10px;
    }

    #navigation ul li a:hover,#navigation ul li a:active,#navigation ul li.current_page_item a {
    background:#fff;
    color:#333;
    border:#ccc 1px solid;
    border-bottom:none;
    }

    #navigation ul li.search {
    font-size:.9em;
    right:0;
    position:absolute;
    top:0;
    }

    #navigation ul li.search input#searchsubmit {
    border:#999 1px solid;
    font-size:.9em;
    background:#ddd;
    color:#265e15;
    margin:0 0 0 2px;
    padding:2px;
    }

    #header {
    clear:both;
    float:left;
    width:450px;
    margin:10px 5px;
    }

    #header h1 {
    font-size:1.8em;
    font-variant:small-caps;
    letter-spacing:1px;
    margin:10px 0 0 10px;
    }

    #header h1 a {
    text-decoration:none;
    border:none;
    }

    #header h2 {
    font-size:1em;
    font-weight:normal;
    font-family:Tahoma, Verdana, Arial, Serif;
    letter-spacing:1px;
    margin:5px 0 0 10px;
    }

    #feedarea {
    float:right;
    text-align:right;
    padding:10px 10px 0 0;
    }

    html #feedarea {
    padding-top:10px;
    }

    #feedarea dl dt {
    display:inline;
    margin-right:5px;
    height:45px;
    }

    #feedarea dl dd {
    display:inline;
    margin-right:5px;
    height:45px;
    background:url(‘img/icon_feed.gif’) no-repeat left center;
    padding-left:16px;
    }

    #headerimage {
    clear:both;
    background:#fff url(‘img/misty.jpg’) no-repeat 0 0;
    color:#fff;
    height:200px;
    margin:10px;
    }

    html #headerimage {
    margin-top:0;
    }

    #content {
    margin:10px 10px 10px 30px;
    }

    html #content {
    height:1%;
    }

    #content h3 {
    font-size:1.4em;
    font-weight:normal;
    color:#265e15;
    margin:1em 0 0;
    }

    #content h4 {
    font-size:1.1em;
    margin:1em 0 0;
    }

    #content h5 {
    font-size:1em;
    margin:1em 0;
    }

    #content-main ul {
    list-style-image:url(‘img/bullet.png’);
    margin:1em;
    padding:0 1em;
    }

    #content-main ul.asides {
    border-bottom:#ddd 1px dashed;
    margin:0;
    padding:2em;
    }

    #content ol {
    list-style-type:decimal;
    margin:2em;
    padding:0 2em;
    }

    #content-main {
    float:left;
    width:520px;
    margin-right:20px;
    overflow:hidden;
    }

    html #section-index #content-main {
    margin-right:20px;
    }

    #content .post {
    border-bottom:#ddd 1px dashed;
    padding:0 0 2em;
    }

    #content p img.right {
    float:right;
    margin:10px 0 0 10px;
    }

    #content p img.left {
    float:left;
    margin:0 10px 10px 0;
    }

    #content .post h2 {
    font-size:1.4em;
    letter-spacing:1px;
    font-weight:normal;
    margin:1em 0 0;
    }

    #content .entry {
    padding-right:1em;
    margin:1em 0;
    }

    #content .sticky {
    background:#f7f7f7;
    padding:0 10px 10px;
    }

    #content .sticky .posttitle h2 {
    padding-top:10px;
    }

    #content .entry a:link,#content .entry a:visited {
    border-bottom:#963 1px dashed;
    }

    #content .entry a:hover,#content .entry a:active {
    border-bottom:#963 1px solid;
    }

    #content .post-info,#content .postmetadata {
    font-size:.9em;
    color:#999;
    margin:0;
    padding:0;
    }

    #content .post-info {
    background:url(‘img/underline1.jpg’) no-repeat left bottom;
    padding-bottom:12px;
    }

    #sidebar {
    float:left;
    width:200px;
    font-size:.9em;
    overflow:hidden;
    }

    #sidebar ul {
    list-style:none;
    margin:0;
    padding:0;
    }

    #sidebar ul ul {
    list-style:none;
    margin:.5em 0 0 1em;
    }

    #sidebar ul ul ul {
    margin:0 0 0 1em;
    }

    li.sidebox {
    background:url(‘img/sideheadtop.gif’) #ededed no-repeat left top;
    margin-bottom:10px;
    padding:10px;
    }

    html li.sidebox {
    padding-bottom:10px;
    }

    li.sidebox h2 {
    font-weight:normal;
    font-size:1.6em;
    text-align:left;
    color:#242;
    font-variant:small-caps;
    }

    #sidebar li.sidebox p img {
    border:#ccc 1px solid;
    background:none;
    margin:0;
    padding:3px;
    }

    #footer {
    clear:both;
    background:transparent;
    width:760px;
    text-align:left;
    margin:0 auto;
    }

    html #footer {
    height:1%;
    }

    #footer p {
    float:left;
    width:50%;
    line-height:1.2em;
    }

    #footer p.right {
    float:right;
    width:50%;
    text-align:right;
    font-size:.9em;
    color:#999;
    margin:1em 0;
    }

    #comments,#respond {
    margin:2em 0 10px 5px;
    }

    #commentform {
    background:#f9fcfc;
    border-top:#ddd 1px solid;
    border-bottom:#ddd 1px solid;
    margin:10px 0;
    padding:10px;
    }

    .commentnum {
    font-size:1.5em;
    font-weight:bold;
    margin:0 5px 0 0;
    }

    #container .commentlist {
    border-top:#ddd 1px solid;
    margin:0;
    padding:0;
    }

    .commentlist li {
    list-style:none;
    border-bottom:#ddd 1px solid;
    margin:0;
    padding:.5em;
    }

    .commentlist li.alt {
    background:#f9f9f9;
    }

    .commentlist li .cmtinfo {
    font-size:1em;
    }

    .commentlist li cite {
    font-style:normal;
    font-weight:bold;
    }

    .commentlist li .cmtinfo em {
    float:right;
    font-style:normal;
    font-size:.9em;
    color:#999;
    margin:0;
    padding:0;
    }

    .commentlist .children li {
    border-bottom:0;
    }

    #content-main .commentlist .children {
    border-left:1px solid #ddd;
    margin:10px 0 10px 10px;
    padding:0;
    }

    #content .commentsfeed {
    background:url(‘img/icon_feed.gif’) no-repeat left center;
    padding-left:16px;
    }

    #content .trackback {
    background:url(‘img/link.gif’) no-repeat left center;
    padding-left:20px;
    }

    input.textbox {
    border:#ccc 1px solid;
    background:#fff url(‘img/shadow_top.gif’) repeat-x top;
    font:1em Verdana, Arial, Serif;
    width:150px;
    padding:2px;
    }

    textarea {
    width:80%;
    line-height:2em;
    height:20em;
    border:1px solid #ccc;
    background:#fff url(‘img/shadow_top.gif’) repeat-x top;
    font:1em Verdana, Arial, Serif;
    padding:10px;
    }

    .textbox:focus,textarea:focus {
    background:#fff url(‘img/shadow_top.gif’) repeat-x top;
    border:#999 1px solid;
    }

    .post h4 {
    font-size:1em;
    font-weight:normal;
    font-family:Verdana, Tahoma, Arial, Serif;
    }

    .post h4 em {
    font-style:normal;
    float:right;
    font-weight:normal;
    }

    #header,#content,#sidebar,#footer,.widget,.entry {
    overflow:hidden;
    }

    .avatar {
    clear:both;
    float:right;
    margin-left:5px;
    }

    .navigation {
    clear:both;
    }

    img.centered,img.aligncenter {
    display:block;
    margin-left:auto;
    margin-right:auto;
    }

    img.alignright {
    display:inline;
    margin:0 0 2px 7px;
    }

    img.alignleft {
    display:inline;
    margin:0 7px 2px 0;
    }

    .alignright {
    float:right;
    }

    .alignleft {
    float:left;
    }

    .aligncenter,div.aligncenter {
    display:block;
    margin-left:auto;
    margin-right:auto;
    }

    .wp-caption {
    border:1px solid #ddd;
    text-align:center;
    background-color:#f3f3f3;
    padding-top:4px;
    -moz-border-radius:3px;
    -khtml-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    margin:10px;
    }

    .wp-caption img,.wp-caption a img {
    border:0 none;
    margin:0;
    padding:0;
    }

    #content .wp-caption a:hover,#content .wp-caption a:active,#content .wp-caption a:link,#content .wp-caption a:visited {
    border:none;
    }

    .wp-caption p.wp-caption-text {
    font-size:11px;
    line-height:17px;
    margin:0;
    padding:0 4px 5px;
    }

  • Empty everything out of the CSS edit window, make sure “add to existing stylesheet is selected and then click save. That will return you to the original CSS.

    Also, it is my suggestion to only put into the CSS edit window those specific things you wish to change, and then again make sure the “add to existing stylesheet” is selected.

  • You’re a genius – many thanks.

  • You’re very welcome.

  • Another note: When you start with custom CSS, your header imagethat you added via the dashboard “custom header image” feature will disappear. What you have to do is upload the image, sized exactly, to your media library, then get the URL of that image, and then place it in the CSS in the header image section. You will have to do a little investigation to determine exactly what it is called with Mistylook. I cannot remember.

  • The topic ‘All images lost in Misty Look’ is closed to new replies.