Changing design of Spirit blog?

Greetings!

The screenshot shows the default design/look for a blog post on the spirit theme.

How can I change the design? Could I change the design to the design of another Upfront theme?

  • Nastia

    Hello @Ciro, I trust you are well today!

    Thank you for your question!

    You can edit the style and add some CSS code to the post template to change how the posts are viewed. To do this, please, open the Upfront in Edit mode, hover over post section, click on green settings button, and click on edit CSS stile like it is shown in the attached screenshot.

    You can change the design by copying the CSS style from another Upfront Post Template. Please have a back up of original CSS code, in case something goes wrong. Just open the CSS editor in Upfront mode the same way that I described above on the webpage you wish to copy the style, cope the css code and paste it to another site.

    What would you like to change? Perhaps I may provide a CSS code to achieve the desirable change

    Please advise,

    Kind Regards,
    Nastia

  • Michael Bissett

    Hey @Ciro,

    In this case, we can remove the lines, and center the author & date information, with the author information being above the date. Inside of:

    Theme Settings -> add custom css rules

    Could you please try insert the following CSS code after all of the other CSS rules there:

    body.single-post #page .post_author {
        text-align: center;
    }
    
    body.single-post #page .upfront-output-wrapper.upfront-postpart-wrapper.c5.part-date {
        margin: auto !important;
        float: none;
    }
    
    body.single-post #page .upfront-output-module.upfront-postpart-module.post_date.post-part.c2.ml2.mt0.part-module-date {
        width: 100%;
        margin: 0;
    }
    
    body.single-post #page .upfront-output-module.upfront-postpart-module.post_date.post-part.c2.ml2.mt0.part-module-date time.post_date {
        text-align: center;
        margin-left: 0;
    }
    
    body.single-post #page .upfront-output-wrapper.upfront-postpart-wrapper.c15.clr.part-title.part-author {
        width: 100%;
    }
    
    body.single-post #page .upfront-output-object.upfront-postpart-object.upfront-postpart-author {
        border-bottom: 0;
        border-top: 0;
    }
    
    body.single-post #page .upfront-output-wrapper.upfront-postpart-wrapper.c20.clr.post_contents_wrapper.part-contents:before {
        display: none;
    }

    And seeing if that helps?

    By the way, I see that you've got the author information text set to white, was this on purpose? Did you plan to change the background color to something a bit darker?

    Kind Regards,
    Michael

  • Rupok

    Hi Ciro

    I hope you had a wonderful day.

    For changing the color of the post title, use the following custom CSS Code:

    .upfront-output-object.upfront-postpart-object.upfront-postpart-title._default h1 {
      color: #0b063e;
    }

    For changing the color of the author title, use the following custom CSS Code:

    body.single-post #page .post_author {
      color: #0b063e;
    }
    .upfront-postpart-author a.post_author, .post_author, .post_author a {
      color: #0b063e;
    }

    For changing the color of the date, use the following custom CSS Code:

    #page .thispost-style time.post_date {
      color: #0b063e;
    }

    You can change color code from #0b063e to any color code you want.

    Have a nice day. Cheers!
    Rupok

  • Ciro Bey

    Thank you @Rupok
    That helped out a lot. How could I:

    1) Move the Post date to be above the title and have the day # be the same size as the Month?

    2) Get rid of the "Written" part of the Author part and center it under the post title?

    3) Get rid of uppercase effect on Title and Author and make them regular?

    I hope that makes sense! You can check the screenshot for reference

    All Love
    Ciro Bey

  • Rupok

    Hi Ciro

    I hope you had a wonderful day.

    # Move the Post date to be above the title and have the day # be the same size as the Month + Get rid of uppercase effect on Title
    >> Use the following custom CSS Code:

    .upfront-postpart-object.upfront-postpart-title._default h1 {
        padding-top: 50px;
        text-transform: none;
    }
    .upfront-output-wrapper.upfront-postpart-wrapper.c5.part-date {
        position: relative;
        top: -115px;
    }
    .post_date .date_part_0 {
        font-size: 22px;
    }

    # Get rid of the "Written" part of the Author part and center it under the post title?
    >> For doing this, you have to use jQuery. You can create a MU Plugin for using custom jQuery code in your site. For creating a mu plugin, create a folder named "mu-plugins" inside your "wp-content" folder. Then inside that "mu-plugins" folder, create a file with any name and with a .php extension. Now paste the code inside that file and save.

    <?php
    add_action( 'wp_footer', 'hide_written' );
    function hide_written() {
        ?>
        <script type="text/javascript">
          jQuery(".post_author").text(jQuery(".post_author").text().substring(11));
        </script>
        <?php
    }

    For getting more idea on mu plugins, you can go through this article: https://premium.wpmudev.org/manuals/wpmu-manual-2/using-mu-plugins/

    # Get rid of uppercase effect on Author and make them regular?
    >> Use the following custom CSS Code:

    .upfront-postpart-author a.post_author, .post_author, .post_author a {
        text-transform: none;
    }

    Please let us know if you have any further query. We will be glad to help.

    Have a nice day. Cheers!
    Rupok

  • Ciro Bey

    @Rupok
    Thank you Rupok! Very helpful.

    In the screenshot you can see that not everything is centered however.

    - How can I make sure they are all centered?

    - How could I change the font/text size of the post title?

    - And the "Written" wording is gone in the Author part, but the "By" is also gone. I'd like the author to read "By [Author's Name]".

    - And is there any setting to allow the post categories to display at the top as well? How could I display the categories of the post?

    All love and thank you once again for all of the help!
    Ciro Bey

  • Kasia Swiderska

    Hello Ciro,

    - How can I make sure they are all centered?

    Please add this styles:

    .single .upfront-output-module.upfront-postpart-module.post-part.c15.ml1.mt0.part-module-title {
    width: 100%;
    margin-left: 0;}

    - How could I change the font/text size of the post title?

    .single .post_title  {
    font-family: Arial;
    font-size: 20px;}

    Where Arial is name of the font and the 20px is size of the element.

    - And the "Written" wording is gone in the Author part, but the "By" is also gone. I'd like the author to read "By [Author's Name]".

    In code you have from Rupok find part "substring(11)" and change 11 to 8 and this should only remove written part.

    - And is there any setting to allow the post categories to display at the top as well? How could I display the categories of the post?

    It is not possible at the moment - this is how the single page was designed and can't be changed - this is possible only on the posts lists.

    kind regards,
    Kasia

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.