Summoning the CSS Gods!

poesibog · Member · Dec 9, 2008 at 9:28 pm
Copy link

Add topic to favorites
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;
}
aw1923 · Member · Dec 9, 2008 at 9:51 pm
Copy link
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
rosclarke · Member · Dec 9, 2008 at 9:53 pm
Copy link
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.
devblog · Member · Dec 10, 2008 at 12:08 am
Copy link
it seems this person deleted his/her blog…
poesibog · Member · Dec 10, 2008 at 2:52 pm
Copy link
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!
devblog · Member · Dec 10, 2008 at 3:07 pm
Copy link
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?
poesibog · Member · Dec 10, 2008 at 4:00 pm
Copy link
Okay I see.

Yes I want it to be as clean as the first screenshot!
devblog · Member · Dec 10, 2008 at 4:54 pm
Copy link
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
devblog · Member · Dec 10, 2008 at 5:41 pm
Copy link
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/
poesibog · Member · Dec 10, 2008 at 5:43 pm
Copy link
Thank you so much I will try it all out!!!!!
poesibog · Member · Dec 10, 2008 at 5:52 pm
Copy link
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!
devblog · Member · Dec 10, 2008 at 6:05 pm
Copy link
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.
poesibog · Member · Dec 10, 2008 at 7:13 pm
Copy link
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!
rosclarke · Member · Dec 10, 2008 at 7:24 pm
Copy link
You want the a:hover id.
poesibog · Member · Dec 10, 2008 at 7:26 pm
Copy link
Yes that’s right!
It works now!

Thank you SO much both of you!!!
devblog · Member · Dec 10, 2008 at 7:28 pm
Copy link
Just add this to the code:
```
a:hover {color: #b85b5a;}
```
devblog · Member · Dec 10, 2008 at 7:29 pm
Copy link
ah… slow much?
poesibog · Member · Dec 10, 2008 at 8:03 pm
Copy link
Thanks a lot!

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

Cheers!
devblog · Member · Dec 10, 2008 at 8:09 pm
Copy link
looks good!

BTW, the song in the Victoria Beckham Collection video is pretty cool.
rosclarke · Member · Dec 10, 2008 at 8:11 pm
Copy link
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.

No items found.