stay theme: how do i make text visible in "room" and not in thumbnail of "room?"

emilychaffee · Member · Sep 20, 2013 at 3:34 am
Copy link
hi mrdirby

a. that code for the portrait page aligns the arrows perfectly with the edges of the photo, and they are perfectly placed just below the photo.
b. i’m confused about what happened. all of my individual photo pages were full-width and i never did anything with the container/padding before. then i tried to fix the meet page by removing the sidebar widgets and including them again and then all my individual photo pages became centered and small. is there a way to override the widgets on the individual photo pages?

c. i took a screen-shot. how do i send it to you?

d. i tried blockquote. it indented the quote and still has it wrapping at about 2/3 the width of the photo above instead of the full-width of the space. you can see at the bottom of this page.
justpi · Member · Sep 20, 2013 at 8:45 am
Copy link
in firefox it looks like there is no primary sidebar, so everything is pushed to the left.

It’s not only in Firefox, it’s in any decent browser version. Remove this (wrong) piece of code you had added:
```
#content {
    padding-left: 0;
}
```
still has it wrapping at about 2/3 the width of the photo above

That’s because the texts were designed to show next to the thumbnails. Now that you turned the thumbnails into large images, you need to remove this:
```
.hotels-listing.thumbnail .entry-header {
    width: 35%;
}
```
and add this instead:
```
.hotels-listing.thumbnail .entry-header, .hotels-listing.thumbnail .entry-content, .hotels-listing.thumbnail .entry-meta {
    width: 100%;
}
```
is there a way to override the widgets on the individual photo pages?

Edit them and select the full-width template.
Or do you mean empty sidebars instead of full-width pages?
(Since this isn’t clear to me, I’m skipping the answers to your other questions for the moment.)
mrdirby · Member · Sep 20, 2013 at 2:41 pm
Copy link
OK I must have misunderstood you before about the space below the right and left links. Replace this for your right and left Ids in your css. Added margin below.
```
#left {
float: left;
margin-left: 93px;
margin-below: 25px;
}

#right {
float: right;
margin-right: 93px;
margin-below: 25px;
}
```
For blockquotes change the margin to 0 should do the trick.
```
blockquote {
margin: 0;
}
```
emilychaffee · Member · Oct 21, 2013 at 10:33 pm
Copy link
hi mrdirby & justpi. thanks for your help. here’s where i am now.

• i tried the code with the margin beneath the arrows, didn’t work and still had to use enter twice in the text editor to get the spacing I wanted.
how can i use code to create this space?

• the following pages the photos are not showing up full width and/or the arrows are not aligning with the edge of the photo: ocean 1, 2, 3. mountain 2. orenda 2. still2, 4. can you tell me how to fix this?

thank you again.
e.
thesacredpath · Member · Oct 22, 2013 at 12:16 am
Copy link
@emilychaffee, let’s try something a little different here. First off, you are going to have an overall div around two child divs, one floated left with the left arrow and link, and one floated right with the right arrow and link. This is example code for your orenda02 page. Also note that I have taken out any style attributes you had in there to begin with. I’ve taken care of all that in the CSS below.
```
<div id="ec-nav">
<div id="left"><a href="http://emilychaffee.com/orenda01/">← orenda 01</a></div>
<div id="right"><a href="http://emilychaffee.com/orenda03/">orenda 03 →</a></div>
</div>
```
The overall div (ec-nav) has some CSS associated with it and it is what controls the space below the previous/next navigation. To control that space, adjusting the bottom margin value (100px right now). The #left and #right are somewhat different from what you had as well.

Replace the CSS associated with #left and #right and then paste the three rules below your existing CSS and see what you think.
```
#ec-nav {
    margin-bottom: 100px;
    width: 100%;
}

#left {
    float: left;
    text-align: left;
    width: 48%;
}

#right {
    float: right;
    text-align: right;
    width: 48%;
}
```
thesacredpath · Member · Oct 22, 2013 at 1:01 am
Copy link
I’ve looked at your images, and these are the sizes uploaded for Ocean 01 through 05:

Ocean 01: 987px wide
Ocean 02: 882px wide
Ocean 03: 1024px wide
Ocean 04: 1126px wide
Ocean 05: 1600px wide (shows at 1190px in width

The maximum image width on Stay (visible) is about 1190px due to padding. Ocean 01, 02 and 03 are not near that 1190px maximum width. WordPress will not enlarge images that you upload. You can edit the images from within the Media Library, but you can only scale them down, not up.

If you want 01, 02 and 03 to be the maximum width, edit your original image in your image editing program and size them to about 1200px in width and upload those and edit the pages associated with those images and delete the existing image in reinsert the larger image.
emilychaffee · Member · Oct 23, 2013 at 4:36 am
Copy link
thank you on both @thesacredpath. both issues are fixed. one last page is not fixed, the portrait orientation photo on mountain 2. what is the best way to align the arrows to the edges of the photo? http://emilychaffee.com/mountain/mountain02/
thesacredpath · Member · Oct 23, 2013 at 8:45 pm
Copy link
On the portrait image, it is only 845px wide when I look at the actual image by clicking on it, and also when clicking on it in your media library (845px wide x 1126px high).
emilychaffee · Member · Oct 23, 2013 at 8:48 pm
Copy link
right, and i don’t want it full width because you’d have to scroll down to see the whole thing.
thesacredpath · Member · Oct 23, 2013 at 9:02 pm
Copy link
Oops, sorry. I would make your opening div for the ec-nav look like this. It makes the max width the same as the image and them centers it with the image by setting the left and right margins to “auto”.

<div id="ec-nav" style="max-width: 845px; margin-left: auto; margin-right: auto;">
emilychaffee · Member · Oct 23, 2013 at 9:42 pm
Copy link
that works.

and how do i get the buy buttons to align left with the image?
thesacredpath · Member · Oct 23, 2013 at 9:45 pm
Copy link
Do similar to what we did for the navigation. Wrap those three paragraphs in a div tag, and in the opening div tag, make it look like this.

<div style="max-width: 845px; margin-left: auto; margin-right: auto;">
emilychaffee · Member · Oct 23, 2013 at 9:58 pm
Copy link
that worked!

wow. that was quite a journey to get all that figured out. i am almost ready to launch! thank you @justpi, @mrdirby, and @thesacredpath for all your help along the way. you helped me make exactly what i wanted.

in gratitude –
emily
thesacredpath · Member · Oct 23, 2013 at 10:06 pm
Copy link
You are very welcome.
emilychaffee · Member · Nov 12, 2013 at 6:26 pm
Copy link
hello, me again. i’d like for people to be able to click on one of my photos and/or the title to see it larger instead of just the title being the link. how do i do this? thanks! e.
emilychaffee · Member · Nov 12, 2013 at 6:27 pm
Copy link
here’s an example page: http://emilychaffee.com/marsh00/
thesacredpath · Member · Nov 12, 2013 at 11:08 pm
Copy link
Hi there, When you insert the images into the pages, you can choose to link them back to the original file. See item 6 on the screenshot under #4 in the Images support page.

You can also edit previously inserted images by clicking on the image in the editor to highlight it and then click the “edit image” icon at upper right and under Link URL enter the URL you want the image linked to and click update and update the page.
emilychaffee · Member · Nov 13, 2013 at 5:17 am
Copy link
option 2 sounds perfect since all the images are already in there. i can click the image in the editor to highlight, but i don’t see an “edit image” icon in the upper right, not sure why.
thesacredpath · Member · Nov 13, 2013 at 6:48 pm
Copy link
If you are in the page/post editor, click on the image and the link will be at upper left (sorry, I said right).
emilychaffee · Member · Nov 20, 2013 at 1:51 am
Copy link
got it. great, thanks!

No items found.