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

  • Author
    Posts
  • #1944908

    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.

    #1945049

    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.

    #1945087

    It’s working! Thank you so much.

    #1945091

    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.

    #1945169

    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.

    #1945215

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

    #1945216

    No problem, glad that it’s working!

The topic ‘Tonal theme, how to have the title above the picture in image format?’ is closed to new replies.