Some new styles for FlexibleList

I had some fun a while back playing with FlexibleList and created some new styles, partly on user request. But I never got around to actually adding them to my site until today. They are quite simple but still useful so they are now available on the example page for you to download. They all involve displaying images with a description and works without any special tricks to add the image to FlexibleList.

Common for all these styles is that you can display a list of items containing an image and text. Adding the image to each item is very simple. Just drag the image into the content area and add the text after the image. There is no need to add special formatting and/or wrapping HTML tags inside the content. If you want to adjust the image you can use RapidWeavers built-in Media Inspector.

  1. Product Description with Title, Left
    This style displays a product description with an image, title and text description where the image is aligned to the left of the item and the title and text is aligned to the right. The style is configured for an image with a size of 48×48 pixles and a title size that fits inside 20 pixels height. But the CSS is commented so you can see where you need to make changes if you want bigger/smaller image and/or adjust the size of the title.
  2. Product Description with Title, Right
    This style displays a product description with an image, title and text description where the image is aligned to the right of the item and the title and text is aligned to the left. The style is configured for an image with a size of 48×48 pixles and a title size that fits inside 20 pixels height. But the CSS is commented so you can see where you need to make changes if you want bigger/smaller image and/or adjust the size of the title.
  3. Columned Product Description
    This style displays a product description with an image, title and text description in a column layout. The style is configured for 3 columns an an image with a size of 48×48 pixels. But the CSS is commented so you can see where you need to make changes if you want more/less columns and/or bigger/smaller image.

These styles have been tested in Firefox 2 & Safari 3 on Mac and Firefox 2 & IE6 on Windows. I leave no guarantees that they work in all browser on all platforms since I haven’t got the possibility to test them all. But if you discover some issues with any of my styles, except if you have heavily modified them, let me know and I will see if I can fix them.

That’s it for this time! I hope you enjoy playing with FlexibleList as much as I do :)

And don’t forget to go and grab a copy of these style if you like what you see…

No comments

0 kommentarer till “Some new styles for FlexibleList

  1. Rose skriver:

    The download links for these styles don’t seem to be working or is it just me?

  2. nilrog skriver:

    They work for me and they have been downloaded a couple of times by others so all I can say is that the links work.

  3. Rose skriver:

    I still can’t get the links to work. I’ve tried Safari, Firefox and NetNewsWire. Very strange. I’ve managed to download the old styles previously (some time ago) but I can’t get any of them to work now. If I submit the contact form with my e-mail address would you be able to send me a link by e-mail?

  4. nilrog skriver:

    Did you go to the example page and tried to downloaded them from there?
    http://nilrogsplace.se/plugins/flexiblelist/examples.html

    There are no direct download links in the blogpost.

  5. Rose skriver:

    Hi again, thanks for the link. I have managed to download them from that page. I didn’t realise they could be downloaded from the main styles page. The ones that didn’t work for me (and still don’t) are the links from the word ”download” (in green) in each example.

  6. nilrog skriver:

    Ah, well I can see that it might not be so clear where the download link is :)
    When I do the next big overhaul to this site I will try and make those pages a little bit better.

Leave a Reply

Du måste vara inloggad för att skriva en kommentar.