Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Jan 2014
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    WP sidebar html code

    Hello,

    I hope you will be able to help me out. I don't really know how to code a sidebar which looks like in a picture. If there were no tabs , it would be easier but I'd like to have those tabs. Anyone could help me out with this? WP Sidebar is in a pic.
    http://imageshack.com/a/img30/7430/7skx.jpg
    Attached Thumbnails Attached Thumbnails WP sidebar html code-wp-sidebar.jpg  

  • #2
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    Are you using WordPress? If not it's very simple using CSS and jQuery.

  • #3
    New Coder
    Join Date
    Jan 2014
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Yes, it's a Wordpress blog, a sidebar for Wordpress.

  • #4
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    Give this a try, WordPress › Popular Widget « WordPress Plugins you could probably style it using custom classes to make it look the same as the image you posted but other than that the functionality is the same and the list style is the same.

  • #5
    New Coder
    Join Date
    Jan 2014
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you for this plugin, but I've not finished coding yet, and I'll have to do some php coding as well. The blog is not online yet so basically I need to get a coded theme first.

  • #6
    New Coder
    Join Date
    Jan 2014
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I could make it with one tab but have no idea how to do it with three tabs.

  • #7
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Can you share the code ? I'll help you out bud!

  • #8
    New Coder
    Join Date
    Jan 2014
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    SecondaryBox=Sidebar. Tha's what I've got , but it's not what it supposed to look like.

    SecondaryBox=Sidebar

    <div id="secondary">
    <div class="secondaryBox">
    <h3>Popular Posts</h3>
    <ul id="popularposts">
    <li><a href="#">Some post entry will go here</a></li>
    <li><a href="#">Some post entry will go here</a></li>
    <li><a href="#">Some post entry will go here</a></li>
    </ul>
    </div><!-- end secondaryBox -->

    And CSS
    .secondaryBox {
    background: #fcfcfc;
    border: 1px solid #c2c2c2;
    margin-bottom: 35px;
    padding: 0 4%;
    overflow: hidden;
    }

    .secondaryBox h3 {
    background: grey;
    font-size: 14px;
    font-weight: normal;
    padding: 3px 0 2px 8px;
    }

    .secondaryBox ul li {
    background: url(img/post_images/post_thumb_small.png) no-repeat;
    padding: 30px 5px 30px 5px;
    border-bottom: 1px solid #bbbbbb;
    border-top: 1px solid white;
    }

  • #9
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks I'll start programming it to function fully. do you want it to be floated on the left or right side of the page?

  • #10
    New Coder
    Join Date
    Jan 2014
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    it's the right side of the page, mate. take it as an example.
    Attached Thumbnails Attached Thumbnails WP sidebar html code-example.jpg  


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •