Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

CSS tweak (moving a search box)

  1. davidderrick
    Member

    Hi. Could I ask for some support in real time (handholding) on a minor tweak I want to do on a Mac? The search box on my blog has a search button under it. The button needs to be moved a pixel or two away from the box -- right now it touches it.

    A small thing, but it's annoying. I asked a while back and was advised to adjust the number of pixels in this code:

    #searchform #searchsubmit {margin-top:5px;}

    ... but I can't find this bit of code in my CSS window. Can anyone help?

    The blog I need help with is davidderrick.wordpress.com.

  2. thesacredpath
    Member

    Add the following to the bottom of your CSS. You can adjust the 5px value, but that looks good to me.

    #sidebar #searchform #s {
margin-bottom: 5px;
}

  3. thesacredpath
    Member

    Also on CSS issues, if you can post them in the CSS forum it makes it easier for me to find and respond to them.

  4. thesacredpath
    Member

    Alternately you can add the margin-bottom declaration to the existing selector in your CSS.

  5. davidderrick
    Member

    Thank you very much ... let me see if I can make sense of this and might come back to you if I can't.

  6. thesacredpath
    Member

    You are welcome.

  7. davidderrick
    Member

    Should I select

    Add my CSS to White as Milk's CSS stylesheet.

    or

    Don't use White as Milk's CSS, and replace everything with my own CSS.

    ?

  8. davidderrick
    Member

    And I assume I should be inserting what you suggest right at the bottom and without replacing anything that was up there already.

  9. thesacredpath
    Member

    It appears like you already have the "Don't use... replace everything..." already selected and have copied and pasted the entire stylesheet into the CSS edit window since I see no evidence in Firebug of the original stylesheet being applied.

    At wordpress.com, it is best to add only the specific selectors and the specific declarations you are adding or changing to the CSS edit window and then use the "add to..." setting otherwise all the relative URLs to images used in the CSS will break and disappear from your site. By using the add to... your CSS changes will load after the original stylesheet and override the like stuff in the original CSS.

  10. davidderrick
    Member

    Yes, "Don't use... replace everything..." is currently selected. Do I leave it that way when making this change?

  11. thesacredpath
    Member

    Have you made any other changes to the CSS?

  12. davidderrick
    Member

    Not in this session. Not sure about ealier, to be honest.

  13. davidderrick
    Member

    All I have done is paste in what you said, at the end of the CSS page.

  14. davidderrick
    Member

    But not saved yet, pending your response.

  15. thesacredpath
    Member

    Well, with white as milk, I don't think there are any images used in it, so leave it as it is just in case you had made other changes earlier. Go ahead and save.

  16. davidderrick
    Member

    Ie with "Don't use... replace everything..." selected? Sorry if it's obvious to you ...!

  17. thesacredpath
    Member

    Yes, leave that selected.

  18. davidderrick
    Member

    It did the trick and it solved the gap problem! Thanks.

  19. davidderrick
    Member

    ... so just a general point to take away from this. Should I leave the same button selected in future whenever I make any cosmetic tweaks?

  20. davidderrick
    Member

    I guess I understand your explanation ... though it's far from intuitively obvious what those 2 choices mean in practice.

  21. thesacredpath
    Member

    For the theme you are using, yes, you can just leave it selected and then make your tweaks. On other themes that have images as part of the theme design, you cannot do this though since the relative URLs to the image end up breaking if you paste the entire stylesheet and then select start from scratch.

    WordPress.com, due to the fact it is a multi-user platform means the CSS editing has to be done differently.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.