Need help? Check out our Support site, then


Chanding Flickr widget layout

  1. how can i chage the dimensions, border and background color of the flickr stream in my sidebar?
    help pls

  2. the flickr badge is currently a bug.

    the style for the badge is loaded after any page stylesheets, including the CSS upgrade stylesheet. the background color and border cannot be changed.

    i will let you know if this changes. i'm currently abusing the thing on my blog (click my name)

  3. ok, you can hack the thing up a bit with the Custom CSS. it's a bit tricky because the CSS for the white background and black border loads after your custom CSS (i've submitted a bug, we'll see where that winds up).

    so you'll have to use different attributes and classes to get at the thing. i used:

    #flickr_badge_uber_wrapper {<br /> width:100% !important;<br /> border:0;<br /> }
    to set the width (you can also use px, if you know the width of your sidebar)

    <br /> #flickr_badge_uber_wrapper * {<br /> background:#ddd;<br /> display:inline;<br /> float:left;<br /> }
    the asterisk means "everything inside of". that's how i get the images to wrap, instead of stacking vertically.
    #flickr_badge_uber_wrapper br {<br /> display:none;<br /> }

    turns off the line breaks in IE.

    #flickr_badge_uber_wrapper td {<br /> background:#ddd;<br /> margin:0 !important;<br /> padding:0 !important;<br /> }
    changes the background to something other than white.

    #flickr_badge_uber_wrapper a {<br /> display:block;<br /> width:65px;<br /> height:65px;<br /> float:left;<br /> text-align:center;<br /> overflow:hidden;<br /> font-weight:bold;<br /> color:#111 !important;<br /> font-size:1.5em;<br /> line-height:2em;<br /> margin:2px;<br /> padding:3px;<br /> }

    i wanted square images. i can't change what images get fetched, but all the images are wrapped in link tags (a), so i set the size of the link tag to the smallest side of the image, and then made the link tag cut off any extra. unfortunately, this means the link at the bottom of the badge is affected as well, so i also styled the text to be appropriate for a square link.

    .widget_flickr table {<br /> background:#ddd;<br /> text-align:center;<br /> border:0 !important;<br /> width:100% !important;<br /> margin:0 !important;<br /> padding:0 !important;<br /> }<br />
    this is where i really beat the thing into submission. .widget_flickr is the div that's created by the widget, whereas #flickr_badge_uber_wrapper is the id of the table inside it. they both affect the same stuff, but this way i can override the default styling. if i left it to the id, it would be overridden by the !importants in the default styling.

  4. Thanks for posting that. :)

  5. how do you make the widget longer to show mreo photos - the full vertical length of all posts?

  6. the widget will be as tall as the photos inside it. you can add more photos, but you can't make it "the full length of all posts"
    here's why:
    http://www.alistapart.com/articles/fauxcolumns/

Topic Closed

This topic has been closed to new replies.

About this Topic