WordPress.org

1. KenHicks
   Member
   Posted 3 years ago #

   I am using a theme that did not have a dynamic sidebar. With the gracious help of Greenshady I was able to straighten out my sidebar.php and functions.php files to make my widgets work and to add my own coding to the sidebar.

   I am using a <div class="box"> tag to put a box around the stuff that I code but I would like to have the same boxes around my widgets but the widget codes don't show up in the sidebar.php file so how would I accomplish this?

   If you go to my site and look at my sidebar you can see my widgets and then see the box at the bottom. I would like to have that same box around all the widgets.

2. Eric Amundson
   Member
   Posted 3 years ago #

   Hey Ken,

   You should be able to do this by adding this to your style.css file:
   

   #sidebar div {border:1px solid #ccc;}
   #sidebar div div {border:none;}

   Note, you've got some div.textwidget that just contain a separator line. Might be better to use borders to do this, or maybe once you've encapsulated the sidebar divs with borders, you won't need these anymore.

   Okay, fooled about a bit more with your layout and you could try something like this:
   

   #sidebar div {border:1px solid #ccc;margin-top:1em;float:left; width:250px;padding:10px 0;}
   #sidebar div div {border:none;margin:0;width:auto;}
   #sidebar h2{margin:0 10px; padding:0;}
   #sidebar h2 a.rsswidget {padding:.2em 0;float:left;height:1em;}
   #sidebar h2 a.rsswidget img {padding:0 .5em 0 0;}
   #sidebar .rssSummary {margin:5px 0;}
   #sidebar ul {clear:both; padding-top:1em;float:left;}
   #sidebar li {margin:0 10px;}
   #sidebar .textwidget {margin:0 10px;}

   There are still some other issues that you'd want to clear up like the search box, extra divs, etc, but it's a start.

3. KenHicks
   Member
   Posted 3 years ago #

   DUDE!!!! You are awesome!

   Yeah, was cheating with the text widgets to make the separator lines :)

   If you would be so kind can you help me out with a little bit more? The text in the very bottom (non-widget) box is tight up against the left side of the box. How do I pad it to match the padding in the widget boxes?

   Btw, this is what's in my stylesheet in the "left" section:

   <blockqoute>
   /* LEFT SIDE */

   #sidebar {
   float: left;
   width: 250px;
   }

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

   #sidebar li {
   list-style-type:none;
   }

   #sidebar li ul li{
   list-style-type:none;
   margin-left:20px;
   }
   .box {
   padding: 4px 15px;
   border: 1px solid #CCC;
   margin: 0 0 10px 0;
   font-size: 100%;
   font-family: "Arial", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Verdana", "Sans-Serif";
   }

   #sidebar div {border:1px solid #ccc;margin-top:1em;float:left; width:250px;padding:10px 0;}
   #sidebar div div {border:none;margin:0;width:auto;}
   #sidebar h2{margin:0 10px; padding:0;}
   #sidebar h2 a.rsswidget {padding:.2em 0;float:left;height:1em;}
   #sidebar h2 a.rsswidget img {padding:0 .5em 0 0;}
   #sidebar .rssSummary {margin:5px 0;}
   #sidebar ul {clear:both; padding-top:1em;float:left;}
   #sidebar li {margin:0 10px;}
   #sidebar .textwidget {margin:0 10px;}

   .box h4 {
   color: #000;
   /* font-size: 150%; */
   font: 1.30em/160% "Arial", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Verdana", "Sans-Serif";
   margin: 0.55em 0;
   font-weight: bold;
   }

   .box h4 em {
   color: #889AAB;
   font-style: normal;
   }

   .note {
   padding: 15px 15px 15px 90px;
   border: 1px solid #CFCB66;
   margin: 0 0 10px 0;
   background: #FFFFAD url(images/package.jpg) no-repeat;
   color: #585616;
   }

   One more thing if I might. Can we (you actually, because I am pretty much helpless when it comes to coding) get the border of the search box to line up with the post box right under the header image?

   You don't know how much I appreciate your help.

4. KenHicks
   Member
   Posted 3 years ago #

   Oops, my blockquote didn't work.

5. Eric Amundson
   Member
   Posted 3 years ago #

   I can see your stylesheet. :)

   Both requests are totally possible. Unfortunately, we may need some hooks to attach some CSS to.

   Can we . . . get the border of the search box to line up with the post box right under the header image?

   Must confess I'm not sure I understand what you're aiming for. Initially I read your question to mean you wanted to eliminate the border around the search box. If so, can you give the div and ID of "search_box" or something similar?

   If not, can you be a tad more specific how you'd like it?

   The text in the very bottom (non-widget) box is tight up against the left side of the box. How do I pad it to match the padding in the widget boxes?

   Do me a favor and enclose quote text in a paragraph or blockquote - it will make it easier to style.

   Here's what you have:
   

   <div class="box">
   "I have read in Plato and Cicero sayings that are wise and very beautiful; but I have never read in either of them: Come unto me all ye that labor and are heavy laden." <br />
   <i>St. Augustine</i>
   </div>

   Here's how I'd do it:
   

   <div class="box">
   <blockquote>"I have read in Plato and Cicero sayings that are wise and very beautiful; but I have never read in either of them: Come unto me all ye that labor and are heavy laden."
   <cite>St. Augustine</cite>
   <blockquote>
   </div>

6. KenHicks
   Member
   Posted 3 years ago #

   Ok, the quote box looks nice. Thanks.

   What I meant with the search box (the border box like the box that is around all the other widgets, not the box that you type the search in) is that there is a bigger gap between it and the header image than there is between the header image and the "Greetings" box on the right. I would like the gaps to be the same

7. Eric Amundson
   Member
   Posted 3 years ago #

   Ok, the quote box looks nice. Thanks.

   It does look nice. Let me know if need to tweak it further.

   there is a bigger gap between it and the header image than there is between the header image and the "Greetings" box on the right. I would like the gaps to be the same

   Easiest thing may be to change this:
   

   #sidebar div {border:1px solid #ccc;margin-top:1em;float:left; width:250px;padding:10px 0;}

   To this:

   #sidebar div {border:1px solid #ccc;margin-bottom:1em;float:left; width:250px;padding:10px 0;}

   We're just adding margin to the bottom instead of the top of the sidebar divs.

   Make sense?

8. KenHicks
   Member
   Posted 3 years ago #

   I repeat; "DUDE!!!! You are awesome!"

   One more thing and I think I will completely satisfied with the look of the site. Can we get a little padding between the search window and the border box?

   Hey?!?! I've been looking at the site in Firefox and I just checked it out in IE and the text in the RRS feeds widgets is running outside the border boxes. I tried changing some "widths" in the stylesheet but that just jacked it up. Can yu help me out?

9. Eric Amundson
   Member
   Posted 3 years ago #

   Can we get a little padding between the search window and the border box?

   Try adding this:
   

   .box form{padding:0 10px;}
   .box form #search_input {color:#666;width:220px;}

   in IE and the text in the RRS feeds widgets is running outside the border boxes

   Ah, good ol' IE . . .

   Try this:

   #sidebar .rssSummary {
   margin:5px;
   }

   Or, maybe better yet:
   

   #sidebar .rssSummary {
   margin:5px 10px 5px 0;
   }

10. KenHicks
    Member
    Posted 3 years ago #

    That looks great! 'cept for one small thing :)

    Can you hook a brother up with a little padding on the right side of the RSS feeds widget boxes (in IE)? The text runs right up against the right side of the border boxes.

    I don't know how to show my appreciation for all your help, except that I noticed that you might be in Portland in September for a WordCamp. I don't live in Portland anymore but my gift to you is that you should go to the Knob Hill bar in NW Portland and try a Knobby Burger or If you like Mexican food you should see if Acapulco Gold's is still in existence (also in NW Portland).

11. Eric Amundson
    Member
    Posted 3 years ago #

    Hey Ken,

    Try either increasing the margin on the right (my pref), or adding padding like so:
    
    Change this:

    #sidebar .rssSummary {
    margin:5px 10px 5px 0pt;
    }

    to:

    #sidebar .rssSummary {
    margin:5px 20px 5px 0pt;
    }

    or:
    

    #sidebar .rssSummary {
    margin:5px 10px 5px 0pt;
    padding-right:10px;
    }

    I don't know how to show my appreciation for all your help, except . . .that you should go to the Knob Hill bar in NW Portland and try a Knobby Burger or . . .see if Acapulco Gold's is still in existence.

    Super nice of you, thanks. Yep, I'm driving to WordCamp from Washington - if you're close you should go!

12. KenHicks
    Member
    Posted 3 years ago #

    That's perfect!

    You Rock!

    Btw, I like your cat. I have a cat that does tricks. She's a Russian Blue that will roll over, give a high five and give a doll CPR all on command.

    Thanks again.

13. Eric Amundson
    Member
    Posted 3 years ago #

    Thanks! Yeah, Oliver's great, but I've never seen him give CPR. You've got something special there. :)

Topic Closed

This topic has been closed to new replies.