z

Young Writers Society


How to Modify Your Blog



User avatar
3821 Reviews

Supporter


Gender: Female
Points: 3891
Reviews: 3821
Sat Sep 12, 2009 6:19 am
Snoink says...



This was originally in my blog, but I figured it would be more useful here. Also, for the lost, YWS totally has blogs that you can use! Just go to "Blogs" on the toolbar and get going! :)


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!
Ubi caritas est vera, Deus ibi est.

"The mark of your ignorance is the depth of your belief in injustice and tragedy. What the caterpillar calls the end of the world, the Master calls the butterfly." ~ Richard Bach

Moth and Myth <- My comic! :D
  





User avatar
373 Reviews



Gender: None specified
Points: 49068
Reviews: 373
Tue Sep 15, 2009 2:46 am
View Likes
Kamas says...



How do I delete my blog? O_o
  





User avatar
425 Reviews



Gender: Male
Points: 11417
Reviews: 425
Tue Sep 15, 2009 2:48 am
Nate says...



Kamas wrote:How do I delete my blog? O_o


You have to contact me. But before you do, please make sure that you really want your blog deleted (as it really will be deleted for good).
  





User avatar
245 Reviews



Gender: Other
Points: 2570
Reviews: 245
Wed Sep 16, 2009 12:15 am
View Likes
LowKey says...



(as it really will be deleted for good).


How "for good" is for good? If, three years in the future, we decide we were idiots when we were three years younger, and we want to have a blog again, would we be able to get a new one?
  





User avatar
27 Reviews



Gender: Female
Points: 2380
Reviews: 27
Wed Mar 03, 2010 2:51 am
NYCnightowl007 says...



every CSS code i try to put in the box, it doesn't work. I used some blogger websites. Any help?
"I’m usually that guy who violently kicks off his shoes at the front door because there’s something about fake wooden kitchen linoleum that appears inviting to the feverish socked footsies." - Adam Young/Owl City
  





User avatar
425 Reviews



Gender: Male
Points: 11417
Reviews: 425
Wed Mar 03, 2010 6:26 am
View Likes
Nate says...



NYCnightowl007 wrote:every CSS code i try to put in the box, it doesn't work. I used some blogger websites. Any help?


Proper capitalization please!

It's because of the template you're using. Switch to Coda Light, and you'll be able to modify to your heart's content.
  





User avatar
565 Reviews



Gender: Male
Points: 1395
Reviews: 565
Wed Mar 03, 2010 2:13 pm
View Likes
Stori says...



I just changed my format to Coda; does that mean anything?
  





User avatar
763 Reviews

Supporter


Gender: Female
Points: 3888
Reviews: 763
Thu Mar 04, 2010 4:01 pm
Lava says...



Thank yo so much for putting it up. I've been looking though your blogs to find it.
~
Pretending in words was too tentative, too vulnerable, too embarrassing to let anyone know.
- Ian McEwan in Atonement

sachi: influencing others since GOD KNOWS WHEN.

  





User avatar
763 Reviews

Supporter


Gender: Female
Points: 3888
Reviews: 763
Fri Mar 05, 2010 10:54 am
Lava says...



Snoink, I've a question.

Roughly what size should I make the picture to use it instead of the balck header?
~
Pretending in words was too tentative, too vulnerable, too embarrassing to let anyone know.
- Ian McEwan in Atonement

sachi: influencing others since GOD KNOWS WHEN.

  





User avatar
61 Reviews



Gender: Female
Points: 4134
Reviews: 61
Sat Mar 06, 2010 5:30 am
LittlePetRock says...



Will HTML backgrounds (blogspotbackgrounds, pyzam, etc.) work?
Star light; star bright,
It is time to take flight.
Off I go through the dark of night.
All my hopes and dreams in sight.
  





User avatar
1260 Reviews

Supporter


Gender: Female
Points: 1630
Reviews: 1260
Sat Mar 06, 2010 5:39 am
Elinor says...



lavabubblingout wrote:Snoink, I've a question.

Roughly what size should I make the picture to use it instead of the black header?


Hey, I was wondering this as well.

All our dreams can come true — if we have the courage to pursue them.

-- Walt Disney
  





User avatar
1220 Reviews



Gender: None specified
Points: 72525
Reviews: 1220
Mon Mar 08, 2010 12:26 am
Kale says...



The black header's dimensions are 980px x 106px. Anything as large or larger than that should work just fine.
Secretly a Kyllorac, sometimes a Murtle.
There are no chickens in Hyrule.
Princessence: A LMS Project
WRFF | KotGR
  





User avatar
446 Reviews



Gender: None specified
Points: 28776
Reviews: 446
Thu Jun 03, 2010 11:06 am
Yuriiko says...



Thank you, Snoink!
um one thing: the background's all in tiles... how do I change it?
"Life is a poem keep it in the present tense." -Sherrel Wigal
  





User avatar
1220 Reviews



Gender: None specified
Points: 72525
Reviews: 1220
Thu Jun 03, 2010 5:18 pm
Kale says...



You'll need to change the repeat part of the background-repeat: repeat; section of code.

The Possible Changes:

repeat
Background image repeats to fill the entire page. This is the default.

repeat-x
Background image repeats along the x-axis (across the page).

repeat-y
Background image repeats along the y-axis (down the page).

no-repeat
Background image only appears once.
Secretly a Kyllorac, sometimes a Murtle.
There are no chickens in Hyrule.
Princessence: A LMS Project
WRFF | KotGR
  





User avatar
763 Reviews

Supporter


Gender: Female
Points: 3888
Reviews: 763
Fri Jun 04, 2010 11:36 am
Lava says...



Ky - Just saw the old reply. Thanksizzle!
~
Pretending in words was too tentative, too vulnerable, too embarrassing to let anyone know.
- Ian McEwan in Atonement

sachi: influencing others since GOD KNOWS WHEN.

  








What really knocks me out is a book that, when you're all done reading it, you wish the author that wrote it was a terrific friend of yours and you could call him up on the phone whenever you felt like it. That doesn't happen much, though.
— J.D. Salinger, The Catcher in the Rye