Twenty Twelve image (10 posts)

    Posted 2 years ago #

    Hello, I making site about live cameras and I want to add a camera image at the top-right of page
    There is edited snaphsot how it should look: http://i49.tinypic.com/in5xdz.png
    Please can someone advise me how to do this? What should I change themes via editor?

    Thanks in advance for answers ;-)

  2. Odai Athamneh
    Posted 2 years ago #

    You'll want to create a "Child Theme" for your website:

    After you do that, you'll edit your header.php file to insert that camera image. But let's get the Child Theme working first.

    Go into your server's file system where you installed WordPress, and find a folder called "wp-content". In there, find the "themes" folder.

    Create a new folder called "twentytwelvechild" and enter it. Now, we're going to create a file called style.css

    Open up a text editor and paste in the following code:

    Theme Name:     Twenty Twelve Child
    Description:    Child theme for the Twenty Twelve theme
    Template:       twentytwelve
    Version:        0.1.0
    @import url("../twentytwelve/style.css");

    Now save that as "style.css" and upload it your "twentytwelvechild" folder. Congratulations! You have a Child Theme.

    One more thing, go back to your "themes" folder, find the "twentytwelve" folder. In there, copy the "header.php" file and paste it into your "twentytwelvechild" folder.

    Please reply after you do this, or if you have any problems.

  3. WPyogi
    Forum Moderator
    Posted 2 years ago #

    Don't forget that after creating the child theme - you have to activate it - just like switching to any other theme.

  4. Odai Athamneh
    Posted 2 years ago #

    Oh right! My mistake.

    Posted 2 years ago #

    Thanks for replies, I have activated Twenty Twelve Child, I managed according to your instructions, It's easy
    BTW: There is a plugin One-Click Child Theme
    I have style.css and header.php in twentytwelvechild folder

    Where I can put the image? <img src="http://live-kamery.patwist.com/images/camera-icon.png" />

  6. Odai Athamneh
    Posted 2 years ago #

    Here's a screenshot of me editing your site's HTML, this is what it should look like when you're done: Screenshot.

    First, edit your header.php file. Look for this code:

    			<h1 class="site-title"><a href="http://live-kamery.patwist.com/" title="Live kamery" rel="home">Live kamery</a></h1>
    			<h2 class="site-description">Live kamery</h2>

    Right after it, insert this code:
    <img src="http://live-kamery.patwist.com/images/camera-icon.png" style="width: 96px;float: left;">

    That puts the camera image on the page! Now, we need to get it to line up better.

    Look at that code right before your image, see the <hgroup> tag? Replace it with this:
    <hgroup style="float: left;width: 860px;">

    Hopefully, that will do it.

    Posted 2 years ago #

    Thank you very much for you it may be easy but I'd failed to.
    Maybe you will be able to help with other problem

  8. Odai Athamneh
    Posted 2 years ago #

    You're welcome, but I don't understand. You said you failed, but I went to your website and it looks correct.

    I'll try and help with your other problem as well.

    Posted 2 years ago #

    Hi, sorry for a misunderstanding. Sometimes I use Google Translate. I thought that if I had to do it myself (Without you help) I'll failed.

    Thanks again

  10. Odai Athamneh
    Posted 2 years ago #

    Ah, I understand now. Thanks for the reply.

Topic Closed

This topic has been closed to new replies.

About this Topic