Need help? Check out our Support site, then


Summoning the CSS Gods!

  1. Hi Everybody!

    I've started with the Kubrick Theme and have tried to modify the CSS by copy/paste-ing the Kubrick Stylesheet and started from scratch.

    Now the mainsite looks like I want it to - like this: Top: http://i396.photobucket.com/albums/pp41/Wunderbuzz/Picture2.png
    Bottom: http://i396.photobucket.com/albums/pp41/Wunderbuzz/Picture7.png

    But when i click on a single post it looks like this: http://i396.photobucket.com/albums/pp41/Wunderbuzz/Picture3.png
    and I can't figure out how to remove the borders in the two sides.
    How do I do that?

    The next problem came when I clicked on the archive of old posts. Then the site looks like this!? :
    Top section: http://i396.photobucket.com/albums/pp41/Wunderbuzz/Picture4.png
    Midt: http://i396.photobucket.com/albums/pp41/Wunderbuzz/Picture5.png
    Bottom: http://i396.photobucket.com/albums/pp41/Wunderbuzz/Picture6.png

    The text with "Archive for December, 2008" is obviously to big
    There's borders around the header
    There's borders around the "page"

    Can you help me?

    Hugs Signe

    My CSS is this:

    body {
    font-size:65.5%;
    font-family:Georgia, Times New Roman, Arial, Sans-Serif;
    color:#333;
    text-align:left;
    background: url(i396.photobucket.com/albums/pp41/Wunderbuzz/Picture1.png);
    border:none;
    margin:0 0 20px;
    padding:0;
    }

    #page {
    text-align:left;
    background: url(i396.photobucket.com/albums/pp41/Wunderbuzz/Picture1.png);
    width: 758px;
    border:none;
    margin:20px auto;
    }

    #header {
    background: url(i396.photobucket.com/albums/pp41/Wunderbuzz/Picture1.png);
    border: none;
    height:125px;
    width:758px;
    margin:0 0 0 1px;
    padding:0;
    }

    #headerimg {
    background-color: white;
    height:125px;
    width:100%;
    margin:0;
    }

    #sidebar {
    background: url(i396.photobucket.com/albums/pp41/Wunderbuzz/Picture1.png);
    border:none;
    font:11px Helvetica, Arial, Sans-Serif;
    color:#5a5454;
    margin-left:525px;
    width:210px;
    padding:20px 0 10px;
    }

    #content {
    background: url(i396.photobucket.com/albums/pp41/Wunderbuzz/Picture1.png);
    border:none;
    font-size:1.2em;
    }

    .widecolumn .entry p {
    background: url(i396.photobucket.com/albums/pp41/Wunderbuzz/Picture1.png);
    border:none;
    font-size:1.05em;
    }

    .narrowcolumn .entry,.widecolumn .entry {
    background: url(i396.photobucket.com/albums/pp41/Wunderbuzz/Picture1.png);
    border:none;
    line-height:1.4em;
    }

    .widecolumn {
    text-align:left;
    background: url(i396.photobucket.com/albums/pp41/Wunderbuzz/Picture1.png);
    border:none;
    line-height:1.6em;
    width:450px;
    margin-left: 45px;
    padding:10px 0 20px;
    }

    .narrowcolumn .postmetadata {
    background: url(i396.photobucket.com/albums/pp41/Wunderbuzz/Picture1.png);
    border:none;
    text-align:center;
    padding-top:5px;
    }

    .alt {
    background: url(i396.photobucket.com/albums/pp41/Wunderbuzz/Picture1.png);
    border: none;
    margin:0;
    padding:10px;
    }

    #footer {
    border:none;
    background: url(i396.photobucket.com/albums/pp41/Wunderbuzz/Picture1.png);
    width:758px;
    clear:both;
    margin:0 auto;
    padding:0;
    }

    small {
    background: url(i396.photobucket.com/albums/pp41/Wunderbuzz/Picture1.png);
    border:none;
    font-family:Georgia, Times New Roman, Arial, Sans-Serif;
    font-size:.9em;
    line-height:1.5em;
    }

    h1,h2,h3 {
    background: url(i396.photobucket.com/albums/pp41/Wunderbuzz/Picture1.png);
    border:none;
    font-family:Georgia, Times New Roman, Arial, Sans-Serif;
    font-weight:bold;
    }

    h1 {
    background: url(i396.photobucket.com/albums/pp41/Wunderbuzz/Picture1.png);
    border:none;
    font-size:4em;
    text-align:center;
    padding-top:70px;
    margin:0;
    }

    #headerimg .description {
    background: url(i396.photobucket.com/albums/pp41/Wunderbuzz/Picture1.png);
    border:none;
    font-size:1.2em;
    text-align:center;
    }

    h2 {
    background: url(i396.photobucket.com/albums/pp41/Wunderbuzz/Picture1.png);
    border:none;
    font-size:1.6em;
    margin:30px 0 0;
    }

    h2.pagetitle {
    background: url(i396.photobucket.com/albums/pp41/Wunderbuzz/Picture1.png);
    border:none;
    font-size:7.6em;
    margin-top:30px;
    text-align:center;
    }

    #sidebar h2 {
    background: url(i396.photobucket.com/albums/pp41/Wunderbuzz/Picture1.png);
    border:none;
    font-family:Georgia, Times New Roman, Arial, Sans-Serif;
    font-size:1.2em;
    margin:5px 0 0;
    padding:0;
    }

    h3 {
    background: url(i396.photobucket.com/albums/pp41/Wunderbuzz/Picture1.png);
    border:none;
    font-size:1.2em;
    margin:30px 0 0;
    padding:0;
    }

    h1,h1 a,h1 a:hover,h1 a:visited,#headerimg .description {
    background: url(i396.photobucket.com/albums/pp41/Wunderbuzz/Picture1.png);
    border:none;
    text-decoration:none;
    color:white;
    }

    h2,h2 a,h2 a:visited,h3,h3 a,h3 a:visited {
    background: url(i396.photobucket.com/albums/pp41/Wunderbuzz/Picture1.png);
    border:none;
    color:#333;
    }

    h2,h2 a,h2 a:hover,h2 a:visited,h3,h3 a,h3 a:hover,h3 a:visited,#sidebar h2,#wp-calendar caption,cite {
    background: url(i396.photobucket.com/albums/pp41/Wunderbuzz/Picture1.png);
    border:none;
    text-decoration:none;
    }

    .entry p a:visited {
    background: url(i396.photobucket.com/albums/pp41/Wunderbuzz/Picture1.png);
    border:none;
    color:#b85b5a;
    }

    #commentform p {
    background: url(i396.photobucket.com/albums/pp41/Wunderbuzz/Picture1.png);
    border:none;
    font-family:Georgia, Times New Roman, Arial, Sans-Serif;
    margin:5px 0;
    }

    .commentmetadata {
    background: url(i396.photobucket.com/albums/pp41/Wunderbuzz/Picture1.png);
    border:none;
    font-weight:normal;
    display:block;
    margin:0;
    }

    small,#sidebar ul ul li,#sidebar ul ol li,.nocomments,.postmetadata,blockquote,strike {
    background: url(i396.photobucket.com/albums/pp41/Wunderbuzz/Picture1.png);
    border:none;
    color:#777;
    }

    code {
    background: url(i396.photobucket.com/albums/pp41/Wunderbuzz/Picture1.png);
    border:none;
    font:1.1em 'Courier New', Courier, Fixed;
    }

    acronym,abbr,span.caps {
    background: url(i396.photobucket.com/albums/pp41/Wunderbuzz/Picture1.png);
    border:none;
    font-size:.9em;
    letter-spacing:.07em;
    cursor:help;
    }

    a,h2 a:hover,h3 a:hover {
    background: url(i396.photobucket.com/albums/pp41/Wunderbuzz/Picture1.png);
    border:none;
    color:#CE5A3A;
    text-decoration:none;
    }

    a:hover {
    background: url(i396.photobucket.com/albums/pp41/Wunderbuzz/Picture1.png);
    border:none;
    color:#9B3115;
    text-decoration:underline;
    }

    .narrowcolumn {
    background: url(i396.photobucket.com/albums/pp41/Wunderbuzz/Picture1.png);
    border:none;
    float:left;
    width:450px;
    margin:0 40px 20px 0;
    padding:0 0 20px 45px;
    }

    .post {
    background: url(i396.photobucket.com/albums/pp41/Wunderbuzz/Picture1.png);
    border:none;
    text-align:justify;
    margin:0 0 40px;
    }

    .post hr {
    background: url(i396.photobucket.com/albums/pp41/Wunderbuzz/Picture1.png);
    border:none;
    display:block;
    }

    .widecolumn .post {
    background: url(i396.photobucket.com/albums/pp41/Wunderbuzz/Picture1.png);
    border:none;
    margin:0;
    }

    .widecolumn .postmetadata {
    background: url(i396.photobucket.com/albums/pp41/Wunderbuzz/Picture1.png);
    border:none;
    margin:30px 0;
    }

    .widecolumn .smallattachment {
    background: url(i396.photobucket.com/albums/pp41/Wunderbuzz/Picture1.png);
    border:none;
    text-align:center;
    float:left;
    width:128px;
    margin:5px 5px 5px 0;
    }

    .widecolumn .attachment {
    background: url(i396.photobucket.com/albums/pp41/Wunderbuzz/Picture1.png);
    border:none;
    text-align:center;
    margin:5px 0;
    }

    .postmetadata {
    background: url(i396.photobucket.com/albums/pp41/Wunderbuzz/Picture1.png);
    border:none;
    clear:both;
    }

    .clear {
    background: url(i396.photobucket.com/albums/pp41/Wunderbuzz/Picture1.png);
    border:none;
    clear:both;
    }

    #footer p {
    background: url(i396.photobucket.com/albums/pp41/Wunderbuzz/Picture1.png);
    border:none;
    background: url(i396.photobucket.com/albums/pp41/Wunderbuzz/Picture1.png);
    text-align:center;
    margin:0;
    padding:20px 0;
    }

    ,post h2 {
    background: url(i396.photobucket.com/albums/pp41/Wunderbuzz/Picture1.png);
    border:none;
    text-align:left;
    }

    h3.comments {
    background: url(i396.photobucket.com/albums/pp41/Wunderbuzz/Picture1.png);
    border:none;
    margin:40px auto 20px;
    padding:0;
    }

    p img {
    background: url(i396.photobucket.com/albums/pp41/Wunderbuzz/Picture1.png);
    border:none;
    max-width:100%;
    padding:0;
    }

    img.centered,img.aligncenter {
    background: url(i396.photobucket.com/albums/pp41/Wunderbuzz/Picture1.png);
    border:none;
    display:block;
    margin-left:auto;
    margin-right:auto;
    }

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

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

    .alignright {
    float:right;
    }

    .alignleft {
    float:left;
    }

    html>body .entry ul {
    margin-left:0;
    list-style:none;
    text-indent:-10px;
    padding:0 0 0 10px;
    }

    html>body .entry li {
    margin:7px 0 8px 10px;
    }

    .entry ul li:before,#sidebar ul ul li:before {
    content:"0BB 020";
    }

    .entry ol {
    margin:0;
    padding:0 0 0 35px;
    }

    .entry ol li {
    margin:0;
    padding:0;
    }

    .postmetadata ul,.postmetadata li {
    display:inline;
    list-style-type:none;
    list-style-image:none;
    }

    #sidebar ul,#sidebar ul ol {
    margin:0;
    padding:0;
    }

    #sidebar ul li {
    list-style-type:none;
    list-style-image:none;
    margin-bottom:15px;
    }

    #sidebar ul p,#sidebar ul select {
    margin:5px 0 8px;
    }

    #sidebar ul ul,#sidebar ul ol {
    margin:5px 0 0 10px;
    }

    #sidebar ul ul ul,#sidebar ul ol {
    margin:0 0 0 10px;
    }

    ol li,#sidebar ul ol li {
    list-style:decimal outside;
    }

    #sidebar ul ul li,#sidebar ul ol li {
    margin:3px 0 0;
    padding:0;
    }

    #searchform {
    text-align:center;
    margin:10px auto;
    padding:5px 3px;
    }

    #sidebar #searchform #s {
    width:108px;
    padding:2px;
    }

    #sidebar #searchsubmit {
    padding:1px;
    }

    .entry form {
    text-align:center;
    }

    select {
    width:130px;
    }

    #commentform input {
    width:170px;
    margin:5px 5px 1px 0;
    padding:2px;
    }

    #commentform textarea {
    width:100%;
    padding:2px;
    }

    #commentform #submit {
    float:right;
    margin:0;
    }

    .commentlist {
    text-align:justify;
    padding:0;
    }

    .nocomments {
    text-align:center;
    margin:0;
    padding:0;
    }

    #sidebar form {
    margin:0;
    }

    acronym,abbr {
    border: none;
    }

    blockquote {
    padding-left:20px;
    border: none;
    margin:15px 30px 0 10px;
    }

    blockquote cite {
    display:block;
    margin:5px 0 0;
    }

    .center {
    text-align:center;
    }

    .hidden {
    display:none;
    }

    hr {
    display:none;
    }

    a img {
    border:none;
    }

    .navigation {
    display:block;
    text-align:center;
    margin-top:10px;
    margin-bottom:60px;
    }

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

    .wp-caption {
    border: none;
    text-align:center;
    background: url(i396.photobucket.com/albums/pp41/Wunderbuzz/Picture1.png);
    padding-top:4px;
    margin:10px;
    border-radius:3px;
    -moz-border-radius:3px;
    -khtml-border-radius:3px;
    -webkit-border-radius:3px;
    }

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

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

  2. now Im not saying I can help, cause Im not a CSS god, but could you provide a link to your blog instead of using the screenshots

  3. Is your blog here at wordpress.com? Please give us a link to it so that we can see how to help you.

    Incidentally, Kubrick is generally one of the hardest blogs to change with CSS, so well done for getting as far as you have. And I'm afraid it's possible that no one will be able to help you. But it's still worth giving a link to your blog - there are a few people round here who know what they're doing with CSS.

  4. it seems this person deleted his/her blog...

  5. Hi everyone!

    No my blog is not deleted, but I have changed it back to the normal Kubric theme until I get the other CSS sorted.
    So if it would help you to have my link its: http://wunderbuzz.com/

    Thank you for responding!

  6. Thank you. It does help to have a link to your blog because that allows us to see what you see, and when dealing with CSS, to suggest code for what you want (if it's doable).

    So, basically you want your blog to look like in your first screenshot?

  7. Okay I see.

    Yes I want it to be as clean as the first screenshot!

  8. Ok, if that's all you want, that's easy. You only need this code:

    body {
    	background: #fff !important;
    }
    
    #page {
    	background: #fff !important;
    }
    
    #header {
    	background: #fff !important;
    }
    
    a, h2 a:hover, h3 a:hover {
    	color: #D5694B;
    	text-decoration: none;
    }
    
    #footer {
    	background: #fff !important;
    }

    When you use this code, make sure it's the only code in the CSS editor and that the "Add this to the Kubrick theme's CSS stylesheet" radio button is checked.

    Try that.

    HTH

  9. Oh, by the way (and this is a shameless plug), I noticed that on your blog's sidebar, you have your email address so that people can contact you. Even though is not a "mailto" link, it still is text and can still be harvested by spam software. To avoid that, I wrote an application that converts your email address into an image. If you'd like to use it, the URL is:

    http://www.email-encoder.net/

  10. Thank you so much I will try it all out!!!!!

  11. Okay I've tried it now, but when I press archive for December month the website is back to the normal kubric design?!

    Is it an error in preview?

    And thank you again!

  12. It should carry the changes, but it doesn't because the URL gets appended to the URL itself. So, instead of looking something like this:

    http://wunderbuzz.com/?csspreview=true

    It looks something like this

    http://wunderbuzz.com/2008/12/\'http://wunderbuzz.com/?csspreview=true\'

    That's why you can't see your changes.

    Save it, and it should work just fine. If it's soemthing you don't like, you can always delete the code in the CSS editor to restore the original look.

  13. Okay thank you so much! It looks very good now!

    One more thing is though how can I make the "mouse-over" color in the sidebar like this color: #b85b5a ?
    Its blue right now.

    Thank thank thank you!

  14. You want the a:hover id.

  15. Yes that's right!
    It works now!

    Thank you SO much both of you!!!

  16. Just add this to the code:

    a:hover {color: #b85b5a;}
  17. ah... slow much?

  18. Thanks a lot!

    This is how the site ended up: http://wunderbuzz.com
    Is case it has any interest :o)

    Cheers!

  19. looks good!

    BTW, the song in the Victoria Beckham Collection video is pretty cool.

  20. It's a bit plain for my tastes but I like it. Good job. The only thing I would change is the underlining when you hover over links. If they're changing colour, I don't think you need it. You can add text-decoration: none to the a:hover class if you like. Just a suggestion.

  21. Thanks - Good suggestion with removal of the underline! It's been removed!

Topic Closed

This topic has been closed to new replies.

About this Topic