how to include ad and plugin widget in one widget area?

Home Forums Using Thematic Child Themes Build Your Own Custom Child Themes how to include ad and plugin widget in one widget area?

This topic is: resolved

This topic contains 17 replies, has 4 voices, and was last updated by  cookieandkate 4 years, 11 months ago.

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #2085

    cookieandkate
    Participant

    Hi,

    Have I mentioned how much I love this forum lately? I really appreciate your help. I am trying to optimize my ad revenue and would like to display a 160×600 ad in my sidebar, which is easy enough. However, my sidebar is 300 pixels wide and I would like to incorporate my popular post thumbnails widget right next to that ad, so a vertical display of my most popular posts takes up the rest of the width of the sidebar. I already use (and love) the WordPress Popular Posts widget to display my top posts’ thumbnails (see it at cookieandkate.com). I’d like to display the thumbnails for my top 5 most popular posts vertically, to the left of that ad. Is it possible to display the ad and widget side by side, or in other words, to split the widget space vertically?

    The plugin can also be implemented via shortcode: [wpp] (so you can embed it directly on your posts / pages), or via template tag: wpp_get_mostpopular(). (source: http://wordpress.org/extend/plugins/wordpress-popular-posts/faq/). Could either of those options be a potential solution here?

    Your help would be so appreciated.

    Thank you,
    k

    #2087

    andrew
    Participant

    Hi CookieandKate,

    Yeah, you should be able to do this, but it just requires some custom CSS work to tell the appropriate  popular posts widget to make itself half the normal width and saddle up next to the ad.  You would have to ‘float’ the two widgets and specify their width and everything should work.

     

    #2088

    Scott Nix
    Moderator

    You can just use CSS to split the LI from the widgets giving them a max width of 140px/160px and float them, which would be the easiest way. There are plenty of unique ID/Classes to target when widgets are added to the sidebars.

    #2089

    Scott Nix
    Moderator

    Beat me by one minute. ;P

    #2091

    cookieandkate
    Participant

    Thank you both so much for the suggestions. I think I understand the basic idea here, but the implementation is tricking me up. Can you offer me any more specifics on how to make it happen? I tried but I’m stumped.

    Here’s what the developer for the plugin suggested doing (but I think he switched the order in which I want the plugin/ad to appear— I want the plugin on the left and ad on the right):

    In your theme’s sidebar.php, you could create another div 160px wide and put it right before the div containing the widget, and have it floating to the left with float:left; (CSS). This new div would contain the ad, of course.
    Then, have the div containing the widget float to the right (float:right;). Also, you’d need to adjust the popular list CSS to make each element use a single line (not floating, as you have it now) and maybe change the thumbnail’s width & height as well.

    #2092

    andrew
    Participant

    CookieandKate,

    You don’t have to make any changes to the template files or anything like that.  It’s a very simple bit of code change in your child themes style.css file.  Have you ever made changes to the CSS file (style.css)  ?

    What the developer has specified is pretty much the same things that scott and I have suggested.  But you just have to implement this change in your style.css file  (using a text editor ) and find the appropriate elements you need to style by using something like Firebug or Chrome’s developer tools.

    If you’ve never made CSS changes it may be a bit of a learning process for you.

     

    #2093

    cookieandkate
    Participant

    Thanks again, Andrew. I have made lots of changes to my style.css file but floats are new to me. I’m not sure which existing divs to target or if I need to define them myself, and if so, how to go about that. When I fiddled with the code, I got the ad to go on the right like I wanted, but it wasn’t in line vertically with the popular posts. It showed up below it.

    #2094

    andrew
    Participant

    If you place the widgets you’d like to see on the site, making them visible.  One of us should be able to visit the site and explore the elements required for the change and then post them here for you.  Not saying it’ll happen pronto.. 🙂

    #2095

    cookieandkate
    Participant

    That would be marvelous, Andrew. I’ll wait until tomorrow so I’ll be more likely to be near the computer when you do get around to it. Or if we could arrange a time to work on this together so my site doesn’t look wonky for hours, I’d be glad to send 20 bucks via PayPal. This stuff drives me crazy!

    #2097

    Scott Nix
    Moderator

    Twenty bucks for like 2 lines of CSS that will take 2 minutes. Well that is one hell of a deal.

    I will have to remember to hold off answering your questions till you mention some cash next time. 😛

    #2108

    cookieandkate
    Participant

    Ha, please don’t. Truly, I just don’t want my sidebar to look funny for hours.

    I just changed the settings for the popular posts widget so it should be good to go. I also added a new widget for the 160×600 ad that appears below it (as I’ve described earlier, I want the ad to line up vertically with the top of the popular posts, popular posts on the left and ad on the right). They should both fit in the 300px wide widget area with 5 pixels of padding between them.

    If you can tell me how to scoot the ad widget up where I want to go, I’d gladly shoot you some money on PayPal. I’d need your email address.

     

    Thank you!!!

    k

    #2110

    Scott Nix
    Moderator
    
    #wpp-8 { float: left; width: 135px; }
    #wpp-8 img { margin: 3px 0; }
    #text-50 { float: right; }
    
    

    Let me know if anything needs to be adjusted.

    #2112

    cookieandkate
    Participant

    It worked perfectly! Thank you so very much, Scott. Hope you’re having a great day.

    #2113

    andrew
    Participant

    Glad you got it sorted out.  Nice photography!

    #2446

    cookieandkate
    Participant

    Hey guys,

    I’m having a bit of trouble getting this CSS to take effect properly on every page load. Every now and then, the 160×600 ad will load below the popular posts widget instead of next to it. The 160×600 ad seems to be accepting the CSS’s instructions to scoot over to the right, but it’s not showing up all the way to the right as it should be. It also doesn’t scoot up to be inline with the popular posts widget like it should.

    Here’s a screenshot of the issue: http://cookieandkate.com/images/2012/11/ad-css-issue.tiff

    If you could help me straighten this out, I’d be so glad to never see it happen again!

    Thank you,
    k

Viewing 15 posts - 1 through 15 (of 18 total)

The topic ‘how to include ad and plugin widget in one widget area?’ is closed to new replies.