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

  • Author
    Posts
  • #1419035

    mrdirby
    Member

    I think you will have to manually add buttons that link to the next page in your sequence. Just add the arrow to the post and make it a link to the next page.

    #1419036

    emilychaffee
    Member

    forget the white box thing – you were right about that.

    #1419037

    mrdirby
    Member

    If you are worried about finding the id numbers it isn’t difficult. Here is a description of where to look.

    #1419038

    emilychaffee
    Member

    hi mr dirby! i hadn’t even seen your posts when i wrote “forget abou the white box thing” – i just realized that justpi was right – aesthetically it didn’t look finished without the border.

    thanks for the answer on the arrow… how do you add an arrow to the post?

    #1419039

    emilychaffee
    Member

    justpi i figured out that formatting error – no need to answer that question.

    #1419042

    emilychaffee
    Member

    I think you will have to manually add buttons that link to the next page in your sequence. Just add the arrow to the post and make it a link to the next page.

    mrdirby – could you tell me how to do this?

    #1419044

    mrdirby
    Member

    Sure, At the bottom of you page you can just use the words “next” or “previous” and make them links. If you want graphics then you could insert those graphics in to your page and make them links.

    Your default style sheet has rules for these so you could try to wrap each one in a div. I’m not sure how it will exactly show so you can experiment. Here is the css in your style sheet.

    [class*="navigation"] .previous {
    	float: left;
    	width: 50%;
    }
    [class*="navigation"] .next {
    	float: right;
    	text-align: right;
    	width: 50%;
    }

    So in your page you would add:

    <div class="navigation previous">
    <a href="URL TO PREVIOUS">previous</a>
    </div>
    <div class="navigation next">
    <a href="URL TO NEXT">next</a>
    </div>

    Does that make sense?

    #1419045

    emilychaffee
    Member

    thanks for your response mrdirby.

    1. i tried what you gave me here.

    i’d like it to look how it looks in the demo, with the small arrow, and ideally right below my photo (above the “buy now” buttons.) here’s what it looks like in the demo: here and here

    2. could you tell me how to fix this page? meet. for some reason it is not formatting like the other parent pages.

    3. this page is pretty much set up how i want them to be. the last thing is to increase the size of the thumbnails. can you tell me how to do this?

    thank you!
    emily

    #1419047

    mrdirby
    Member


    1. What if we try a different approach. If you like those arrows let use them. And lets put those links on the same line with a vertical slash mark.

    Put this in your page as html. This would be for your example page you showed me. http://emilychaffee.com/marsh-2/marsh01/

    <div class="nav-tab">
    <a href="http://emilychaffee.com/marsh-2/">← marsh</a> | <a href="http://emilychaffee.com/marsh-2/marsh-02">marsh 02 →</a>
    </div>

    Then add this to your css.

    .nav-tab {
    text-decoration: underline;
    padding: 5px;
    background: #f6f6f6;
    }

    See if that works for you. You can experiment with the placement and width of the gray bar.

    #1419048

    mrdirby
    Member

    2. My best guess about the formatting of that page is that it isn’t a “Room” page. And the css is different. It looks like there is a sidebar trying to get inserted on the page. Go into the page editor and look on the right for templates. Is there an option for full width with no sidebar?

    #1419049

    mrdirby
    Member

    3. Sure this is easy compared to the other one. :)

    The picture and the header use a width in percent that equal 100. The image is set to 28%, the content 70%, and margin 2%. So you will need to decrease the content percent and increase the image. Just play around until you find what you want.

    Add this to your css.

    .hotels-listing .attachment-room-thumbnail {
    width: 28%;
    }
    .hotels-listing.thumbnail .entry-header {
    width: 70%;
    }
    #1419050

    emilychaffee
    Member

    thanks for all your help mrdirby.

    1. that works for setting up the arrow and linking the page. how do i align the arrows to the left and right of the photo under the photo? you can see what i’m trying to do here: http://emilychaffee.com/marsh00/marsh01/

    for now i just spaced it out with the space bar. i am using safari and the words/arrows align perfectly. i opened it in firefox and they were off. is there a command to get it to align in any browser – instead of using spaces?

    2. none of my pages are room pages. they are all the default template. justpi helped me to switch over to the default template because i could only have the room setup for one page (ie marsh) and i wanted it for multiple.

    i did try the option for full width – it did not make a difference. i made this page by copying one of the other pages. i’ve tried it multiple times, still get this same format issue.

    3. thank you – much better.

    4. when i checked the spacing of the arrows in firefox i saw that my layout is messed up in firefox. everything is pushed over to the left instead of being centered. is there a way for me to fix this?

    thanks again –
    emily

    #1419053

    mrdirby
    Member

    1. I thought about that before but wasn’t sure how you wanted to implement. You want to avoid putting spaces like that in. Add an ID to each anchor tag, lets call them right and left.

    The links in your page will look like this.

    <a href="http://emilychaffee.com/marsh00/" id="left">← marsh</a>
    <a href="http://emilychaffee.com/marsh00/marsh02/" id="right">marsh 02 →</a>

    And the CSS.

    #left {
    float: left;
    margin-left: 93px;
    }
    
    #right {
    float: right;
    margin-right: 93px;
    }
    #1419054

    mrdirby
    Member

    2. I’m not sure why the meet page is formatting differently. It kind of seems like a page setting thing. Try recreating the page from scratch. The only other idea I have is that your featured image and main page image are too large. The image in the content shows that it is pulling the thumbnail.

    3. Great.

    4. Do you mean the same arrows as in the first question. Try the above css and see if that solves the problem.

    #1419055

    justpi
    Member

    The page “Meet” looks different because you’ve added an empty text widget to the secondary sidebar but you messed with its visibility settings: you’ve set it to be hidden on “Meet”, so the page has become full-width.

    #1419056

    emilychaffee
    Member

    a. the arrow locations are solved – much better!

      how do i locate items vertically w/ anchor tags & css instead of using “return” in the visual editor? i’ve been creating the spacing between the arrows and the “buy now” buttons with returns.
      i have one portrait orientation photo that the arrows are not lined up correctly for. how do i set up the arrows specifically for this page?

    b. i don’t know how i would have set the text widgets to be hidden on meet. i deleted the text widgets in the sidebars and reinserted them. all the pages are centered now.

    c. in firefox it looks like there is no primary sidebar, so everything is pushed to the left. when you click into a photo, it is small and the arrows are located to the left and right of the edge of the photo.

      is there a way to make sure the website is showing up centered, w/ correct sizes and alignments in all browsers?

    d. at the bottom of each page i want to put a quote. i have the same “return” vertical spacing question as above and:

      how do i set that text to be full width wrap – to the width of the images above it?

    thank you –
    e.

    #1419057

    emilychaffee
    Member

    the portrait image w/ the misaligned arrows is here.

    the text that i want as wide as the images above it and with more space above it is at the bottom of this page.

    #1419058

    emilychaffee
    Member

    ok addition to b.

    my solution to fix the page “meet” ended up making the individual photo pages narrow. see here.

      how do i get the individual photo pages to be full-width while the parent pages have empty sidebars?
    #1419059

    mrdirby
    Member

    a. for that portrait page change your links on that page to this html. I added a special style to those links so there is zero margin and it will align with the edges of the picture.

    <a id="left" style="margin-left:0;" href="http://emilychaffee.com/mountain01/">← mountain 01</a>
    <a id="right" style="margin-right:0;" href="http://emilychaffee.com/mountain03/">mountain 03 →</a>

    What is happing is that instead of hitting return to create space I’m putting a margin around the content. So the browser knows to put x amount of space there instead of hard returns or actual spaces. This explains how css works with space, called the box model. http://www.w3schools.com/css/css_boxmodel.asp

    #1419060

    mrdirby
    Member

    b. Do you have an example of the full width that is working. I think you are going to have to target each page you want full width and change the width of the main container and the left padding.

    c. I’m not seeing a problem with anything being displayed to the left in Firefox. Can you send me a screen shot?

    d. Have you tried the blockquote feature of your blog. It looks like it will do exactly what you are asking.

The topic ‘stay theme: how do i make text visible in "room" and not in thumbnail of "room?"’ is closed to new replies.