Chanding Flickr widget layout

  • Author
    Posts
  • #49749

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

    #50027

    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)

    #50177

    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 {
    width:100% !important;
    border:0;
    }

    to set the width (you can also use px, if you know the width of your sidebar)


    #flickr_badge_uber_wrapper * {
    background:#ddd;
    display:inline;
    float:left;
    }

    the asterisk means “everything inside of”. that’s how i get the images to wrap, instead of stacking vertically.
    #flickr_badge_uber_wrapper br {
    display:none;
    }

    turns off the line breaks in IE.

    #flickr_badge_uber_wrapper td {
    background:#ddd;
    margin:0 !important;
    padding:0 !important;
    }

    changes the background to something other than white.

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

    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 {
    background:#ddd;
    text-align:center;
    border:0 !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    }

    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.

    #50185

    drmike
    Member

    Thanks for posting that. :)

    #50331

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

    #50332

    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/

The topic ‘Chanding Flickr widget layout’ is closed to new replies.