CSS in Widget Sidebars… images out of place

jbutzu · Member · May 19, 2009 at 8:38 pm
Copy link

Add topic to favorites
Hi. I have been having a lot of trouble trying to figure out why certain customized widgets are off center or else forcing the widget beneath them to look bad. In particular is the “Subscribe to reader feed” (near the middle) and the pay/pal askimet (which has no editable functions) at the bottom. Anyone that can understands CSS and wants to help can contact me here: (email visible only to moderators and staff) or else simply reply to this topic. I’ve copied the Css code to the two most problematic widgets for you below:

Sincerely,
John Butzu

Subscribe in reader widget code:
<img src=”http://www.feedburner.com/fb/images/pub/feed-icon16x16.png” alt=”” style=”vertical-align:left;border:0″/> Subscribe in a reader

PayPal Code: (note: this widget seems to force the askimet widget (below it) to the same line as the paypal widget. I have tried switching the two in the sidebar and the askimet then looks fine.)
<img class=”size-thumbnail wp-image-704 alignleft” title=”Use Pay Pal to make a fast and easy donation!” src=”http://jbutzu.files.wordpress.com/2009/05/pay-pal-quick.gif?w=150″ alt=”Use Pay Pal to make a fast and easy donation!” width=”100″ height=”50″ />

The blog I need help with is: (visible only to logged in users)
jbutzu · Member · May 19, 2009 at 10:39 pm
Copy link
Help again… now my widgets look really bad… Half of these are not even in the sidebar in my dashboard admin settings! Is there something I did wrong to cause this… is the syste1m just being overused and therefore going crazy? (I’ve made a lot of changes in the last 24 hours)Help!
jbutzu · Member · May 19, 2009 at 11:39 pm
Copy link
Okay… i think i corrected everything but two problems…
Please someone help if you can!

1)Here is the source code for Subscribe Widget in reader
<img src=”http://www.feedburner.com/fb/images/pub/feed-icon16x16.png” alt=””> Subscribe in a reader

How do I get the image to align with the rest of the page (sidebar)?

2) Here is the code for Donation Widget
<img style=”border: 0pt none; display: inline;” title=”pay pal blue grey” src=”http://jbutzu.files.wordpress.com/2009/05/paypalbluegrey_thumb.png” border=”2″ alt=”pay pal blue grey” width=”120″ height=”68″ /><a/>

Why does the link not work?
thesacredpath · Member · May 19, 2009 at 11:44 pm
Copy link
The code for your paypal button is broken. Replace it with the following:
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=5559931"><img style="border:0 none;display:inline;" title="pay pal blue grey" src="http://jbutzu.files.wordpress.com/2009/05/paypalbluegrey_thumb.png" border="2" alt="pay pal blue grey" width="120" height="68" /></a>

What other problem are you seeing?
thesacredpath · Member · May 19, 2009 at 11:53 pm
Copy link
If you are talking about how “reader” starts to the left under the icon, it is because the height of the icon is not great enough to hold “reader” over underneath the other first part of the text.

Download the image to your computer, open it in an image editing program, change the height dimension (2 times should be enough) of the “canvas” to where it extends down from below icon image and make sure you save it with a transparent background.
thesacredpath · Member · May 19, 2009 at 11:54 pm
Copy link
Oh, and you will have to upload the image to your media library and then get the URL of that uploaded image and use that in the HTML code.
jbutzu · Member · May 20, 2009 at 7:45 pm
Copy link
Thanks so much… the only other thing i see wrong now is whatever is underneath the “Subscribe by Email” (mailbox icon)is seemingly indented to the right? Any advice on how to change that?

Sincerly,
John

P.S. Thanks you for responding!
jbutzu · Member · May 20, 2009 at 7:46 pm
Copy link
Oh here is the CSS to the above widget:

<img class=”alignleft size-thumbnail wp-image-708″ title=”Mail” src=”http://jbutzu.files.wordpress.com/2009/05/mail.png?w=150″ alt=”Mail” width=”30″ height=”30″ />Subscribe by Email
thesacredpath · Member · May 20, 2009 at 8:06 pm
Copy link
I see nothing indented to the right below your subscribe by email except for the blog stats (which is the way that widget is designed). http://opposablethumbz.wordpress.com/files/2009/05/jbutzu.png
aw1923 · Member · May 20, 2009 at 8:30 pm
Copy link
this is how it looks to me. seems to be off. only the blog stats widget as everything else looks fine.
aw1923 · Member · May 20, 2009 at 8:41 pm
Copy link
am I missing something here? Why is your blog stats widget clickable? While look at the html code your stats link to the google/feedburner email subscription link. If you manually inserted your blog stats into the same text widget then, maybe you should take that out and just use the actual blog stats widget available.
thesacredpath · Member · May 20, 2009 at 10:43 pm
Copy link
The code for the “subscribe by email” is messed up. The following code works.

<a href="http://feedburner.google.com/fb/a/mailverify?uri=BiblicalWordStudiesInspirationalCommentaryTranslationAndExegesis&loc=en_US"><img class="alignleft" title="mail" src="http://jbutzu.files.wordpress.com/2009/05/mail.png?w=150" alt="" width="30" height="30" /></a> <a href="http://feedburner.google.com/fb/a/mailverify?uri=BiblicalWordStudiesInspirationalCommentaryTranslationAndExegesis&loc=en_US">Subscribe by Email</a>
jbutzu · Member · May 20, 2009 at 11:05 pm
Copy link
Thanks again… I changed the code. Still not sure why blog stats pulls to the left… it must be the image. Hmmm… Well it is still better (thanks to you) than it was before.

Thanks
John
thesacredpath · Member · May 20, 2009 at 11:12 pm
Copy link
Try the following. Replace all the code in the subscribe by email widget with the following

<a href="http://feedburner.google.com/fb/a/mailverify?uri=BiblicalWordStudiesInspirationalCommentaryTranslationAndExegesis&loc=en_US"><img class="alignleft" title="mail" src="http://jbutzu.files.wordpress.com/2009/05/mail.png?w=150" alt="" width="30" height="30" /></a> <a href="http://feedburner.google.com/fb/a/mailverify?uri=BiblicalWordStudiesInspirationalCommentaryTranslationAndExegesis&loc=en_US">Subscribe by Email</a>@nbsp;

I put everything in paragraph tags and then added some code at the end to get you a blank line which should space things down and fix the blog stats widget.
thesacredpath · Member · May 20, 2009 at 11:14 pm
Copy link
Shoot I made a mistake in the code. Use this:

<a href="http://feedburner.google.com/fb/a/mailverify?uri=BiblicalWordStudiesInspirationalCommentaryTranslationAndExegesis&loc=en_US"><img class="alignleft" title="mail" src="http://jbutzu.files.wordpress.com/2009/05/mail.png?w=150" alt="" width="30" height="30" /></a> <a href="http://feedburner.google.com/fb/a/mailverify?uri=BiblicalWordStudiesInspirationalCommentaryTranslationAndExegesis&loc=en_US">Subscribe by Email</a> 
jbutzu · Member · May 20, 2009 at 11:47 pm
Copy link
That did it! “&nbbsp;” did the trick… i took out the unneccassary ’s and it looks a lot better… Thank you so much for your time and advice!
thesacredpath · Member · May 20, 2009 at 11:48 pm
Copy link
You’re welcome.

No items found.