BuSo Lightning - Official Support Thread

@Ryuzaki I'm looking to implement some buttons like these

55chinese.jpg


Suggestions on 'best practice' for implementing this?
 
Somewhere I wrote about this but I can't seem to find them. I code my own with the social network's old sharing API's:

Code: 
<a target="_blank" rel="nofollow" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>&t=<?php the_title(); ?>"> Facebook</a>
 
<a target="_blank" rel="nofollow" href="http://twitter.com/intent/tweet?url=<?php the_permalink(); ?>&text=<?php the_title(); ?>&via=YourTwitterHandle"> Twitter</a>

<a target="_blank" rel="nofollow" href="https://plus.google.com/share?url=<?php the_permalink(); ?>"> Google+</a>

You can wrap the anchors in <span>'s and design responsive buttons entirely out of CSS, including the logos. This will have zero speed impact versus using the buttons they provide that make a million HTTP requests.

I use this in the footer and sidebar. You can do it above the post content too. If you do it in the sidebar don't forget to reset your loop if you have a loop for related or popular posts after the content.
 
Ryuzaki said:
Somewhere I wrote about this but I can't seem to find them. I code my own with the social network's old sharing API's:

Code: 
<a target="_blank" rel="nofollow" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>&t=<?php the_title(); ?>"> Facebook</a>
 
<a target="_blank" rel="nofollow" href="http://twitter.com/intent/tweet?url=<?php the_permalink(); ?>&text=<?php the_title(); ?>&via=YourTwitterHandle"> Twitter</a>

<a target="_blank" rel="nofollow" href="https://plus.google.com/share?url=<?php the_permalink(); ?>"> Google+</a>

You can wrap the anchors in <span>'s and design responsive buttons entirely out of CSS, including the logos. This will have zero speed impact versus using the buttons they provide that make a million HTTP requests.

I use this in the footer and sidebar. You can do it above the post content too. If you do it in the sidebar don't forget to reset your loop if you have a loop for related or popular posts after the content.
Click to expand...

This works great, I love it. I got the Pinterest code to work too.
However... I'm either retarded with CSS or there is something about this theme I don't understand because I cannot get my child theme to override the default buttons. I'm getting a weird mix of some aspects overriding and others that aren't. This is the CSS I'm adding to my child:
Code: 
.social_button {
    border: none;
    color: #fffff ;
    padding: 15px 32px;
    text-decoration: none;
    font-size: 16px;
    margin: 4px 2px ;
    cursor: pointer;
}
.fb-button {background-color: #3B5998;}
.tw-button {background-color: #00aced;}
.gp-button{background-color: #dd4b39;}
.pin-button{background-color: #cb2027;}
And the html is
Code: 
<a target="_blank" rel="nofollow" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>&t=<?php the_title(); ?>"> <button class="social_button fb-button" style="width:49%">Facebook</button></a>
I've tried !important and all: revert; and its not changing.
 
Are you re-minifying and placing these changes in the style.min.css as well?
 
  • Like
Reactions: Nat
Ryuzaki said:
Are you re-minifying and placing these changes in the style.min.css as well?
Click to expand...

I've got a child theme enqueued like this

Code: 
function example_enqueue_styles() {
    wp_enqueue_style('parent-theme', get_template_directory_uri() .'/style.css');
   
    wp_enqueue_style('child-theme', get_stylesheet_directory_uri() .'/style.css', array('parent-theme'));
   
}
add_action('wp_enqueue_scripts', 'example_enqueue_styles');

And I haven't min the child's css at all. It was my understanding that a child theme rests on top of the parent theme, so I didn't think I would ever need to mess with the parent css?
 
Try a bit more specificity in the CSS like:

button.social_button {}
​
If that doesn't work, feel free to PM me the site or you can do what I would do, which is use the browser's dev tools to see which CSS files are loading first (or if at all) and figure out why the problem is occurring.
 
  • Like
Reactions: Nat
Ryuzaki said:
Try a bit more specificity in the CSS like:

button.social_button {}
​
If that doesn't work, feel free to PM me the site or you can do what I would do, which is use the browser's dev tools to see which CSS files are loading first (or if at all) and figure out why the problem is occurring.
Click to expand...

Finally got it to work, fml I hate styling. Good idea to throw the buttons into post template right above the footer? Not well-versed about best practices. I can't really see why I wouldn't want to have social buttons at the end of every post. And if I decide I want a post w/o I can just make that one post use another template.
 
Nat said:
Finally got it to work, fml I hate styling. Good idea to throw the buttons into post template right above the footer? Not well-versed about best practices. I can't really see why I wouldn't want to have social buttons at the end of every post. And if I decide I want a post w/o I can just make that one post use another template.
Click to expand...

That's how I do it. If you want a post to not have it you can wrap a conditional around the buttons that says:

IF {
Don't show for these Post ID's​
} ELSE {
Show the buttons​
}

Versus another template.

By the way, what was the problem with the styling? What made it work?
 
Ryuzaki said:
That's how I do it. If you want a post to not have it you can wrap a conditional around the buttons that says:

IF {
Don't show for these Post ID's​
} ELSE {
Show the buttons​
}

Versus another template.

By the way, what was the problem with the styling? What made it work?
Click to expand...

The problem had to be some weird combination of enqueuing and CSS. I tweaked the enqueuing and I ended up just deleting everything I had written and starting from scratch with new names etc. The format that eventually worked was
Code: 
button.sharebutton{}
.fb-button{}
.tw-button{}
I think one of the issues was that when I had tried the button.sharebutton the first time all of the formatting elements from button were still being applied and it was difficult to tell what was influencing class-"sharebutton fb-button."
Also pretty sure my dumbass had .button.sharebutton for quite some time and that screwed things up lol.
Most likely just me making a dumb slip up once that I never passed over again :smile: :(
 
For anyone wanting to go full HTTPS and avoid mixed media error on client browsers:
Go to Theme Header and change:
HTML: 
<!-- FONT -->
  <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,700' rel='stylesheet' type='text/css'>

to
HTML: 
<!-- FONT -->
  <link href='//fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,700' rel='stylesheet' type='text/css'>
 
So I'm seeing some issues with this theme - maybe I'm off base here.
1. Theme logo would stretch to max. Even after implementing changes to .logo-strip-text img Width. It still stretched. I got mine to work by setting a style tag on the img property itself in the Header.
2. Images in post are stretched to width of container. If i set it to be 150x150 it will just streatch the image to the width of text box.
3. mixed media error - fixed in above post.

Are the above two errors common for anyone else. I'll continue looking through the CSS till I get it fixed.
 
coopreme said:
So I'm seeing some issues with this theme - maybe I'm off base here.
1. Theme logo would stretch to max. Even after implementing changes to .logo-strip-text img Width. It still stretched. I got mine to work by setting a style tag on the img property itself in the Header.
2. Images in post are stretched to width of container. If i set it to be 150x150 it will just streatch the image to the width of text box.
3. mixed media error - fixed in above post.

Are the above two errors common for anyone else. I'll continue looking through the CSS till I get it fixed.
Click to expand...
Did you try this?
Logo
Code: 
.logo-strip-text img{
max-width: 400px;
display: block;
margin: 0 auto;
padding-bottom: 5px;
}
To stop images from stretching across the width you can just do something like this
Code: 
img.smallsize{
    width: auto;
    height: auto;
    padding-bottom: 10px;
    padding-top: 10px;
    max-width: 150px;
}
...
<img class="alignright smallsize" src="">
 
@Nat I ended up up modding some of the media settings, changing the width to the desired size, and adjusting the float and margins in CSS. Thanks for the tips though!! I also occasionally forget to run it through a mimimizer :/
 
Quick noob question here; is there a way to have the style.min.css generated from the changes made in style.css? Or is the easiest thing to do switch the link in the header to pull from the style.css (even though it will be slower, though not dramatically I would assume).
 
Positivity said:
Quick noob question here; is there a way to have the style.min.css generated from the changes made in style.css? Or is the easiest thing to do switch the link in the header to pull from the style.css (even though it will be slower, though not dramatically I would assume).
Click to expand...

Just use the minifier mention earlier in this thread. Do your changes in Style.css then minify and paste into minimal style file.
 
Positivity said:
Quick noob question here; is there a way to have the style.min.css generated from the changes made in style.css? Or is the easiest thing to do switch the link in the header to pull from the style.css (even though it will be slower, though not dramatically I would assume).
Click to expand...

Make changes --> copy CSS --> https://cssminifier.com/ --> copy CSS --> paste into css.min
 
If embedded YouTube videos are causing the sidebar to drop too early (I don't think the default theme has this issue, but I made some modifications and mine was doing it) you can tweak it like this:
Code: 
/*Responsive YouTube Container CSS*/
.responsive-container {
        position: relative;
        padding-bottom: 50.25%;
        padding-top: 30px;
        height: 0;
        overflow: hidden;
        margin-bottom: 1em;
}
.responsive-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 95%;
        height: 100%;
}

Code: 
//Change Video Embed (functions.php)
add_filter('embed_oembed_html', 'wrap_embed_with_div', 10, 3);

function wrap_embed_with_div($html, $url, $attr) {
        return "<div class=\"responsive-container\">".$html."</div>";
}
 
Where did you put the meta_date function? Looking to remove the posted by blah and posted on date's for all the posts/pages?

Did a search and can't find those functions, did you rename them?
 
AYGJoe said:
Where did you put the meta_date function? Looking to remove the posted by blah and posted on date's for all the posts/pages?
Click to expand...

It's in the single.php for blog posts and page.php for pages.

single.php:
Code: 
<p>Posted in <?php the_category( ', ' ); ?> on <?php the_time( get_option( 'date_format' ) ); ?>

page.php:
Code: 
<p>Posted on <?php the_time( get_option( 'date_format' ) ); ?></p>

Right below the <h1> tags for the title in both.
 
Deleted both of those lines and it's still coming up?

Ahh, it's in category as well. got it, thanks :D
 
Ever since reading about WP on this forum I'm super paranoid about adding any plugins. What is the safest and fastest way to add images to recent posts widget?

I'm trying to copy the way BuzzFeed does it
 
Hi @Ryuzaki
Can you tell me where are the files for search form located? I want to adjust it a bit and have troubles locating it, for example I want to change label etc.
Help appreciated!

Edit: No worries, got it. Just forgot how it works in WP.
 
Hey @Ryuzaki, can you help me out?

What if I wanted to have the featured image above the headline and in full width of the container?

How would I go around doing it?
 
TacoCat said:
Hey @Ryuzaki, can you help me out?

What if I wanted to have the featured image above the headline and in full width of the container?

How would I go around doing it?
Click to expand...

Go edit single.php from this:
Code: 
<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:

Code: 
<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?
 
You must log in or register to reply here.
Back