Modifying the post 'element' template

Dear support specialist,
I am using AutoBlog to fetch feed articles and create posts within a site using the Upfront theme. How do I change the layout of the way the generated post 'element' is displayed?

At present, The default layout presents a huge text title, then under that an avatar image, date and excerpt, etc… Then under that I get a portion of the article which basically repeats the excerpt then a read more link.

As I understand, the post is rendered within an Upfront ’element’ because it is not being created within the Upfront post editor.

In what CSS file would I alter the layout and text styles of the generated ‘element’ post? I would like clear instructions on what CSS files to edit rather than poke around and make changes by trial and error. Obviously I am not a CSS guru and I am unfamiliar with the Upfront “framework” - if you will. I have not yet been able to find any documentation about how the CSS template layouts fit together within the Upfront theme, is there anything available?

Cheers,
/Thomas

  • Bojan Radonic

    Hey there @Thomas Sarkisian, hope you're well today!

    You don't need to edit CSS in order to make changes in the layout of your blog page with all the customizations available in the Upfront themes.

    I'll take Scribe as an example, when you open your blog page using the upfront editor you can change the layout of blog posts and choose which parts are going to be displayed there.

    Once there click on the little gear icon where your posts are being displayed then click on the dropdown next to "CSS Styles & Anchor Settings" and choose one of the layouts for your posts, see screenshot.

    If you click on the post parts tab you'll see additional options, you'll be able to choose which parts will be displayed there and in which order. You can drag and drop parts to rearrange how posts will look, see screenshot 2.

    Please let me know if this helps :slight_smile:

    Cheers,
    Bojan

  • Thomas Sarkisian

    Hi Bojan,
    Thanks for the tip, I did not know that about the blog page. However, that was not exactly what I am stuck on.

    If you click on a post on the front page, it links to an individual post page which shows the post in what seems to be a fixed layout. Clicking on the cog box brings up the options for 'This Post' There are two layouts to choose from; default and thipost-blog-style. I want to modify the way posts are presented. For example I might not want to show the gravatar image, or the excerpt and only opt for displaying the full content of the article, and I would like that to be the default for all posts.
    I apologize if I am missing something really simple here.

    Cheers,
    /Thomas

  • Bojan Radonic

    Hey again @Thomas Sarkisian,

    Thanks for the clarification, I was under impression you're looking to change the layout of the blog page instead of single post pages.

    There are no available options for single post pages at the moment, this is something we're looking to change in the future where you'll have similar options as in blog page. You can still change the layout but it will require making changes to the styles so what you need to do is click on the edit button in the "CSS Styles & Anchor Settings" for desired post template and add the CSS for that template, see screenshot.

    So for example for removing gravatar image from single post page you'd want to add the following CSS:

    span.author_gravatar {
      display: none;
    }

    When saving changes you'll get an option to save changes for this specific post or for all posts, see screenshot 2. If you want to save changes for all posts you should click on "All posts of this type".

    Hope this makes sense and please let me know if you need additional assistance :slight_smile:

    Cheers,
    Bojan

  • Thomas Sarkisian

    Dear Bojan,
    Thanks for that...I now have a better understand of how to make minor modifications and I see that I can now turn on/off spans and classes.
    What I really need though, is to be able to move elements (divs) around a bit to create a different post layout.
    Such as:
    Remove entire divs such as div class="upfront-output-wrapper upfront-postpart-wrapper c2" the upper excerpt, and all the other elements in that upper area while shifting up everything below. If that makes sense?

    Ultimately I would like to rearrange how the post displays. If it possible to do this, in which file would I make modifications? I suppose an Upfront updates would wipe any such changes right?

    Cheers,
    /Thomas

  • Jack Kitterhing

    Hi there Thomas,

    Hope you're well today, currently we allow re-ordering/hiding of elements on posts when using the "posts" element from the Upfront sidebar.

    But not individual posts when writing/creating them, it is something we're looking at introducing at a later date, though it isn't currently ready.

    For now the best way would be to use the specific selector and add display: none; to hide post parts and modify padding and margins for alignment, if you'd like help with any specific css, please let us know and we'd be more than happy to assist. :slight_smile:

    Thanks!

    Kind Regards
    Jack.

  • Thomas Sarkisian

    Greetings Jack,
    I would appreciate any help you can offer with getting me started with the styling as I am not sure how to pull this off. Please see the attached images. The first is what the post-element looks like out of the box. The second is a basic representation of how I would like to display the post-element content. Note: If the post title could be justified text it would align better on the page, especially with longer titles.

    Also note: the word Privacy in Terms-Privacy in the default Fixer template is spelt incorrectly.

    Thanks again for your outstanding help!
    /Thomas

  • Bojan Radonic

    Hey again @Thomas Sarkisian,

    Please try adding the following CSS code as described above and make sure that you save these changes for all posts:

    h1.post_title {
      text-align: justify;
    }
    
    .upfront-output-module.upfront-postpart-module.c2.post-part.ml0.mt13 {
      display: none;
    }
    
    span.author_gravatar {
      display: none;
    }

    This should justify the title and remove gravatar and the date. As for the privacy not being spelled correctly you can change that by double clicking on the text and then making a change, thanks for reporting this :slight_smile:

    Please let me know if there is anything else you'd like to remove from the post page.

    Best regards,
    Bojan

  • Jude

    Hey Thomas

    I would like to at least remove the entire upper div that displays the author name, and the excerpt because the content text follow below it - there is no reason to show an excerpt above.

    Here is some CSS to fix it

    .upfront-output-object.upfront-postpart-object.upfront-postpart-title {
      margin-bottom: 25px;
    }
    
    .upfront-output-wrapper.upfront-postpart-wrapper.c4.clr {
        display: none;
    }
    
    .upfront-output-wrapper.upfront-postpart-wrapper.c14 {
        display: none;
    }
    
    .upfront-output-object.upfront-postpart-object.upfront-postpart-title {
        margin-bottom: 25px;
    }

    but the h1.title text does not justify and live updates seem to have ceased on my install.

    Its currently set to justify, you can try center with this CSS and see if you like it better

    #page .thispost-blog-style h1.post_title {
      text-align: center;
    }

    Hope this helps, please open a new ticket for any specific issues you face and that way someone will always get back

    Cheers
    Jude

  • Thomas Sarkisian

    Thanks Jude,
    Your suggested changes moved me much closer to the layout we need. I would still like to alter the way the author and date display though. I would like to show the date then the authors name directly under it and have both reasonable spacing between the title and the content text.

    If I open a new ticket, the history of this thread will not be available for reference. Is that ok? or should I refer to it by post# ?

    Cheers for your superb assistance!
    /Thomas