WordPress.org

1. jessispeer
   Member
   Posted 8 months ago #
   

   Hi there,

   I've searched and brainstormed all the options I can think of, but I still have no idea how to make this work the way I want it to. Maybe it's not possible in Coraline, but I really hope it is, and I hope you can help!

   Here's the link to my website: http://dantreranch.com

   What I need help with is making the brown leather tooling picture (which is now just on the sides) a border around the tan textured background. I tried piecing the two pictures together in photoshop and uploading it as the background (via Appearance->Background), but it comes up as a tiny picture instead of filling the background (it's sized at 1926 x 2311 pixels). The picture that makes up the background as it is on the website now is 1926 x 130 pixels, and tiled down horizontally. So I'm guessing the picture I created is too tall. I'm assuming my only option lies in html code, which is very new to me, but I can follow directions pretty well. Any ideas?

   http://wordpress.org/extend/themes/coraline/

2. WPyogi
   Volunteer Moderator
   Posted 8 months ago #
   

   I'm not totally understanding what you want to do -- and the only background I see is the textured tan. Can you explain differently or post an image or drawing of what you want?

3. jessispeer
   Member
   Posted 8 months ago #
   

   If you do ctrl- to zoom out, you should be able to see the leather tooling on the sides that I'm talking about.

   This is the background right now: http://dantreranch.com/wp-content/uploads/2012/10/new-background1.jpg

   This is what I want it to look like: click here

   But like I said, when I upload the latter, it shows up very small and doesn't fill the page. As you can see, the picture that is uploaded on there now is tiled, but there's no way I could do a background with a border as a tiled image, it just won't work. So, there must be another way that I can make the full image w/the border fill the whole page. Does that make sense?

   Thank you in advance for your help! :)

4. WPyogi
   Volunteer Moderator
   Posted 8 months ago #
   

   Yep, got it, and you are right, with a responsive site, a background image like that won't work cause it won't resize correctly with the page. One way to do what you want is to add another "container" div outside the current one and put the dark brown image as background in the outer div -- and the tan background image in the inner container (current one). You'd need to add the opening div in the header.php file and the closing div in the footer.php file, and use an ID so that you can use CSS to style it. Would you want the tan to expand with the page or the darker brown?

5. WPyogi
   Volunteer Moderator
   Posted 8 months ago #
   

   Oh, one other thing -- you really, really should be using a child theme -- so that all your changes won't get erased when the theme is updated. It looks like you've already made a lot of changes to the theme? Do you know which files have been modified?

6. jessispeer
   Member
   Posted 8 months ago #
   

   Ok,I understand where I would add the outer/inner container div, but I don't know how to write code or anything, what would I put there? I'm not sure what you mean by "opening div" and "closing div" in the header and footer, respectively, and by ID do you mean page IDs? I think I would want the darker brown to expand with the page.

   I don't know much of anything about child themes, but I would really like to to learn. I'll check that topic out in the forum. I have made many changes to the html, but I have the original codes saved on my computer as well as my changes in a separate file. I've only modified header.php via file manager, and the main stylesheet.css via Appearance->Editor.

7. WPyogi
   Volunteer Moderator
   Posted 8 months ago #
   

   Sorry this fell through the cracks. But before you do anything more, you need to set up a child theme. You'll need to move any changes you made to theme files into the child theme and upload new, unchanged copies of those files to the parent install. I know it seems like a pain, but you really don't want to lose all your work when the theme is updated :).

8. jessispeer
   Member
   Posted 8 months ago #
   

   Oh ok, whew, thanks! :) I want you to know you're saving me by doing this great service! Thank you so very much!!!

   I successfully finished my child theme, yay! That actually wasn't as bad as I thought it would be. Plus, it makes this way easier, I don't have to worry about the original css anymore, awesome! Ok, so now that I'm up to speed on that, how would I start changing the background?

9. WPyogi
   Volunteer Moderator
   Posted 8 months ago #
   

   Okay, good job on the child theme! So just to be sure we are on the same page, the site right now has the darker border - -but it's only visible if the browser is wide -- right? And you want the tan part to be smaller -- so the darker shows more?

10. WPyogi
    Volunteer Moderator
    Posted 8 months ago #
    

    Before doing anything, make a back-up copy of any files that you change!
    Looking at this again, I think you might be able to do what you want with the existing html code -- by putting the tan background image as a background for the container div -- line 78 in your child theme CSS:
    add this:
    

    body.no-sidebars #container, .full-width #container, .attachment #container {
        max-width: 990px;
        background-attachment: scroll;
        background-image: url("http://dantreranch.com/wp-content/uploads/2012/10/imagename.jpg");
        background-position: center top;
        background-repeat: repeat;
    }

    Obviously, use the right image name...

    And you'll want to remove the custom background from the body -- or change that to just the dark brown image.

11. jessispeer
    Member
    Posted 8 months ago #
    

    Yes, that's pretty much what I want to do, except I want the darker brown to be like a border around the tan.

    Ok, I'll try that and see what happens haha, thanks!

12. jessispeer
    Member
    Posted 8 months ago #
    

    I inserted the code with the correct file name of the tan background but it's not showing up. I usually change the background by going to Appearance > Background in wordpress, so I figured that was overriding it. So I removed the background that was uploaded there in hopes that the background I just added with the code would show up, but nothing. Hmmm...

13. WPyogi
    Volunteer Moderator
    Posted 8 months ago #
    

    If you can do it using the appearance--background option, that's great, even better! As is, it looks like maybe the filepath is not working right -- check on that.

14. jessispeer
    Member
    Posted 8 months ago #
    

    Well that's the thing, I've been uploading the background that way (Appearance > Background), but it won't upload the larger file that I want with the border. OH! Unless you mean upload the darker brown background there and then insert the tan in the html to overlay on top of the darker brown. I'm not sure if that would work because the tan needs to be a little smaller so it gives a border effect with the darker brown. Am I making sense?

15. WPyogi
    Volunteer Moderator
    Posted 8 months ago #
    

    Actually, if you put the dark in the body and the tan in the container div, it will do the "framing" automatically -- because of the size of the container div.

16. WPyogi
    Volunteer Moderator
    Posted 8 months ago #
    

    then insert the tan in the html

    Yes, but it's still in the CSS, not HTML.

Reply

You must log in to post.