WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
[resolved] Putting Border Around My Text Widget in Right Sidebar (10 posts)

  1. Lisa
    Member
    Posted 4 months ago #

    I would so appreciate your help learning how to add a border around each text widget in my right sidebar. My web site is http://gooseling.com. For example, I have a Cavity Dragons Game Find Out More ad (which is just a teaser with a graphic of the dragon)that I think would look much better if it had a border and some padding / space between the ad and the info above and below it.

    Do I add a code snippet to the Custom CSS section within Appearance > Customize > Custom CSS? I'm not a developer but was guessing I'd put whatever the name of the text box is and then something like
    {
    border: 2px solid #eee;
    padding: 15px;
    }

    Does anyone have advice for how to do the border properly? Thanks so much for your help, I love the theme!

  2. salsaturation
    Member
    Posted 4 months ago #

    I don't see any manual classes on you sidebar, but anyway yes the correct place to put it is on custom css

    eg

    <aside class="social-block widget widget_social">
    REST OF THE HTML AND CONTENT
     </aside>

    You would do this

    .widget_social {
    border: 2px solid #eee;
    padding: 15px;
    }
  3. Lisa
    Member
    Posted 4 months ago #

    Thanks so much for your help, @salsaturation! I confess I don't have programming experience, but have been trying to learn as much as I can about WordPress to enhance my sites. So am not sure what a manual class is, is that a text widget?

    I used a text widget to create my Cavity Dragons ad in my right sidebar, by combining the headline that says "Cavity Dragons Find Our More" with a link to the Cavity Dragons image. Is a text widget a "social-block widget widget_social" and .widget_social? Want to make sure I understand properly. So I put in the Custom CSS box first code this that you wrote:

    <aside class="social-block widget widget_social">
    REST OF THE HTML AND CONTENT
    </aside>

    followed by this -
    .widget_social {
    border: 2px solid #eee;
    padding: 15px;
    }

    Am I understanding correctly? I'm planning to add more of these text widgets highlighting different things to my right sidebar so really appreciate your help so i'll know how to put a border around each text widget with some padding around it. Thanks! Lisa

  4. d4z_c0nf
    Member
    Posted 4 months ago #

    No Lisa you have to add, to your custom css, just this:

    .widget_social {
    border: 2px solid #eee;
    padding: 15px;
    }
  5. Lisa
    Member
    Posted 4 months ago #

    Thanks so much for your help, @d4z_c0nf. That worked perfectly for putting a border & padding around my social links box which is great. What is the code for a text widget? I used a text widget to make my Cavity Dragons ad that is right underneath the social links box - it has the headline Cavity Dragons Game - Find Out More & then the image of a cavity dragon with a gold background.

  6. salsaturation
    Member
    Posted 4 months ago #

    @lisa

    Opps sorry for not making that very clear.

    I recommend you first install a widget class plugin like http://wordpress.org/plugins/widget-css-classes/

    then add classes like 'dragon'

    then in custom css you add:

    .dragon {
    border: 2px solid #eee;
    padding: 15px;
    }

    You can also combine the css like this so that you don't have multiple ones that have the same styling eg lets say you have dragons, sheep, and cows as you classes

    .dragon, .cows, .sheep {
    border: 2px solid #eee;
    padding: 15px;
    }
  7. d4z_c0nf
    Member
    Posted 4 months ago #

    If you want to put that border for all widgets in that area?

    #right.widget-area .widget{
    border: 2px solid #eee;
    padding: 15px;
    }

    and I suggest to add a margin-bottom:5px (for example).

    If you want to border a specific widget you need to know its class, you can do that with mouse right-click -> inspect element (I think you have it), and look for something like <aside class="...">

    In this specific case you can see:
    <aside id="text-6" class="widget widget_text">

    this class is generic so adding these lines to your css:

    #right.widget-area .widget_text{
    border: 2px solid #eee;
    padding: 15px;
    }

    will add that border to all text widgets in that area.
    To border just that one use its id:
    #text-6{
    border: 2px solid #eee;
    padding: 15px;
    }

  8. Lisa
    Member
    Posted 4 months ago #

    Wow, thanks so much to both of you for all your help,@salsaturation and @d4z_c0nf. I want to put a border around each individual text widget. Sounds like you've each given me a great approach to use.

    @salsaturation, I'll look into that widget class plug in to make the process simpler, though it sounds like I can also do it alternatively by finding the name of a specific text widget.

    So appreciate your both sharing your expertise with me, hope you have a great weekend!

  9. ElectricFeet
    Member
    Posted 4 months ago #

    Hi Lisa, You might want to try Firebug to help you solve these sorts of problems. Check out this article on the Customizr site.

  10. Lisa
    Member
    Posted 4 months ago #

    Thanks so much, @ElectricFeet. Great info, I didn't know about Firebug before.

    I'll mark this query as resolved since the 3 of you gave me the perfect info I need to take care of these issues. Thanks all, I learned a lot today!

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.