Need help? Check out our Support site, then

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

  1. hello -

    i want to have text that is placed within the description of a "room" (or photo in my case) be visible only within the description, not in the thumbnail on the page where all the "rooms" (or photos in my case) are listed.

    i'd like to have a different set of words, a description of the photo, show up with the thumbnail. and then the photo size text show up when you click on the thumbnail.

    can someone help me figure this out?
    the page i need help with is:

    thank you!

    The blog I need help with is

  2. Are you trying to have the body text not appear on the page you supplied but you want that to appear on the page after you click on the thumbnail? In your case the different photo sizes. And after the click you would see the paypay buttons and sizes.

    That text is the entry content of the post so we could hide entry content on those specific pages. We need to know the id of each page you want to do this on. In the case of the example you provided the id is 25. So the css would look like this.

    .page-id-25 .entry-content {
    display: none;

    If that isn't what you are trying to do let me know and we'll try something else.

  3. hi mrdirby

    thanks for your help - this is exactly what i want for the first part!

    now, is it possible to have some text that does show up with the thumbnail? i want to have a description of the photo there.


  4. OK I see. Why don't we try a different approach.

    Why don't you write your description and then insert the Read More tag before you sizes. That should display the description text and not the sizes.

    Then you don't need to modify your css at all. The read more tag is in the toolbar of your editor. Don't forget to remove the css you added before.

  5. i love this idea - that would be perfect. unfortunately i just looked it up and it says it doesn't work for pages, only for blog entries. i did try it just to be sure... it didn't work. any other possible avenues?


  6. The more tag works only with posts and only on the main posts page: it has no effect when you view a single post or a static page.

    If I understand correctly, you want some text on each "room" page but a different text on the "rooms" page. If so, you edit each room page, enter the first text the normal way, and enter the other text in the Excerpt module of the editor.
    If you can't see the Excerpt module when you'll go edit your first room page, click Screen Options (top right) to enable it.

  7. OK one more. Try adding your description to the excerpt of the individual room.

  8. that worked - thank you for your help justpi & mrdirby!!

    :) e.

  9. Great. You are welcome!

  10. a final detail on this - is it possible to align my pay buttons with my image?

  11. also - now i am moving on to the next tab... ocean. when i try to create new "rooms" they automatically show up in the previous tab "marsh." do you know how i can create "rooms" in another tab? i tried doing it as a page under the parent page but it doesn't show up. thank you - e.

  12. when i try to create new "rooms" they automatically show up in the previous tab "marsh."

    Of course they do: when you select the rooms template for a page, the page is supposed to show all your rooms (so you're not supposed to use multiple rooms pages).
    In theory you can use CSS to achieve what you're looking for (that is, tell the theme not to display rooms on rooms pages, but display rooms a,b,c etc on rooms page x, display rooms k,l,m etc on rooms page y, etc etc). I can show you how to do this, if you wish, but it's really perverse. In my opinion you should forget this function of Stay, use normal pages instead of rooms, and insert normal thumbnails that link to these pages. (I can help with this too, if you need help.)
    And if you decide to follow my advice, you don't even need Stay: you can use any theme you like.

  13. hi justpi -

    the least perverse the better. i'm figuring this out as i go. how do i use normal pages and insert normal thumbnails that link to the pages so it looks how i have marsh set up now?

    thank you!

  14. If you want the thumbnail/title/text sets to look like they do on a real rooms page, you can take advantage of their original CSS classes. As an experiment, you can try a few of the marsh 'rooms' first, on the Ocean page, so you (and I!) can check the result and compare it with the Marsh page.
    Edit the Ocean page, keep its template to default, switch the editor to Text (=code), and paste this model as many times for as many 'rooms':

    <div class="hotels-listing thumbnail">
    <div class="room-thumbnail">
    <img src="IMAGE URL HERE" alt="IMAGE DESCRIPTION HERE" class="attachment-room-thumbnail wp-post-image" />
    <div class="entry-header">
    <h1 class="entry-title"><a href="ROOM URL HERE">TITLE HERE</a></h1>
    <div class="entry-content">

    Then replace the capitals with what they specify. For each room URL, you go to Rooms > All Rooms, click Edit under the room title, copy the permalink (right below the title field). For each image URL, you go to Media > Library, click Edit under the thumbnail, copy the "File URL" (from the Save module).

  15. so, i made a "room" for ocean1 and followed your instructions above. here are a few questions:

    1. how do i get the thumbnails placed below the white box, like on the marsh page?

    2. how do i get the ocean "rooms" to not show up on the marsh page?

    i was thinking, if this worked, you'd have me set up each individual ocean "room" as a page instead. i tried it but the formatting was off so i just created another room.

  16. actually, i'd be curious to know how to get rid of that white description box in marsh altogether.

  17. 2. By using the same technique: you'll set its template to default, and insert the right thumbnails the way I suggested.

    1. By adding this:

    .entry-content {
        margin: 0;

    (This will create a problem on the contact page, but you can override it for that page only after you add content to that page.)
    Personally I don't really like the result: I don't see why the thumbnails should be indented if there's no frame around them. But it's up to you to decide. Since you aren't going to use the rooms template at all, better forget the marsh page now, concentrate on the ocean page as a model, and think of what the ideal look would be for you.

    (3). Yes, I'd have you set up each individual ocean "room" as a regular page. You don't need room pages when you don't need the auto-generated thumbnails. Other than that, there's no difference between room pages and regular pages: the content area is exactly the same. If "the formatting was off" (meaning?), then you probably made some mistake.

    By the way, you need to quick edit the marsh and ocean pages and correct their slugs.

  18. this is what i meant by the format being "off": i created a new page by copying ocean and chose default template. it shows up completely different. you say i'm making a mistake to have this come up like this - do you know what it is?

    thanks for the code to get rid of the border, how do i get rid of the white box under the feature image?

    thanks for the hint on the slugs and all your help!

  19. the next arrow button that i had when i was using rooms - can i set one up to move from page to page within a category, ie from "ocean01" to "ocean 02" to "ocean 03"?

  20. For the box under your feature image you are going to want to target the page id and then entry image. So for ocean it would be.

    .page-id-39 .entry-header {
    display: none;

    You will need to get the id number for each page you want to hide the title.

  21. 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.

  22. forget the white box thing - you were right about that.

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

  24. 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?

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

  26. 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?

  27. 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 class="navigation next">
    <a href="URL TO NEXT">next</a>

    Does that make sense?

  28. 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!

  29. 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.

    <div class="nav-tab">
    <a href="">← marsh</a> | <a href="">marsh 02 →</a>

    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.

  30. 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?

Topic Closed

This topic has been closed to new replies.

About this Topic