How do I draw a border around a widget?

  • gizmoody

    (@gizmoody)


    16 years ago

    I have added the KB Advanced RSS widget into my sidebar and would like to draw a border around it. How would I go about doing this? I think I have to add it to my template CSS widget section

    This is the part of the code in my template’s CSS for widgets:

    .widget {
    margin-left:5px;
    text-align:left;
    }
    .leftcolwidget {
    margin-left:5px;
    text-align:left;
    margin-top:7px;
    margin-bottom:7px;
    }
    .widget ul, .leftcolwidget ul {
    list-style: square inside;
    }

    .widget ul li,.leftcolwidget ul li {
    line-height:1.6em;
    border-bottom:1px dotted #ccc;
    }
    .widget li ul li,.leftcolwidget li ul li {
    border:none;
    }
    .widget ul li a,.leftcolwidget ul li a {
    color:#000000;
    display:inline;
    font:1em Tahoma,Arial,”Trebuchet MS”,Verdana;
    }
    .widget ul li a:hover, .leftcolwidget ul li a:hover {
    color:#29568f;
    text-decoration:underline;
    }
    .widget ul ul,.leftcolwidget ul ul{
    margin-left:10px;

    Any guidance would be really appreciated.

    Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • llamaman

    (@llamaman)

    Use the CSS “border” property.

    Thread Starter gizmoody

    (@gizmoody)

    i would only like to have a border around one of the widgets and not all. where would i insert the border code?

    thanks, i am new at this, so i apologize.

    llamaman

    (@llamaman)

    Each widget gets a specific class associated with it when the page is rendered/loaded in the browser. You will have to do a “view source” of the page from within your browser (CTRL+U in Firefox) and figure out what class is defining the specified widget.

    Then, you will add something like this to your CSS:

    .widget widgetTitleHere{
     border: thin dotted #00FF00;
}
    Thread Starter gizmoody

    (@gizmoody)

    i ended up using that actually borders all of my widgets in that sidebar (which is suboptimal but works for now):

    .widget, kbrsswidget {
    margin-top:22px;
    margin-left:0px;
    margin-right:0px;
    padding-left:8px;
    padding-right:8px;
    padding-bottom:8px;
    border: 2px solid #006599;
    background: #f0f0f0;

    without the comma after widget, it doesn’t work and using just .kbrsswidget doesn’t work either.

    thanks again for you input.

    llamaman

    (@llamaman)

    So currently, it is adding a box around all of your widgets, right? That makes sense with your code. What is your url? Perhaps I can help you figure out the exact class to add the CSS to.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How do I draw a border around a widget?’ is closed to new replies.