How to make my CSS sidebar dynamic!!

  • rockers77

    (@rockers77)


    15 years, 8 months ago

    I am trying to figure out how to make my sidebar dynamic so that I can install some widgets. I have found a lot of HTML directions, but my code is in CSS, and my theme doesn’t have a functions.php or a sidebar.php file.

    Here is the sidebar code I can find on the styles.css sheet:

    #sidebar ul {
    list-style-position: outside;
    list-style-type: none;
    margin-left: 0px;
    padding-left: 15px;
    }

    #sidebar li {
    list-style-position: outside;
    list-style-type: none;
    color: #BFB12A;
    }

    #sidebar li li {
    list-style-position: outside;
    color: #BFB12A;
    }

    #sidebar a {
    list-style-position: outside;
    color: #BFB12A;
    text-decoration: none;
    }

    #sidebar a:hover {
    list-style-position: outside;
    color: #BFB12A;
    text-decoration: underline;
    }

    #sidebar h2 {
    font-family: arial, verdana;
    font-size: 12px;
    color: #B02B26;
    text-transform: uppercase;
    margin-bottom: 2px;
    }

    Is there a way I can make my sidebar dynamic using this code?

    PS. My site is rockersnyc.com/blog, and I am trying to add an “authors” widget…

Viewing 3 replies - 1 through 3 (of 3 total)
  • Micah Wood

    (@woodent)

    15 years, 8 months ago

    What theme are you using?

    If you don’t have a functions.php or sidebar.php file, you will have to create them in order to add the code for a dynamic sidebar. You will also have to add <?php get_sidebar(); ?> to your exiting template files where you want the sidebar to appear.

    CSS can only style existing HTML elements… it is not a programming language.

    Thread Starter rockers77

    (@rockers77)

    15 years, 8 months ago

    Thank you for your reply!!

    I have a custom theme that was built by a company that doesn’t exist anymore, so I can’t get them to fix it for me, and I have rudimentary HTML knowledge and obviously no programming experience!

    The HTML files I have in my theme folder are TEMPLATE, HEADER, FOOTER and INDEX, so you are saying that I have to add the code you mentioned to the template file, and create my own functions and sidebar files. Is there somewhere you can direct me to that would help me do those things?

    Thanks!

    Micah Wood

    (@woodent)

    15 years, 8 months ago

    Find where the sidebar is currently displayed in your template.php and/or index.php pages. Find the container for the sidebar (typically a <div id=”sidebar”></div> element), and place this right after the <div id=”sidebar> portion:
    <?php if ( function_exists(‘dynamic_sidebar’) && dynamic_sidebar() ) : else : ?>
    Right before the closing </div> tag, insert this:
    <?php endif; ?>
    This basically allows your normal sidebar to appear, but if you add a widget to your sidebar in WordPress, it will replace your normal sidebar with the contents of your widgetized sidebar.

    Now you just need to create a file called functions.php and drop in this code:

    <?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
  'before_widget' => '<li id="%1$s" class="widget %2$s">',
  'after_widget'  => '</li>',
  'before_title'  => '<h2 class="widgettitle">',
  'after_title'   => '</h2>' );
));
?>

    That should be all there is to it!

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘How to make my CSS sidebar dynamic!!’ is closed to new replies.