Support » Theme: Clean Retina » Page Layout

  • Resolved mordecai98

    (@mordecai98)


    I want the photos to appear in a column to the right with the text on the left. How can I do this?

    Campus

Viewing 7 replies - 1 through 7 (of 7 total)
  • bennythemog

    (@bennythemog)

    1 – changed the div which contains all your picture to <div id=”photos”>

    2 – select the div containing all the photos and move it so it is after the </header> ( and before the start of your text)

    3 – Add the following to styles.css

    #photos { width: 300px; float: right; padding: 0 0 0 10px;}
    #photos img { margin-bottom: 10px;}

    mordecai98

    (@mordecai98)

    Where exactly do I make those changes? Can I easily apply them to specific pages but not others?

    Sanjip Shah

    (@sanjiv-saha)

    Hi mordecai98,

    Below are the steps.
    * Go to the page in dashboard(campus in your case).
    * Click somewhere in the text(may be after ‘Summer Program’ in your page at http://jerusalemsummercamp.com/campus/ ).
    * Then click on ‘Add Media’ just above the text editor box.
    * Choose the image of your choice of your choice.
    * Now just before clicking on ‘Insert into page’ button, in the attachment details you will see Alignment field. Set it to right.
    * Click on Insert into page.
    * Update the changes.

    Hope this will help you.

    Regards,
    Team Horse

    mordecai98

    (@mordecai98)

    This does align the images to the right, but doesn’t make them next to the text. Just aligned right, below the text.

    bennythemog

    (@bennythemog)

    The following was an example for your Campus page but you can apply it to any if you wish.

    1 – Go to dashboard, appearance – theme

    2 – Select theme options, custom css and paste in the following css then click save

    #photos { width: 300px; float: right; padding: 0 0 0 10px;}
    #photos img { margin-bottom: 10px;}

    3 – Click pages and locate your campus page and edit.
    4 – paste the follow code into the page (make sure editor set to text not visual)

    <div id="photos"><br />
    <a href="http://jerusalemsummercamp.com/home/img_7898/" rel="attachment wp-att-83"><br />
    <img class="alignnone size-medium wp-image-83" alt="IMG_7898" src="http://jerusalemsummercamp.com/wp-content/uploads/2012/12/IMG_7898-300x200.jpg" width="300" height="200" /></a><br />
    <a href="http://jerusalemsummercamp.com/campus/img_7919/" rel="attachment wp-att-50"><img class="alignnone size-medium wp-image-50" alt="IMG_7919" src="http://jerusalemsummercamp.com/wp-content/uploads/2012/12/IMG_7919-300x199.jpg" width="300" height="199" /></a><br />
    <a href="http://jerusalemsummercamp.com/campus/img_7830/" rel="attachment wp-att-49"><img class="alignnone size-medium wp-image-49" alt="IMG_7830" src="http://jerusalemsummercamp.com/wp-content/uploads/2012/12/IMG_7830-300x200.jpg" width="300" height="200" /></a><br />
    <a href="http://jerusalemsummercamp.com/campus/img_7822/" rel="attachment wp-att-48"><img class="alignnone size-medium wp-image-48" alt="IMG_7822" src="http://jerusalemsummercamp.com/wp-content/uploads/2012/12/IMG_7822-200x300.jpg" width="200" height="300" /></a><br />
    <a href="http://jerusalemsummercamp.com/about-us/jais-camp-b-ball/" rel="attachment wp-att-22"><img class="alignnone size-medium wp-image-22" alt="jais camp b ball" src="http://jerusalemsummercamp.com/wp-content/uploads/2012/12/jais-camp-b-ball-300x225.jpg" width="300" height="225" /></a><br />
    </div><br />
    <p>The JAIS Summer Program is held on the Israel Goldstein Youth Village (Chevat Hanoar) in San Simone.</p><br />
    <p>We have 3 newly renovated air-conditioned buildings.</p><br />
    <p>The Summer Program has use of the large pool on the campus which is used by Hapoal Yerushalayim. The pool is staffed by highly trained and skilled life guards.</p><br />
    <p>We have our own private secure entrance from Haim Yecheil off of Horkanya.<br />
    Campers can also be dropped off at the top entrance which is on Shai Aganon.</p>
    mordecai98

    (@mordecai98)

    I pasted the css but there seems to be no change.

    I basically want two columns with the left one text and the right one images. The image one should be half the size of the text one.

    bennythemog

    (@bennythemog)

    1 – Edit the Campus page (make sure editor set to text not visual so you can see the code) delete all and paste the following code.

    <div id="secondary">
    <div id="photos">
    <a href="http://jerusalemsummercamp.com/home/img_7898/" rel="attachment wp-att-83">
    <img class="alignnone size-medium wp-image-83" alt="IMG_7898" src="http://jerusalemsummercamp.com/wp-content/uploads/2012/12/IMG_7898-300x200.jpg" width="300" height="200" /></a>
    <a href="http://jerusalemsummercamp.com/campus/img_7919/" rel="attachment wp-att-50"><img class="alignnone size-medium wp-image-50" alt="IMG_7919" src="http://jerusalemsummercamp.com/wp-content/uploads/2012/12/IMG_7919-300x199.jpg" width="300" height="199" /></a>
    <a href="http://jerusalemsummercamp.com/campus/img_7830/" rel="attachment wp-att-49"><img class="alignnone size-medium wp-image-49" alt="IMG_7830" src="http://jerusalemsummercamp.com/wp-content/uploads/2012/12/IMG_7830-300x200.jpg" width="300" height="200" /></a>
    <a href="http://jerusalemsummercamp.com/campus/img_7822/" rel="attachment wp-att-48"><img class="alignnone size-medium wp-image-48" alt="IMG_7822" src="http://jerusalemsummercamp.com/wp-content/uploads/2012/12/IMG_7822-200x300.jpg" width="200" height="300" /></a>
    <a href="http://jerusalemsummercamp.com/about-us/jais-camp-b-ball/" rel="attachment wp-att-22"><img class="alignnone size-medium wp-image-22" alt="jais camp b ball" src="http://jerusalemsummercamp.com/wp-content/uploads/2012/12/jais-camp-b-ball-300x225.jpg" width="300" height="225" /></a>
    </div>
    </div>
    <p>The JAIS Summer Program is held on the Israel Goldstein Youth Village (Chevat Hanoar) in San Simone.</p>
    <p>We have 3 newly renovated air-conditioned buildings.</p>
    <p>The Summer Program has use of the large pool on the campus which is used by Hapoal Yerushalayim. The pool is staffed by highly trained and skilled life guards.</p>
    <p>We have our own private secure entrance from Haim Yecheil off of Horkanya.
    Campers can also be dropped off at the top entrance which is on Shai Aganon.</p>

    [please remember to mark any posted code – http://codex.wordpress.org/Forum_Welcome#Posting_Code – the above code was posted without being marked and is totally broken]

    2 – Scroll down and ensure the page is set to full with no sidebars and click update to save changes.

    3 – Go to Appearance Themes, and click custom CSS and add the following code
    #secondary { width: 200px; float: right; margin-left: 20px;} and save

    View the page does it work now?

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Page Layout’ is closed to new replies.