you're reading:
Divider lines, Html & inline css codes, Line dividers

Divider lines

http://wpbtips.wordpress.com/

The simplest way to create a divider line (in the html post or page editor, or in a text widget) is the hr tag:

<hr />

This tag no longer supports attributes for color, thickness etc., so you cannot change the way the line looks. You can only make it shorter, by turning it into a constricted-width section, for example:

<div class="aligncenter" style="width:125px;"><hr /></div>

For a customizable line in a text widget, you can use a no-content section with specific dimensions and background color:

<div class="aligncenter" style="width:NUMBERpx;height:NUMBERpx;background-color:#HEX;"></div>

(For hex color codes see “Colors” under Links 1 in my sidebar.)

In the post or page editor you need this variant:

<div class="aligncenter" style="width:NUMBERpx;height:NUMBERpx;background-color:#HEX;font-size:0;">-</div>

(The hyphen has been added because completely empty sections are stripped out if you switch the editor to visual; zero font size ensures it’s invisible.)

For a dotted or a dashed line, you can use a similar section with a colored top or bottom border (see relevant post) instead of background color, for example:

<div class="aligncenter" style="width:225px;height:0;border-top:2px dashed #ff7500;font-size:0;">-</div>

Same thing for a (continuous) double line. For a dotted or dashed double line, use colored top and bottom borders, for example:

<div class="aligncenter" style="width:325px;height:3px;border-top:2px dotted #ff7500;border-bottom:2px dotted #ff7500;font-size:0;">-</div>

In all the above cases,
• add margin-top:NUMBERpx;margin-bottom:NUMBERpx; to the array of commands if you need more space above and below the divider (to decrease the space, use negative numbers);
• use a percentage instead of px if you prefer proportional width;
• try align="center" if class="aligncenter" doesn’t work in the theme you’re using;
• remove the commands for alignment and width if you want a full-width divider.

Alternative for a full-width divider line: add a bottom border to the paragraph preceding the point of insertion or a top border to the paragraph that follows it; for example:

<p style="border-bottom:1px solid #ff7500;padding-bottom:12px;">PARAGRAPH TEXT HERE</p>

For fancier dividers you can google for “divider lines” (or “line dividers”) clip art.
Some specimens here: http://www.webweaver.nu/clipart/bar2.shtml.
Some other collections here: http://www.webplaces.com/html/lines.htm

http://wpbtips.wordpress.com/

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

Discussion

36 thoughts on “Divider lines

  1. mmmh, all those delicious codes I love
    awesome post, great stuff, as usually!
    thanks for sharing with us, dear Panos ♥

    Posted by lilmaouz | October 4, 2010, 14:55
  2. Thanks lilmaouz!

    I accept orders too! Any suggestions for things I haven’t covered?

    Posted by Panos | October 4, 2010, 21:11
  3. I’m still in Blogging 101 so this may be too simple a question: when I am in HTML edit, adding code changes. So far, so good.

    If I go back to Visual edit, say to add a photo, the code changes I just made in HTML disappear. It seems that once I use HTML edit, I can not return to Visual. I am trying to see if I need to wait a while, like 24 hours, and then perhaps the HTML changes have “stuck’, but I haven’t determined if this is so.

    Is there a solution?

    Thank you.

    Kathleen

    Posted by Cooking in Mexico | October 4, 2010, 22:07
  4. No, if you’re adding code in the HTML editor, you’re definitely past Blogging 101!

    Waiting has no effect: whatever you add in the HTML editor will stick as soon as you click Update, provided its both valid and allowed. If you add code that’s mistaken, forbidden, or no longer supported, it will be stripped out when you click Update or when you switch to Visual.

    So please let me know what exactly you’re trying to add. If necessary, paste the code here. To make it show up in the comment, you must paste it this way:

    [sourcecode language=”html”]
    CODE HERE
    [/sourcecode]

    Posted by Panos | October 4, 2010, 22:34
  5. When I moved to WordPress from Blog Spot (one of the smarter things I’ve done this year), I lost spacing between some of the paragraphs. I am inserting this code to regain lost space:

    <p align="none"> </p>

    It does the job, until I try to go back to Visual to replace photos.

    Kathleen

    Posted by Cooking in Mexico | October 5, 2010, 00:52
  6. Ah yes, that snippet used to work but it no longer does. As I’m saying in the post, “completely empty sections are stripped out if you switch the editor to visual”. See here for stable solutions:
    http://wpbtips.wordpress.com/2009/06/10/formatting-text-pt-1/

    Posted by Panos | October 5, 2010, 02:00
  7. There are so many quirks involved with the visual editor on wp, so it is probably not something you could cover completely: what happens when a person changes from one editor to the other. But even a partial list might be useful?

    Or is there a more updated editor online. I thought I found one online to do the lame stuff I do at work, but it happened just before I lost my internet so the bookmark was lost…

    Posted by Tess | October 5, 2010, 03:12
  8. Great post Panos. I was just experimenting with inserting lines!

    On the Visual editor thing, I hate the way switching to it and then back to HTML screws up the way my code is formatted (for easier reading). The only time I ever use it anymore is when I change an image setting. If I could make those changes in the HTML editor, I’d never use it at all.

    Posted by IzaakMak | October 5, 2010, 04:07
  9. @Tess: No you can’t cover it completely, especially since WP keeps changing things all the time.

    Partial list? Moi?

    @IM: I never use the visual editor. There’s nothing you can change in the visual that you cannot change in the HTML. In fact, changing image settings in the HTML editor is faster and more versatile: you avoid all the clicking away, and you’ve got more possibilities. What changes would you be doing but cannot?

    Posted by Panos | October 5, 2010, 12:29
  10. Can I also butt in?
    What about… “WordPress Glossary”!

    Posted by Netty Gritty | October 5, 2010, 12:52
  11. @NG: I had thought about that myself. But you realize how huge a project that would be: WP would have to pay me for that!

    Posted by Panos | October 5, 2010, 13:05
  12. Thanks, Panos. Maybe I just need to get used to not using Visual at all and stick to HTML.

    Kathleen

    Posted by Cooking in Mexico | October 5, 2010, 16:13
  13. The usual stuff, like positioning, link url, and opening the link in a new tab or window. I suppose I could add some examples to my Code Snippets file. I have a little of everything else I do in there (quite a bit of which came from your blog).

    Posted by IzaakMak | October 5, 2010, 18:57
  14. Then I guess I will tread “where angels fear to tread”. I have opened a new blog just now just to do wordpress glossary. Something tells me that blog will link to a lot of stuff here!

    As for my payment, reader’s appreciation will more than suffice! And of course, I can put up an Amazon wish list (Paypal doesn’t operate in my country, so no Donation button for me.)!

    Posted by Netty Gritty | October 6, 2010, 00:27
  15. @IM: Yes you could add some examples…
    Link coding here:
    http://wpbtips.wordpress.com/2009/04/01/codes-useful-for-text-widgets/
    What exactly do you mean by “positioning”?

    @NG: I’m definitely no angel, and you’re definitely crazy!

    Posted by Panos | October 6, 2010, 02:01
  16. @Kathleen,
    You write recipes, and if you want fractions, say &frac12; (one-half) (& frac 12 ; without the spaces is the code) then you have to switch to the visual editor to make it appear as a correctly formatted fraction. (or copy the fraction from a draft, other post, or even another website.)
    But in most cases, switching from html to visual causes trouble. Or at least unexpected surprises.
    @Panos,
    Vous? partielle? pas
    Vous avez la passion de suivre vos objectifs-
    vos rêves
    And I venture into the unknown and sometimes look foolish.

    Posted by Tess | October 6, 2010, 06:26
  17. Ooh Thank you ^^ but this already exceeds all my expectations!
    You-Are-Definitely-Too-Cute! Thanks again, have a nice day :D

    Posted by lilmaouz | October 6, 2010, 09:58
  18. Wouaw Tess ! C’est super ! (soon i’ll feel home, here :)) lol

    Posted by lilmaouz | October 6, 2010, 10:04
  19. mon lilmaouz ami!
    touriste français seulement:
    menus, bonne journée, bonne nuit,
    bonjour, au revoir!
    Je veux visiter la France encore une fois.
    Un jour.

    LOL Google translate, mais il semble être ce que je veux dire …

    And I venture into the unknown and sometimes look foolish.

    ≥^!^≤

    <3

    Posted by Tess | October 7, 2010, 03:33
  20. Hello panos
    I had a strange mail (subscriptions)
    with a tittle “test” and no content (page not found)

    title test
    Panos | October 9, 2010 at 01:02 | Categories: [Off topic] | URL: http://wp.me/ptD4e-17Z
    body test dfgdfgdg etc.
    Read more of this post
    Add a comment to this post

    Please delete this comment
    I just wanted to let you know
    Have a cool weekend. Kiss ;)

    Posted by lilmaouz | October 9, 2010, 01:55
  21. Thank you very much for the alert lilmaouz. Nothing to worry: just a little test I had to make (I trashed the post immediately afterwards).

    Posted by Panos | October 9, 2010, 09:18
  22. Aah, okee dokee! Wish You a Beautiful Weekend! Tchuss٩(-̮̮̃•̃)۶

    Posted by lilmaouz | October 9, 2010, 11:53
  23. Same to you!

    Posted by Panos | October 10, 2010, 12:48
  24. You give us the best ideas! Thanks Panos.

    Posted by Susan Wright-Boucher | October 17, 2010, 01:31
  25. Glad if I do! You’re welcome.

    Posted by Panos | October 17, 2010, 19:35
  26. Panos, (Hello again) I can’t find a suitable place to ask so this is a shot in the dark:
    I am going crazy today not being able to log in…’New Log in Page’ it says merrily, but with no way to do it. It used to do it automatically…and today it appears to half let me in just a bit even to manipulate things but doesn’t show me my blog or all the headings for action or anything in the proper way (eg dashboard etc) What IS going on? And there is no log in page (other than that) as such to be found by Googling Login WordPress.Com. It is weird not to be able to find a place to LOG IN! There is a tiny pic. of me in the corner (so it knows!), but still nothing that helps on the drop-down?!?! Am I missing something?
    Would really appreciate an answer. I use Firefox as a browser…is that the problem?
    Thanks! Cheers, all the best, (I follow the tips!) Julia

    Posted by Julia Matcham | September 24, 2011, 17:47
  27. Firefox by itself can’t be the problem, since it’s one of the best browsers and one of the browsers that WP recommends. A (temporary and fixable) problem in your browser could be the problem: in that case you try to clear the browser cache and cookies.

    But I’m rather puzzled by your description (when you have a problem you need to be as precise as possible). Where exactly does it say “New Log in Page”? When you view what in your browser – an empty page, the page you’ve set as your start page, your actual blog page, what? Where is the “tiny pic of you in the corner”? Which corner? While viewing what in your browser? If you’re seeing the grey admin bar at the top (the one with the WP icon at the far left, and your name, gravatar and magnifying glass at the far right), then you are logged in. Hovering over your name and avatar should bring up a dropdown which includes your blog(s), then hovering over the name of the blog should bring a submenu which includes your dashboard. Or, again if you’re seeing the grey admin bar, when you view your actual blog the bar should include another dropdown at the left, plus the Edit link at the end of every page and post.

    But to me the best thing for easy access is to bookmark your dashboard page and add it to the bookmarks bar of your browser. Your dashboard URL is:
    http://juliamatcham.wordpress.com/wp-admin/
    Clicking that bookmark (or pasting this URL into the address bar of your browser and hitting return) will take you to your dashboard if you’re logged in, will take you to the login page first (where you add your username and password) if you’re not.

    Posted by Panos | September 24, 2011, 21:30
  28. Fxxxxetc just lost everything I wrote to you!
    Again…
    I eventually sussed it out. They have changed everything fo the worse as far as I am concerned.
    I WAS logged in but didn’t realise. NOw you have to go through a drop down menu, right, to get to your blog. and when you have got there the easy headings at the top have gone in favour of a drop down menu left. So tedious. All of that used to come on the moment you accessed the log-in page.
    I couldn’t remember where I had left the message so many apologies not getting back to you.
    WHY do they have to alter what was simple and clear into something fiddly? I can’t see any advantage.
    Also as far as I can see, you can’t easily return to overview of BLOG so you can check alterations you have made.
    It used to be written at the top..dead easy..now, it looks as if you have to go BACK to your avatar…but then again I am tired from having to learn new tricks. It takes a long time for me anyway. All the best, and thanks as usual for being there! It is a comfort! Julia

    Posted by Julia Matcham | September 24, 2011, 22:57
  29. So you were logged in, and your problem is the revamped admin bar. WP seems to have a mania for changing things all the time. Like you, I think it’s worse than before; but unlike you, I never used the admin bar anyway (except if I had to report a blog): I have my blogs and their dashboards in the bookmarks bar of my browsers, so I don’t give a damn if and how often WP wants to play with this toy.

    Posted by Panos | September 25, 2011, 02:04
  30. Panos, you will laugh if I tell you I still haven’t really got to grips with bookmarks…I have millions all over the place but how to order them properly (well, better) requires an hour or two that I never find interesting enough to get on with.
    The Log In Page used to take me straight to the blog, and I changed things from that position. Frankly, the ‘admin’ thing isn’t meaningful to me. I just found my way around from the simple dropdowns that used to be on the head bar.! I guess I will have to do some revision.. Anyway at least I have stopped panicking! I’ll see if I can find a better way of access. Thanks.
    Oh yes, and messing with WordPress Help itself I see on the forum there are a lot of other people grousing…and also there is an explanation of why the new way is so useful. Completely incomprehensible to an amateur like me.
    All the best. And thanks again. Julia

    Posted by Julia Matcham | September 25, 2011, 21:45
  31. I didn’t mean adding those bookmarks to the countless ones you probably have in your bookmarks sidebar: I meant adding the really important ones to your bookmarks toolbar (the row just below the address bar). For example, when the browser displays your blog’s dashboard, select “Bookmark this page” from the Bookmarks menu, or press control-D, and a small window will pop up: shorten the name of the bookmark in the Name field, select Bookmarks Toolbar from the Folder pulldown, and you’ll have a special bookmark where it’s most useful.

    Can you link to the “explanation of why the new way is so useful”? There are several threads on this, and I usually avoid looking at threads with too many replies.

    Posted by Panos | September 26, 2011, 04:34
  32. This came from timethief.

    See here > http://en.blog.wordpress.com/2011/09/23/enjoy-a-shiny-new-simplified-admin-bar/
    Also see > http://en.forums.wordpress.com/tags/admin-bar-changes
    The main thread is this one > http://en.forums.wordpress.com/topic/are-there-format-or-administrator-drop-down-changes-taking-place-right-now?replies=66

    NB I DID manage to do as you say…and of course it IS simpler. Just required a bit of my limited intelligence!
    AS USUAL thanks for being there.

    Posted by Julia Matcham | September 26, 2011, 12:57
  33. You’re welcome. Isn’t that sort of bookmark useful? Personally it makes me able to say screw your admin bar.

    The main forum thread on this has 3 pages of posts. Were you referring to any one of these in particular?

    The WP blog announcement says “we wanted to make it easier for your visitors to interact with you via Likes and Follows”: it’s the recent WP trend to cater to the preferences of kids who fool around in Facebook, because, you see, Facebook is the most popular internet page.
    Then it says “Better, right!?” How typical of them… No, not better: a tab in a dropdown isn’t better than a tab that’s right there for you to see and click.

    Posted by Panos | September 26, 2011, 13:18
  34. Yes, completely sensible re- the bookmarks. I will use it in future.

    I have only just read the the comments on the ‘main thread’ (added my own dissaproval) and now just checked the ‘shiny new one’…which is quite funny …as it has reassured me that despite my advanced age I am not a total dodo!

    Mmmmm Facebook an obsession for the young! So thats what it is about! I am on Facebook, (more by accident than design) but haven’t the time or inclination to understand how it works and seldom have any reason to share my life. Does show my website which is useful.
    ‘Likes and Follows’ will continue to remain irrelevant to me. Can I turn it off? But then I guess my ‘Blog’ is not being used in the conventional way. It is just my web-site for showing my work.
    Thanks. Julia

    Posted by Julia Matcham | September 26, 2011, 13:42
  35. That’s what it is about, in the sense that it gives WP more traffic therefore more money.

    I didn’t mean that being on Facebook is bad by itself: my scorn goes to all those who do nothing other than clicking Like and Share buttons all the time for every silly video they see or every silly note their friends post.

    No you cannot turn them off (the Like button below your posts is optional but the one in the admin bar isn’t). We had a huge argument over this when they first introduced it, and they absolutely refused to make it optional. If you have nothing better to do, you can read my relevant post and the relevant forum threads:
    http://wpbtips.wordpress.com/2010/06/06/reblogging-and-countermeasures/
    http://en.forums.wordpress.com/topic/reblogging?replies=142
    http://en.forums.wordpress.com/topic/reblogging-round-2?replies=37

    Posted by Panos | September 26, 2011, 14:21

Trackbacks/Pingbacks

  1. Pingback: WordPress Tips | Earth-Works Tips & Tricks - January 29, 2014

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,259,352 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: