Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

12

How to customise <br> size in Text Widget?

  1. icanneversayenoughaboutthemen
    Member

    Hi, I have the following markup in my Text Widget:
    --------------------------------------
    <div style="width:200px;height:125px;border:1px dashed #8B7D6B;">
    <div style="padding-top:.5em;"><div align="center"><b>Purchase a copy</b></div></div>

    <div align="center">£25.00 + £3.00 shipping</div>

    <div align="center"><img src="https://www.paypal.com/en_US/i/btn/btn_xpressCheckout.gif" alt="Checkout with PayPal" /></div>
    </div>
    --------------------------------------

    The trouble is the gap between lines is a little too large - I'd prefer about half of that.

    Does anyone know of a way to reduce the size of the
    break?

    Cheers

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

  2. icanneversayenoughaboutthemen
    Member

    Sorry, didn't put my code in quotations. I'm looking to reduce the size of the '
    ''s

  3. icanneversayenoughaboutthemen
    Member

    Hmm, not too on the ball today!

    Ok, last time - reduce the size of the <br />'s

  4. thesacredpath
    Member

    I've cleaned up your code and changed some stuff around. First I used inline CSS in the main parent div to set center alignment for all nested divs. I also changed your bold tags to strong tags since wordpress doctype is XHTML and it likes strong and em tags rather than b and i tags.

    Next I added some top and bottom padding declarations to the div with the price in it and you can adjust those to your liking to get the spacing to the upper and lower divs they way you want it. I used 10px just as placeholders. With divs there is no need to use break tags between them.

    <div style="width:200px;height:125px;border:1px dashed #8B7D6B;text-align:center;">
<div style="padding-top:.5em;"><div><strong>Purchase a copy</strong></div></div>
<div style="padding-top:10px;padding-bottom:10px;">£25.00 + £3.00 shipping</div>
<div><img src="https://www.paypal.com/en_US/i/btn/btn_xpressCheckout.gif" alt="Checkout with PayPal" /></div>
</div>

  5. thesacredpath
    Member

    One other thing. The secure checkout paypal buttons won't work here at wordpress.COM since the code that they use is not permitted here for security reasons. The only paypal button allowed here is the standard HTML donation button.

  6. icanneversayenoughaboutthemen
    Member

    Brilliant! Thanks thesacredpath! I'm going to try out your suggestion above now.

    Hmm, shame about the Paypal - but maybe I can make do with a donation button. Cheers for the heads-up!

  7. thesacredpath
    Member

    You're welcome and you know where we are if you have further questions.

  8. timethief
    Member

    WordPress.COM free hosted blogs cannot be equipped for ecommerce transactions - no retailing or reselling anything you did not create is allowed. You will have to make do with either a PayPal donation button or a contact form or both as you have no other choices on a free blog from and being free hosted by WordPress.COM
    http://en.support.wordpress.com/paypal/
    http://en.support.wordpress.com/contact-form/
    types of blogs allowed and not allowed > http://wordpress.com/types-of-blogs/

  9. icanneversayenoughaboutthemen
    Member

    Yeah.. that worked perfectly - thanks! ^_^

    Just out of interest, what problems might occur if I'm using the old HTML markup and not XHTML?

    Just curious because the old tags seemed to work somewhat - at least as far as I could see at my end.

  10. icanneversayenoughaboutthemen
    Member

    Thanks timethief - how about if I'm the author of the book? Is that allowed?

  11. timethief
    Member

    If you don't want problems with corrupted HTML creating all kinds of formatting woes, falling sidebars, etc. then be sure that you have enabled this > Settings > Writing
    ___ WordPress should correct invalidly nested XHTML automatically
    "Save Changes"

  12. timethief
    Member

    Yes, you are the creator (author). :) Please read here > http://wordpress.com/types-of-blogs/

  13. timethief
    Member

    If you intend to copy and paste from Microsoft WORD (horrors!) then be sure to follow these instructions. > http://en.support.wordpress.com/microsoft-word/#using-word-cleanly

  14. icanneversayenoughaboutthemen
    Member

    Thanks timethief - you're a star!

    I've done the Settings -> Writing trick and I think it's tidied my mess up.

    Glad to see us authors are allowed to hang around here ;-)

  15. timethief
    Member

    You're welcome and best wishes with your blog. :)

  16. icanneversayenoughaboutthemen
    Member

    Oh fiddlesticks. I've just tried looking at my blog on a mac and it doesn't like the font: Script MT Bold.

    I was thinking that I could maybe insert an image instead of the title font but I'm having a little trouble identifying it in the CSS.

    Anyone have an idea what I should be looking for? Or is it best if I start another thread for this? I was also hoping to insert a very small image in the footer instead of the script font there too..

  17. icanneversayenoughaboutthemen
    Member

    Ah! I see you're already ahead of the game thesacredpath!

    http://en.forums.wordpress.com/topic/replace-site-title-with-image?replies=9#post-535844

    Just a quick question - does this replace my title or just overlay it? I mean to say, once I set up my image should I do some tidying up behind the scenes to remove the original title?

  18. icanneversayenoughaboutthemen
    Member

    Argh, even more frustrating I can't for the life of me work out how to reduce the white space between the bottom of the header image (the Script MT Bold title) and the top of the brown navigation bar.

    I'd like to get it so there's an equal white space above and below the title, if that makes sense.

  19. thesacredpath
    Member

    Browsers will typically render non-XHTML, HTML tags correctly, but since wordpress declares XHTML doctype, it will create validation errors. Generally any tag you use that is going to actually cause a problem (or might not be allowed here for security reasons) will either be stripped out by the wordpress software, or automatically changed, or it just won't do anything. It is always a good idea to keep validation errors to a minimum since the search engines get cranky if there are too many and can even quit indexing your site because of them.

    One way to keep that from happening is to go to settings > writing and select "WordPress should correct invalidly nested XHTML automatically" and then save. That should correct most errors in posts and pages and keep them from becoming an issue.

  20. icanneversayenoughaboutthemen
    Member

    Great, thanks thescaredpath - that's really interesting to know about it affecting the search engines results. Hopefully that trick in the settings > writing has tidied up things a bit. Fingers crossed.

  21. thesacredpath
    Member

    You're welcome.

    One thing you can do on existing posts and pages is to open them in the editor, switch to the HTML tab, wait for the page to refresh, then switch back to the visual tab, wait for it to refresh and then click the "update" button. WordPress will then look at and fix any errors in the post or page.

  22. icanneversayenoughaboutthemen
    Member

    Great tip - cheers!

    Actually, you're just the man to ask - up above I saw that you'd provided a solution to inserting an image instead of a font for the title. I've managed to do that successfully. The only thing that's stumping me is how to reduce the white space between the image and the brown navigation bar. I've tried changing as many 'padding' 'margins' as I can find but none seem to do what I want - am I missing something obvious?

  23. thesacredpath
    Member

    This will do it. Add it to your CSS.

    #primary, #secondary {
margin-top: -20px;
}

  24. icanneversayenoughaboutthemen
    Member

    Hmm, it didn't quite work. It moved my widget sidebar up a bit but didn't move the menu bar or the page content at all. I did spend quite a bit of time manually aligning most things earlier so I'm wondering if I have something overriding your command?

  25. icanneversayenoughaboutthemen
    Member

    Sorry, realised I may have not been clear enough earlier - I don't want to move the widget sidebar and page content closer to the menu bar, I want to move the menu bar closer to the title header 'text' which I've actually changed to an image.

  26. thesacredpath
    Member

    Ah, OK. See what this does for you.

    #main {
padding:0;
}

  27. icanneversayenoughaboutthemen
    Member

    Oops! That didn't work either. It took the page content and widget sidebar closer to the menu too. I removed the padding line but now I think I might have taken out something I needed too as I have a large white space *beneath* the menu bar now - that will teach me for not backing up before I make changes!

  28. icanneversayenoughaboutthemen
    Member

    Oh wow - just noticed the revisions versions down the bottom - how useful!

  29. icanneversayenoughaboutthemen
    Member

    I was really hoping that I could just change something in here as I thought this must be to do with the navigation bar:

    #colophon {
    border-top:4px solid #8B7D6B;
    overflow:hidden;
    width:922px;
    padding:10px 0;
    }

    But, alas, I can't fathom it out.

  30. icanneversayenoughaboutthemen
    Member

    Yee gods I've cracked it! I had to add a negative pixel margin-bottom to my header image!

    Wouldn't have got it without your margin-top clue above - so thanks very much ^_^

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags