ThemeShaper Forums » Thematic


Adding a border to the sidebar (not to the asides)

(7 posts)
  • Started 4 years ago by bernd
  • Latest reply from Chris
  • This topic is not resolved
  1. bernd

    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 4 years ago #
  2. Hi,

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

    function equalHeight_script() { ?>
        <script type="text/javascript">
        function equalHeight(group) {
            tallest = 0;
            group.each(function() {
                thisHeight = jQuery(this).height();
                if(thisHeight > tallest) {
                    tallest = thisHeight;
        jQuery(document).ready(function() {
    <?php }

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


    Posted 4 years ago #
  3. bernd

    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!


    Posted 4 years ago #
  4. 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).


    Posted 4 years ago #
  5. bernd

    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:

    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.


    Posted 4 years ago #
  6. bernd

    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: (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.


    Posted 4 years ago #
  7. Thanks for that info .. that was exactly the one that I missed.

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


    Posted 4 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.