Need help? Check out our Support site, then


CSS tweak (moving a search box)

  1. 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. 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. 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. Alternately you can add the margin-bottom declaration to the existing selector in your CSS.

  5. 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. You are welcome.

  7. 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. And I assume I should be inserting what you suggest right at the bottom and without replacing anything that was up there already.

  9. 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. Yes, "Don't use... replace everything..." is currently selected. Do I leave it that way when making this change?

  11. Have you made any other changes to the CSS?

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

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

  14. But not saved yet, pending your response.

  15. 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. Ie with "Don't use... replace everything..." selected? Sorry if it's obvious to you ...!

  17. Yes, leave that selected.

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

  19. ... 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. I guess I understand your explanation ... though it's far from intuitively obvious what those 2 choices mean in practice.

  21. 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.