Refer me to someone. I will pay for help with my wordpress sidebar.

Discussion in 'Web Design and Development' started by Rob587, Nov 7, 2009.

  1. Rob587 macrumors 6502a

    Rob587

    Joined:
    Jul 4, 2004
    Location:
    Orlando, FL
    #1
    I'm basically looking for someone that can help me with my wordpress sidebar coding and I'm willing to pay for it.

    I need someone that really understands wordpress sidebar functions and css.

    MY PROBLEM:

    I'm really lost. I initially downloaded "revolution code blue" wordpress them, which has a two column sidebar layout. But I wanted one larger sidebar instead of two, that can have different sized widgets in it. For example, I would like to have an ad at the top, then maybe a list of categories underneath, with a skyscraper ad next to it.

    What I tried doing was changing the css in the theme so that one of the sidebars in the theme would just go under the other on the right, so I renamed them Big Sidebar and Small Sidebar, but then realized that what I needed to be doing was just having one sidebar, with everything defined in the css and sidebar php for the different sized widgets ill be putting in it. So I deleted the left and right sidebar css and php and just created one sidebar css and php files. But now I don't know how to make the different sized widgets automatically fit in the side bar. Like every widget I place in the sidebar now is the same width, when I need some to be smaller and next to each other, like the list of categories and a sky scraper ad.

    So can anyone help me fix the sidebar how I want? Please only refer yourself or someone else if you really think you or they can handle what im talking about. It shouldn't take long for someone who knows what they're doing. Thanks.
     
  2. Dal123 macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #2
    Contact angelwatt buddy. Every problem on here is sorted by that man. He is in a league of his own!:D
     
  3. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #3
    I have played with WordPress some, but I'm not an authority by any means. My short visit with it showed me that the WordPress Codex site has a ton of good information to you help you do things with a WordPress theme. I found this page on sidebars and it may give you some information that you need to do this.

    If you give the code you're trying to use for the sidebars it may aid in people giving you advice here since WordPress themes have a lot of flexibility in the way they do things.
     
  4. Rob587 thread starter macrumors 6502a

    Rob587

    Joined:
    Jul 4, 2004
    Location:
    Orlando, FL
    #4
    Ok, great. I have been looking over the documentation and I cant figure out what I am supposed to do because I am relatively new to all of this.

    Ill post my sidebar css and sidebar.php below. If you could look at it and let me know if you have any ideas for what I need to do, that would be great. Thanks.

    /************************************************
    * Sidebar *
    ************************************************/

    Code:
    #sidebar {
    	float: right;
            width: 330px;
    	margin: 0px 0px 0px 0px;
    	padding: 10px 0px 20px 0px;
    	line-height: 20px;
    	}
    	
    #sidebar h2 {
    	background: #FFFFFF url(images/headline_right.gif);
    	color: #FFFFFF;
    	font-size: 11px;
    	font-family: Arial, Tahoma, Verdana;
    	font-weight: bold;
    	text-transform: uppercase;
    	margin: 10px 0px 0px 0px;
    	padding: 3px 0px 3px 10px;
    	}
    
    #sidebar p {
    	padding: 0px 0px 0px 0px;
    	margin: 0px;
    	line-height: 20px;
    	}
    	
    #sidebar ul {
    	list-style-type: none;
    	margin: 0px 0px 10px 0px;
    	padding: 0px;
    	}
    	
    #sidebar ul li {
    	list-style-type: none;
    	margin: 0px 0px 5px 0px;
    	padding: 0px;
    	}
    
    #sidebar ul ul {
    	list-style-type: none;
    	margin: 0px;
    	padding: 0px;
    	border-left: 1px solid #999999;
    	border-right: 1px solid #999999;
    	}
    	
    #sidebar ul li li {
    	background: #FFFFFF;
    	padding: 0px 0px 0px 15px;
    	margin: 0px;
            border-bottom: 1px solid #999999;
    	}
    	
    #sidebar ul li ul li {
    	background: #FFFFFF;
    	padding: 0px 0px 0px 15px;
    	margin: 0px;
    	}
    /************************************************
    * sidebar.php *
    ************************************************/

    Code:
    <!-- begin sidebar -->
    
    <div id="sidebar">
    
    	<ul id="sidebarwidgeted">
    	<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(2) ) : else : ?>
    	
    		<li id="recent-posts">
    		<h2>Recent Posts</h2>
    			<ul>
    				<?php get_archives('postbypost', 5); ?>
    			</ul>
    		</li>
    
             <li id="categories">
    		<h2>Categories</h2>
    			<ul>
    				<?php wp_list_categories('sort_column=name&title_li='); ?>
    			</ul>
    		</li>
    		
    		<li id="archives">
    		<h2>Archives</h2>
    			<ul>
    				<?php wp_get_archives('type=monthly'); ?>
    			</ul>
    		</li>
    
    		<li id="links">
    		<h2>Links</h2>
    			<ul>
    				<?php wp_list_bookmarks('title_li=&categorize=0'); ?>
    			</ul>
    		</li>
    	
    		<li id="meta">
    		<h2>Meta</h2>
    			<ul>
    				<?php wp_register(); ?>
    				<li><?php wp_loginout(); ?></li>
    				<li><a href="http://www.wordpress.org/">WordPress</a></li>
    				<?php wp_meta(); ?>
    				<li><a href="http://validator.w3.org/check?uri=referer">XHTML</a></li>
    			</ul>
    		</li>
    
    		
    	<?php endif; ?>
    	</ul>
    			
    </div>
    
    <!-- end sidebar -->
     
  5. design-is macrumors 65816

    design-is

    Joined:
    Oct 17, 2007
    Location:
    London / U.K.
    #5
    Do you have a link to your site live, or are you developing locally with mamp?

    I'm by no means an expert, but have done a fair bit of playing around with WordPress.

    /Doug
     
  6. Rob587 thread starter macrumors 6502a

    Rob587

    Joined:
    Jul 4, 2004
    Location:
    Orlando, FL
    #6
    Im working on it at golfsolid.com

    Thanks!
     
  7. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #7
    I think I'm finally starting to get what you want. You want the sidebar to be able to have a grid-like layout. Something like this below as your sidebar.
    Code:
    ---------
    |   AD  |
    ---------
    | 1 | 2 |
    ---------
    You can use CSS to adjust sections 1 and 2 to have a width of about 50% (depends on any margins and padding applied to the lists), then float them left so they are on the same horizontal. You'll also want to make sure whatever you have after this set with a clear:left bit.

    HTML:
    <ul id="section-1">...</ul>
    <ul id="section-2">...</ul>
    Code:
    #section-1, #section-2 {
     width: 48%;
     float: left;
    }
     
  8. Rob587 thread starter macrumors 6502a

    Rob587

    Joined:
    Jul 4, 2004
    Location:
    Orlando, FL
    #8
    Yes, thats exactly what im trying to do.

    I tried adding that code you suggested to my sidebar.php and my css stylesheet, but nothing happened. This is what I did (I tried putting it around categories by itself to test it):

    <!-- begin sidebar -->

    <div id="sidebar">

    <ul id="sidebarwidgeted">
    <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(2) ) : else : ?>

    <li id="recent-posts">
    <h2>Recent Posts</h2>
    <ul>
    <?php get_archives('postbypost', 5); ?>
    </ul>
    </li>

    <ul id="section-1">
    <li id="categories">

    <h2>Categories</h2>
    <ul>
    <?php wp_list_categories('sort_column=name&title_li='); ?>
    </ul>
    </li>
    </ul>

    <li id="archives">
    <h2>Archives</h2>
    <ul>
    <?php wp_get_archives('type=monthly'); ?>
    </ul>
    </li>

    <li id="links">
    <h2>Links</h2>
    <ul>
    <?php wp_list_bookmarks('title_li=&categorize=0'); ?>
    </ul>
    </li>

    <li id="meta">
    <h2>Meta</h2>
    <ul>
    <?php wp_register(); ?>
    <li><?php wp_loginout(); ?></li>
    <li><a href="http://www.wordpress.org/">WordPress</a></li>
    <?php wp_meta(); ?>
    <li><a href="http://validator.w3.org/check?uri=referer">XHTML</a></li>
    </ul>
    </li>


    <?php endif; ?>
    </ul>

    </div>

    <!-- end sidebar -->


    /************************************************
    * Sidebar *
    ************************************************/

    #sidebar {
    float: right;
    width: 330px;
    margin: 0px 0px 0px 0px;
    padding: 10px 0px 20px 0px;
    line-height: 20px;
    }

    #sidebar h2 {
    background: #FFFFFF url(images/headline_right.gif);
    color: #FFFFFF;
    font-size: 11px;
    font-family: Arial, Tahoma, Verdana;
    font-weight: bold;
    text-transform: uppercase;
    margin: 10px 0px 0px 0px;
    padding: 3px 0px 3px 10px;
    }

    #sidebar p {
    padding: 0px 0px 0px 0px;
    margin: 0px;
    line-height: 20px;
    }

    #sidebar ul {
    list-style-type: none;
    margin: 0px 0px 10px 0px;
    padding: 0px;
    }

    #sidebar ul li {
    list-style-type: none;
    margin: 0px 0px 5px 0px;
    padding: 0px;
    }

    #sidebar ul ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    border-left: 1px solid #999999;
    border-right: 1px solid #999999;
    }

    #sidebar ul li li {
    background: #FFFFFF;
    padding: 0px 0px 0px 15px;
    margin: 0px;
    border-bottom: 1px solid #999999;
    }

    #sidebar ul li ul li {
    background: #FFFFFF;
    padding: 0px 0px 0px 15px;
    margin: 0px;
    }

    #section-1, #section-2 {
    width: 48%;
    float: left;
    }
     
  9. Rob587 thread starter macrumors 6502a

    Rob587

    Joined:
    Jul 4, 2004
    Location:
    Orlando, FL
    #9
    Ok, I figured out how to get it to work. But there is some padding or margin that is messing up the stack from being side by side. Like when I keep trying to add things they dont go side by side like the first two. Can you take a look at my new css here and tell me whats doing it (golfsolid.com):

    Code:
    /************************************************
    *	Sidebar 					     	    * 
    ************************************************/
    	
    #sidebar {
    	float: right;
            width: 330px;
    	margin: 0px 0px 0px 0px;
    	padding: 10px 0px 20px 0px;
    	line-height: 20px;
    	}
    	
    #sidebar h2 {
    	background: #FFFFFF url(images/headline_right.gif);
    	color: #FFFFFF;
    	font-size: 11px;
    	font-family: Arial, Tahoma, Verdana;
    	font-weight: bold;
    	text-transform: uppercase;
    	margin: 10px 0px 0px 0px;
    	padding: 3px 0px 3px 10px;
    	}
    
    #sidebar p {
    	padding: 0px 0px 0px 0px;
    	margin: 0px;
    	line-height: 20px;
    	}
    	
    #sidebar ul {
    	list-style-type: none;
    	margin: 0px 0px 10px 0px;
    	padding: 0px;
    	}
    	
    #sidebar ul li {
    	list-style-type: none;
    	margin: 0px 0px 5px 0px;
    	padding: 0px;
    	}
    
    #sidebar ul ul {
    	list-style-type: none;
    	margin: 0px;
    	padding: 0px;
    	border-left: 1px solid #999999;
    	border-right: 1px solid #999999;
    	}
    	
    #sidebar ul li li {
    	background: #FFFFFF;
    	padding: 0px 0px 0px 0px;
    	margin: 0px;
            border-bottom: 1px solid #999999;
    	}
    	
    #sidebar ul li ul li {
    	background: #FFFFFF;
    	padding: 0px 0px 0px 15px;
    	margin: 0px;
    	}
    
    #sidebar_section-1 {
     width: 50%;
     float: left;
    }
    
    #sidebar_section-2 {
     width: 50%;
     float: left;
    }
     
  10. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #10
    It's because you're reusing the id sidebar_section-1, which is not allowed. That's why the CSS is conflicting itself. IDs are always unique.
     
  11. Rob587 thread starter macrumors 6502a

    Rob587

    Joined:
    Jul 4, 2004
    Location:
    Orlando, FL
    #11
    I just went in my css and made more. Now I have like section-1, section-1, section-3, and section-5. I then made each item in the php one of those sections, but my columns stayed the same. It wouldnt be because of some padding or margin issue that im not seeing, would it?
     
  12. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
  13. Rob587 thread starter macrumors 6502a

    Rob587

    Joined:
    Jul 4, 2004
    Location:
    Orlando, FL
    #13
    wow, your awesome! thanks for all the help!
     

Share This Page