1. This website uses cookies. By continuing to use this website you are giving consent to cookies being used.
    For information on cookies and how you can disable them visit our Cookie Usage page.
    Dismiss Notice

Graphics Change background and color scheme??

Discussion in 'Web Design' started by mymooser, Apr 14, 2009.

  1. mymooser

    mymooser New Member

    I just downloaded the Dog Care template but I want to change the background and the whole color scheme. Does anyone know how to do that? I'm using front page and photoshop without any previous knowlege so I'm getting a bit frustrated. I don't understand why my background isn't taking up the entire length & width of page...:confused::confused::confused:
     
    mymooser, Apr 14, 2009
    #1
  2. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    nether do we, without seeing what you did.
     
    ishkey, Apr 14, 2009
    #2
  3. mymooser

    mymooser New Member

    Oh! I actually haven't purchased my domain yet, therefore I haven't published anything. All I have is the saved index.html file on my harddrive.

    Do you think I should get my domain up & running before I tackel the construction of the site?
    How else can I show you what I'm talking about?
     
    mymooser, Apr 14, 2009
    #3
  4. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    Click on the advance button when you answer the post.
    There you will find extra tools to display your code, upload files and pics.
     
    ishkey, Apr 14, 2009
    #4
  5. mymooser

    mymooser New Member

    Oh! Okay. I've attached my file. I hope this works :)
    I can't attach the file I have saved, my actual webpage because I have it saved as a .html file extention. I guess I'll have to buy the domain and publish the site for anyone to see how horibble my novie progress is! haha

    I did attach the jpeg I want to use as my background.


    Now-if you can see what I uploaded, I wanted to change the color of the background I have. I want to make the White a dark green (ie: 414E19) and the pink a gold or light brown color...
    I've tried playing with my Adobe Photoshop, but it's taking me forever. There's got to be a faster way!

    Thanks sooooooooooo much for your help.
    -mymoose
     

    Attached Files:

    mymooser, Apr 14, 2009
    #5
  6. CovertPea

    CovertPea Moderator Staff Member Verified Member

    Took me 20 seconds by first using a brilliant free plugin called "Mac's Remove White"
    You can get it here: http://www.photoshop-filters.com/html/macks.htm

    I've kept the image in layers (PSD) for you to play round with.
    As for getting it on your site, I wouldn't have a clue. :confused:
     
    CovertPea, Apr 15, 2009
    #6
  7. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    Great work as always CP.
    Don't buy anything as yet mymooser - or your Enthusiasm will sputter out.
    Did you read https://freewebsitetemplates.com/forum/showthread.php?t=5694

    Dog Care template - in the images directory you will find page_bg.jpg (bg=background) and you will notice several other pics are brownish in color. All would have to be changed or you can redue the psd file and reslice it up to match the old one (not easy, but it can be done).

    If you look in the css file you will find the body section below, the part in red is what you want to play around with.

    body {
    background: #C89C52 url(images/page_bg.jpg) repeat-x;
    text-align: center;
    font: 11px arial, sans-serif;
    color: #E5D19C;
    padding: 20px 0 0 0;
    }

    Try converting the psd file CP made into a jpg file, put it into the images directory and then try the code below in the css file (always save the css after you make a change or it will not show up)

    body {
    background: #414E19 url(images/mooser.jpg) repeat-x;
    text-align: center;
    font: 11px arial, sans-serif;
    color: #E5D19C;
    padding: 20px 0 0 0;
    }

    It should look something like this. Now you have an idea as to how to proceed on.
     

    Attached Files:

    • anew.jpg
      anew.jpg
      File size:
      209.8 KB
      Views:
      2,886
    ishkey, Apr 15, 2009
    #7
  8. mymooser

    mymooser New Member


    Holy *#$*!!!!! I stayed up all night playing with my photoshop to get it to do that. Thats amazing! It's georgous! Thank you so much! That's exactly what I wanted :) Thank you thank you thankyou!!!!
     
    mymooser, Apr 15, 2009
    #8
  9. mymooser

    mymooser New Member

    Yes. I did read that thread and it does make some sense. I have tried doing what you said but the background doesn't take up the entire length of the page and it duplicates and double the width. I've attached a print screen so you can see a copy of what I'm trying do.

    On your copy the background take the whole length and width of the page, but on mine it's too small.

    Oh and another thing. On my css it says:

    body {
    background: #C89C52 url('images/page_bg.jpg') repeat-x;
    text-align: center;
    color: #E5D19C;
    font-style:normal; font-variant:normal; font-weight:normal; font-size:11px; font-family:arial, sans-serif; padding-left:0; padding-right:0; padding-top:20px; padding-bottom:0
    }



    Then I changed it to say:

    body {
    background: #414E19 url(images/mooser.jpg) repeat-x;
    text-align: center;
    font: 11px arial, sans-serif;
    color: #E5D19C;
    padding: 20px 0 0 0;
    }

    But when I hit save, it changes too:

    body {
    background: #414E19 url('images/mooser.jpg') repeat-x;
    text-align: center;
    color: #E5D19C;
    font-style:normal; font-variant:normal; font-weight:normal; font-size:11px; font-family:arial, sans-serif; padding-left:0; padding-right:0; padding-top:20px; padding-bottom:0
    }


    Do you see how it automaticly changes the font part?...Weird, I don't get it...:confused::confused::confused:
     

    Attached Files:

    mymooser, Apr 15, 2009
    #9
  10. mymooser

    mymooser New Member

    Okay. So I tinkered with it again and I tried to just save the jpeg as a bigger image size.
    My husband warned me that my monitor is big and they was his thought as to why the background wasn't long or wide enough. Does that sound right?...
    My monitor is 1680 x 1050
    So I made the image size 1680 x 1050.

    How does that sound? Am I correcting it the right way?
    Let me know your thoughts.
    -MyMooser :eek:
     
    mymooser, Apr 16, 2009
    #10
  11. CovertPea

    CovertPea Moderator Staff Member Verified Member

    I think that fancy background is going to be the problem.
    The original background image (page_bg.jpg) is a simple 2 pixel wide gradient strip that gets repeated horizontally across the page.
    That can easily be coloured to suit but then you'd have to alter coloured edges of those '2 top tabs' to blend in. And then there's the text etc. etc.

    Perhaps you could fancy up Moose's picture with some brushes similar to the background you like.
    Anyways...
    Below is that recoloured strip in case you want to try it out on the original page.
     

    Attached Files:

    CovertPea, Apr 16, 2009
    #11
  12. mymooser

    mymooser New Member


    Thanks for making this. I will use it as a back up for now. I want to try an tinker with the other one for now. There's just got to be a way to get it to fit right?...
     
    mymooser, Apr 22, 2009
    #12
  13. CovertPea

    CovertPea Moderator Staff Member Verified Member

    No problems.
    Keep on tinkering Moose.
    By trying out different changes to see how they affect certain part/s of the template is the best way to learn.

    Cheers
    CP
     
    CovertPea, Apr 22, 2009
    #13
  14. mymooser

    mymooser New Member


    I did exactly this, but now when I preview in FrontPage or preview in Explorer all I see is the green and not the actually background image? Why?
     
    mymooser, Apr 29, 2009
    #14