you're reading:
Borders, Html & inline css codes

Borders (pt. 1)

http://wpbtips.wordpress.com/

Code model (in the html post or page editor, of course, as well as in text widgets):

<div style="border:1px TYPE #HEX;padding:1.2em;">
CONTENT HERE
</div>
The numbers given above are examples. The border number determines the thickness of the border (1px = thinnest). The padding number determines the amount of space between the border and the content. Note that em is a proportional unit (related to the default font size); for a fixed space use px instead (for normal purposes, around 10).

The “div” tags will do for any section, including a complete post. For a single complete paragraph you can use “p” instead. For one or more words within a paragraph, like this, you need “span” instead of “div” (probably with a very low padding number – example is .2em).

For a border around an image, you insert a similar style definition between the img and the src tags of the image code:

<img style="border:1px TYPE #HEX;" src=[etc. etc.]

Where I’ve written HEX, you write the hex number for the color you want (for hex numbers see the “Color” links in my left sidebar). For basic colors you can write a plain word (“black”, “red”, etc.) instead of a hex number, without the sharp sign.

Where I’ve written TYPE, you specify the type of border you want, using one of the following indications:

solid
double
dashed
dotted
outset
inset
groove
ridge

The first four are self-explanatory; the other four are 3D/shadow effects. Examples:

solid (border:1px)

double (border:3px)

dashed (border:2px)

dotted (border:3px)

outset (border:6px)

inset (border:6px)

groove (border:8px)

ridge (border:8px)

For a border combined with a colored background, you add this to the code (inside the quotation marks):

background-color:#HEX HERE;
To constrain the width of the whole block (like I’ve done above), you add this:

width:NUMBER HEREpx;
To center such a reduced-width block, you need this:

<div align="center">
COMPLETE BORDER CODE HERE
</div>
To constrain the width of the whole block, and have the rest of the content wrap around it, you add this:

width:NUMBER HEREpx;float:left;margin-right:NUMBER HEREpx;

(Float left and margin right, or vv.)

You can also add commands for formatting the text inside the frame – see codes for alignments, for spacings, for text color, size, and font.

Finally, instead of a full frame around a text block, you can have a border along one or more of its sides; instead of border, you use one or more of these: border-left, border-right, border-top, border-bottom.

http://wpbtips.wordpress.com/

Please don’t paste code in comments – see comment guidelines.
About these ads

Discussion

31 thoughts on “Borders (pt. 1)

  1. I bumped onto your blog by browsing the support topics and, boy, am I glad I did. My blog is just over a month old and I’m still very new to all this. I’ll start by experimenting with the borders as you suggest above. Thanks for the good work. Τώρα, μάλλον Έλληνας είσαι οπότε σου λέω ‘συγχαρητήρια’ και στη γλώσσα μας!!

    Maria

    http://mmjaye.wordpress.com

    Posted by mmjaye | October 15, 2009, 18:56
  2. Γειά σου Μαρία (ε, ναι, με αυτό το username τι άλλο θα μπορούσα να είμαι;) and thanks for the compliments! Hope you’ll find a useful thing or two here. (I don’t think borders should be your priority, but even those can help you get acquainted with html in case you aren’t.)

    Posted by Panos | October 16, 2009, 11:34
  3. Thanks.

    (Pt 2 will be rounded borders.)

    Posted by Panos | October 23, 2009, 01:01
  4. I’m a new blogger, and I could use some help. I did fine with these instructions for creating a border until I came to the part that centers the whole reduced-width border. That part begins with a “.” Up until then, the instructions were using a “.” How do I incorporate the “div style” with the “div align”? I want the text inside the border to be centered within the centered border. I don’t know how to write the code to have both the text and the border aligned in the center. Did I miss something?

    Posted by JhanaJian | December 11, 2009, 07:30
  5. Sorry for the confusion. Some of the text in my previous post has disappeared somehow. My email address is [address removed – P.]. Any help would be greatly appreciated.

    Posted by JhanaJian | December 11, 2009, 07:38
  6. @JhanaJian:

    How do I incorporate the “div style” with the “div align”?

    Notice that in the model I’m giving, the div-align tag precedes “COMPLETE_BORDER_CODE_HERE”: so it’s a second div enclosing the other div (that’s called nesting, by the way). For example, the code for a constrained-width frame with text centered inside it would be something like this:

    <div style="text-align:center;border:2px solid #9fb6cd;width:200px;padding:1em;">
    TEXT_HERE
    </div>

    To center the whole thing, you write this:

    <div align="center">
    <div style="text-align:center;border:2px solid #9fb6cd;width:200px;padding:1em;">
    TEXT_HERE
    </div>
    </div>

    Two things to note:

    a) If the text inside the frame is a single word, phrase, or paragraph, you’d better use p instead of div tags:

    <div align="center">
    <p style="[etc.]">
    TEXT_HERE
    </p>
    </div>

    b) In some themes the div-align tag may not work; if you try it and it won’t, let me know which theme you’re using (your blog is set to private, so I can’t see for myself).

    PS I removed your e-mail address from your comment: no need to feed spammers.

    Posted by Panos | December 11, 2009, 11:41
  7. Thank you so much for your help, Panos. You ARE a love!!!

    Posted by JhanaJian | December 11, 2009, 14:23
  8. You’re welcome!

    Posted by Panos | December 12, 2009, 00:33
  9. Where I’ve written HEX, you write the hex number for the color you want (for hex numbers see the “Color” links in my left sidebar). For basic colors you can write a plain word (“black”, “red”, etc.) instead of a hex number, without the sharp sign.

    I might be crazy but it seems that no longer works with the latest Firefox/3.6 You can see the border in Safari using the basic color names, but in FF they don’t appear! No idea about IE.

    While I’m mentioning quirks, I’ve noticed that the html editor no longer recognizes & frac12 ; unless you switch to Visual and back. (I’ve only tried the fractions codes.)

    And the quirk with & quot ; and & #34 ; being automatically changed to curly quotes if you switch to the Visual editor is no longer happening…

    t

    Posted by Tess | March 21, 2010, 19:46
  10. @Tess

    And the quirk with & quot ; and & #34 ; being automatically changed to curly quotes if you switch to the Visual editor is no longer happening…

    What great news that is. Then maybe I’ll try my HTML tables posta gain.

    Posted by timethief | March 22, 2010, 03:04
  11. @tt:
    Yes!! Do it quick!
    The various editor interfaces seem to be re-adjusting a lot lately. The visual and html editors work differently from each other of course, but today is the first time I noticed that you can now type straight quotes again. (and still switch btwn html and visual editors—it has worked if one did not switch to the visual editor until recently as well)

    The text widget code/editor and the excerpt code/editor each have their own quirks, not necessarily the same as the visual or html editors for posts and pages. Especially the text widget editor, which I think has to do with the CSS styling, but really I have no idea. Alignments are different in the widgets.

    And as far as I know, you can still add & nbsp ; (space) as many times as you like to the titles of posts. If you like to make them into 2 line titles…

    Posted by Tess | March 22, 2010, 04:52
  12. Color names: No problems over here.
    Fractions: I’ve never used them, so I don’t know if something has changed. You can use #189 instead of frac12.
    Quotes: don’t know about that either.

    Apparently WP is more sophisticated than my poor naive mind that says switching from visual to html or vv should mean viewing different aspects of the same content, not ‘improving’ content…

    Posted by Panos | March 22, 2010, 13:14
  13. @tt: Re your comment on Dark Wood in the other blog, check what happens with the header image too. And check what happens with a table in a post if you have uploaded a bg pic. Fail, fail!

    Posted by Panos | March 22, 2010, 13:44
  14. Color names: typo missed: Safari doesn’t care if you leave # before color name. I don’t edit in Safari, but husband notice a typo in an old post; fixed it from Safari; later forgot the edit screen wasn’t FireFox. Took me a while to realize what was wrong: I don’t see typos…
    (Sorry about that: Could say I need glasses, but already have them.)

    Most common fractions in recipes are &frac14; ¼ {one-quarter} &frac12; ½ {one-half &frac34; ¾ {three-quarters} It was convenient not to have another number to remember.

    The curly quotes are back again. The visual editor was leaving the straight quotes alone yesterday. First noticed as I made yesterday’s post. To celebrate, I made a whole line of them and showed husband. He said I should do something useful like fold laundry… They are curly in my post again.

    Motion also handles background image in table oddly.

    Posted by Tess | March 22, 2010, 18:32
  15. The curly quotes are back again.

    Aarraggghhh!

    Posted by timethief | March 22, 2010, 20:53
  16. Yes I understand that using frac was more convenient, but at least there’s an alternative. With quotes, no alternative: just found that the other two html codes for a straight quote are also ironed out when you switch to visual (and sorry tt, I hadn’t imagined that when you had that problem).

    As for tables in Dark Wood and Motion: found remedy, will do a post on that.

    Posted by Panos | March 22, 2010, 22:51
  17. Hey there, I am new to wordpress and been getting a bit frustrated not knowing how to change the look of my widgets in the sidebar. I found this post and this blog is awesome! Thanks sooo much :-)

    Posted by Bridget | December 9, 2010, 23:41
  18. @Bridget: You’re welcome!

    Posted by Panos | December 10, 2010, 10:34
  19. i’m currently following your blog since last month, and realized you just change the template.. kinda cool.. thanks for the very useful tips about WP.. keep it up..

    Posted by azhareldin | June 23, 2011, 06:20
  20. You’re welcome! I’ll try to keep it up, although I don’ t have the time to post often…

    Posted by Panos | June 23, 2011, 20:13
  21. Sir panos, very useful borders. I have tried one for the first time today on my post. – http://orangekamote.wordpress.com/. Thanks a lot! ^-^

    Posted by dherbman | August 9, 2011, 12:35
  22. You’re welcome! Yes, useful – can enhance the content nicely.

    Posted by Panos | August 10, 2011, 04:24
  23. Is there any way to align the border left or right too so you can have boxed text and unboxed text side to side?

    Posted by Josh Paunil | November 1, 2011, 00:25
  24. Yes of course, but I can’t give you the right solution without more specifics. You should either temporarily switch your privacy settings to the middle option and show me what you’re trying to do, or tell me which theme you’re using and explain what you’re looking for: you mean two chunks of text exactly side by side (and if so, chunks of roughly the same size or not), or just with the rest of the text wrapping around the bordered text as it would around a left or right aligned image?

    Posted by Panos | November 1, 2011, 01:19
  25. I think I’m doing something wrong when I insert the code. I made an example post on a test blog so you could take a look if you have time. No border goes around the content. http://mrsportsfansblog.wordpress.com/2011/11/09/6963/.

    This is what I entered into the html:
    CONTENT HERE

    Posted by Josh Paunil | November 9, 2011, 23:50
  26. Oops, I meant I just entered exactly what’s in the box of what you posted.

    Posted by Josh Paunil | November 9, 2011, 23:51
  27. Re the oops: You cannot display code in a comment by simply pasting it – see point 4 here:

    http://wpbtips.wordpress.com/comment-guidelines/

    Re the actual question: What my box gives is a code model. Check the paragraphs below the second box: the code cannot have any effect unless you replace TYPE with the actual type of border you want and HEX with the actual hex code for the color you want.

    Posted by Panos | November 10, 2011, 03:46
  28. Thanks! And regarding my earlier question, I mean text wrapped around the border, and the theme I’m using is iNove. I’d like the bordered text aligned right and the wrapped text to the left of it.

    Posted by Josh Paunil | November 10, 2011, 09:58
  29. You need this code:

    <div style="float:right;width:40%;border:1px solid #456789;margin:4px 0 2px 10px;padding:12px;">
    RIGHT ALIGNED BOXED CONTENT HERE
    </div>

    All the numbers are just examples, of course.
    • Change 40% to change the width of the box. (40% means 40% of the total width of your post column. You can use an absolute value instead, for instance 240px, but I think specifying a percentage gives you a clearer idea of how wide the box will be.)
    • Change 1px to change the thickness of the border.
    • Change 456789 to change the color of the border.
    • Change the margin numbers to change the space between the box and the text around it (four numbers = top, right, bottom, left).
    • Change the padding number to change the space between the border and the text inside the box. (You can replace the single value with four values, as with the margin, in case you don’t want the same amount of space around all four sides of the boxed text.)

    Posted by Panos | November 10, 2011, 14:55
  30. PS If you’ve checked the option “Notify me of follow-up comments via email”, make sure you copy the code from here, not from the mail.

    Posted by Panos | November 10, 2011, 14:57

Author

author's avatar panos (justpi)

 Subject Index

Announcement 22/03/2012: After WP's latest move, this blog will no longer offer active support and assistance. The blog will remain online but commenting on older posts has been disabled.
✶ All theme-related posts are updated up to and including theme 189 in this list, but will not continue to be updated.

Stats

  • 2,626,904 views
  • Views per month:
Safari Icon Firefox - Never Internet Explorer
Note: if you see ads on this site, they are placed by WordPress, not me.
wpbtips.wordpress.com
Mostly on themes, formatting, coding, tweaks and workarounds.
Based on or springing from my contributing in the wp.com forum.
Theme-related posts constantly updated
Premium themes and Annotum not included
%d bloggers like this: