Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

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

Rob587

Rob587

macrumors 6502a
Original poster
Jul 4, 2004
801
1
Orlando, FL
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.
 
Contact angelwatt buddy. Every problem on here is sorted by that man. He is in a league of his own!:D
 
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.
 
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 -->
 
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
 
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;
}
 
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;
}
 
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;
}
 
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.
 
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?
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back