First of all, I am really really rusty with code. So really, I probably am going to confuse you even more. But some people are wondering how to modify their blogs and I might be able to help.
First of all, you need to know where to go!
MyYWS >> Blogs >> Blog Settings
There you should see a textbox that says Blog CSS. This is what you'll be changing.
You are kind of lucky if you see this: "Did you have a blog on the old YWS? Click here to grab the css of your old blog." Change your blog to Coda Light and click this. This will put some of the things that you had last blog and stick them on. So it would look something like this:
- Code: Select all
body
{
color: 333333;
font-family: Verdana;
color: #333333;
font-size: 8pt;
text-align: center;
margin: 0;
background-color: #ff6699;
background-image: url(http://img6.imageshack.us/img6/466/oinkbg3.gif);
background-attachment: scroll;
background-repeat: repeat;
background-position: center center;
}
That's what it looked like for me. If you want to change the background picture, then change the url of the image to what you want. If you want to get rid of the background picture, get rid of the "background-image" line.
Also, you will note that there are a lot of six-character things that stand for colors. This is standard HTML. A list of all color codes can be located here:
http://html-color-codes.com/
So I tweaked that. But that wasn't enough for me... there were other things I wanted to do. So I started adding different bits of code to the text box to customize it further. I also manipulated a couple of images using photoshop. All in all, I think it turned out okay, though it is a bit rough still. Anyway, here's what I changed:
- Code: Select all
font,th,td,p { color: 333333; font-family: Verdana; color: #333333; font-size: 8pt }
a:link { text-decoration: none; color : #330099; font-weight: bold; }
a:active { text-decoration: none; color : #330099; font-weight: bold; }
a:visited { text-decoration: none; color : #330099; font-weight: bold; }
a:hover { text-decoration: underline; color : #6633cc; }
hr { border: 0; border-top: 2px #000099 solid; }
th { border: 1px #000099 solid; background-color: #FF9999; white-space: nowrap; color: #000099; padding: 5px; }
h1 { font-size: 36pt; font-weight: bold; color: #000066; padding: 0; margin: 0 }
h2 { font-size: 16pt; font-weight: bold; color: #000099; padding: 0; margin: 0 }
h3 { font-size: 12pt; color: #000099; padding: 0; margin: 0 }
h4 { font-size: 14pt; font-weight: bold; color: #000099; padding: 0; margin: 0; padding-top: 1em; }
h5 { background-color: #FF9999; white-space: nowrap; font-weight: bold; padding: 5px; margin: 0; font-size: 1em }
input, select, textarea { font-size: 8pt; border: 1px #000099 solid; background-color: #ffffff; color: #333333; vertical-align: middle; }
img { border: 0; vertical-align: middle }
This is one of those things that I changed because I hated the font. So I found this blurb of code from looking at the source (right-click your blog page and there should be something that has "source" in it) and changed any mention of the default to Verdana.
- Code: Select all
div#content {
margin-bottom: 1em;
padding: 0 1em 1em 1em;
background-color: #ff9999;
}
This modifies it so that there is a plain background where the content is. I can't stand reading things on a background (it hurts my eyes) so I changed it so that there would be a plain background. The main thing to look at here is "background-color."
- Code: Select all
div#dash {
padding: 30px;
background: transparent url("http://img190.imageshack.us/img190/5971/headerbg3.png") center 0 no-repeat;
}
I hated the black header that was there. So instead, I decided to create my own. Using photoshop, I drew a pig so that it would fit the space of the original black image. Then I uploaded the image to imageshack.
- Code: Select all
div#intro h1 {
padding: 0 5px;
font-size: 3em;
float: left;
}
I wanted to have the text for the header big and it wasn't. So I made it go from 1.3 to 3.
- Code: Select all
blockquote {
background: #FF6699 url("./../../blog/styles/coda-light/images/quote.gif") 6px 8px no-repeat;
border-left: 3px solid #FF9999;
font-size: 0.95em;
overflow: hidden;
padding: 5px;
}
blockquote blockquote {
background-color: #000000;
font-size: 1em;
margin: 0.5em 1px 0 15px;
}
blockquote blockquote blockquote {
background-color: #000000;
}
blockquote {
margin: 0 0 1.3em 1em;
padding: 0 2em 0 1em;
color: #000000;
border-left: 3px solid #FF9999;
}
I noticed that the quotes looked ugly. So I looked for the ugly green and the ugly gray and replaced it with the pinks.
And that's that! Coda Light is by far the easiest to change. The other ones deal with a lot more images which makes it a bit trickier. Just remember to keep your colors and images straight and you should be fine!
Gender:
Points: 3891
Reviews: 3821