Page Layout
-
I want the photos to appear in a column to the right with the text on the left. How can I do this?
https://jerusalemsummercamp.com/campus/
-
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;}Where exactly do I make those changes? Can I easily apply them to specific pages but not others?
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 https://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 HorseThis does align the images to the right, but doesn’t make them next to the text. Just aligned right, below the text.
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="https://jerusalemsummercamp.com/home/img_7898/" rel="attachment wp-att-83"><br /> <img class="alignnone size-medium wp-image-83" alt="IMG_7898" src="https://jerusalemsummercamp.com/wp-content/uploads/2012/12/IMG_7898-300x200.jpg" width="300" height="200" /></a><br /> <a href="https://jerusalemsummercamp.com/campus/img_7919/" rel="attachment wp-att-50"><img class="alignnone size-medium wp-image-50" alt="IMG_7919" src="https://jerusalemsummercamp.com/wp-content/uploads/2012/12/IMG_7919-300x199.jpg" width="300" height="199" /></a><br /> <a href="https://jerusalemsummercamp.com/campus/img_7830/" rel="attachment wp-att-49"><img class="alignnone size-medium wp-image-49" alt="IMG_7830" src="https://jerusalemsummercamp.com/wp-content/uploads/2012/12/IMG_7830-300x200.jpg" width="300" height="200" /></a><br /> <a href="https://jerusalemsummercamp.com/campus/img_7822/" rel="attachment wp-att-48"><img class="alignnone size-medium wp-image-48" alt="IMG_7822" src="https://jerusalemsummercamp.com/wp-content/uploads/2012/12/IMG_7822-200x300.jpg" width="200" height="300" /></a><br /> <a href="https://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="https://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>
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.
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="https://jerusalemsummercamp.com/home/img_7898/" rel="attachment wp-att-83"> <img class="alignnone size-medium wp-image-83" alt="IMG_7898" src="https://jerusalemsummercamp.com/wp-content/uploads/2012/12/IMG_7898-300x200.jpg" width="300" height="200" /></a> <a href="https://jerusalemsummercamp.com/campus/img_7919/" rel="attachment wp-att-50"><img class="alignnone size-medium wp-image-50" alt="IMG_7919" src="https://jerusalemsummercamp.com/wp-content/uploads/2012/12/IMG_7919-300x199.jpg" width="300" height="199" /></a> <a href="https://jerusalemsummercamp.com/campus/img_7830/" rel="attachment wp-att-49"><img class="alignnone size-medium wp-image-49" alt="IMG_7830" src="https://jerusalemsummercamp.com/wp-content/uploads/2012/12/IMG_7830-300x200.jpg" width="300" height="200" /></a> <a href="https://jerusalemsummercamp.com/campus/img_7822/" rel="attachment wp-att-48"><img class="alignnone size-medium wp-image-48" alt="IMG_7822" src="https://jerusalemsummercamp.com/wp-content/uploads/2012/12/IMG_7822-200x300.jpg" width="200" height="300" /></a> <a href="https://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="https://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 – https://codex.www.ads-software.com/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 saveView the page does it work now?
- The topic ‘Page Layout’ is closed to new replies.