Title: Putting a border between sidebar’s elements
Last modified: August 19, 2016

---

# Putting a border between sidebar’s elements

 *  [sanjeeonp](https://wordpress.org/support/users/sanjeeonp/)
 * (@sanjeeonp)
 * [17 years, 1 month ago](https://wordpress.org/support/topic/putting-a-border-between-sidebars-elements/)
 * Hello !
    I am using the latest version of WordPress with the theme Arthemia. 
   There is a sidebar at the right of the blog. There are differents elements in,
   like : Comments, …, the normal way of displaying is that the whole elements are
   in one div called “sidebar-top”. I want to display them as different div because
   I want to put a border arround each one of them. I looked for it in sidebar.php,
   index.php … but nowhere i found the container of the plugins as source code. 
   I am using the following plugins : All in One SEO Pack, Post-Plugin Library, 
   and Get Recent Comments.
 * I sum up my problem : i want to put a border between the elements of the sidebar
   and i don’t know how.
 * Thanks for helping.

Viewing 15 replies - 1 through 15 (of 23 total)

1 [2](https://wordpress.org/support/topic/putting-a-border-between-sidebars-elements/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/putting-a-border-between-sidebars-elements/page/2/?output_format=md)

 *  [stvwlf](https://wordpress.org/support/users/stvwlf/)
 * (@stvwlf)
 * [17 years, 1 month ago](https://wordpress.org/support/topic/putting-a-border-between-sidebars-elements/#post-1038954)
 * If you are able to post a URL it is much easier to tell you how to do that.
 *  Thread Starter [sanjeeonp](https://wordpress.org/support/users/sanjeeonp/)
 * (@sanjeeonp)
 * [17 years, 1 month ago](https://wordpress.org/support/topic/putting-a-border-between-sidebars-elements/#post-1039071)
 * Hello!
    Here is the link : [http://leblog.uneviemoinschere.com/](http://leblog.uneviemoinschere.com/)
   I want to put a border on “Commentaires récents”, “Categorie”, “Articles récents”…
 *  Thread Starter [sanjeeonp](https://wordpress.org/support/users/sanjeeonp/)
 * (@sanjeeonp)
 * [17 years, 1 month ago](https://wordpress.org/support/topic/putting-a-border-between-sidebars-elements/#post-1039082)
 * Hey!
    I found the file wp-includes/widgets.php, but I can’t find where to add
   the code so that I can put a border like that border:3px solid #99CC01;
 *  [stvwlf](https://wordpress.org/support/users/stvwlf/)
 * (@stvwlf)
 * [17 years, 1 month ago](https://wordpress.org/support/topic/putting-a-border-between-sidebars-elements/#post-1039084)
 * Hi
 * The problem is there is no wrapper element in the widget code to apply the CSS
   to. You can apply it to the header or to the content under the header but not
   both.
 * I worked out a way to wrap a Div around each of those section pairs using jQuery(
   javascript). Its working fine on my test document. (It leaves out the Archives
   section.) It creates a div that has a class called “section” around each section.
   Then CSS styling is assigned to “div.section”.
 * Here is what you need to do to get this working –
    1) in header.php find the 
   line `<?php wp_head(); ?>`
 * 2) BEFORE that line, add this line
    `<?php wp_enqueue_script('jquery'); ?>`
 * 3) AFTER that line, paste in this script
 *     ```
       <script type='text/javascript'>
       jQuery(document).ready(function(){
          jQuery('#sidebar-top h3:not(:last)').each(function(){
              var $this = jQuery(this);
              $this.add($this.next()).wrapAll('<div class="section"></div>');
          });
       });
       </script>
       ```
   
 * 4) in style.css add this code
 *     ```
       #sidebar-top div.section {
         border:3px solid #99CC01;
         margin-bottom: 10px;
         padding: 0 5px;
       }
       ```
   
 * I have it working here and its doing what you said you want.
 *  Thread Starter [sanjeeonp](https://wordpress.org/support/users/sanjeeonp/)
 * (@sanjeeonp)
 * [17 years, 1 month ago](https://wordpress.org/support/topic/putting-a-border-between-sidebars-elements/#post-1039093)
 * Oh thanks, it works !
    Just another question : is it the same way if i want to
   transform the square border into a surrounded one? I tried to do it for the sidebar-
   top-right called “Edito” (“Featured” in the code), as u can see it doesn’t work
   that much. here is the code :
 * In index.php
 *     ```
       <div id="featured">
       	<div class="relsample">
       	<div class="top_left"></div>
       	<div class="top_right"></div>
       	<div class="content"><img src="<?php echo get_option('home'); ?>/wp-content/themes/arthemia/images/edito.png" width="72px" height="17px" alt="" />
   
       	<?php query_posts("showposts=4&category_name=Edito"); $i = 1; ?>
   
             	<?php while (have_posts()) : the_post(); ?>
       	<div class="clearfloat">
       	<div class="spoiler">
       	<?php	$values = get_post_custom_values("Image");
       	if (isset($values[0])) { ?>
             <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
       	<img src="<?php echo bloginfo('template_url'); ?>/scripts/timthumb.php?src=/<?php
       $values = get_post_custom_values("Image"); echo $values[0]; ?>&w=150&h=150&zc=1&q=100"
       alt="<?php the_title(); ?>" class="left" width="150px" height="150px"  /></a>
             <?php } ?>
   
       	<?php the_excerpt(); ?>
       	</div>
           	</div>
   
             <?php endwhile; ?>
   
       	  </div>
       	<div class="bottom_left"></div>
       	<div class="bottom_right"></div>
       </div>
       	</div>
       ```
   
 * In the CSS :
 *     ```
       .relsample .top_left, .relsample .top_right, .relsample .bottom_left, .relsample .bottom_right {
       	height: 19px; width: 19px; background-repeat: no-repeat; position: absolute; /*background-color: #00FF00*/;
       }
       .relsample .top_left {
       	top: 0px;
       	left: 0px;
       	background-image: url("./images/bordures/Bordure_haut_gauche.png");
       	z-index: 0;
       	margin-left : -15px;
       }
       .relsample .top_right {
       	top: 0px;
       	right: 0px;
       	background-image: url("./images/bordures/Bordure_haut_droite.png");
       	z-index: 1;
       	margin-right :-24px;
       }
       .relsample .bottom_left {
       	bottom: 0px;
       	left: 0px;
       	background-image: url("./images/bordures/Bordure_bas_gauche");
       	z-index: 2;
       	margin-left : -15px;
       }
   
       .relsample .bottom_right {
       	bottom: 0px;
       	right: 0px;
       	background-image: url("./images/bordures/Bordure_bas_droite.png");
       	z-index: 3;
       	margin-right :-24px;
   
       }
       .relsample .content {
       	position: relative;
       	/*padding: 12px; */
       	padding-top : 15px;
       	z-index: 4;
       }
       ```
   
 * Thanks !
 *  [stvwlf](https://wordpress.org/support/users/stvwlf/)
 * (@stvwlf)
 * [17 years, 1 month ago](https://wordpress.org/support/topic/putting-a-border-between-sidebars-elements/#post-1039097)
 * You can apply any styling you like to those blocks by changing the CSS in #sidebar-
   top div.section {
 * If you want to make rounded corners you will have to turn off the borders. That
   jQuery code is very simple – all it is doing is wrapping the h3 header and the
   block after it in a Div. You can style that div as you wish.
    ———– When I make
   rounded corners I usually make a top and bottom image the full width of the box
   and put them in their own div’s
 *     ```
       <div id="box-top"></div>
       <div id="box-contents>
       ....  content here ...
       </div>
       <div id="box-bottom"></div>
       ```
   
 *     ```
       #box-top ( background: url(images/box-top.jpg); height: 15px; width 200px; }
       #box-bottom ( background: url(images/box-bottom.jpg); height: 15px; width 200px; }
       ```
   
 *  Thread Starter [sanjeeonp](https://wordpress.org/support/users/sanjeeonp/)
 * (@sanjeeonp)
 * [17 years, 1 month ago](https://wordpress.org/support/topic/putting-a-border-between-sidebars-elements/#post-1039191)
 * Thank you for ure help, i’ll testing that tomorrow.
    i’ll keep you in touch
 *  Thread Starter [sanjeeonp](https://wordpress.org/support/users/sanjeeonp/)
 * (@sanjeeonp)
 * [17 years, 1 month ago](https://wordpress.org/support/topic/putting-a-border-between-sidebars-elements/#post-1039192)
 * hey , I tested that and it make big bugs…
    [http://leblog.uneviemoinschere.com/](http://leblog.uneviemoinschere.com/)
 *     ```
       .box-top {
       	background: transparent url(images/bordures/Bordure_haute.png) no-repeat scroll center bottom ;
       	height: 15px;
       	width: 604px;
       }
   
       .box-contents{
       	background: url(images/bordures/Bordure_cote.png);
       	width: 590px;
       	padding-left:15px;
       }
   
       .box-bottom{
       	background: url(images/bordures/Bordure_basse.png);
       	/*height: 30px; */
       	width: 604px;
       	height: 15px;
       }
       ```
   
 *  Thread Starter [sanjeeonp](https://wordpress.org/support/users/sanjeeonp/)
 * (@sanjeeonp)
 * [17 years, 1 month ago](https://wordpress.org/support/topic/putting-a-border-between-sidebars-elements/#post-1039193)
 * Sorry, that’s ok, I managed to repair it
 *  Thread Starter [sanjeeonp](https://wordpress.org/support/users/sanjeeonp/)
 * (@sanjeeonp)
 * [17 years, 1 month ago](https://wordpress.org/support/topic/putting-a-border-between-sidebars-elements/#post-1039201)
 * Hey !
    I am doing well with the theme but have problems with the border. I absolutely
   want to have the rounded border for the sidebar as for the headline or Edito.
   is there other theme that looks like the one I made thanks to Arthemia?
 *  [stvwlf](https://wordpress.org/support/users/stvwlf/)
 * (@stvwlf)
 * [17 years, 1 month ago](https://wordpress.org/support/topic/putting-a-border-between-sidebars-elements/#post-1039203)
 * Hi – looks good
 * I corrected your top rounded corners with this
 *     ```
       .Bordure_Haute_Grande {
       background:transparent url(images/bordures/Bordure_haute.png) no-repeat -2px 0px;
       height:8px;
       width:605px;
       }
       ```
   
 * -2px is the horizontal dimension 0px is the vertical
    you can apply the same 
   principle to your other corners. I like your theme
 * Does this help?
 *  [stvwlf](https://wordpress.org/support/users/stvwlf/)
 * (@stvwlf)
 * [17 years, 1 month ago](https://wordpress.org/support/topic/putting-a-border-between-sidebars-elements/#post-1039204)
 * Oh, I see – you want the rounded corners on the sections that jquery is inserting.
   That can be done with some additional jquery.
 * I will work it out for you later on.
 *  [stvwlf](https://wordpress.org/support/users/stvwlf/)
 * (@stvwlf)
 * [17 years, 1 month ago](https://wordpress.org/support/topic/putting-a-border-between-sidebars-elements/#post-1039205)
 * Hi
 * Here is new jQuery code that will insert new div above and below the div called
   section that jQuery is already inserting around the widgets.
 *     ```
       <script type='text/javascript'>
       jQuery(document).ready(function(){
          jQuery('#sidebar-top h3:not(:last)').each(function(){
              var $this = jQuery(this);
              $this.add($this.next()).wrapAll('<div class="section"></div>');
          });
           jQuery('<div class="Bordure_Haute_Petite"/></div>').insertBefore('div.section');
           jQuery('<div class="Bordure_Basse_Petite"/></div>').insertAfter('div.section');
        });
       </script>
       ```
   
 * I used the class names you used on Edito but change them to anything you want.
   You now have 3 Divs that you can style as you like, just like you did Edito.
 *  Thread Starter [sanjeeonp](https://wordpress.org/support/users/sanjeeonp/)
 * (@sanjeeonp)
 * [17 years, 1 month ago](https://wordpress.org/support/topic/putting-a-border-between-sidebars-elements/#post-1039206)
 * Hi stvwlf,
    Thanks for u’re helping. It’s nearly finished I think. I have just
   some problems: 1)On IE, the margins of the head-bottom border are not correct:
   we can see the head-border away of the next div, and also the div featured(Edito)
   that is under the Headline. 2)I have another question : my goal is to put an 
   element between edito and the next div but the div sidebar only starts when the
   div top finished. The div top contains HEADLINE and featured, so the sidebar 
   starts when headline finishes. The only way to stop that is to code like that?
 *     ```
       <div id="left">
          <div id="headline">
          <div id="bottom">
       </div>
       <div id="right">
          <div id="sidebar">
   
       </div>
       ```
   
 *  3)The last element of the sidebar : Articles récents doesn’t not have the borders.
   Is there jquery instructions to say GotoTheLastElement ?
 *  Thread Starter [sanjeeonp](https://wordpress.org/support/users/sanjeeonp/)
 * (@sanjeeonp)
 * [17 years, 1 month ago](https://wordpress.org/support/topic/putting-a-border-between-sidebars-elements/#post-1039236)
 * Hi again stvwlf,
    Another one question :
 *     ```
       <script type='text/javascript'>
       jQuery(document).ready(function(){
          jQuery('#sidebar-top h3:not(:last)').each(function(){
              var $this = jQuery(this);
              $this.add($this.next()).wrapAll('<div class="section"></div>');
          });
           jQuery('<div class="Bordure_Haute_Petite"></div>').insertBefore('div.section');
           jQuery('<div class="Bordure_Basse_Petite"></div>').insertAfter('div.section');
        });
       </script>
       ```
   
 * When i want to change the h3 in #sidebar-top h3 at h4, it doesn’t work at all…
   
   Do you know why?

Viewing 15 replies - 1 through 15 (of 23 total)

1 [2](https://wordpress.org/support/topic/putting-a-border-between-sidebars-elements/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/putting-a-border-between-sidebars-elements/page/2/?output_format=md)

The topic ‘Putting a border between sidebar’s elements’ is closed to new replies.

## Tags

 * [arthemia](https://wordpress.org/support/topic-tag/arthemia/)
 * [sidebar](https://wordpress.org/support/topic-tag/sidebar/)

 * 23 replies
 * 4 participants
 * Last reply from: [t-p](https://wordpress.org/support/users/t-p/)
 * Last activity: [16 years, 5 months ago](https://wordpress.org/support/topic/putting-a-border-between-sidebars-elements/page/2/#post-1039324)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics