Margins for Widget

  • David Hartman

    (@documentaries)


    12 years, 5 months ago

    I’m trying to adjust the margins on a specific widget in the sidebar. Just not getting quite the right call for this specific widget in CSS for it to make the adjustments.

    Here’s what I’m working with..

    li.widget_s2_form_widget-4 {
    margin-right: 0px;
    margin-left: 170px;
    margin-top: -21px;
}

    Have tried many variations on this – its for the ‘Subscribe 2’ plugin..

    anybody know how to fix this?

    thank you!

Viewing 7 replies - 1 through 7 (of 7 total)
  • mattyrob

    (@mattyrob)

    12 years, 5 months ago

    @documentaries,

    I’m guessing a little but I suspect you have the CSS down incorrectly. The “widget_s2_form_widget-4” part is usually only used in the WordPress admin area.

    When I’m trying to tidy up a theme or the presentation of a site I use a web developer tool, like FireBug for FireFox. These tools allow you to easily identify chunks of HTML and CSS and edit them on the fly to visualise the effect of changes before making hard changes to your theme files.

    Thread Starter David Hartman

    (@documentaries)

    12 years, 5 months ago

    Exactly- i got that line from firebug- I need help fixing the CSS.

    Anyone know what’s wrong with this slice of code?

    mattyrob

    (@mattyrob)

    12 years, 5 months ago

    @documentaries,

    Okay, presuming that you got the line from firebug while looking at the widget on the frontend of your site as opposed to the admin area – have a look in the layout section on the right hand window while the widget element is selected in the HTML of the left hand window. Edit the layout settings and then review the CSS under the style area of the right hand window.

    Failing all that how about posting a link to your site so we can see what you are talking about.

    Thread Starter David Hartman

    (@documentaries)

    12 years, 5 months ago

    Thanks Matty.. that is how i came up with that code- the margins reflect how i want them adjusted.

    The call to action line “widget_s2_form_widget-4” is where I need help – I got this from the the html side.

    http://refugemediaproject.org/blog/

    Also, I use a child theme to make modifications in the CSS file there..

    Thanks so much.. David

    mattyrob

    (@mattyrob)

    12 years, 5 months ago

    @david,

    2 things it might be:

    1/ In the Widget admin area open up the Subscribe2 form widget and clear out the DIV filed – it’s currently defined as search for you but it may work better if left blank.

    2/ The ID of the widget on the front end of your site is ‘s2_form_widget-4’ without the widget_ before hand so your CSS is not correct in the ID specified.

    Thread Starter David Hartman

    (@documentaries)

    12 years, 5 months ago

    Ok, the CSS is now identifying the widget with ‘#s2_form_widget-4’ – But what I’m trying to do is decrease the space between the ‘enter email’ box and move the ‘subscribe’ button so sits just to the right of the ‘enter email’ box.

    I was able to do this by fussing with the margins in firebug – but the call to action / id line in the CSS probably needs to be more specific as it now moves everything together, including the widget title.

    I tried adding and using some variations with ‘input#s2email’ – which I think is the right id from what I can make out in firebug..?

    Hmm.. what do you think? Thanks so much @mattyrob!

    P.S. Not sure what you mean about ‘clear out the DIV filed’ – would have to be more specific for me to find it.. Thanks!

    mattyrob

    (@mattyrob)

    12 years, 4 months ago

    @david,

    If you are amending the margins around individual form elements you probably need something like:

    li.s2_form_widget-4 input {
}
Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Margins for Widget’ is closed to new replies.