WordPress.org

1. Rev. Voodoo
   Member
   Posted 2 years ago #

   Currently, I'm using the tantan flickr widget, but I'm sure the answer will be basically the same for any photo widget....as I've tried switching up widgets.

   Over on my sidebar at http://www.rvoodoo.com I've got the flickr widget displayed. It currently only displays 1 image per line...

   On my last theme I set up, the same widget (or another flickr widget, I've switched between 2 on both themes) would display 2 images side by side per line, allowing me to display 10 pics in the same area.

   I guess I must be dense lately....even after comparing the two themes' css, I can't figure out why my last theme would allow 2 images per line, and this one only centered image per line. Doing the math, 2 images should be able to fit...

   Can anyone see any obvious code in my css that is conflicting with allowing a 2 per line image layout? Or is there any quick & dirty I can just apply to .sidebar .flickr-photos img to get the desired layout?

   Thanks again ya'lls!

2. apljdi
   Member
   Posted 2 years ago #

   float:left on the enclosing anchor tag gets two images into that slot, but you'll need to jack with padding/margins to center things.

3. Rev. Voodoo
   Member
   Posted 2 years ago #

   that's a good start for me! thanks!

   why the crap didn't I try that...? I float everything as a last/first/middle resort!

4. Rev. Voodoo
   Member
   Posted 2 years ago #

   OK, I'm taking off for the evening, hopefully when I get back to work, I'll have a shiney new answer waiting for me....

   Still about the flickr widget.....its getting there for sure...

   I've tried applying margin/padding to the anchor, the image and the overall .sidebar .flickr-photos

   Nothing is taking, I'd love to get that centered within the sidbar....any ideas where I can apply the margins?

5. Edward Caissie
   Member
   Posted 2 years ago #

   I saw something similar to this with a completely different widget I am using. It happens to use a float within its "code" for layout. From what I can see, your flickr widget is "jumping outside" the widget container of your theme. There appears to be a bar underneath near the top of the flickr widget that appears at the bottom of other widgets.

   See if you can correct that issue (theme or plugin edit) and I would imagine the styling will be much easier afterward.

6. Rev. Voodoo
   Member
   Posted 2 years ago #

   Yeah...I just saw that bar when I got home. (I use IE at work...with a sh**ty monitor), I hadn't seen that bar.

   I believe clearing the .sidebar ul li separated the widgets, and cleared up that issue, along with associated text overlap junk that wasn't visible in IE

   I'll follow your lead now, thanks!

7. Rev. Voodoo
   Member
   Posted 2 years ago #

   yup...still not able to affect the positioning of the actual images within the widget..... looking at firebug, no styling from anywhere except my own style.css is affecting the images. I can't seem to add margin values anywhere and have them do a thing....

8. alchymyth
   The Sweeper
   Posted 2 years ago #

   try and add this to the end of style.css:
   it's not effecting the actualphotos, but the next element around them:
   #flickr-sidebar .flickr-photos a { padding:6px 11px; margin:0px 1px 0 0; }

   also, this typo (the ; in the wrong spot) might effect the styles:
   

   .sidebar .flickr-photos img;
            margin: 0 auto;
            }

   or is there a way to influence the width and height of the images?

9. Rev. Voodoo
   Member
   Posted 2 years ago #

   got rid of the typo, that whole bit wasn't doing anything anyway

   the actualphotos bit of code....I have no idea what I was trying to do there...

   Your bit of code seems to have got me in a pretty good setup on IE, Ill have to check FF when I get home.

   Now to just get that more photos button under the plugin playing nice and I'm set!

10. Edward Caissie
    Member
    Posted 2 years ago #

    The plugin I was working with left me no alternative (at least none that I could find) but to hack in a 'clear:both' div at the end of its "display" code. It effectively takes care of the 'floats' being used for the two columns of photos (in the case of my plugin ... ads).

    I submitted it to the plugin developer but have not heard back from them.

11. Rev. Voodoo
    Member
    Posted 2 years ago #

    cool, thanks much! I'm pretty happy with the layout now, I'm sure I'll muddle a bit more to try to get things just right.....it's mah nature

Topic Closed

This topic has been closed to new replies.