ThemeShaper Forums

Help In Shaping WordPress Themes

Register or log in:

Username:
Password:

Remember me

ThemeShaper Forums » Thematic

1. 

   bernd
   Member

   Hi there,

   first of all: Thematic is a fantastic theme. Thanks for that.

   Now to my small issue:

   I'm trying to add a border (1px solid #ccc) to the sidebar, but not only to #primary, which looks bad if on the front page I scroll down and the sidebar is out of the picture, hence the border ends where the sidebar ends. I want a fixed static border between #container and the right sidebar. I tried adding a border-right to #container, but then, e.g. on the about me page, where i havent added much text, the border only goes as far as the content does of the page. And that doesn't look nice on the sidebar, since that will go down furher than the content of the page.

   So, how can I add a fixed static border that will always start from the top and go down all the way to the bottom?

   Posted 3 years ago #
2. 

   Chris
   Moderator

   Hi,

   you can try this script in your child theme's functions.php as a start:

   function equalHeight_script() { ?>
       <script type="text/javascript">
       jQuery.noConflict();
       function equalHeight(group) {
           tallest = 0;
           group.each(function() {
               thisHeight = jQuery(this).height();
               if(thisHeight > tallest) {
                   tallest = thisHeight;
               }
           });
           group.height(tallest);
       }
       jQuery(document).ready(function() {
           equalHeight(jQuery(".main-aside"));
           equalHeight(jQuery("#container"));
       });
       </script>
   
   <?php }
   add_action('wp_head','equalHeight_script');

   You still need to play with margin and padding for #container, #primary and #secondary.

   Chris

   Posted 3 years ago #
3. 

   bernd
   Member

   Hey Chris,

   thanks for your answer.

   However, with this script in my childtheme's function.php I do not see any vertical border between #container and .main-side... Have you gotten a chance to test it? To avoid problems with my altered childtheme I have reset all the settings to theme default, but still no go.

   Thanks for looking into this!

   Regards,
   bernd

   Posted 3 years ago #
4. 

   Chris
   Moderator

   Haven't said that the script will take care of the border :)

   The script will ensure that #container and .main-aside have the same height. You still need the CSS part (would do a border-right for #container, otherwise you would need to wrap #primary and #secondary into an additional DIV).

   Chris

   Posted 3 years ago #
5. 

   bernd
   Member

   Thanks for the explanation Chris.

   I've added a border-right to #container, but still... It doesn've have the same height as .main-aside. Here is a screenshot of the issue: http://i50.tinypic.com/333eps7.png

   Btw, I am running this site on http://localhost with XAMPP. Could that be an issue, since I noticed you used jQuery in the script? I've had problems with my local server and the "AJAXed Comments Plugin" as well, which also uses JQuery.

   Regards,
   bernd

   Posted 3 years ago #
6. 

   bernd
   Member

   I've solved my issue now with another approach.

   I simply added a background image to #container, like this:

   background:#ffffff url(images/border.gif) repeat-y scroll right center;

   The image looks like this: http://i48.tinypic.com/2ziq7ib.gif (note the image is on the top left corner).

   Now i have a proper border just the way I wanted. Thanks for the other approach anway. Just couldn't get it to work for some reason.

   Regards,
   Max

   Posted 3 years ago #
7. 

   Chris
   Moderator

   Thanks for that info .. that was exactly the one that I missed.

   Must make a note for myself .. not everything needs to be programmed ;)

   Chris

   Posted 3 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.