Flickr Widget

• 

  voyagista · Member · Jul 6, 2013 at 1:18 pm

  • Copy link
  • Add topic to favorites

  Hi,
  I want to change the layout of my flickr widget putting it on two lines with 3 pictures on each line, a bit like the instagram widget. Does anybody knows what css code i need to use?
  Thanks

  The blog I need help with is: (visible only to logged in users)

• 

  designsimply · Member · Jul 8, 2013 at 8:51 pm

  • Copy link

  Since the Flickr widget uses tables to place images, it’s a little tricky. Here is an example using CSS3 and absolute positioning to move the images around that might work for you:

  #flickr_badge_uber_wrapper {
  	width: 100%;
  }
  #flickr_badge_wrapper {
  	border: none;
  }
  #flickr_badge_uber_wrapper {
  	position: relative;
  }
  #flickr_badge_uber_wrapper a:nth-of-type(1),
  #flickr_badge_uber_wrapper a:nth-of-type(2),
  #flickr_badge_uber_wrapper a:nth-of-type(3) {
  	display: block;
  	max-width: 30%;
  	position: absolute;
  	top: 0;
  }
  #flickr_badge_uber_wrapper a:nth-of-type(1) {
  	left: 0;
  }
  #flickr_badge_uber_wrapper a:nth-of-type(2) {
  	left: 36%;
  }
  #flickr_badge_uber_wrapper a:nth-of-type(3) {
  	left: 68%;
  }
  #flickr_badge_uber_wrapper a img {
  	max-width: 100%;
  	height: auto;
  }

  Note that the :nth-of-type notation will only work in modern browsers.

  Also since the images in the Flickr widget can be different sizes, you should make sure to adjust the “left” values to something that works best for your images.

• 

  voyagista · Member · Jul 9, 2013 at 12:52 pm

  • Copy link

  hi
  Thanks i have put it in voyagista.fr and it works well! Last question now there is the link “more picture” in blue below. There is a lot of space between the picture and this link. How do I adjust this? Also how can I change the colour to have the same colour as the other links in my blog?
  Thanks

• 

  designsimply · Member · Jul 9, 2013 at 2:26 pm

  • Copy link

  You could move the link like this:

  #flickr_badge_uber_wrapper a:nth-of-type(4) {
  	position: absolute;
  	left: 0;
  	bottom: 30px;
  }

  Again, note that you may need to adjust the bottom value if the image sizes change for any reason.

  To change the link color:

  #flickr_badge_uber_wrapper a:hover,
  #flickr_badge_uber_wrapper a:link,
  #flickr_badge_uber_wrapper a:active,
  #flickr_badge_uber_wrapper a:visited {
  	color: red;
  }

  Replace red with a color code of your choice.

• 

  voyagista · Member · Jul 10, 2013 at 1:37 pm

  • Copy link

  that’s working thanks. one last question how do i reduce the space below “plus de photos?”. Is there a way to see the css code of my theme? ( i tried in Chrome but I can’t see those widgets there…)

• 

  designsimply · Member · Jul 10, 2013 at 4:43 pm

  • Copy link

  Rearranging the flickr images was some pretty tricky CSS. to get rid of the space below the link now, you might try removing the bottom padding for that specific widget only with this:

  #flickr-3 .widget-wrap {
  	padding-bottom: 0;
  }

  Note: the “flicker-3” part corresponds to the id value for the Flickr widget container. Each widget has its own unique identifier like that. Another way to do the same thing except apply it to all Flicker widgets (if there were more than one or if you were on a different blog) would be to do this:

  .widget_flickr .widget-wrap {
  	padding-bottom: 0;
  }