Widget Margin Issue On Education Theme

Community Forums Forums Design Tips and Tricks Widget Margin Issue On Education Theme

This topic is: not resolved

This topic contains 7 replies, has 4 voices, and was last updated by  fredyyv 1 year, 9 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #3642

    fredyyv
    Participant
    Post count: 7

    I need to know how to modify my css files to make my sidebar widget all have equal margins on each side. details below. thanks.

    Image of sidebar margin issue:

    http://screencast.com/t/lxqzDiWml

    Website where sidebar is location:

    http://localorganicranking.com/occ/

    #3667

    AC
    Blocked
    Post count: 7712

    That’s under your .sidebar in CSS. If you only want to change the left and right – I put this and change the number to whatever you want it to be.

    margin-left: 15px

    margin-right 15px

    Someone else may have a better way to do it.

    #3816

    fredyyv
    Participant
    Post count: 7

    I’m sorry, I meant to say that I wanted the bottom to match the width of the left, top and right right edges. The bottom of the image has a greater width than all the other sides. I want to make all sides equal but not sure with css code to modify.

    #3945

    Holli
    Participant
    Post count: 6

    You’ve got a class applied to the image in the sidebar of alignnone which has a margin of 25px on the bottom. You can add this line of code at the bottom of your CSS to target JUST that image in the sidebar:

    #sidebar-alt img.alignnone {
    margin: 0;
    }

    I tested it in firebug, and that fixed it.

     

    #3956

    emzo
    Participant
    Post count: 5

    I suspect you may have the “Automatically add paragraphs” checkbox selected for these sidebar widgets. Go to your admin and take a look at the text widgets in this sidebar and see if that’s the case.

    On line 1418 in your style.css file, you’ll see a rule for styling <p> tags within the sidebar, which adds a 15px bottom margin.

    .sidebar p {
        font-size: inherit;
        text-shadow: #fff 1px 1px;
        margin-bottom: 15px;
    }
    • This reply was modified 1 year, 9 months ago by  emzo. Reason: Added image of text widget
    • This reply was modified 1 year, 9 months ago by  emzo. Reason: Added image of text widget
    #3959

    emzo
    Participant
    Post count: 5

    If this is not the case, you can add a CSS rule to override the bottom margin of the <p> tag within this particular sidebar. Add the following line towards the end of your style.css

    .widget_black_studio_tinymce p { margin-bottom: 0 }
    #3960

    emzo
    Participant
    Post count: 5

    Sorry, just realised you’re using the Black Studio TinyMCE Widget. You’ll probably want to use this CSS instead:

    .widget_black_studio_tinymce p:last-child { margin-bottom: 0 }

    This will allow you to have multiple paragraphs in your widgets should you need to, and only removes the bottom margin from the very last paragraph in each TinyMCE Widget.

    #4006

    fredyyv
    Participant
    Post count: 7

    that fixed it. thanks. you guys are awesome.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.