Let Me Decorate Your Blog!

https://www.pexels.com/photo/person-holding-black-click-pen-697055/

I was thinking about it and since I’ve bought a new computer, I now have much more free time.

If anybody would like me to decorate their blog, just ask. All you will need is a background color preference and a picture. The only decorating I can do right now is add a header, (like the dragon I have,) add a bar to the side of the sidebar or add images to the sidebar, add dividers after each post, change the more button, change the font size or type, add a small image before the title of each post, and change the color of the background.

If you would like any of these things done, just ask!

38 replies
  1. Desirae
    Desirae says:

    Hmmm…. Could you do one for me? I am too lazy -yet at the same time to busy- to do mine myself xD I would have to know your limitations (i.e. Size examples, colors, ect) for the picture that you need, but I defiantly want to go for something black and white (perhaps some other shades?) =3

    Reply
    • Noelle M. Brooks
      Noelle M. Brooks says:

      There isn’t exactly a size limitation, just remember that it is going where that blue rectangular shape is. Also, remember that your name will be in the center in white. I don’t know how to change the title color yet.

      Reply
      • Desirae
        Desirae says:

        Alright, I will just try to create a top image around the same size as yours of what I would like (it will go with a black background, but I dont know how to add that, so I will leave that up to you ^.^). Feel free to alter it to you liking. I will get it up as soon as I can =3.

        Reply
          • Desirae
            Desirae says:

            Too late! I already did (in the process I kinda changed my mind on the colors I wanted though) =3 In truth, I made two pictures for it; this one for the header: http://i71.photobucket.com/albums/i149/Kagome_60210/Nban.png

            and this one for the thing where you have your star positioned =3: http://i71.photobucket.com/albums/i149/Kagome_60210/MPa.jpg

            You can go from there with the color scheme and dividers, ect, but those I defiantly want on there! As I said: black background. The sidebar doesnt really matter to me. I might get up and find some images to put on there, but I dont know =P Anyway, good luck! I have to log off now xD

            Reply
            • Noelle M. Brooks
              Noelle M. Brooks says:

              Nice header picture Desirae, but you forgot to put the sides of the blog on the sides of your header. If you look at my dragon picture, it has that small grey outline on the left, right, and trimmed around the top. You are going to need to add those. I can do that for you if you like.

              Reply
            • Noelle M. Brooks
              Noelle M. Brooks says:

              Alright, I had to make a little size adjustment, and retype your words since they were unreadable after the size change. Rounded corners or straight corners? Which one do you like better? You can also do the size adjustments on your own if you want to.

              Reply
              • Desirae
                Desirae says:

                Actually, the outside was kinda ment to be that way -broken look and all- but now that I think about it, I like what you did with it better =P For the header, I think the straight corners would look best, and I will probably end up making my own divider sometime this weekend that exactly follows the color scheme that I want -I dont have access to my images right now, so I cant do it right this second =/-. By the way, does the box on the header go around the name of the blog? I dont know if you have tried it or not, but that is what it is there for xP Since you have adjusted the size of my header, that is what I am most worried about 0.0 Anyway, off to do the other things that I do =3 I will have the divider for you sometime later on this weekend ^.^

                Reply
                • Noelle M. Brooks
                  Noelle M. Brooks says:

                  I only adjusted the size a few pixels, so it isn’t a drastic change. The box does not look like it will fit the words, but we can try it. If not we can also change the font size.

                  Reply
                  • Desirae
                    Desirae says:

                    Alright. I used yours as a refrence (thank you screenies!) and I got the measurements pretty precise so I figured it would work =P I would at least like to try it… Oh! I have decided to use one of the premade dividers instead of making my own (lazyness is kicking in xP) so I think that this one would be good:
                    http://www.pageresource.com/graphics/dividers/div20.jpg

                    Need anything else? I also need some help on finding out exactly /where/ to put the codes and all that… That part confuses me @.@ Sorry if I am being a bother to you =3

                    Reply
                    • Noelle M. Brooks
                      Noelle M. Brooks says:

                      Desirae, that was the divider I thought would match your page best too…now for the code stuff. Takes a deep breath First I will need the code for the remake of the header that you made.

  2. Terri
    Terri says:

    Thanks for offering, but I kinda like my green and black background… it’s a terri thing, I guess… 😀 *grins* though, your dragon is amazing… 😛

    Reply
  3. Desirae
    Desirae says:

    Sorry I havn’t had a chance to come here latly o.o And if you have a rough estamate, about how long will this take to complete? Just wonding, because I love to ask questions (if you havnt noticed xD)

    Reply
    • Noelle M. Brooks
      Noelle M. Brooks says:

      Not sure…I have to tell you how to put in the codes though. It depends on how easily you can follow somewhat tricky directions. So, do you have the URL for the header that you made?

      Reply
    • Noelle M. Brooks
      Noelle M. Brooks says:

      Alright Desirae, now for the codes. To edit codes, click on Site Admin under Meta on your menu sidebar thing. Next click on the Presentation tab at the top. After that click the Theme Editor tab at the top. Next you will see some words at the right starting with stylesheet. Look at the bottom of that list and you should see Header template. Click on that.

      So, Site Admin>Presentation>Theme Editor>Header Template

      Now you are on the right page. You should see a big box. Copy and paste all this into that box. You should now have your header! Comment back and I will tell you how to change the background color.

      —Copy and Paste EVERYTHING Below This—

      ; charset=" />
      
      » Blog Archive
      
      " />
      
      " type="text/css" media="screen" />
      " />
      " />
      " />
      " />
      
      /*  To accomodate differing install paths of WordPress, images are referred only here,
          and not in the wp-layout.css file. If you prefer to use only CSS for colors and what
          not, then go right ahead and delete the following lines, and the image files. */
      
        body {/*background: url(”/images/kubrickbgcolor.jpg”); */}
      
      
      #page { background: url("/images/kubrickbg.jpg") repeat-y top; border: none; }
      
      #page { background: url("/images/kubrickbgwide.jpg") repeat-y top; border: none; } 
      
      #header { background: url("http://img.photobucket.com/albums/v470/hyperwires/deshead.jpg") no-repeat bottom center; }
      #footer { background: url("/images/kubrickfooter.jpg") no-repeat bottom; border: none;}
      
      
      /*  Because the template is slightly different, size-wise, with images, this needs to be set here
          If you don't want to use the template's images, you can also delete the following two lines. */
      
      #header     { margin: 0 !important; margin: 0 0 0 1px; padding: 1px; height: 198px; width: 758px; }
      #headerimg  { margin: 7px 9px 0; height: 192px; width: 740px; } 
      
      
      /*  To ease the insertion of a personal header image, I have done it in such a way,
          that you simply drop in an image called 'personalheader.jpg' into your /images/
          directory. Dimensions should be at least 760px x 200px. Anything above that will
          get cropped off of the image. /
          /
          #headerimg { background: url('/images/personalheader.jpg') no-repeat top;}
          */
      
         <a>"&gt;</a>
      Reply
      • Desirae
        Desirae says:

        Ok, Noelle, I did it, but not in the way you told me too xDD You might want to find a different way of showing people the codes. I think filters block out A LOT of important stuff (you doint want too see what it looked like when I just copied and pasted what you told me too o.0). And the words in the box work… sort of ^.^ Good enough, I dont want to re-do my header xDD Anyway, what is next ? =3

        Reply
        • Noelle M. Brooks
          Noelle M. Brooks says:

          It is lookin’ nice!

          Now, for the background color, go to the StyleSheet Template on that last page, and scan through the top and replace wherever it says “background-color: white; with black where its says the color. It may say #123456 (random 6 numbers) instead of the word of the color, replace either one you see.

          EXAMPLE:

          You see: background-color: white;

          You replace it with: background-color: black;


          For the divider after each post go to the Main Template and scroll all the way down. At the top of your box, you should see the word “/div” inbetween brackets. A line before that, paste:

          <center><img src=”http://www.pageresource.com/graphics/dividers/div20.jpg”>


          For the little face thing you want where I have the little blue stars, stay on the Main Template page. Scroll all the way to the top and look near the middle of your box. You should see the word “small” inbetween brackets. Before that is: <?php the_title(); ?></a></h2>

          Paste this:

          <img src=”http://i71.photobucket.com/albums/i149/Kagome_60210/MPa.jpg”>

          before that line. (The line that says: <?php the_title(); ?></a></h2>)


          Any questions? Just ask me!

          Reply
          • Desirae
            Desirae says:

            Ummmm…. Yeah. A lot of questions. I changed every thing that said background-color: insert color or hexidecimal code here to background-color: black, and the background still isnt black. I did what you said with the divider and the face thing, and all I get there is a white box with a red “x” where the image is supposed to be… I could show you what I have for my codes, if you want. I will put them on a web-page. I will get the link to you ASAP.

            Reply
            • Noelle M. Brooks
              Noelle M. Brooks says:

              For the background, I don’t think that you put

              body {/*background: url(”/images/kubrickbgcolor.jpg”); */}

              where it said

              body {background: url(”/images/kubrickbgcolor.jpg”); }

              under the Header Template. You said that my Header Template instructions didn’t work.

              Reply
            • Noelle M. Brooks
              Noelle M. Brooks says:

              Okay, I figured out why the pictures weren’t showing up! Just re-type the quotation marks. That’s it!

              Reply
              • Desirae
                Desirae says:

                Oh! Thanks ^.^ Yeah, I can see what I did wrong with my bg now. I am starting to understand these codes a bit more =DD And I am almost done putting everything on the webpage.

                Reply
                  • Desirae
                    Desirae says:

                    Yeah, that made sence (because of the font difference, and all). Thank you, Noelle ^.^ You have helped me… a lot… with understanding the codes =3 I think I might be able to do some stuff on my own now xD If I have any questions -or if I figure out how to do something new- I will be sure to ask/tell you! Thanks again!!

                    Reply
                  • Desirae
                    Desirae says:

                    I figured out how to move the Title up and down! Wow. Near the middle of the stylesheet page, there is something that says:

                    /*  Begin Headers */

                    Below that it says:

                    h1 {
                        padding-top: 86px;
                        margin: 0;
                    }

                    Just change the 86px and your title will either go up or down. (The larger the number, the further down it will be). Now to figure out how to move it from left to right….

                    Reply
                    • Noelle M. Brooks
                      Noelle M. Brooks says:

                      Cool, nice discovery! Now you can shrink it, then move it down to fit in the box.

  4. Dez
    Dez says:

    Wow, it has been a while since I have been here o.o Well, I think it is time for a change, so I would like to ask you something ^.^ I have some thoughts on this, but I didn’t want to completely screw up my blog while fiddling with it, so anyway, how to you have an image for your background? I get the colors, but for my new layout I would like to have a design in the background, and can’t quite figure out how to do it…. So if you could help, it would be much appreciated!

    Reply
      • Dez
        Dez says:

        Hehe, sorry for beating around the bush. You know how you have the cool colorful spiral and starry thing in your background? Well, how did you get that image on there? Like… what code and what-not. I don’t want the exact picture, but I do want something in my background…

        Reply
        • Noelle M. Brooks
          Noelle M. Brooks says:

          Alright, my background doesn’t show up on everybody’s computers for some reason, but here is the code that I use. I put it at the top of the Main stylesheet under the Theme Editor of Presentation. Just replace the stuff inside the ( ) with your own picture.

          Okay, click here to see the code.

          Reply

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.