WordPress.org

Ready to get started?Download WordPress

Forums

How to style a text box widget in the sidebar (6 posts)

  1. Norgesvej
    Member
    Posted 4 years ago #

    I would like your advice on how to style a text-widget in the sidebar. I would like to add a border around the text box and a background-graphic. My problem is that I cant figure out how to style the entire box. I have tried with the code below - but it doesnt seem very clever.

    How would you add a black CSS-border around the box?
    How would you add an background-graphic to the box-content?

    <div id="sidebar">
    <h2>Tekstboks et nyt forsøg</h2>
    <div class="textwidget">Text inside text-widget</div>
    </div>

    .textwidget {color: red; background: green;}
    #sidebar h2 {color: orange; background: green;}

    Thanks in advance.

  2. cavamondo
    Member
    Posted 4 years ago #

    .textwidget {
    padding: 4px;
    border: 1px solid #000;
    background-image: url(images/picturefile.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    }

  3. Norgesvej
    Member
    Posted 4 years ago #

    Thank you for your answer - cavamondo

    I would like to add border that also goes around the text-box-heading:
    <h2>Tekstboks et nyt forsøg</h2>

    Right now only the content below the heading is given the border.

    In other words I would the border to go around everything below:
    <h2>Tekstboks et nyt forsøg</h2>
    <div class="textwidget">Text inside text-widget</div>

    Can you tell me how to do this?

  4. cavamondo
    Member
    Posted 4 years ago #

    If you wish to draw a border that surrounds both the H2 tag and the Textwidget div in one box, you need to put one div around both of the them ext.


    <div id="sidebar">
    <div id="the_big_box_with_border">
    <h2>Tekstboks et nyt forsøg</h2>
    <div class="textwidget">Text inside text-widget</div>
    </div>
    </div>


    .the_big_box_with_border {
    padding: 4px;
    border: 1px solid #000;
    background-image: url(images/picturefile.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    }

    If you on the other hand just wish to border the H2 and Textwidget in two seperat boxes, you just define that in a class ex:

    The H2 is a header WITHIN the sidebar div id, so a way to define the style is like this:


    .sidebar h2 {
    padding: 4px;
    border: 1px solid #000;
    background-image: url(images/picturefile.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    }

    `

    This way all H2 in the sidebar div will use this style.

  5. rcwatson
    Member
    Posted 3 years ago #

    Sorry to but in with a tangent question, but where is the style "textwidget" defined? I can't seem to find it in any of the twentyten theme's CSS. When I try to modify it locally in my page with a style attribute change at the <div> tag level, nothing happens.

  6. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    if you can't find it (because it is not in the style.css) you can add it new in any position;

    .widget_text { ... }

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.