WordPress.org

Ready to get started?Download WordPress

Forums

Increase space between widgets (3 posts)

  1. yasinakgun
    Member
    Posted 4 years ago #

    The problem I have is that the widgets on my wordpress website are all sat too tightly next to each other.

    You can see an example of this by clicking this link -->

    my .css file is as follows:

    /*
    	Theme Name: NewsTube
    	Theme URI: http://www.theme-junkie.com
    	Description: A news/magazine theme designed by <a href="http://j.mp/9bL8oD">Theme Junkie</a>.
    	Author: Roy Guan
    	Author URI: http://www.theme-junkie.com
    	Version: 1.0
    	Tags:  2-columns, advertise-ready, widget-ready, advanced-theme-options
    */
    
    /*----------------------------------------------------------------------------------------
    
    INDEX
    
    	 1. Reset
    	 2. Defaults
    	 3. Hyperlinks
    	 4. Advertisement
    	 5. Search Form
    	 6. Header
    	 7. Dropdown Menu
    	 8. Container
    	 9. Featured News
    	10. Breaking News
    	11. Postbox
    	12. Content
    	13. Entry
    	14. Paths
    	15. Archive
    	16. Images
    	17. Sidebar
    	18. Subscribe
    	19. Tabber
    	20. Widgets
    	21. Calendar
    	22. Comments
    	23. Comments Form
    	24. Pagination
    	25. Footer
    
    ------------------------------------------------------------------------------------------*/
    
    /* 1. Reset */
    @import "css/reset.css";
    
    /* 2. Defaults */
    body { background: #444; font: 12px/17px Arial, Helvetica, sans-serif; color: #222; }
    input { font-family: Arial, Helvetica, sans-serif; }
    .clear { clear: both; }
    .right { float: right; }
    .left { float: left; }
    
    /* 3. Hyperlinks */
    a, a:visited, a:active { color: #222; text-decoration: none; }
    a:hover { color: #16387c; text-decoration: underline; }
    a:focus, a:hover, a:active { outline: none; }
    a img { border: none; }
    
    /* 4. Advertisement */
    .ad728x90 { width: 728px; height: 90px; margin: 9px 0px 0px 0px; border: 1px solid #fff; }
    .ad300x250 { width: 300px; height: 250px; margin-bottom: 10px; padding: 0px 0px 15px 0px; border-bottom: 4px solid #B8240D; }
    
    /* 5. Search Form */
    #search { margin: 2px 0px 0px 0px; }
    .searchinput { display: inline; float: right; width: 100px; height: 14px; margin: 1px 0px 0px 0px; padding: 2px 4px 2px 4px; font-size: 11px; color: #666; border: 1px solid #e6e6e6; }
    .searchsubmit { display: inline; float: right; background: url(images/search.png) repeat-x center; width: 29px; height: 20px; margin: 0px 5px 0px 3px; border: none; cursor: pointer; }
    
    /* 6. Header */
    #header { background: url(images/bg-header.png) repeat-x; height: 110px; margin: 0px 0px 5px 0px; padding: 5px 7px; line-height: 90px; border-top: 3px solid #fff; }
    .imagelogo { float: left; background: url(images/logo.png) no-repeat; width: 210px; height: 90px; margin: 10px 0px 0px 0px; cursor: pointer; }
    .textlogo { display: inline; float: left; width: 210px; margin: 20px 0px 0px 5px; text-transform: uppercase; color: #fff; }
    .textlogo h1 { margin: 0px 0px 7px 0px; font: 44px/44px Impact, Arial Black; }
    .textlogo h2 { font: 12px/16px Arial; }
    .textlogo a, .textlogo a:hover, .textlogo a:visited { color: #fff; text-decoration: none; }
    
    /* 7. Dropdown Menu */
    #menu { background: #e9e9e9; height: 26px; border-top: 1px dotted #ccc; position:relative; z-index: 100; }
    #menu ul { float:left; }
    #menu ul li { position: relative; display: inline; float:left;}
    #menu ul li .first { background: none !important; padding-left: 10px; }
    #menu ul li a { display: block; background: url(images/slash.png) no-repeat left center; padding: 3px 6px 2px 14px; font: 17px Impact, "Arial Black", sans-serif; color: #222; text-transform: uppercase; }
    * html #menu ul li a { display: inline-block; float: left;}
    * html #menu ul li ul li a { float: none; }
    #menu ul li a:link, #menu ul li a:visited{ text-decoration: none;}
    #menu ul li a:hover, #menu .current-cat a, #menu .current-cat-parent a, #menu .select a{ color: #16387c; text-decoration: none;}
    #menu ul li ul { display: block; position: absolute; left: 0px; margin: 0px 0px 0px 4px; padding: 0px; visibility: hidden; border-bottom: 1px solid #afafaf; z-index: 95;}
    #menu ul li ul li { display: list-item; float: none; background: none; padding: 0px; font-size: 12px; }
    #menu ul li ul li ul { top: 0px; margin: 0px; }
    #menu ul li ul li a, #menu .select ul li a { width: 150px; height: auto; font: bold 13px Arial; padding: 3px 10px; margin: 0px; background: #f9f9f9; text-align: left; text-decoration: none; text-transform: capitalize; color: #222; border-top: 1px solid #afafaf;}
    #menu ul li ul li a:hover{ background: #f0f0f0; color: #222; text-decoration: none; }
    
    /* 8. Container */
    #wrapper { background: #fff; width: 960px; margin: 10px auto; }
    #inner { background: #fff; width: 930px; padding: 20px 15px 15px 15px; }
    #column1 { float: left; background: #fff; width: 600px; padding: 0px 15px 0px 0px; border-right: 1px solid #ddd; }
    
    /* 9. Featured News */
    #featured { background: #fff; margin: 0px 0px 15px 0px; }
    #featured h1 { margin: 0px 0px 5px 0px; font: 20px/22px Georgia, "Times New Roman", Times, serif; font-weight: bold; }
    #featured h2 { margin: 10px 0px 3px 0px; font: 16px/18px Georgia, "Times New Roman", Times, serif; }
    #featured h1 a, #featured h2 a { color: #16387c; }
    .featuredthumb { position: relative; }
    .featuredpost { background: #111; opacity: .75;filter: alpha(opacity=75); position: absolute; width: 285px; left: 0px; bottom: 4px; padding: 5px; }
    .featuredpost a, .featuredpost a:hover { font: 18px/20px Georgia, "Times New Roman", Times, serif; color: #fff; }
    
    /* 10. Breaking News*/
    #breaking { background: #fff; width: 600px; padding: 10px 0px 15px 0px; border-top: 4px solid #B8240D; }
    .breakingbox { display: inline; float: left; background: #f5f5f5; width: 140px; height: 140px; margin: 10px 10px 0px 0px; border-bottom: 1px dotted #ccc; }
    .breakingbox h2 { padding: 0px 5px; font: 11px/14px Arial, Helvetica, sans-serif; font-weight: bold; }
    
    /* 11. Postbox */
    .postbox { width: 600px; padding: 10px 0px 15px 0px; border-top: 4px solid #B8240D; }
    .postbox h2 { margin: 3px 0px 5px 0px; font: 16px/18px Georgia, "Times New Roman", Times, serif; font-weight: bold; }
    .postbox h2 a, .postbox h2 a:visited { color: #16387c; }
    .postbox h2.normal { margin-top: 0px; font-weight: normal; }
    .postbox ul { margin: 10px 0px 0px 0px; }
    .postbox li { background: url(images/dot-gray.gif) no-repeat left 7px; padding: 2px 0px 3px 10px; font-size: 1em; line-height: 15px; }
    .postbox li a, .postbox li a:visited { color: #16387c; }
    .boxleft { float: left; width: 295px; margin: 10px 0px 0px 0px; }
    .boxright { float: right; width: 295px; margin: 10px 0px 0px 0px; }
    .date { font-size: 10px; color: #B8240D; text-transform: uppercase; }
    .gray { font-size: 9px; color: #666; }
    .readmore a { font-size: 11px; font-style: italic; color: #666; }
    
    /* 12. Content */
    #fullcontent { float: left; background: #fff; width: 930px; margin: 0px 0px 15px 0px; }
    #content { float: left; background: #fff; width: 600px; padding: 0px 15px 15px 0px; border-right: 1px solid #ddd; }
    h2.pagetitle { padding: 0px 0px 10px 0px; font-family: Impact; font-size: 22px; text-transform: uppercase; }
    h2.pagetitle a, h2.pagetitle a:hover { color: #222 !important; text-decoration: none; }
    .posttitle { margin: 0px 0px 10px 0px; font: 22px/24px Georgia, "Times New Roman", Times, serif; font-weight: bold; color: #222; }
    .posttitle a, .posttitle a:visited { color: #222; }
    .postmeta { width: 100%; margin: 0px 0px 5px 0px; }
    .postmeta .comment { background: url(images/comment.png) no-repeat right 0px; padding: 0px 20px 0px 0px;  }
    
    /* 13. Entry */
    .entry { padding: 15px 0px 10px 0px; color: #222; line-height: 1.4em; border-top: 1px solid #ddd; }
    .entry p { padding-bottom: 10px; }
    .entry strong { font-weight: bold; }
    .entry em { font-style: italic; font-weight: normal; }
    .entry strong em, .entry em strong { font-style: italic; font-weight: bold; }
    .entry h1 { font: 22px/24px Georgia, "Times New Roman", Times, serif; font-weight: bold; padding: 0px 0px 7px 0px; }
    .entry h2 { font: 20px/22px Georgia, "Times New Roman", Times, serif; font-weight: bold; padding: 0px 0px 7px 0px; }
    .entry h3 { font: 18px/20px Georgia, "Times New Roman", Times, serif; font-weight: bold; padding: 0px 0px 7px 0px; }
    .entry h4 { font: 16px/18px Georgia, "Times New Roman", Times, serif; font-weight: bold; padding: 0px 0px 7px 0px; }
    .entry h5 { font: 14px/16px Georgia, "Times New Roman", Times, serif; font-weight: bold; padding: 0px 0px 7px 0px; }
    .entry h6 { font: 13px/15px Georgia, "Times New Roman", Times, serif; font-weight: bold; padding: 0px 0px 7px 0px; }
    .entry a, .entry a:visited { color: #16387c; }
    .entry a:hover { color: #16387c; text-decoration: underline; }
    .entry a img { border: none; }
    .entry ul { margin: 0px 0px 0px 7px; padding-bottom: 10px; list-style: none;}
    .entry ol { margin: 0px 0px 10px 25px; list-style-type: decimal; }
    .entry ol ol { list-style: upper-alpha; }
    .entry ol ol ol { list-style: lower-roman; }
    .entry ol ol ol ol { list-style: lower-alpha; }
    .entry ul ul, .entry ol ol, .entry ul ol, .entry ol ul { margin-bottom: 0px; }
    .entry ul li { background: url(images/dot-gray.gif) no-repeat 0 7px; padding: 2px 0px 3px 10px; font-size: 12px; line-height: 15px; }
    .entry ol li { padding: 3px 0px 3px 0px; font-size: 12px; line-height: 15px; }
    .entry li a:link, .entry li a:visited { color: #222; }
    .entry li a:hover { color: #16387c; }
    .entry li ul { margin: 0px;padding: 0px; }
    .entry del { text-decoration: line-through;color: #aaa; }
    .entry ins { text-decoration: underline; font-weight: bold; }
    .entry blockquote { margin:20px 0; padding:15px 15px 1px 15px; background: #f5f5f5; border: 1px solid #eee; border-width: 1px 0px; font-family: Georgia,"Times New Roman",Times,serif; }
    .entry blockquote p, blockquote a, blockquote { color:#999; font-style:italic; font-size: 1em; }
    .entry dfn { font-weight: bold; }
    .entry pre, .entry code, .entry tt { margin: 1.5em 0px; white-space: pre; display: block; }
    .entry pre, .entry code, .entry tt { font: 0.8em 'andale mono', 'monotype.com', 'lucida console', monospace; line-height: 1.7; background: #f5f5f5; overflow: auto; padding: 1em; color: #999; }
    .entry hr { background: #e6e6e6; color: #e6e6e6; clear: both; width: 100%; height: 1px; margin: 15px 0px; border: none; }
    .entry input, .entry textarea { font-size: 1em; padding: 3px; }
    
    .tags { background: #fff url(images/tag.gif) no-repeat 0px 0px; margin: 5px 0px 0px 0px; padding: 0px 0px 0px 20px; color: #222; }
    .tags a, .tags a:visited { color: #222; text-decoration: none; }
    .tags a:hover { color: #16387c; text-decoration: underline; }
    
    /* Paths */
    #paths {width: 580px;border:1px solid #ddd;float:left;margin-bottom:25px;padding:6px 10px;overflow:hidden;font-size: 11px;color: #444;}
    #paths a,#paths a:visited,#paths strong {padding:5px 0px;}
    #paths strong { font-weight: bold; }
    #paths a {color: #16387c;text-decoration: underline;}
    #paths a:hover { text-decoration: none;}
    #paths a.home, #paths a.home:visited { background:url(images/icon_home.png) no-repeat left center; padding-left:14px; }
    
    /* 15. Archive */
    .archive { padding: 15px 0px; border-bottom: 1px solid #ddd; }
    .archive img { padding: 0px 10px 0px 0px; }
    .archive h2 { margin: 0px 0px 8px 0px; font: 20px/22px Georgia, "Times New Roman", Times, serif; }
    .archive h2 a, .archive h2 a:visited { color: #16387c; }	
    
    /* 16. Images */
    img.centered { display: block; margin-left: auto; margin-right: auto; margin-bottom: 10px; padding: 0px; }
    img.alignnone { padding: 0px; margin: 0px 0px 10px 0px; display: inline; }
    img.alignright { padding: 0px; margin: 0px 0px 10px 10px; display: inline; }
    img.alignleft { padding: 0px; margin: 0px 10px 10px 0px; display: inline; }
    .aligncenter { display: block; margin-left: auto; margin-right: auto; margin-bottom: 10px; }
    .alignright { float: right; margin: 0px 0px 10px 10px; }
    .alignleft { float: left; margin: 0px 10px 10px 0px; }
    .wp-caption { background: #F7F7F7; text-align: center; padding: 4px 0px 5px 0px; border: 1px solid #e6e6e6; }
    .wp-caption img { margin: 0px 0px 5px 0px; padding: 0px; border: 0px; }
    .wp-caption p.wp-caption-text { margin: 0px; padding: 0px; font-size: 11px; font-weight: normal; line-height: 12px; }
    
    /* 17. Sidebar */
    #sidebar { float: right; background: #fff; width: 300px; }
    #sidebar li ul { border: none;}
    #sidebar a, #sidebar a:visited { color: #222; }
    #sidebar a:hover { color: #16387c; }
    
    .widgetnews { background: #f5f5f5; margin: 0px 0px 1px 0px; padding: 10px 5px; border-bottom: 1px solid #eee; }
    .widgetnews img { float: left; padding: 0px 10px 0px 0px; }
    .adtext {margin-bottom: 10px;color: #999;font-size: 10px;text-transform: uppercase;}
    
    /* 18. Subscribe */
    #subscribe { background: #fafafa url(images/graybg.png) repeat-x scroll center bottom; padding: 8px 5px; border: 1px solid #ddd; font-size: 90%; }
    .subscribe_icons { width: 285px; margin: 0px auto; }
    .subscribe_icons li { display: inline; float:left; margin: 0px 2px 5px 2px; width: 52px; text-align: center; font-size: 11px; }
    .subscribe_icons a { display:block; padding: 40px 0 2px; -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; }
    .subscribe_icons a:hover { color:#444; text-decoration: none; -moz-box-shadow: 0 2px 4px hsla(0,0%,0%,.35); -webkit-box-shadow: 0 2px 4px hsla(0,0%,0%,.35); }
    .subscribe_icons .subscribe_buzz a { background: url(images/buzz.png) center top no-repeat; }
    .subscribe_icons .subscribe_twitter a { background: url(images/twitter.png) center top no-repeat; }
    .subscribe_icons .subscribe_facebook a { background: url(images/facebook.png) center top no-repeat; }
    .subscribe_icons .subscribe_rss a { background: url(images/rss.png) center top no-repeat; }
    .subscribe_icons .subscribe_email a { background: url(images/email.png) center top no-repeat; }
    
    /* 19. Tabber */
    .tabber { width: 298px; margin: 0px 0px 5px 0px; }
    .tabber ul { background: #fff; }
    .tabs { display: block; margin: 0px 1px 0px 0px; }
    .tabs li { float: left; display: inline; background: #f9fafa url(images/graybg.png) repeat-x; }
    .tabs li a { display: block; margin: 0px 1px 0px 0px; padding: 2px 8px; font-size: 11px; font-weight: bold; text-transform: uppercase; border-top: 1px solid #ddd; border-left: 1px solid #ddd; border-right: 1px solid #ddd; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; }
    .tabs li a:hover { color: #16387c; text-decoration: none; }
    .tabs li a.selected, .tabs li a.selected:hover { background: #fff; color: #16387c; border-bottom: 1px solid #fff !important;}
    .tabcontent { display: none; width: 278px; margin: -1px 0px 0px 0px; padding: 10px 10px 5px 10px; border: 1px solid #ddd; }
    .tabcontent li { list-style: decimal outside; margin: 0px 0px 0px 18px; padding: 0px 0px 5px 0px; color: #666; }
    
    /* 20. Widgets */
    .widget { width: 300px;}
    .widget ul li { background: url(images/dot-gray.gif) no-repeat left 9px; padding: 3px 0px 3px 10px; }
    .halfwidth ul li { float: left; width: 140px; }
    h1.widgettitle { padding: 0px 0px 0px 0px; font-family: Impact; font-size: 22px; text-transform: uppercase; }
    h1.widgettitle a, h1.widgettitle a:hover { color: #222 !important; text-decoration: none; }
    
    /* 21. Calendar*/
    #wp-calendar { width: 100%; }
    #wp-calendar, #wp-calendar th, #wp-calendar caption { text-align:center; }
    #wp-calendar th { background: #f5f5f5; padding: 3px; border: 1px solid #f0f0f0; }
    #wp-calendar td { padding: 5px 2px; border: 1px solid #f0f0f0; }
    #wp-calendar caption { background:transparent; font-weight:bold;padding: 3px 0px 7px 0px; color: #333; }
    #wp-calendar #today { background: #f5f5f5; font-weight:bold; }
    
    /* 22.Comments */
    #comments { border-top: 1px solid #ddd; position: relative; margin-top: 0px;padding: 20px 0px 0px 0px; }
    #comments h3 { font-size: 16px; font-weight: bold; color: #333; padding-bottom: 20px; }
    #comments .comment { margin-top: -1px !important; list-style-type: none;}
    #comments .avatar { float: left; }
    #comments img.avatar { background: #fff; padding: 2px; border: 1px solid #e6e6e6; }
    #comments .comment-right { margin-left: 75px; }
    #comments .comment .comment-container  { padding: 3px 0px; }
    #comments .comment-head  { border-bottom: 1px solid #ddd; height: 30px; line-height: 30px; padding: 0px; margin: 0px; }
    #comments .comment-head .name { font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; margin: 0px 0px -5px 0px; font-weight: bold; font-size: 12px; }
    #comments .comment-head .date { font-family: Georgia, "Times New Roman", Times, serif; text-transform: none; }
    #comments .comment-head .date a, #comments .comment-head .edit { font-size: 11px; color:#777; padding: 0px 5px 0px 0px; }
    #comments .comment-entry { background:#fff; color:#555; padding:10px 0px 0px 0px; border-width:0 1px 1px 1px; font-size:12px; line-height:16px; }
    #comments .comment-entry p  { margin: 0 0 0px 0; }
    #comments li { padding: 15px; border: 1px solid #ddd; }
    #comments ul.children { padding:10px 10px 10px 25px;margin:0; }
    #comments .cancel-comment-reply {margin-bottom:10px; font-family: Georgia, "Times New Roman", Times, serif; }
    #comments .cancel-comment-reply a { color: #16387c; }
    
    #comments .navigation { }
    #comments .navigation a{ display: block; margin: 15px 0 0 0; text-decoration: none; }
    #comments .navigation a:hover{}
    
    #comments .reply { margin: 15px 0px 0px 0px; }
    #comments a.comment-reply-link { color:#16387c; font-family: Georgia, "Times New Roman", Times, serif; font-size:11px; text-decoration: underline; }
    #comments a.comment-reply-link:hover { text-decoration: none; }
    #comments .unapproved { text-align:center; padding: 5px; }
    
    /* 23. Comments Form */
    #respond  { margin: 0px; padding: 25px 0px 20px; border-bottom: 1px solid #ddd;}
    #comments #respond { padding:20px 0px; }
    #respond h3  { font-size: 16px; font-weight: bold; color:#222; padding-bottom:10px;  }
    #respond .left { float: left; width: 200px; }
    #respond .right { float: left; width: 350px; }
    #commentform  {	margin: 15px 0 0 0; font-family: Arial, Helvetica, sans-serif; }
    #commentform input.txt  { color: #555; width: 180px; margin: 0px 10px 10px 0px; }
    #commentform textarea  { color: #555; width: 100% !important;  }
    #commentform #submit  { margin: 15px 0px 0px 0px; }
    #commentform #submit { padding: 3px 6px; color: #fff; font-weight: bold; font-size: 11px; text-transform: uppercase; text-shadow: #555 0px 1px; background-color: #16387c; border: 1px solid #ddd; }
    #commentform #submit:hover { cursor:pointer; opacity:0.8; }
    input.txt,textarea{ background: #f5f5f5 !important; border:1px solid #ddd; border-color: #ddd #eee #eee #ddd; padding: 3px 5px;}
    input.txt:focus,textarea:focus { background:#FFF !important; border:1px solid #ccc; color: #111!important;}
    
    /* 24. Pagination */
    .pagenavi { padding: 10px 0px 0px 0px; }
    .nextprev a { padding: 7px 0px; }
    
    /* 25. Footer */
    #footer { background: #fff; margin: 10px 0px 0px 0px; font-size: 11px;  }
    #footer ul { display: inline; }
    #footer li ul { display: inline; background: none; margin: 0px; padding: 0px; border: none; }
    #footer ul li { display: inline; float: left; margin: 0px 0px 0px 0px; padding: 0px 8px 0px 0px; list-style: none;}
    #footer li li { display: inline; }
    #footer li a { color: #16387c; }
    .footerline { float: left; display: inline; width: 600px; height: 1px; margin: 0px 0px 0px 0px; border-top: 4px solid #B8240D; }
    .footerlogo { margin: 0px 10px 0px 0px; }

    ----------------

    and my sidebar.php file is:

    <div id="sidebar">
    	<?php include('tabber.php') ;?>
    	<div class="widgetbox">
    
    	</div> <!--end: widgetbox-->
    	<?php include('ads/sidebar300x250ad1.php'); ?>
    	<div class="widget">
            <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Page Widgets - 1 Column') ) : ?>
        	<?php endif; ?>
            <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Page Widgets - 2 Columns') ) : ?>
        	<?php endif; ?>
      	</div> <!--end: widget-->
    </div> <!--end: sidebar-->

  2. ClaytonJames
    Member
    Posted 4 years ago #

    Try this and see if it works for you.

    .widget { width: 300px; margin-top:15px;}

  3. redds013
    Member
    Posted 3 years ago #

    thanks for this, I was looking all day for an answer this works perfectly.

Topic Closed

This topic has been closed to new replies.

About this Topic