BuSo Lightning - Official Support Thread

[TacoCat]

Go edit single.php from this:

<div class="main-wrap">
              <div class="post-wrap" id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
         <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
              <h1><?php the_title(); ?></h1>
              <p>Posted in <?php the_category( ', ' ); ?> on <?php the_time( get_option( 'date_format' ) ); ?><br />
                 <?php the_tags(); ?></p>
              <?php if (get_option('buso_show_post_image') == 1) { ?>
                  <?php if ( has_post_thumbnail() ) { the_post_thumbnail(); } ?>
              <?php } ?>
              <p><?php the_content(); ?></p>
         <?php endwhile; else : ?>
              <p><?php _e( 'Sorry, no posts matched your criteria.', 'buso-lightning' ); ?></p>
         <?php endif; ?>
           </div>

        <?php wp_link_pages(); ?>

        <?php comments_template(); ?>

      </div> <!-- main wrap -->

to this:

<div class="main-wrap">
              <div class="post-wrap" id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
         <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
                      <?php if (get_option('buso_show_post_image') == 1) { ?>
                  <?php if ( has_post_thumbnail() ) { the_post_thumbnail(); } ?>
              <?php } ?>
<h1><?php the_title(); ?></h1>
              <p>Posted in <?php the_category( ', ' ); ?> on <?php the_time( get_option( 'date_format' ) ); ?><br />
                 <?php the_tags(); ?></p>
              <p><?php the_content(); ?></p>
         <?php endwhile; else : ?>
              <p><?php _e( 'Sorry, no posts matched your criteria.', 'buso-lightning' ); ?></p>
         <?php endif; ?>
           </div>

        <?php wp_link_pages(); ?>

        <?php comments_template(); ?>

      </div> <!-- main wrap -->

The images are set by default to fill the container... I believe. Because I had issues getting it to not do that. Do you mean like, completely full screen stretch without any container?

Edit: Oh, were you talking about category pages?

I mean something like this:

http://www.developgoodhabits.com/

On home page, where it lists all the articles, I want to get the same result as this page has.

 

[Nat]

@TacoCat Yeah, so, its essentially the same code that I posted above, you just have to edit index.php instead of single.

        <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
         
              <?php if ( has_post_thumbnail() ) { ?>
                    <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
              <?php } ?>

              <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
              <p>This was put in a cat: <?php the_category( ', ' ); ?> on <?php the_time( get_option( 'date_format' ) ); ?><br />
                 <?php the_tags(); ?></p>
              <?php the_excerpt(); ?>
         <?php endwhile; ?>

Now, the image full width is already set for small screens, you'll just need to change the break point / remove it.

@media (min-width: NUMBER px;)
img.attachment-thumbnail {
    float: left;
    padding-right: 25px;
    width: 240px
    height: auto;
}

 

[TacoCat]

@TacoCat Yeah, so, its essentially the same code that I posted above, you just have to edit index.php instead of single.

        <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        
              <?php if ( has_post_thumbnail() ) { ?>
                    <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
              <?php } ?>

              <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
              <p>This was put in a cat: <?php the_category( ', ' ); ?> on <?php the_time( get_option( 'date_format' ) ); ?><br />
                 <?php the_tags(); ?></p>
              <?php the_excerpt(); ?>
         <?php endwhile; ?>

Now, the image full width is already set for small screens, you'll just need to change the break point / remove it.

@media (min-width: NUMBER px;)
img.attachment-thumbnail {
    float: left;
    padding-right: 25px;
    width: 240px
    height: auto;
}

Thank you. There are two issues, that arise from this.

First:

I'm not sure what does this, I'm not sure that it is CSS or HTML as it probably has nothing to do with it. The image looks like shit. It automatically creates a thumbnaul from it 240x240 (640x640 if I put it like that) so it cuts off parts of the image and makes the quality absolutely terrible, although, the same size in MEDIA looks terrific.

Second:

About the thumbnail, how to I make it use the pictures proportions? Right now it is 640x640 or squeeze the image.

Thanks @Nat

 

[Nat]

Thank you. There are two issues, that arise from this.

First:

I'm not sure what does this, I'm not sure that it is CSS or HTML as it probably has nothing to do with it. The image looks like shit. It automatically creates a thumbnaul from it 240x240 (640x640 if I put it like that) so it cuts off parts of the image and makes the quality absolutely terrible, although, the same size in MEDIA looks terrific.
@Nat

Whoops, my bad. I have a test site up with BuSo that I screw around with and I guess I must have changed the Wordpress thumbnail since it looked good on my end.

One way to mess with this would be to go into your functions.php and add this

set_post_thumbnail_size( 500, 300, true );

And change the dimensions to what you want. Not sure if that is good WP form/etiquette but I think it will do something.

This should be a helpful reference: https://codex.wordpress.org/Function_Reference/set_post_thumbnail_size

Second:

About the thumbnail, how to I make it use the pictures proportions? Right now it is 640x640 or squeeze the image.

That's gonna be CSS plus getting a thumbnail thats the right size... I suck at CSS, but I think something like this will work. Play around with it

img {
  display: block;
  max-width:XXXpx;
  max-height:XXXpx;
  width: auto;
  height: auto;
}

I think you can also try adding two containers

.image-container{
  width: XXXpx;
}

.an-image{
  display: block;
  height: auto;
  width: 100%;
}

 

[TacoCat]

@Nat It seems that the problem with the quality of the image is that it sets the original thumbnail size 150x150 and therefore when it stretches it, it ruins the quality. Any ideas on that?

**EDIT**

@Nat it seems that the fix with set_thumbnail_size doesn't work. It still uploads images in the same proportion as before.

**EDIT 2**

I found the solution, pretty dumb of me. the function

the_post_thumbnail(' THIS IS THE SIZE OF THE IMAGE ')

I changed that from thumbnail to full and now it works like a charm.

 

[Dreo]

Any update on Wildfire? What will be so different vs Lightning? Going to build a new site or two on Lightning, but didn't know what else Wildfire will be packing.

 

[Ryuzaki]

Any update on Wildfire? What will be so different vs Lightning? Going to build a new site or two on Lightning, but didn't know what else Wildfire will be packing.

Nothing right now. Definitely don't wait on it. One day it will be released but that day is not near.

The difference will be that it won't be restricted to developers. It won't be minimal. It will be optimized but I won't NOT add a feature just because of speed. I'll tie into the customizer. It'll have a full blown options panel with all types of template options. It will be perfect for viral and magazine sites, and it will be ready to go right out of the box after you go to the options panel and fill out your preferences.

 

[phrench]

In header.php I had to remove <?php bloginfo('name'); ?> from the title tag in order for the title to work correctly with my SEO Wordpress plugin.

Else the blog name was appended to the title without a separator or even a space character, when the SEO plugin was enabled. Never happened with any other theme so far.

If anybody is running into the same issue, the needed change in header.php is as follows:

  <title><?php if ( is_front_page() ) : ?><?php bloginfo('name'); ?><?php else : ?><?php wp_title('| ', true, 'right'); ?><?php bloginfo('name'); ?><?php endif; ?></title>

to

  <title><?php if ( is_front_page() ) : ?><?php bloginfo('name'); ?><?php else : ?><?php wp_title('| ', true, 'right'); ?><?php endif; ?></title>

 

[phrench]

The BUSO theme doesn't create a H1 tag for tag pages.

To fix this you can add the following code in index.php right below line (after opening of the div tag with class main-left):

    <?php if ( is_tag() && $paged < 2 ) { ?>
      <div class="main-wrap">
              <div class="post-wrap">
                   <h1><?php single_tag_title(); ?></h1>
              </div>
      </div>
    <?php } ?>

 

[SSG]

Is the grid using GetSkeleton? Just want to clarify because I was going to use this as a base for a quick gig and your class names are so far identical.

 

[Ryuzaki]

Is the grid using GetSkeleton? Just want to clarify because I was going to use this as a base for a quick gig and your class names are so far identical.

Yes, it's a combination of a normalization of CSS, the skeleton from there, and then everything is built up from there.

 

[Cash Builder]

Just wanted to give another thumbs up for Buso Lightning! I used it for one of my recent projects and customizing it only took a few hours to get it looking pretty much how I want it. And it's blazing fast!

I do have one question, I edited the php and css files using the editor in the theme settings menu. If the theme ever gets updated in the future will I lose all of my changes? I have taken backups of all the files but since I never made a child theme I'm assuming my changes will be overwritten when the theme is updated.

 

[Ryuzaki]

Just wanted to give another thumbs up for Buso Lightning! I used it for one of my recent projects and customizing it only took a few hours to get it looking pretty much how I want it. And it's blazing fast!

I do have one question, I edited the php and css files using the editor in the theme settings menu. If the theme ever gets updated in the future will I lose all of my changes? I have taken backups of all the files but since I never made a child theme I'm assuming my changes will be overwritten when the theme is updated.

Typically, yes, but I'm not pushing auto-updates to it. So in the event that you did want to update it, you'd do it manually, which gives you a chance to save your changes.

But also, Lightning is "done." There's no substantial updates to make to it at this point. The only time there'd be an update is if Wordpress deprecates one of their most common functions, which isn't likely to happen. And if that ever became the case, they'd replace it with another and I'd give instructions on exactly which PHP template to change on which line, copy and paste style.

You're okay, is what I'm saying, in the case of Lightning. But on other themes, most definitely use a child theme!

 

[DavidStacks]

Hey,

Loving 2.0 so far, thank you so much!

I had a question though about the max width of .container. I changed it from 960px to 1060px. However, this leaves me with a gap in the padding, meaning the .main-left wont stretch to the new space. I tried adding a fixed width, like so:

@media (min-width: 1000px) {
    .main-left {
        float: left;
        width:65%; /* added */
        margin-right: 340px;
        padding-right: 30px;
    }
}

This fills out the gap but it messes up the responsive format. When I resize the sidebar jumps down until below 1000px, unlike the vanilla template. Any ideas?

 

[Ryuzaki]

@DavidStacks, I can't replicate the issue. You should be able to change the value to...

.container { max-width: 1060px }

Or whatever number you want, without having to change anything else. The .main-left class should auto-fill the space because it's floated. There's no width explicitly set, so it should go to 100%, minus the 340px margin & 30px padding for the sidebar. I just confirmed this on the demo using the browser's developer tools. Any width I chose and it auto-filled the space.

This is a shot in the dark, but if you're using Thrive Architect or one of those page builders, I've noticed they don't work well without an explicitly stated width. Obviously we can't do that here, but you can use the CSS method calc() to calculate the width. So you can do something like this on the .main-left:

width: calc(100% - 370px);

Which will calculate and repaint on the fly like normal. If it's not a case of a plugin causing problems, then another thing you may have missed is making sure you're changing the values in the style.css and the style.min.css too.

If you're doing a ton of work it's better to just use the style.css in the header so you can see those changes live, then re-minify it and then switch back to style.min.css after that for the speed optimization.

Let me know if either of those solutions were off the mark and we'll solve it.

 

[DavidStacks]

Hi Ryuzaki,

Thanks for the elaborate answer. It turned out to be something very silly. The text of the hello world post was simply too short so it wouldn't stretch enough. It seems the text wraps earlier than it has to though, because technically speaking it was long enough if you know what I mean.

Anyway, it works fine now, cheers!

Btw, when I add "width: calc(100% - 370px);" it stretches out even when there is not enough text. That was what I was looking for but obviously it wont be needed as my post will be longer than "hello world"

 

[Apex]

In the case of using HTTPS, the Mixed Content error occurs. To fix it, you have to modify the HTTP link to the Google fonts in the header file and put it as HTTPS.

 

[Ryuzaki]

In the case of using HTTPS, the Mixed Content error occurs. To fix it, you have to modify the HTTP link to the Google fonts in the header file and put it as HTTPS.

Good catch, I'll fix that and repackage it so that won't be necessary.

 

[mrodriguez27]

Okay, I've managed to more or less tweak everything to my liking but I'm having a minor issue which is giving me headaches...

On other themes, when I insert a 300x250 adsense ad I simply put it in between <p align="center"> and </p>. Not working here and it's driving me nuts Any help would be greatly appreciated

 

[DarkRed]

Okay, I've managed to more or less tweak everything to my liking but I'm having a minor issue which is giving me headaches...

On other themes, when I insert a 300x250 adsense ad I simply put it in between <p align="center"> and </p>. Not working here and it's driving me nuts Any help would be greatly appreciated

That is deprecated I think

Try <p style="text-align:center">
or
use a div instead <div style="display:block;margin-left:auto;margin-right:auto;width:300px">

 

[DD1]

Good morning Builders,

I am currently migrating my main site into BuSo Lightning and before I finalize it, I need help with one important thing: how can I create a full-width post template? BSL currently has a full-width page template but no post.

I have found the full-width.php file, I kind of feel I could probably get away copying it all, changing a few things, and pasting it somewhere else, but I need the fine details from someone who knows all this.

I have created a child theme and pasted a few CSS modifications there, just as an aside.

Thanks in advance, cheers.

 

[DarkRed]

Hi,

Yo need to change this at the top of the template:

/*
 * Template Name: Full Width
 */

for this:

/*
      Template Name: Full Width
      Template Post Type: post, page, product
      */

 

[DD1]

Hi,

Yo need to change this at the top of the template:

/*
 * Template Name: Full Width
 */

for this:

/*
      Template Name: Full Width
      Template Post Type: post, page, product
      */

Hi DarkRed.

I just added that line in the full-width.php file and everything is working just fine.

Thanks a lot!

 

[DD1]

Good morning Builders,

So I took the plunge and did the full migration anyways. My last issue are the images.

On my previous layout, I used many 150x150 and 300x300 images with text framed around the image. All those images also have the defined width and height by WP.

I don't understand why, but in some places the images are stretched to 100% of the page. While I was dealing with 1 element at a time, I was working around that -- I used a wider logo image, I learned how to use Font Awesome instead of image social icons.

However now I need to edit 19 posts and God-knows-how-many images on each of those. I just tried reinserting one image but it will stay stretched anyways. Is there any way of using non-full-width images on BSL?

Thanks in advance.

 

[Ryuzaki]

@DD1, I suppose you're talking about images on posts. You have several options, but the best one is to probably go into the functions.php and create a 3rd image size for you to choose when you embed images. Currently there's .size-thumbnail and .size-full. The thumbnail is only used for the category pages and the homepage.

You could create your own .size-medium, for instance, which is perhaps 250px wide. Then you could define a max-width for that CSS class. That'd look something like this:

.size-medium {
    max-width: 250px;
    width: 100%;
    height: auto;
}

What that achieves is it tells the image to always stretch to 100% of the width of the container, but it can't go past 250px;. But by keeping it percentage based, you keep it responsive. And with the height set to auto it will always grow or shrink proportionately.

You'll likely want to consider how this behaves with the float left and float right options and being centered.

The above is if you want to keep the option for the full-width images. If you don't, then you can just override the current CSS for .size-full to include a max-width of your choosing, but it will effect all images in posts.

The idea is that the base is there for you. You can add more image sizes, or you can edit the current existing one. Adding more is probably how you want to go.