BS5Plain Modification Assistance?

TA2Web · Fri Sep 06, 2024 9:55 pm

Hello. I am new here and I really like the simplicity of the Bludit blog software. Along with the bs5plain theme it works great for what my goals are.

I am wondering a couple things to be able to modify it to more suit my design needs.

I have been working from this Bootstrap blog template located here. I am wondering how I can make the proper modifications to partially match the template.

It has a sticky right side bar for related blogging information that Bludit seems to have data for.

I have scaled the BS blog example down to. I would like to use Bludit and the BS5Plain theme into this, if possible. However I am completely lost with where I could begin to modify the theme to fit my needs.

Can I request assistance, please? Thank you.

joho · Tue Sep 10, 2024 9:45 am

TA2Web wrote: ↑Fri Sep 06, 2024 9:55 pm Hello. I am new here and I really like the simplicity of the Bludit blog software. Along with the bs5plain theme it works great for what my goals are.

[..]

Can I request assistance, please? Thank you.

Hello, glad to see you here.

As the bs5plain theme author, I could certainly help you. Can you be specific in your requirements?

TA2Web · Mon Sep 16, 2024 9:15 pm

joho wrote: ↑Tue Sep 10, 2024 9:45 am
TA2Web wrote: ↑Fri Sep 06, 2024 9:55 pm Hello. I am new here and I really like the simplicity of the Bludit blog software. Along with the bs5plain theme it works great for what my goals are.

[..]

Can I request assistance, please? Thank you.
Hello, glad to see you here.

As the bs5plain theme author, I could certainly help you. Can you be specific in your requirements?

Hello, thank you for your reply.

I am mainly looking at how to make it into this so the blog posts show with a right column area that is a sticky as shown on this BS Blog Example template here.

I would like the user name, or author, to show as a link to a preset custom link, if possible, under the blog title along with the date of the post as shown in the example image.

Then I would like to have the categories and other blog data from the bludit menu in the column.

And I would eventually like to replace the header with the one I have made.

Thank you very much for any help with making the modifications.

TA2Web · Wed Sep 18, 2024 7:43 pm

TA2Web wrote: ↑Mon Sep 16, 2024 9:15 pm
.. as shown on this BS Blog Example template here.
...

Here is the <main> basic code with main blog column and sticky right column:

Code: Select all


<main class="container pt-5 pt-md-4">

<div class="row g-5">
  <div class="col-md-8">
	
	<h1 class="display-5 pb-4 mb-3 fst-italic border-bottom">Blog Name</h1>
      
	  <article class="blog-post">
        <h2 class="display-6 link-body-emphasis mb-1">Blog Post Title 1</h2>
        <p class="blog-post-meta small">Shared by <a href="/profile-link/">Author</a> on August 15, 2024.</p>
		
		<h3>Blog post header title</h3>
		<p>text content here.</p>
		
		<h3>Sub Title</h3>
		<p>text content here.</p>
		
		<h3>Another Sub Title</h3>
		<p>text content here.</p>
      </article>
	  
	  <hr>
	  
      <article class="blog-post">
        <h2 class="display-6 link-body-emphasis mb-1">Blog Post Title 2</h2>
        <p class="blog-post-meta small">Shared by <a href="/profile-link/">Author</a> on August 15, 2024.</p>
		
		<h3>Blog post header title</h3>
		<p>text content here.</p>
		
		<h3>Sub Title</h3>
		<p>text content here.</p>
		
		<h3>Another Sub Title</h3>
		<p>text content here.</p>
      </article>
	  
	  <hr>
	  
      <nav class="blog-pagination pb-3" aria-label="Pagination">
	  <a class="btn btn-outline-primary rounded-pill" href="#">Older</a>
	  <a class="btn btn-outline-secondary rounded-pill disabled" aria-disabled="true">Newer</a>
	  </nav>
	  
	</div>
	
<!-- COLUMN AREA -->
<div class="col-md-4">
  <div class="position-sticky">
    <div class="p-4 mb-3 bg-body-tertiary rounded">
	<h4 class="fst-italic">About</h4>
	<p class="mb-0">About this blog data goes in here.</p>
	</div>
  <!-- INCLUDE FILE FOR SPONSORS HERE -->
  <div>
	<h4 class="fst-italic">Visit Our Sponsors</h4>
    <ul class="list-unstyled">
        <li>
            <a class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top" href="https://www.bgozza.com/store/free/albums/" rel="sponsored" target="_blank">
                <picture>
                    <source srcset="/images/ads/bgozza_com.webp" type="image/webp">
                    <img src="/images/ads/bgozza_com.jpg" class="bd-placeholder-img img-fluid" alt="Free Hip-Hop Music Stash" width="100%" height="96">
                </picture>
                <div class="col-lg-8">
                    <h6 class="mb-0">Free Hip-Hop Music Stash</h6>
                    <small class="text-body-secondary">September 1, 2024</small>
                </div>
            </a>
        </li>
        <li>
            <a class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top" href="https://www.bgozza.com/store/albums/" rel="sponsored" target="_blank">
                <picture>
                    <source srcset="/images/ads/bgozza_store.webp" type="image/webp">
                    <img src="/images/ads/bgozza_store.jpg" class="bd-placeholder-img img-fluid" alt="BGozza's Hip-Hop Store" width="100%" height="96">
                </picture>
                <div class="col-lg-8">
                    <h6 class="mb-0">Gozza's Hip-Hop Music Shop</h6>
                    <small class="text-body-secondary">September 5, 2024</small>
                </div>
            </a>
        </li>
        <li>
            <a class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top" href="https://www.bgozza.com/store/free/albums/" rel="sponsored" target="_blank">
                <picture>
                    <source srcset="/images/ads/bgozza_com.webp" type="image/webp">
                    <img src="/images/ads/bgozza_com.jpg" class="bd-placeholder-img img-fluid" alt="Free Hip-Hop Music Stash" width="100%" height="96">
                </picture>
                <div class="col-lg-8">
                    <h6 class="mb-0">Free Hip-Hop Music Stash</h6>
                    <small class="text-body-secondary">September 1, 2024</small>
                </div>
            </a>
        </li>
    </ul>
  </div>
  
  <!-- BLOG CATEGORIES FROM BLUDIT HERE -->
  <div class="p-4">
	<h4 class="fst-italic">News Archives</h4>
       <ol class="list-unstyled mb-0">
	   <li><a href="#">August 2024</a></li>
	   <li><a href="#">July 2024</a></li>
	   <li><a href="#">June 2024</a></li>
	   </ol>
  </div>
  <!-- SOCIAL MEDIA LINKS FROM BLUDIT HERE -->
  <div class="p-4">
	<h4 class="fst-italic">Other Stuff</h4>
       <ol class="list-unstyled">
	   <li><a href="#">-</a></li>
	   <li><a href="#">-</a></li>
	   <li><a href="#">-</a></li>
	   </ol>
  </div>
  
  </div>
  </div>
</div>

</main>

That is what I am basically using right now. It is the basic code from the bootstrap blog template example. But I need to somehow make bludit and bs5plain use the above bootstrap5 code.

I want all of the blog pages to use the above structure with two columns.

Am I supposed to edit the index.php file(s) or the page.php or home.php files?

Thank you.

joho · Wed Sep 18, 2024 9:09 pm

If you want to, you can use the bs5plain theme as a boilerplate for a theme. You'll see how it interacts with most Bludit features.

But after your message(s), I'll be looking to see what I can whip up ...

TA2Web · Wed Sep 18, 2024 11:23 pm

I have edited a few lines in the home.php page:

Code: Select all

                    Theme::plugins('pageBegin');
                    // item start
                    // echo '<div class="mb-5 border border-secondary p-3 rounded-2">';
                    echo '<div class="shadow mb-5 bg-body p-3 rounded-2">';
                    echo '<h2 class="display-6 mb-1 text-truncate">' .
                         '<a class="link-opacity-50-hover text-decoration-none" href="' . $post->permalink() . '" title="' . $post->title() . '">' . $post->title() . '</a>' .
                         '</h2>';
                    // Post time
                    $post_time = date_create_immutable( $post->dateRaw() );
                    if ( $post_time !== false ) {
                        echo '<div class="border-bottom" title="' . $post_time->format( 'Y-m-d, H:i' ) . '">';
                        echo '<span class="ms-1 text-secondary small">Shared on ' . Date::translate( $post_time->format( $site->db['dateFormat'] ) ) . ' by NAME</span>';
                        echo '</div>';
                    }
                    // Content

and in the page.php:

Code: Select all

					// Title
                    if ( ! $url->notFound() ) {
                        echo '<h1 class="display-6">' . $page->title() . '</h1>';
                        // Post time
                        if ( ! $page->isStatic() ) {
                            $reading_time = trim( $page->readingTime() );
                            // $post_time = date_create_immutable( $page->dateRaw() );
                            $post_time = date_create_immutable( $page->dateRaw() );
                            if ( $post_time ) {
                                echo '<div class="border-bottom" title="' . $post_time->format( 'Y-m-d, H:i' ) . '">';
								echo '<span class="ms-1 text-secondary small">Shared on ' . Date::translate( $post_time->format( $site->db['dateFormat'] ) ) . ' by NAME</span>';
								echo '</div>';
                            }
                        }
                    }

Code: Select all

					// Content
                    echo '<div class="bs5plain-page-content border-bottom mt-3 mb-3">' .
                         $page->content() .
                         '</div>';

Qianca · Fri Jan 31, 2025 8:20 pm

Hey, welcome! I’ve worked with Bludit and the BS5Plain theme before, so I can definitely help point you in the right direction. To make the sticky sidebar work, you’ll need to dive into the theme’s layout and modify the HTML and CSS a bit. You’ll want to find where the sidebar is in the template and then pull in the Bludit data for related posts. For the sticky effect, just add position: sticky; top: 0; to the sidebar's CSS, and it should stick as you scroll. I’d also recommend looking for any Bludit plugins that might make this easier, especially if you're not as comfortable with editing PHP or CSS directly. Hopefully that gives you a good starting point!