WordPress.org

Ready to get started?Download WordPress

Forums

Clean Retina
[resolved] Page Layout (8 posts)

  1. mordecai98
    Member
    Posted 1 year ago #

    I want the photos to appear in a column to the right with the text on the left. How can I do this?
    http://jerusalemsummercamp.com/campus/

  2. bennythemog
    Member
    Posted 1 year ago #

    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;}

  3. mordecai98
    Member
    Posted 1 year ago #

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

  4. Sanjiv
    Member
    Posted 1 year ago #

    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

  5. mordecai98
    Member
    Posted 1 year ago #

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

  6. bennythemog
    Member
    Posted 1 year ago #

    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>
  7. mordecai98
    Member
    Posted 1 year ago #

    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.

  8. bennythemog
    Member
    Posted 1 year ago #

    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?

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic