you're reading:
Banner, Borders, Contact form, E-mail link, Html & inline css codes, Images, Line breaks, Links, Lists, Scrollbox, Sidebar, Text widgets, Widgets

Codes useful for text widgets

http://wpbtips.wordpress.com/

Line breaks and blank lines

Plain text typed or pasted in a text widget flows in one continuous paragraph. For line breaks you need this:

<br />

For blank lines you can use this (you can adjust it by changing the number):

<div style="height:14px;"></div>

This code can also be used alone in a nameless text widget, as a spacer (to create more distance between other widgets).

Space around text

In some themes the text shows up too close to the widget borders; you create some space around it this way (you can change the number):

<div style="padding:8px;">
TEXT HERE
</div>

Text links

The plain code for a link to any webpage is this:

<a href="URL HERE">TEXT HERE</a>

In most cases it’s better to use this:

<a href="URL HERE" target="_blank">TEXT HERE</a>

This way the link opens in a new browser window or tab, so that visitors don’t really leave your blog when clicking on a link.

E-mail link:

<a href="mailto:YOUR EMAIL ADDRESS HERE">TEXT HERE</a>

To avoid spam, it’s usually wiser not to disclose your e-mail address. You can use the WP contact form instead (but in a page, not a text widget) – see here. Or you can display your e-mail, but in a way that will elude spam robots – see here plus here.

Lists

The content of several widgets (e.g. Categories, Links or Recent Posts) is unordered lists. The design of each theme presents unordered lists in its own way. If you want a list of items in a text widget to show up the same way, you use the code for unordered lists:

<ul>
<li>ITEM ONE HERE</li>
<li>ITEM TWO HERE</li>
[etc.]
</ul>

The code for nested lists (with indented sub-items) is like that:

<ul>

<li>ITEM ONE HERE
<ul>
<li>SUB1 HERE</li>
<li>SUB2 HERE</li>
<li>SUB3 HERE</li>
</ul>
</li>

<li>ITEM TWO HERE
<ul>
<li>SUB4 HERE</li>
<li>SUB5 HERE</li>
<li>SUB6 HERE</li>
</ul>
</li>

</ul>

This is an example with only two main items and three sub-items to each, but it’s enough for demonstrating the structure of the code.

Items and sub-items can be plain words or phrases, or any kind of allowed html code (e.g. links and/or style formatting).

Text widgets with unordered lists can also be used instead of some of the other widgets (such as the links widget or the categories widget). This can be useful if you don’t like the default appearance of those widgets and want to change it using formatting for style, or if you want your links or your categories in a non-alphabetical order; or if you want to include images. The drawback, of course, is that each time you add a new link or category you’ll have to update the text widget manually.

Scrollbox

If you want to limit the length a text widget occupies in the sidebar, you can have its content in a (vertical) scroll box:

<div style="height:150px;white-space:pre-wrap;overflow:auto;padding:8px;">
CONTENT HERE
</div>

The height number is just a suggestion – you can change it (but there’s a downward limit: below 45px there’s no room for the scrollbar). “Padding” is the space between borders and text – you can change that too. If you write an unordered list in a scrollbox, omit the padding altogether: the design of the theme will take care of that.

Or you may need a horizontal scrollbox:

<div style="white-space:pre;overflow:auto;padding:8px;">
CONTENT HERE
</div>

In some themes it will look better if you create a visible border around the box; in that case add this right after the opening quotation mark:

border:solid 1px #999;

Images

The code for a plain image is this:

<img src="IMAGE URL HERE" alt="DESCRIPTIVE TEXT HERE" />

For an image that links to a webpage:

<a href="WEBPAGE URL HERE" target="_blank"><img src="IMAGE URL HERE" alt="DESCRIPTIVE TEXT HERE" /></a>

Of course the image has to be narrow enough to fit in the sidebar (in most themes, sidebars are around 150 to 200 pixels wide – see my post on sidebar width). If you’ve got a wider image, you can downsize it to fit – example:

<img style="width:150px;" src="IMAGE URL HERE" alt="DESCRIPTIVE TEXT HERE" />

But it’s better to use properly sized images: gives you faster loading, better quality, and no issues with Internet Explorer.

Also, it’s better to use images uploaded to your own blog. If you use the URL of an image hosted in another site, you get the delay of that site loading as well, plus you run the risk of losing the image if it gets relocated or removed. So, to get the right URL for an image, you upload it to your blog via Media > Add New, and then you click Edit and copy the File URL from the Save module.

In some browsers you get a (blue) border around images. If you don’t want that, add this after “img” (with a space inbetween):

style="border:none;"

If you want a simple thin border around the image, you can add this after “img” (with a space before and a spacer after):

style="border:1px solid #HEX NUMBER HERE;"

Various sorts of borders are possible – see this post.

Update 29/09/09: Putting an image in your sidebar or bottombar has now become easier, thanks to the Image widget launched today. Minor drawbacks: a) doesn’t work correctly in all themes; b) a linking image can’t be made to open in a new browser window/tab.
Image plus text

If you want a left-aligned image, with text wrapping around it, you need to add this after “img” (with a space before and a space after):

class="alignleft" style="margin-right: 8px;"

In some themes this may not work. For all kinds of combinations of image plus text, a more surefire way is coding for tables. (But that’s for a future post…)

If you’re having trouble placing text below an image, an easy alternative is using a second, untitled, text widget. (Note: when you add new widgets, you can rearrange them by dragging them into new positions.)

Image plus code for it

To display the code for an image, so that others can copy it (e.g. the code for a banner linking to your blog), you need to convert its special symbols into the html for them; you can do that here. Use it in a scrollbox.

Text formatting

See here and here.

http://wpbtips.wordpress.com/

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

Discussion

120 thoughts on “Codes useful for text widgets

  1. Pan! I nearly fell off my chair when I saw in the forums that your username was a link!

    Looking forward to seeing more of your “slight of hand” tips. :)

    Posted by Jennifer | April 2, 2009, 18:51
  2. Ooooh! Welcome!

    I thought it might be a little useful to gather some things here, especially since the forum search doesn’t work so well.

    (And maybe sometime I’ll make you fall off the floor by giving you the link to my regular blog!)

    Posted by Panos | April 2, 2009, 19:57
  3. Panos,
    Question about something I learned the other day:

    http://en.forums.wordpress.com/topic/adding-image-links-to-my-blog?replies=6#post-321875

    When I’m filling in the descriptive info on images, my HTML is too basic so I use the Visual editor, mountain icon, so I’d never noticed that WordPress automatically adds
    alt=””

    No pun intended on “basic,” but I remember BASIC back when computers were huge!

    Posted by Tess | April 2, 2009, 23:51
  4. Is this a question or a suggestion??? You know thesacredpath knows almost everything – if he says it, 99 times out of 100 it’s so. Alt means alternative (i.e. text) description for an image, and yes officially it’s required (so WP always adds it). It displays before the image is loaded or if it isn’t loaded, and it’s good for search engines, as you mention in the forum (also for people with disabilities).

    But that doesn’t mean image code without the alt attribute won’t work. I didn’t include it in this post because the post is about text widgets only; I may be wrong, but I think it’s insignificant in this case. For instance, the only image in my sidebars here is the greenish background: there’s no point having it indexed or “described”. I guess I’ll have to cover that in a post about images in posts, and then maybe link to that in this post. Thanks!

    Posted by Panos | April 3, 2009, 06:51
  5. Sorry! Not a question then. Just an interesting factoid. insignificant, as you say…

    Posted by Tess | April 3, 2009, 14:41
  6. Love the scroll box. Hours of fun playing with it. (in a post: looks odd in Safari, though)

    Posted by Tess | April 5, 2009, 19:17
  7. [Reply re Safari/code problem here.]

    Posted by Panos | April 6, 2009, 15:44
  8. Is it bad manners to add [so many] pings to this post? I’m missing something to turn them off just for your blog, but it looks as if I’m spamming you! As you know, I often miss the obvious. Feel free to delete them.

    Posted by Tess | April 13, 2009, 19:26
  9. - I never delete comments (except real spam).
    – I don’t know if you can turn pings off, or if it’s bad manners; I suppose not.
    – I know you’re not spammimg me, so I don’t care what it looks like. (Well actually it looks like you’ve developed an obsession with scrollboxes, but that’s your problem, not mine! If you want me to delete the pings, then I will.)

    Posted by Panos | April 14, 2009, 17:09
  10. hey, this page is great. i tryed to use the scrollbox for a common creative liecance but it is just shown half now. it is impossiable to scroll it. what can i do.
    thanks, it is really wonderful place here

    Posted by Utopian Fragments | May 7, 2009, 23:13
  11. You’re welcome!

    Your scrollbox doesn’t work because you’ve set an impossibly small height number: not enough room for the arrows and the blue guide.

    But why use a scrollbox in the first place? The CC licence should be shown in full: no scrollbox, no nothing.

    Posted by Panos | May 7, 2009, 23:52
  12. panos, i guess there is no real reason but for trying it out…
    thanks

    Posted by Utopian Fragments | May 8, 2009, 10:36
  13. You’re welcome. By the way, now your image doesn’t show up because you’re missing the final “g” for “jpg”!

    Posted by Panos | May 8, 2009, 13:57
  14. yes. now i have it. thanks for looking at it again

    Posted by Utopian Fragments | May 8, 2009, 15:39
  15. Wow, i LOVE you!! LOL Just what i needed, all the code for text widgets on one page, and in simple terms! Thankyou so much for this!!

    Posted by Shannon | May 30, 2009, 02:30
  16. You’re most welcome! I’ve given many related replies in the forum, and I thought precisely that it would be good to have all this “on one page”.

    But this is not “all the code for text widgets”, mind you! Soon I’m going to do a series of posts on text formatting – maybe you’ll find some other things of use there as well.

    Posted by Panos | May 30, 2009, 03:32
  17. This is a great reference, Panos! Thank you so much, both for writing it and posting the link to my Forums thread. I’m going to have to see if this works for the Mistylook theme now.

    Posted by hope101 | July 30, 2009, 15:52
  18. @hope101: Thank you. This whole blog is obviously closely connected to the Forum.

    You’re talking about a blogroll in a scrollbox, right? There’s no reason why it wouldn’t work in Mistylook. The only thing that might not be ok is the line-spacing. If it’s too wide, add this to the scrollbox code after the opening quote:

    line-height:1em;

    Posted by Panos | July 31, 2009, 10:56
  19. Actually I was hoping for something like what they have in the left sidebar of this Blogger site:

    http://secretoctober.blogspot.com/

    It’s quite small and allows equal exposure of all the sites, which the scrollbar doesn’t quite accompish.

    Posted by hope101 | July 31, 2009, 16:32
  20. Oh, sorry about getting the terminology wrong. And I suspected your answer would be what it is. Thanks anyway for your time!

    Posted by hope101 | July 31, 2009, 19:59
  21. @hope101: Ah that’s not a scrollbox, it’s a marquee. Unfortunately that effect requires types of code not allowed in wp.com, for security reasons.

    Posted by Panos | July 31, 2009, 19:11
  22. You’re welcome; sorry I can’t help more.

    Posted by Panos | August 1, 2009, 09:44
  23. a good one, will really help to extend widget function of wordpress.com along with keeping them compact.

    Posted by phoxis | December 5, 2009, 12:05
  24. @phoxis: Thanks (and welcome here)!

    Posted by Panos | December 5, 2009, 18:04
  25. I’m using the Handyman theme by wpdesigner. Cannot seem to get text to wrap around images in sidebar widgets using class=”alignleft” style=”margin-right: 8px;” code or anything similar. You noted that it won’t work for all themes. Any direction on other ways to do it? Thank you!!

    Posted by Dorothy | February 5, 2010, 22:44
  26. @Dorothy: I can’t use the theme you’re using, so I’m shooting in the dark here. Anyway, here are some alternatives:

    1)

    img align=”left” (instead of img class=”alignleft” )

    2)

    <div align="left">
    IMAGE CODE HERE
    </div>
    TEXT HERE

    3)

    <table border="0"><tr valign="top"><td>
    IMAGE CODE HERE
    </td><td>
    TEXT HERE
    </td></tr></table>

    4)

    <table border="0" align="left"><tr><td>
    IMAGE CODE HERE
    </td></tr></table>
    TEXT HERE

    5)

    <div style="float:left;width:100px;">
    IMAGE CODE HERE
    </div>
    <div style="float:right;width:190px;">
    TEXT HERE
    </div>

    Some of these may not be ok by themselves if you add a second image-text pair; see which one works and we’ll be back for improvements, if necessary, once I see the result.

    Posted by Panos | February 5, 2010, 23:58
  27. Hi Panos,
    #3 worked like a charm! Thank you so much! Image successfully aligned left with text wrap! Dorothy

    #3:

    IMAGE CODE HERE

    TEXT HERE

    Posted by Dorothy | February 6, 2010, 02:27
  28. You’re welcome! But now you’ve got no space between image and text. I neglected to clarify that “IMAGE CODE” was meant with the margin you had (correctly) introduced. You can either add that back, or you can change the opening td tag for the image to this:

    td style=”padding-right:8px;”

    (Or change the opening td tag for the text the same way, with padding-left, of course.)

    For space below the first image-text pair, the ‘proper’ way would be adding padding-bottom to the beginning table tag (instead of the empty paragraph you’ve put between the two pairs, which is non-adjustable as well as unstable.)

    PS1 Number 5 should work too. By the way, solutions 3 and 5 aren’t strictly text-wrap: they’re just two-column content.

    PS2 Html tags pasted in a comment won’t show up: if they are allowed in comments they’ll produce the intended result, otherwise they’ll be stripped out (as in your reply above). To display the codes I suggested, I had to do what I’m describing near the end of the post.

    Posted by Panos | February 6, 2010, 06:57
  29. PS 3! The second text chunk can be made to align with the first, if you prefer, but I think the way it shows up now is better.

    Posted by Panos | February 6, 2010, 07:05
  30. Do you have any code for “Add to Favorites”? I have had trouble with this, as most people supply java script code.

    Posted by carlaspacher | April 14, 2010, 03:22
  31. @Carla: I’m afraid I don’t understand the question – please give me a concrete example.

    Posted by Panos | April 14, 2010, 05:03
  32. I wish to add a button where people can add my blog to their favorites in IE or Firefox.

    Posted by carlaspacher | April 14, 2010, 07:03
  33. That’s not concrete enough! (You said “most people supply java script code”, so I expected a link to one of those people!)

    If you mean I click the button and your blog is added to my browser’s favorites, I don’t see what use it would be: the browser can do that without any extra buttons.

    But maybe you mean something else – sorry, I guess I’m out of depth here… You can try showing me, or you can try asking timethief:

    http://onecoolsitebloggingtips.com/

    Whatever this thing you’re looking for is, she probably knows.

    Posted by Panos | April 14, 2010, 07:33
  34. Hi, I’m trying to use the method of adding a nameless text widget to add some white space after my first text box in the left sidebar.

    I’ve tried the:

    and there is no effect. Is there something I’m missing?

    Thanks,
    Cheryl
    http://www.cherylmarieknits.wordpress.com

    Posted by cherylmarieknits | May 13, 2010, 15:04
  35. Oops,
    I meant to include the code that I put into the nameless text widget is:

    “”

    to try to create whitespace between my text widgets in my left sidebar. When I try this I get no change at all.

    Posted by cherylmarieknits | May 13, 2010, 15:06
  36. Hi. You can’t just paste html in a comment: it will either produce the result it’s meant to or it will be stripped out – mostly the latter.

    Since the box is a text widget, you don’t need an extra text widget to add space below it. Change the beginning of the code from this:
    <table align [etc.]
    to this:
    <table style="margin-bottom:16px;" align [etc.]

    Posted by Panos | May 13, 2010, 15:39
  37. Works perfect – so simple. Thank you!

    Posted by Cheryl | May 13, 2010, 16:59
  38. Panos – can you please do me a favor by telling me how can i moderate the comments. I’m new here. I’m not able to find out through the help forum also how can i moderate my comments before it being shown in my blog. Please do reply. Thank you.

    Posted by iWrite | May 29, 2010, 20:49
  39. @iWrite: You go to Settings > Discussion > “Before a comment appears”, tick the option “An administrator must always approve the comment”, click Save Changes.

    Posted by Panos | May 29, 2010, 22:19
  40. Hey Panos!
    Thank you so much for the QUICK response. Appreciate it. Thank you so much (:

    Posted by iwrite | May 30, 2010, 12:54
  41. @iWrite: You’re welcome!

    (Here it’s just me; in the wp.com forum there are several experienced volunteers: if you had asked there, you would have gotten an even quicker response!)

    Posted by Panos | May 30, 2010, 15:34
  42. @Panos – Hi again! I still have not been able to resolve my issue on my WordPress.com blog for adding a button, “Add This Site to Your Favorites”. I have been successfully able to add the code below to my WordPress.org blog, which I will be soon switching to anyway, but not to my WordPress.com blog.

    Untitled

    Posted by Gluten Free Carla | August 8, 2010, 19:19
  43. Okay, so the code did not go through. I believe this is the link to where I originally found the code: http://www.htmlgoodies.com/beyond/dhtml/article.php/3470451/So-You-Want-to-Add-Your-Page-to-Favorites-Huh.htm

    Posted by Gluten Free Carla | August 8, 2010, 19:21
  44. Hi, but… sorry, that’s forms and javascript: not allowed in wp.com blogs, for security reasons.

    Posted by Panos | August 9, 2010, 02:14
  45. Gotcha. Thanks for the timely reply!

    Posted by Gluten Free Carla | August 9, 2010, 02:22
  46. You’re welcome – sorry for the bad news!

    Posted by Panos | August 9, 2010, 02:44
  47. Great overview of the html basics for text widgets, thanks! The biggest problem I’ve had is with formatting, as my designer used an ungodly amount of style sheets. Trying to go in and find all of the styles that are being used in my widget has been a challenge, but I’m making progress. Thanks again for the tips.

    [Username link removed – P.]

    Posted by .net Training | November 26, 2010, 06:21
  48. Hello Panos, I’ve just been reading loads on this great blog of yours, followed a link from Timethief to you. Up to now I have been (don’t laugh) writing the text and the links for my text widgets in a draft post and then cutting and pasting the whole lot into the widget, and I was very pleased with myself for working that out. But I didn’t know how to do the line breaks and most of the other things you show above. I think when I have a bit of time I will have to come and study here and do it properly… Thank you and see you soon again.

    Posted by Joanna @ Zeb Bakes | December 14, 2010, 21:16
  49. @Joanna: You’re welcome, and thanks!

    And no I wouldn’t laugh: preparing the widget content in a draft post is a good workaround for those who don’t know any HTML, and it’s a suggestion often given in the forum by TT and other experienced volunteers. Its only problem is that main content and sidebar content aren’t always designed the same, so (depending on the theme) you may get some unpleasant surprises re image positioning, text padding etc. In my opinion, sooner or later a blogger must learn some HTML.

    Posted by Panos | December 15, 2010, 01:57
  50. Besides the break code this also works for creating paragraphs when the break codes do not work:
     

    Posted by Carla Spacher | December 15, 2010, 21:34
  51. Darn! The code did not show. I will try to describe it instead:
    open tag – p – closed tag; ampersand sign – nbsp – semi-colon – open tag – forward slash – p – closed tag.

    Posted by Carla Spacher | December 15, 2010, 21:38
  52. I used the code above,but in a wordpress.org blog. I forgot this was all about WordPress.com. Not sure if it will work there or not.

    Posted by Carla Spacher | December 15, 2010, 21:40
  53. @Carla: That’s the HTML entity for a non breaking space, enclosed in p tags. Creates a blank line. Yes, it’s ok in text widgets (but not in posts).

    Posted by Panos | December 16, 2010, 03:59
  54. Hi,
    When I insert the following code into my text widget it the link says “http://www.thebalkanhadley.com/http://www.idine.com”

    What am I missing?

    [Username link and code relic removed – P.]

    Posted by Veronika Freeman, dotcalm | February 1, 2011, 19:28
  55. Try again after you check point 4 here:

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

    Posted by Panos | February 1, 2011, 20:42
  56. Sorry – novice in some areas!

    http://textsnip.com/6ac9ba

    I’m just trying to make that link to to the website. . From what I”m reading the widget might be messing with the code?

    Posted by Veronika Freeman, dotcalm | February 1, 2011, 21:13
  57. The widget doesn’t mess with the code, it strips it out if it’s wrong: in the code you’re giving me now, you’ve got oblique instead of straight quotes, plus an extra semicolon. You can see/copy the right code model under “Text links” in my post.

    Posted by Panos | February 1, 2011, 21:31
  58. Oh gosh, I figured I needed to pull out the ; but that’s the first time I’ve gotten oblique quotes in my code! I’ll be sure to look at them harder next time – thanks so much for your quick assistance!

    Posted by Veronika Freeman, dotcalm | February 1, 2011, 22:00
  59. You’re welcome. (Unfortunately, in HTML every tiny detail matters…)

    Posted by Panos | February 1, 2011, 23:24
  60. I’m accustomed to working in Dreamweaver – WordPress has more coding than I’m accustomed to but am enjoying learning when I can get answers in a timely fashion… sometimes it takes me hours to figure out some little thing – but I’ve learned more in the past three days than I thought I could!

    Posted by Veronika Freeman, dotcalm | February 2, 2011, 02:37
  61. I have one line of code that I want to put on its own page. It is an iFrame.

    In fact, here’s the code, which puts the contents of another web page in a box on the page.

    When I enter it into the text box, it gets stripped out. So I see that I need a “widget.” I find a page in the WP help that says this:

    IFrame Widget

    IFrame widget can display any external HTML page inside an HTML IFrame component.

    1. Download and unzip iframe-widget.zip
    2. Upload the folder containing iframe-widget.php to the /wp-content/plugins/ directory
    3. Activate the plugin through the ‘Plugins’ menu in WordPress
    4. To add an IFrame on a sidebar, browse to Design > Widgets and add the ‘IFrame Widget” to desired sidebar. Configure the IFrame Title, Dimensions and URL and save your changes.
    5. To add IFrames to any post or page just add the markup [dciframe]url,width,height[/dciframe], for instance [dciframe]http://www.google.com,400,250[/dciframe].

    I got stuck at #2 – “upload the folder . . . to the /wp/pluginss directory”

    I don’t see any upload options other than adding media. But .php is not an accepted media type.

    Also per #3, I do NOT see a “Plugins” menu anywhere.

    Thanks in advance for helping a frustrated newbie.

    Dan

    Posted by danpatlee | February 4, 2011, 23:39
  62. Re displaying code, see point 4 here:

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

    Re the rest, check the link in point 1. The instructions you found are for wp.org blogs; in wp.com blogs you cannot use plugins and you cannot add iframe code.

    For possible alternatives or workarounds, I need to know what you want to insert.

    Posted by Panos | February 5, 2011, 10:40
  63. Wow, shows what a noob I am. I didn’t even know there was .com and .org. My friend has this thing on his WP page and I thought, well, if he can do it, surely I can.

    I that even my iFrame text got stripped out of my comment.

    Thanks for the info and the offer to help. I will read up a little more and see what my options are. I may just settle for a link to a new window . . .

    Posted by danpatlee | February 5, 2011, 13:38
  64. You’re welcome. Yours is a common problem, especially since googling for something re WP will often not make it clear if the info you see is about com or org or both.

    As I said, if you tell me what you wanted to insert, I can tell you if it’s possible in wp.com blogs or not.

    Posted by Panos | February 5, 2011, 15:48
  65. hi panos , i’m back :) is it possible to alter this code please if its to much work it will not matter

    [ code relics and links removed – P. ]

    Posted by harrythehandyman | February 6, 2011, 22:49
  66. this is as see it before copy

    [ code relics and links removed – P. ]

    Posted by harrythehandyman | February 6, 2011, 22:58
  67. Hi,
    Try again after checking point 4 here:

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

    Or give me the URL of the page you got that from.

    Posted by Panos | February 7, 2011, 08:39
  68. hi panos , sorry about the codes etc i did not know , i cannot find that site so i have another one. its the middle weather chart for belfast and the clock as well . it says they are for wordpress but they wont work. i removed the start here and finish here bits and removed the do not display bit , but they still wont show , harry

    http://www.weatherq.org/Belfast

    Posted by harrythehandyman | February 7, 2011, 22:18
  69. Yes, they say WordPress but they mean wp.org, not wp.com; the code they give will only work in self-hosted blogs.

    The previous one you tried was this:

    http://www.metoffice.gov.uk/public/pws/components/

    Won’t do either, because the code they give is javascript.

    For alternatives check these two:

    http://wpbtips.wordpress.com/2010/09/16/widgets-for-wpcom-5-weather/3/

    http://wpbtips.wordpress.com/2010/09/16/widgets-for-wpcom-5-weather/2/

    Clocks here:

    http://wpbtips.wordpress.com/2010/08/06/widgets-for-wpcom-2-digital-clocks/

    http://wpbtips.wordpress.com/2010/08/16/widgets-for-wpcom-3-analog-clocks/

    Posted by Panos | February 7, 2011, 22:42
  70. thanks panos i’ll have a look , harry

    Posted by harrythehandyman | February 7, 2011, 22:48
  71. panos i have 1 of the clocks i made it smaller and was left with the white bit round 2 sides , so i took out
    wmode=”transparent” and it took away most of the white , harry

    Posted by harrythehandyman | February 7, 2011, 23:49
  72. I’m not seeing any white. Are you using Explorer? As you’ve probably seen, my widget posts include a disclaimer about IE, because IE continues to ignore various web standards.

    Two suggestions:
    a) Respect the original ratio: if you made the width 150, the height should be 72.
    b) Try replacing wmode=”transparent” with this:
    wmode=”opaque” bgcolor=”#ddd”
    (That’s roughly the color of your sidebar background.)
    I can’t test these suggestions because Im a Mac user, and fortunately we don’t have IE, so please let me know what happens if you try them.

    Posted by Panos | February 8, 2011, 02:42
  73. thanks panos , but it did not work the colour was light blue and the height was about 2″ with the clock in the middle

    (a) changed 150×72

    Posted by harrythehandyman | February 8, 2011, 21:30
  74. Hello Panos
    Thanks for all the info on widgets – I’ve learnt alot. I am a complete beginner with html code! I have managed to get a Slide slideshow in a text widget in the sidebar of my wordpress.com post. One problem – there is a long blank white space under the slide show – which pushes down the text widget below it. Have you any idea how I could get rid of this space? (P.S. I resized the slideshow to fit the sidebar widget area – I tested the slideshow first by posting the given shortcode for WP as a post – this worked fine – no white space – but not in the text widget. Hence I got to your page after this and began experimenting with html)

    Posted by annmariacoughlan | February 9, 2011, 03:02
  75. @Harry: Thanks for briefing. Was I right that you’re using IE?

    @AMC: Hi, but I cannot help if I cannot see the problem.

    Posted by Panos | February 9, 2011, 16:06
  76. Apologies Panos – I set site to private for now because of mess! Just one other piece of info based on your previous posts: when I resized I kept the original ratio. Here goes – hope you can see it now. A

    Posted by annmariacoughlan | February 9, 2011, 16:19
  77. hi panos , i tried to put your bit of code before and after the size , after makes you see blue about 2″ high as my post above , before the size you can only see a little bit of blue , but the white is always there.

    bad , bad , IE :) harry

    Posted by harrythehandyman | February 9, 2011, 17:52
  78. @AMC: Yes I can see it. But I can’t reproduce the issue in my test blog. So please copy the exact complete content of your text widget and paste it using one of the ways suggested in point 4 here:

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

    (Check point 2 too!)

    @Harry: Before or after the size shouldn’t make any difference as long as it’s inside the brackets (and #ddd coming out as light blue is funny, because #ddd is pure neutral grey). Sorry, there’s nothing I can do: IE is bad, and anyway I can’t use it so I can’t work anything out. Maybe try a different clock?

    Posted by Panos | February 9, 2011, 20:21
  79. OK – have done as suggested in point 2. Thanks for that – was wondering why my name didn’t have a link!

    Here is the code I put in the blog post
    [ slideshow id=1729382256937413020&w=234&h=175]

    Here is the code I put in the widget:

    [gigya src="http://widget-9c.slide.com/widgets/slideticker.swf" type="application/x-shockwave-flash" quality="high" scale="noscale" salign="l" wmode="transparent" flashvars="cy=gn&amp;il=1&amp;channel=1729382256937413020&amp;site=widget-9c.slide.com" style="width:234px; height:175px" name="flashticker" align="middle"]
    

    Posted by annmariacoughlan | February 9, 2011, 20:41
  80. You’re missing a semicolon after the height number, but that won’t correct things. Change the shortcode to this:

    [gigya src="http://widget-9c.slide.com/widgets/slideticker.swf" quality="high" wmode="transparent" flashvars="cy=gn&amp;il=1&amp;channel=1729382256937413020&amp;site=widget-9c.slide.com" width="234" height="175" ]

    (I removed the unnecessary stuff and changed the way the dimensions are declared.)

    Posted by Panos | February 9, 2011, 21:01
  81. Panos, that’s the exact same as the code that’s in the widget already? A

    Posted by annmariacoughlan | February 9, 2011, 21:08
  82. Sorry for that! Check the comment again, I have corrected it.

    Posted by Panos | February 9, 2011, 21:11
  83. By the way, my relevant post isn’t this, it’s this:

    http://wpbtips.wordpress.com/2010/07/22/gigya-shortcode-3-widgets/

    Posted by Panos | February 9, 2011, 21:12
  84. thanks panos i will and live with ie , btw why can you not use it , harry

    Posted by harrythehandyman | February 9, 2011, 21:17
  85. Panos, that worked!!! Thank you SO much!

    And sorry for posting this in the wrong space – my brain is scrambled! I did read that post though!

    Posted by annmariacoughlan | February 9, 2011, 21:17
  86. @AM: You’re welcome!

    @Harry: Because Microsoft stopped developing IE for Macs many years ago. “Latest” IE for Macs is IE five, which is worse than obsolete.

    Safari, Firefox and Opera are better than IE. The only reason IE is still so popular is that it’s planted in every PC, and many users don’t know that they can download a better browser or don’t bother to.

    Posted by Panos | February 10, 2011, 13:29
  87. Many thanks for all the tips on WPTips. I’m very interested in all WPcom features, then I make my choice since some things I don’t like (Google stuff, for instance).

    I’d like to comment on CSS addition and CC.

    1. CSS.
    I was wondering if adding snippets of CSS is such a recommended things. While I’m sure it’s far better than using HTML to change the appearance, typically CSS are included in one or several CSS files. ,
    Adding CSS seems to me a workaround for those of us who want to have their ways yet don’t want to pay for CSS upgrade.

    2. CC (Off topic but didn’t find a better place). May I quote you (comment further above)?

    The CC licence should be shown in full: no scrollbox, no nothing.

    I couldn’t agree more. Why then don’t you use CC instead of seeking protection (Copyscape)? You enjoy WPcom which is based on libre sofware (GPL), you enjoy talking about open stuff like CSS and HTML, and you deprive us of the freedom to publish your texts (CC-By makes us cite authorship). Not everybody is bad enough to simply steal your stuff but perhaps you don’t want people making money out of your hard work. Yet that’s the way civilization advances. Nobody, on the other hand, cares about Microsoft having pilfered and stolen copyrighted material from hard-working companies.

    Cheers

    Posted by libre fan | February 16, 2011, 11:25
  88. You’re welcome.

    1. I think you are confusing CSS customization with inline CSS and HTML. What particular snippets are you talking about?

    2. I am strongly against re-posting other people’s articles. Basic HTML and CSS is “open stuff”, but the way I present a subject may be my own, some workarounds I’ve published are my own invention, and many other things (for instance measuring the sidebar width of all themes) are my own hard work. If someone finds something useful here, he can write about it and link to it: re-posting complete articles is content theft.

    Posted by Panos | February 16, 2011, 20:52
  89. 1. Thanks, Panos, for hitting on the right word “inline”.
    confusing CSS customization with inline CSS and HTML?
    No, inline CSS and HTML aren’t considered terribly good practise, that’s all, any bit of snippet. Inline CSS is more acceptable than inline HTML(I mean, tag P + font-size=”12″, for instance).

    2. Creative Common licence is about freedom, not theft. Re-posting articles can be very lazy but it can also be a source of new reflexions. By the way many theme makers give us their hard work, and we’re free to tshare them and edit them and publish them. But you are free not to free your good work, even in a GPL environnement. It’s just a bit sad.

    Posted by libre fan | February 16, 2011, 22:12
  90. Thanks too for hitting on the other right word: “lazy”! That’s one of the reasons I hate sites that reproduce the content of other sites.

    I said I thought you were confusing the two because you wrote “typically CSS are included in one or several CSS files”: that applies to external sheets, not inline CSS. Agree, inline CSS is a workaround “for those of us who want to have their ways yet don’t want to pay for CSS upgrade”. But I don’t see any harm in that (and I think saying that inline CSS isn’t “considered terribly good practice” is an overgeneralization).

    Posted by Panos | February 17, 2011, 01:26
  91. In fact all one does not need to post a copyright notice or license at all as Copyright automatically eschews to the creator of any intellectual property of all descriptions. The only reason we do post notices is to provide a warning, knowing full well some will ignore it and steal the content anyway. The most basic notice is simply posting the official copyright symbol.

    I don’t know why libre fan has this allegiance to CC. Their notices are fine, but so are others. See > http://onecoolsitebloggingtips.com/2008/10/07/how-to-copyright-your-digital-works/

    Also IMHO posting a “copyscape” notice is probably more effective than posting a notice or licence as it communicates the fact that we are tracking our content and are prepared to act if it is stolen.

    I don’t have this hang up that others seem to have about using inline CSS to place a copyright notice in the footer of a theme. Personally I wouldn’t even be bothered. As I am a paralegal I strongly prefer my copyright page which clearly states everything that needs to be said and leaves nothing open to interpretation. http://onecoolsitebloggingtips.com/copyright/

    Posted by timethief | March 20, 2011, 01:08
  92. @TT: I’m afraid LF will find your copyright page more than “a little sad”… LF is all for “sharing” instead of “protecting” our content, but I fail to see why sharing should include allowing re-posting. I think a license to re-publish may have a place in the case of printed articles; in the case of articles posted on the web, I don’t see the point: the moment you post something, you have already made it available to everyone.

    Posted by Panos | March 20, 2011, 13:19
  93. SIGH Reposting is redistribution of content and the WordPress.com ToS is what we agreed to. Now they have partnered with Federated Media and we have pop-up presses popping up and their advertising is popping up under our posts too. Check out my posts titled: WordPress.com Partnerships: Popping Up All Over and WordPress.com: Ads On or Ads-Off?

    Posted by timethief | March 22, 2011, 07:13
  94. Good thing too, timethief. Thank you for reminding us all here of the nice “Press This” button for which I’m very thankful.

    Reposting isn’t necessarily burglary, not even laziness or simply useless. Panos, some content vanishes from the web and some may not be visible to all even if as you say it’s available. Content reposted gets better visibility. It’s a way of saying “This is good, read it” “I enjoyed this and I want to share it”. Of course, citing the author, not passing the text off for your own should go without saying.

    Culture is about making stuff from other people’s stuff. Take Greek mathematicians. They didn’t put a copyright on their theorems and yet we still remember their names and we have made the most of their stuff. Take painting: painters have all copied the masters and in their turns have been copied, and I’m not talking of forgers.

    WP is a software you’re invited to copy and change, you know that. We can even set up our own WP plateform, a tiny version of WP.com, if we want. So this freedom that’s given to us may be an invitation to look at our own creativity as a gift to share (and publicize) rather than bind it into one place (that can disappear one day).

    A good read is Free Culture by Laurence Lessing. It’s under a CC licence so you can both download it and later buy the book if you feel like it.

    Cheers

    Posted by libre fan | March 22, 2011, 09:08
  95. @LF:
    You like something I’ve written so much that you want to repost it? Simple: ask for permission. This, in contrast to a generalized license to repost, allows me to assess your site and decide if I want my writings in it (which, depending on the site, might range from an honor to a disgrace).
    You may have the best of intentions and the best of visions, but unfortunately your exact same (poor) arguments could be used by any aggregator, scraper or splogger who would have me believe that they care for my content and work for my good.
    • My content “may not be visible to all”? It is visible to anyone who can google and can read English (which is why I would allow –in fact, I have allowed– posting translations).
    • “Content reposted gets better visibility”? Maybe. But if you repost some of my content, that may result in worse visibility for the rest of my content.
    Some content may vanish from the web, so we should allow the reposting of all content, just in case? Doesn’t follow.
    • There’s “culture” singular but there’s also “cultures” plural. What should be happening in our culture can’t be dictated by what used to happen in cultures in which the only means of dissemination and preservation was handmade copies.
    • Greek mathematicians “didn’t put a copyright on their theorems” because the notion didn’t exist at the time, and “we still remember their names” because they are pillars of western thought. (If I was a proponent of your views, I wouldn’t be so conceited as to compare my humble blog to the writings of Eucleid or Aristotle.)
    • “Painters have all copied the masters” in order to learn their craft, not in order to produce exact copies for “better visibility” of the masterworks.
    • “Making stuff from other people’s stuff” means improving on other people’s efforts and building upon them, not reproducing their efforts word for word.
    • The legitimate way of saying “this is good, read it” is writing about it and linking to it, not reposting it (just as a newspaper introduces you to a book by publishing a presentation or a review, not by republishing the whole book).
    • “Share”? By all means. But I already do that: posting is sharing.

    Posted by Panos | March 23, 2011, 22:08
  96. @LF: And now that I finished the ordeal of going through Lessing’s intolerably long-winded book, I can only ask you one thing: have YOU read it?
    If yes, then try to read it again and point to a chapter or a page or a paragraph or even a sentence that supports your idea that I should allow the reposting of my articles or that this would be a good thing to do.

    Posted by Panos | March 25, 2011, 06:24
  97. There are some good techniques here. I was planning to use the scrolling box technique

    [Username link removed – P.]

    Posted by lift | April 15, 2011, 11:12
  98. I used your code to create a link to another website in my text widget on my blogsite. Problem is it take me back to my blog website with the other website as an /extension of the blogsite, thus, and error 404. How do I remove the reference to addon of my current website address?

    [Link to commercial site removed – P.]

    Posted by Mark Schellhammer | July 30, 2011, 23:40
  99. What’s the link to the wp.COM blog in question?

    Posted by Panos | July 30, 2011, 23:46
  100. Do you have any insight into how to make a scroll box work in a post rather than just in a text widget for the sidebar?

    For example, I made a couple of posts using scrolling which look great in FireFox on my computer, but then in Sarari they have both vertical and horizontal scroll bars and look bad.

    I think I know the answer already, but just in case?

    (they are in blog 2)

    Posted by Tess | August 13, 2011, 08:43
  101. I don’t know why Safari renders them differently.

    But I think it’s a question of text vs images rather than widget vs post. These attributes and values are designed for text, not images. I haven’t worked with scrollboxes much, so it’s not clear to me how they behave with images.

    Anyway, the odd thing in Safari is that the last image drops below the others. Try white-space:nowrap instead of pre.

    Posted by Panos | August 13, 2011, 14:00
  102. Yes, I think that’s it: scroll boxes are better for text which can add line breaks between words—it wouldn’t matter much in that case (usually).

    “A poet can survive everything but a misprint.” —Oscar Wilde

    For whatever reason Safari begins a new line before the last picture even if I increase the view area to max width. The nowrap code didn’t fix the problem either. I gave it a try, that’s all I am willing to do for now, and who can say what IE does with it anyway. Thanks.

    Posted by Tess | August 13, 2011, 20:54
  103. Is there anyway to do a blog subscription in a text box instead of using the widget? The matala theme uses a ridiculous amount of space before and after the button.
    I have it at the top of my column here:

    http://campingwithaview.wordpress.com/

    Posted by Holly @foggyphils.com | September 5, 2011, 07:17
  104. No: it would require form coding, which we’re not allowed to use. You might consider using Feedburner instead.

    Posted by Panos | September 5, 2011, 15:01
  105. Thank you for posting these useful tips!!

    Posted by seabedhabitats | September 30, 2011, 22:55
  106. You’re welcome. Some of them are useful for posts too!

    Posted by Panos | October 1, 2011, 11:55
  107. When i use the code for scroll box, text in the scroll box is not accepting justify alignment. All other alignments are working. Can someone help me in this regard

    Posted by anilreddy0102@gmail.com | October 20, 2011, 09:37
  108. If you want justified text, add text-align:justify and remove white-space:pre-wrap.

    Posted by Panos | October 21, 2011, 03:37
  109. THANKS for all your great tips! I got an image loaded into my text widget a while ago with your help. Now I’m wondering how to center that image in my new text widget (just horizontally, not vertically). I’m getting ready to move from MistyLook to a new theme (comet) with a wider sidebar—don’t like how the image looks aligned against the left edge of the wider widget space.
    Thanks for any (further) help!

    Posted by ingridcc | November 25, 2011, 01:34
  110. I’m assuming you’re talking about the image that has this URL:

    The right code is this:

    <img class="aligncenter" src="IMAGE URL HERE" alt="DESCRIPTION HERE" title="TITLE HERE" />

    But you could also use an Image widget instead and simply set the alignment to Center.

    Posted by Panos | November 25, 2011, 03:52
  111. Thank you, I’ll try that!
    No, the image I meant is inside my top text widget:

    I’m using a bigger version of the image in my tentative set-up with the Comet theme, but didnt’ want it big enough to fill the whole space.

    I do want to center that image you referred to as well, but it’s not as glaring so I hadn’t really noticed it til your answer! I’ll try to align it to center as you suggested
    Thanks again, and thanks for this site, it’s a gold mine!

    Posted by ingridcc | November 25, 2011, 05:33
  112. You’re welcome. Same code applies, as long as the original file is narrower than the sidebar, so you don’t need to downsize it (that’s the reason I asked which image you meant). As my post says, it’s better to upload and insert images created in the right dimensions. As my post doesn’t explain, that’s because images downsized by WP lose quality – see here:

    http://wpbtips.wordpress.com/2010/01/16/image-quality/

    Posted by Panos | November 25, 2011, 11:12
  113. This was super useful. Thanks!

    Posted by aimango | January 13, 2012, 04:27
  114. Hello,
    I am fairly new to wordpress, I am trying to put in a link with the information code given above ( TEXT HERE ) And I have pasted this and filled in the URL and text as directed, but when I go to preview my page, it looks exactly like the code and does not only show the link. Is there something I am doing wrong, or is it my wordpress theme that isn’t allowing the code to work??

    Thanks
    healthypassions.wordpress.com

    Posted by healthypassions | February 13, 2012, 23:12
  115. Hi,
    You probably pasted the code in the Visual editor: you need to switch the editor to HTML.
    But you don’t really need to use code if you want to insert a link in a post or a page: you type the text, select it, click the Link tool (chain icon), paste the URL in the URL field, click Add Link.

    Posted by Panos | February 14, 2012, 05:43
  116. P, continued thanks for all your tips! I have a question re a scrollbox in a text widget. Is it possible to change the colour of the scroll bars using HTML? Thanks, A

    Posted by annmariacoughlan | March 10, 2012, 20:11
  117. You’re welcome.
    No, as far as I know it’s not possible.

    Posted by Panos | March 11, 2012, 04:15

Trackbacks/Pingbacks

  1. Pingback: Scrolling Along « Tess’s Japanese Kitchen - April 7, 2009

  2. Pingback: Chicken in Coconut Sauce « Tess’s Japanese Kitchen - April 12, 2009

  3. Pingback: Happy Easter! « Tess’s Japanese Kitchen - April 12, 2009

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,631,186 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: