Need help? Check out our Support site, then


Tonal theme, how to have the title above the picture in image format?

  1. commutersbywordsandpictures
    Member

    My blog has two authors, one who post only texts, and the other only photographs.

    For visual continuity I would like the titles of all the posts to be at the top.
    But if I select 'images' as format they get placed underneath the photograph.

    So for now I am using the 'standard' format to get the title above the photographs.
    The problem with that is the two type of posts do not get differentiated, the icon on the side being the box with the text inside.

    Is there a way to customize the theme so the titles are always at the top, whatever the format?

    Thank you for your help.

    The blog I need help with is commutersbywordsandpictures.com.

  2. Hi commutersbywordandpictures,

    You might want to try something like this in your custom css. I think this should at least get you very close to what you're looking for.

    article.format-image {
      position: relative;
    }
    article.format-image img {
      margin-top: 50px;
    }
    article.format-image header.entry-header {
      position: absolute;
      top: 0;
      text-align: center;
      width: 100%;
    }

    Give that a try and if it doesn't work let me know.

  3. commutersbywordsandpictures
    Member

    It's working! Thank you so much.

  4. commutersbywordsandpictures
    Member

    Actually sorry Sandy but there is one issue:
    The text icon is not working anymore.
    The camera one is taking me to a page with all the images, any way the text one could do that with all the texts?

    Also could I somehow change the word 'images'on that page to ' pictures' to continue with my theme?

    Thank you for taking the time to help me, it's very much appreciated.

  5. Hi commutersbywordsandpictures,

    I believe the text icon isn't meant to work as it is the default post type. I believe only the non standard post format icons will link you to the rest of that type.

    You could try instead of using the standard post format you could use the status post format instead.

    Then you could work with this css hack I've put together and it might accomplish what you are looking for.

    .term-post-format-image #main h1.page-title,
    .term-post-format-status #main h1.page-title {
      visibility: hidden;
    }
    
    .term-post-format-image #main h1.page-title:after,
    .term-post-format-status #main h1.page-title:after {
      visibility: visible;
      padding-right: 5em;
    }
    
    .hentry.format-status .entry-format:before {
      content: '\f100';
    }
    
    .term-post-format-image #main h1.page-title:after {
      content: 'PICTURES';
    }
    
    .term-post-format-status #main h1.page-title:after {
      content: 'WORDS';
    }

    Try that and see how it works.

  6. commutersbywordsandpictures
    Member

    Brilliant, it's all working perfectly now!
    Thank you for all your help Sandy.

  7. No problem, glad that it's working!

You must log in to post.

About this Topic