Child Theme Woes: Photo Looks Murky and Can't Move It Up

  • Been slogging my way through creating a child theme in Twenty Twelve. I created something to my liking locally on my computer but when I uploaded the child theme folder, problems.

    First, the photo on the front page is murky! It was crisp on my local site so what gives?

    Second, I want the photo to move up more. When I played with the photo locally, I changed the “advanced image settings” by putting a (-) negative number in the “vertical space” under “image properties,” and it worked great! Yet when I uploaded to my live site, it didn’t work. The copy ran right over the image. (For the time being, I removed the negative number until I figure out what I did wrong.) So what’s the proper way to move the image up?

    As I’m not very well versed in child themes (obviously), talk to me like I’m stupid! Step by step is appreciated.

    As always, MANY THANKS for the help.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter midlife mama

    (@midlife-mama)

    Fixed the photo murkiness by deleting and uploading again. But still can’t figure out how to move it higher without the text running over the bottom. Is there some CSS code that I can add? Or perhaps change the header.php?

    Header.php takes care of things above the Navigation Bar, so I believe nothing there would change the display of an image below the NavBar. One thing you might do, if you have not already done so, would be to crop that image at the top if it happens to have any white space above all the nice hair. But either way, you might need a custom page template if you want to raise that pic and still not have text spilling underneath (like Twenty Twelve handles it on a narrow screen or during a zoom-in anyway).

    If you are trying to move the photo of the twins up – it’s basically at the top of the containing element (except for a small margin applied to all images) – so you would need to use a negative top margin to force it above it’s normal position. Try adding this to the CSS:

    img.wp-image-3538 {
   margin-top: -10px;
}

    Adjust the margin according to what you like.

    If you mean the header image, post back and we can fix that one instead.

    Thread Starter midlife mama

    (@midlife-mama)

    Thank you! It worked! One follow up question–

    When I edited the css of my site locally, nothing happened. But I decided to take a chance and just make the changes on my site live, and it worked. As I’m really very green I’m just curious why that happened. I’d like to learn for next time.

    And why couldn’t I just adjust the “advanced image settings” when I uploaded the photo? As I said above, it worked locally but didn’t work on my live site.

    Thanks to both of you.

    It’s hard to say why those things happened or didn’t. One possibility is that any tiny syntax error in a CSS file can make the subsequent CSS null. So maybe look for any errors in the CSS. Also be sure to always clear your browser cache after making any changes — or even try another browser.

    On the other, not sure either – I’d have to try to recreate it. Are you using Firebug to work with CSS? It’s really a super tool – so check it out if you aren’t already using it.

    Thread Starter midlife mama

    (@midlife-mama)

    Thanks for the suggestions. I’ve been using Notepad++ but I’ve heard of Firebug. I’ll have to look into it further.

    Thanks again.

    I’m sure you haven’t heard the last from me…. : )

    Error establishing a database connection

    Hope that is not anything big …

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Child Theme Woes: Photo Looks Murky and Can't Move It Up’ is closed to new replies.