WordPress.com

1. poesibog
   Member
   Dec 9, 2008, 9:28 PM

   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. aw1923
   Member
   Dec 9, 2008, 9:51 PM

   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. rosclarke
   Member
   Dec 9, 2008, 9:53 PM

   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. devblog
   Member
   Dec 10, 2008, 12:08 AM

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

5. poesibog
   Member
   Dec 10, 2008, 2:52 PM

   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. devblog
   Member
   Dec 10, 2008, 3:07 PM

   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. poesibog
   Member
   Dec 10, 2008, 4:00 PM

   Okay I see.

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

8. devblog
   Member
   Dec 10, 2008, 4:54 PM

   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. devblog
   Member
   Dec 10, 2008, 5:41 PM

   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. poesibog
    Member
    Dec 10, 2008, 5:43 PM

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

11. poesibog
    Member
    Dec 10, 2008, 5:52 PM

    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. devblog
    Member
    Dec 10, 2008, 6:05 PM

    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. poesibog
    Member
    Dec 10, 2008, 7:13 PM

    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. rosclarke
    Member
    Dec 10, 2008, 7:24 PM

    You want the a:hover id.

15. poesibog
    Member
    Dec 10, 2008, 7:26 PM

    Yes that's right!
    It works now!

    Thank you SO much both of you!!!

16. devblog
    Member
    Dec 10, 2008, 7:28 PM

    Just add this to the code:

    a:hover {color: #b85b5a;}

17. devblog
    Member
    Dec 10, 2008, 7:29 PM

    ah... slow much?

18. poesibog
    Member
    Dec 10, 2008, 8:03 PM

    Thanks a lot!

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

    Cheers!

19. devblog
    Member
    Dec 10, 2008, 8:09 PM

    looks good!

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

20. rosclarke
    Member
    Dec 10, 2008, 8:11 PM

    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. poesibog
    Member
    Dec 10, 2008, 9:47 PM

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

Topic Closed

This topic has been closed to new replies.