Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Thursday, July 5, 2012

Limiting Number of Flipcards in a row in Blogger Dynamic Views

Before
After
The number of flipcards in a row that you see depends on your browser's width. It dynamically loads to 'fill' up the horizontal space available in your browser. Some users would like to fix the number of cards regardless of the browser's width - usually to allow a portion of your background to be always visible. Whatever your reason is, here's how you do it. This is a respond to blog reader antonio.

Go to Dashboard --> Template --> Customize --> Advanced --> Add CSS --> paste the following code --> Press enter after the last character of the last line } --> Apply to Blog.
.flipcard #content, .ss {
padding-right: 38px;
margin-left: auto !important;
margin-right: auto !important;
width: 780px !important;
}

Extras:

1) The value above will allow 6 cards to be fixed horizontally. If you want to increase the number of cards fixed horizontally, increase the value 780px in the code above, adding 130px for each additional card that you'd like to show. Try not to exceed more than 9 cards, as smaller screened devices might not be able to view your additional cards.

2) If you'd like your flipcards to be aligned to the right, remove Line 4 from the code above.

3) To align them to the left, remove lines 3 and 4 from the code above.

66 comments:

  1. Hi Yoboy! Namaste.

    Thank you very much for your helpful tutorials.

    Could you tell me the way to change the width or height of each cards on Flipcard? Because I want to make a book catalog using Flipcard. Here is my blog address.
    http://mondic-db.blogspot.jp/

    I mean I need to make each cards rectangle shape to fit book cover instead of square shape.

    It will be fine if you could also tell me the way to hide the date ribbon on each posts. Because posting dates are never necessary for book catalog.

    ReplyDelete
    Replies
    1. Hey 潮来いたこ

      I'm afraid it is not possible to change the size of the cards - not without messing up your template anyway. What you could end up having is a flipcard template with your cards overlapping on top of each other, which I'm sure isn't what you were looking for.

      As for the date ribbon, you could hide it by adding the following to your css:
      .ribbon{
      display: none !important;
      }

      Cheers :)

      Delete
    2. If it is impossible it is OK. Thank you so mach to give me answer anyway.

      I have succeeded to hide the date ribbon. Thank you!

      Delete
    3. That's great, excellent!

      Delete
  2. Hi, Yoboy.
    Your blog is so informative. Thanks a million!
    I'm using Mosaic view.
    Can I limit the number of Mosaic pictures like you're doing in Flipcards?
    And are there any method to hide Classic-Flipcard-Magazine...that Dynamic Views roll-down menu on header bar?
    I want to stick to Mosaic view only.

    ReplyDelete
    Replies
    1. Hi Tonenote2,

      I can't find a way to do this in Mosaic view without breaking the thumbnail. As to hiding the other view options, see the following link:

      http://www.southernspeakers.net/2011/09/disable-certain-dynamic-views-in.html

      Cheers :)

      Delete
  3. Thanks you for reply.
    I completely missed that post!
    That is great help.

    ReplyDelete
  4. Hi Yoga, i have a question : In the back of the card (flipcard view), i would like to center the title of my article. I already hide the date.
    Furthermore, we can't see the entire title on the back of the card. Do you have a solution for me ?

    (Sorry for my english)

    http://www.lespetitsbruits.fr

    Thanks a lot for your blog. Very Helpful.

    ReplyDelete
    Replies
    1. Hi Thomas,

      Sorry for my late reply. Looks like you've already got your card titles centered, let me know if this isn't the case. As for showing the entire title, try adding this to your CSS:

      .flipcard .overlay .title{
      max-height: 123px !important;
      height: 123px !important;
      }

      Cheers :)

      Delete
    2. It's perfect ! Thanks a lot.

      Delete
    3. I have an other request. I would like to change the size of my title in the presentation on the Magazine, Sidebar and Snapshot view. As you can see (http://www.lespetitsbruits.fr/?view=snapshot), it's too big.

      Do you know how to do this?

      Cheers.

      Delete
    4. Hi Thomas,

      I'm not quite sure which title you're referring to.. If you're referring to your post title, have you given the Template Designer a try? Go to Template - Customize - Advanced - Post Title - adjust the percentage to change its size. Let me know how it goes :)

      Delete
    5. Hi Yoga, i made this to explain you what i would like to do : http://cl.ly/image/3c3x07060x12

      Let me know if you can help me.

      Thanks a lot.
      Cheers.

      Delete
    6. Hi Thomas, Use this:

      .snapshot #content .item h3.title a{
      font-size: 10px !important;
      }

      .sidebar .items .item h3.title a{
      font-size: 10px !important;
      }

      .magazine #content .item h3.title a{
      font-size: 10px !important;
      }

      The first portion is for snapshot, the second for sidebar, and the last one for magazine. Adjust the value of the font-size accordingly.. Cheers :)

      Delete
  5. Can this be done in the Snapshot view as well? I'd like them centered, five across. Thanks so much for all the amazing tutorials and hints!

    ReplyDelete
    Replies
    1. Hi Ali,

      This should work:

      .snapshot #content, .ss {
      padding-right: 38px;
      margin-left: auto !important;
      margin-right: auto !important;
      width: 750px !important;
      }

      Each snapshot is like 250px wide, so the code above should give you 3 shots in a row.. I think 5 might be a suicide as your posts will be clipped off from most monitors (that of your readers..).. All the best! :)

      Delete
    2. hi friend Yoga
      I want to ask for the opposite, if the magazine template can be auto width [Full Screen] In all analyzes monitor of that[1024x768,1600x1200,1920x1200....] as the mosaic or flipcard.
      thanks
      john
      techandtech.gr

      Delete
    3. Hi giannis,

      Unfortunately we can't do that.. Even if manage to stretch the width of the page, the template will not show a bigger picture or more text on your post.. It's something that we don't have control over..

      Delete
  6. It's not working i am cutting and pasting the code but have to re add the numbers in. i don't have syntaxHighlighter should that matter?

    ReplyDelete
    Replies
    1. Hi Leigh,

      Nope you don't need SyntaxHighlighter for your CSS to work, and the number at the start of each line should not go into your CSS. But looks like you've got this figured, as I can see the tweak working fine in your blog now. Let me know if this isn't the case :)

      Delete
  7. hi yogo , I would like to know if it is possible to have another blooger page as the blooger home page
    For example when I but my website address, the page * about * s display on it
    another question, I would like to know how do you give the proportion width: 1020px; height: 1025px; in mosaic

    I appreciate what you're doing
    thank you in advance

    ReplyDelete
    Replies
    1. Hi Tazi,

      You can set an alternative page as your default landing page by going to Dashboard - Settings - Search preferences - Errors and redirections - Custom redirect - Edit.

      As for the width, it isn't a good idea to set a default post width in your dynamic view templates. This is what's gonna happen. When you fix your width and height to 1025px, it's gonna load your posts statically, and no more dynamically. In other words, if I use a laptop smaller than 1025px, or an iPad, or smartphones, your blog will not show in full.

      Delete
  8. Hi yo!!
    first, really tanks for this great sharing!
    but i want to know one thing more

    i just want to modify the number of thumbnail pictures not only "Recent" part, but also like "Date, Label, Author" part.
    because if date description are too long, it would be hided from pictures. T.T
    What should i do??

    this is my blog.
    http://imblogger-digger.blogspot.kr/
    please check my problem~ T^T

    ReplyDelete
    Replies
    1. Hi Eliana,

      Use this code instead. Adjust the value '180' accordingly, to change the number of cards that you want to appear in a row.. The value '300' might be fun to play as well..

      .flipcard .grouped #content, .ss {
      padding-right: 38px;
      position: relative;
      left: -300px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      width: 180px !important;
      }

      Cheers :)

      Delete
  9. Hello,

    I think you've more or less answered, but I would like to be able to have only 5 posts on my home page and the rest to be archived (snapshot view). I would like the 5 snapshots to be on the upper side of my page (in the sky of my picture) so you can still see most of the background image I've chosen (the people on the beach and the sea). Do you think that's possible?

    Thank you so much!

    Sonia

    You can see my blog here: taistoietnage.blogspot.com

    ReplyDelete
    Replies
    1. Hi Sonia,

      I can think of a way. Here, add this to your 'Add CSS' box:

      .snapshot div#main div#content.items{
      max-height: 266px !important;
      height: 266px !important;
      overflow: hidden !important
      }

      Cheers :)

      Delete
  10. Yes, that is exactly it! Thank you! Thank you! Thank you! xoxo Sonia

    ReplyDelete
  11. Larger Flipcards? 200x200?

    Larger Narrow Flipcards? 150x250?

    Is this a posible?

    ReplyDelete
    Replies
    1. Hi there,

      I'm afraid it is not possible to change the size of the cards - not without messing up your template anyway. What you could end up having is a flipcard template with your cards overlapping on top of each other, which I'm sure isn't what you were looking for.

      Delete
  12. Hi Yoga,
    The code you offered does not support zooming-in and zooming-out. This means that the cards do not rearrange themselves in case you you press Ctrl+ or Ctrl-.

    My question is this: How do I
    1) center the cards in the page,
    2) limit their *maximum* number,
    3) make them rearange themselves automatically when pressing Ctrl+ or Ctrl-,
    4) make this work also for Label, Date and Author subcategories, without anomalies?

    You might want to take a look at my blog here:

    http://ofer-megged-phys-notes.blogspot.co.il/

    Thank you for any help!
    Ofer.

    ReplyDelete
    Replies
    1. Hi Ofer,

      1) The code above should automatically center your cards to the center of the page.

      2) Not sure what this means, but see 'Extras' item#1 in the post above on how you can use width settings to set the maximum number of cards that can appear in a row.

      3) That's kinda defeat the purpose of this tutorial. We're fixing the number of cards in a row by inserting the code above - which is why it does not rearrange itself when you zoom in and out (the aim of the tutorial is to fix the number of cards in a row).

      4) To fix the number of cards in the grouped view, use this instead. Adjust the value '180' accordingly, to change the number of cards that you want to appear in a row.. The value '300' might be fun to play as well..

      .flipcard .grouped #content, .ss {
      padding-right: 38px;
      position: relative;
      left: -300px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      width: 180px !important;
      }

      Hope this helps :)
      Cheers and God bless..

      Delete
  13. Hi Yoga,
    I don't want to fix the number of cards in a raw, Instead I would like to limit it to a Maximum value, let's say eight. In this case, if you zoom-in several times, the number of cards per raw reduces and the cards rearrange themselves to fit the size of the page. In the following blog you will find an example of what I would like to achieve:
    http://architred.blogspot.co.uk/

    By the way, thank you a lot for your last post, I immediately adopted the idea :)

    God bless,
    Ofer.

    ReplyDelete
    Replies
    1. Got it. Here, try this instead:

      .flipcard #content, .ss {
      padding-right: 38px;
      margin-left: auto !important;
      margin-right: auto !important;
      max-width: 1040px !important;
      width: auto !important;
      }

      Cheers :)

      Delete
  14. Thank you very much Yoga, this is indeed what I meant.

    If it's o.k. with you I would like to ask you two more questions somewhat off-topic:

    1) My text contains latex code which is automatically sent to a remote server for compilation via MathJax when the post is opened. I do that by embedding an appropriate script at the top of each post.

    However, if the reader switches between posts in the Flipcard mode, the second post is no longer sent for compilation, and the page has to be reloaded in order for the mathematical text to be compiled. Do you have any idea how to overcome this fault?

    2) Is it possible to attribute a post to several key-words at the label sub-mode? Namely, if the post is tagged under two different key-words, say "mass" and "relativity", I would like it to appear twice: right to the "mass" label, and right to the "relativity" label.

    Hope I am not bothering you too much... In any case, your help and attention are appreciated beyond measure!

    Thanks again,
    Ofer.

    ReplyDelete
    Replies
    1. Hi Ofer,

      1) I'm not sure what could be at fault, and I'm not well-versed in Javascript. If I were you, I'd try altering the script. Javascript normally have a way to launch the script, and usually your code is launched when your document is ready (looks something like this --> $(document).ready() ). See if you can alter this.

      2) Unfortunately, this still isn't possible at the moment. Numerous reports have been sent to Blogger, and nothing has been done so far.

      Cheers :)

      Delete
  15. O.K., thanks a lot, I am deeply indebted.

    ReplyDelete
  16. Hi Yoga,
    I really need your help.

    Please visit my blog, and I know u'll get my problem.

    http://the-religion-called-football.blogspot.in/

    The title of each article is getting cut because of the small size of each square. Is there anything I can do? I'm just a starter, would love your help

    ReplyDelete
    Replies
    1. Hi Shantanu,

      Ahead of you. Here's what you're looking for:

      http://www.southernspeakers.net/2012/09/show-full-post-title-in-blogger.html

      Cheers :)

      Delete
    2. I had seen ur post before, but the thing is I want the people to see the blog in label view. So in label view, the size of the title gets shorter and hides...

      Delete
    3. Since we can't change the size of the cards, the only way I can think of is by reducing the font size to accomodate more letters in the box:

      .item.grouped .front .overlay .title {
      font-size: 40% !important;
      }

      Then again, it'll be almost useless if you have long titles, as fitting all your text in a small box is only possible if you set your font to a size which isn't readable.

      Cheers..

      Delete
  17. Hey Yoga, thanks for all these sharing around your site, it's very helpful and awesome! =)

    I'd like to ask you something, is there anyway to stop the spinning of the posts in the flipcard dynamic view?
    And instead of that it darkens a little bit and shows the title?

    I'm building a portfolio and your pages are helping me a lot! ^^

    Thanks!

    ReplyDelete
    Replies
    1. Hi Jhonatas,

      That is a good question. However, I can't quite figure it out yet, due to the structure of the template. It should be an easy task to do if we could edit the source of the template (which we can't, btw). I'll keep this in my 'things to try out' list.

      Cheers..

      Delete
  18. Hello :),

    could you help me with the problem I have with flipcards? I would like to increase the horizontal distance between them and I am not sure how to do that :(.
    Thanks for help in advance :)

    ReplyDelete
    Replies
    1. Hi Jaturul,

      Sorry for the late reply. I've tried to introduce some gap between the cards, but unfortunately, the template did not react well to the changes.

      Delete
  19. I want to used Mosaic with large thumbnails, but Mosaic's style changes randomly to rectangles etc. each time page is refreshed. Please give me a code to make a large thumbnails style permanent in Mosaic.

    Thanks in advance!

    ReplyDelete
    Replies
    1. I'm afraid that is not possible. The very two distinguishing features of Mosaic are the ever changing size and the position of the thumbnail. Trying to alter this will only cause the template to behave in unexpected ways. Try looking into Snapshot for large thumbnails with fixed position.

      Delete
  20. Great blog- Been really applying a great deal of what you've taught me ... Now I finally have a question that Im not sure no one has asked yet, can you split the cards in half, so the center is exposed and the cards are on the left and right margin ?

    Thankx

    ReplyDelete
    Replies
    1. Hi TransAlchemy,

      That'll be very tricky I'm afraid. The front and back cards are structurally represented with two seperate div elements. I suppose we can cook around in a non-dynamic template to combine two div tags - but in DV template, doesn't look very promising.

      Delete
  21. Hello,

    I've been absolutely addicted to your blog these past couple of weeks. I've tried out many of your tutorials with great success.

    I used your tutorials to shift my gadgets to the left and also have them appear permanently. The problem is with flipcards the cards and text get blocked. The tutorial above solves the problem of the cards being blocked by the gadgets, but it doesn't address the problem of the text getting blocked (i.e. when you switch from recent to "date," dates get blocked by my permanent gadgets. Similarly the labels are blocked in "label"). I don't know if there is a way to shift over the text more centrally (or to the right side) in flipcard view as well (doesn't seem like it, otherwise I'm sure you would have been asked/posted an answer).

    For now I switched my gadgets back to the right side so this isn't an issue, but I would love if they could go on the left without obscuring my flipcard words. I would really appreciate a response but am not expecting one since this is not an urgent question by any means. I'm just curious if this would work, and it would only be an added bonus.

    Thanks for your kindness in helping out your readers. Your blog is so amazing!

    ReplyDelete
    Replies
    1. Hi S,

      I get what you mean, and that is just one of the many problems I've seen with the dock being on the left. Another thing that annoyed me to no end is the fact that the design is constantly changing, on code-structural level, that it makes something functional to be broken the next week with no notice what-so-ever.

      Delete
  22. Hi Yoga,

    I am using flipcard view template, want to customize total numbers of filpcards on the page, like if i have 1000 posts, it takes so long to load the first page. Then I have categories to select to see other posts. Want to keep limited 108 recent posts showing..

    If there has any idea to make this happening, kindly share on my mail

    5elementsmedia@gmail.com

    ReplyDelete
    Replies
    1. Hi 5elements,

      I'm afraid we have no control as to how the 'dynamic' nature of the template fetches the post of the feed, and as such there is no way to control the number of posts shown. This is especially bad since Dynamic templates do not have 'next page', and thus they're made to load posts in a continuous stream.

      Delete
  23. i was wondering if i can center flipcards , http://astralforest.blogspot.com/ , here's my link , the flipcards are aligned to left , how can i center them ?

    ReplyDelete
    Replies
    1. It seems to be fairly centered on my desktop. Could you grab a screenshot of what you're seeing?

      Delete
  24. Hi Yoboy. Thanks for all the useful tricks. I have a question: is there any way to center the group of flipcards in the screen? For some reason, mine is a little to the left.
    Here is my blog: http://fabiopiatti.blogspot.com.ar/ The detail in the bottom left of the page has something to do with it?
    Thanks a lot.

    ReplyDelete
  25. I solved the problem removing the padding right part. Thanks.

    ReplyDelete
  26. See if you can help me.
    I want the " cards" are adapted to the size of the image having the input. I saw that you can set a fixed size , but if the staff put "self " does nothing and is not adapted to the size . How can you do ?.
    Thank you.

    ReplyDelete
    Replies
    1. I'm afraid even setting a fixed size is not feasible in Flipcard view. Adaptive size is very tricky, if not impossible. I'm not sure if this can be done.

      Delete
  27. Hi Can you help me?
    I would like change size for square in flipcard. It is in overlay div.
    In finally i would like make blog with 5 square in one rows ,and i woudl like have 4 rows so i will be have 20 square(posts). Sorry for my english.

    ReplyDelete
    Replies
    1. Hello Karol,

      You can limit the number of flipcards in a row as per the tutorial above - but I regret to inform changing the size of the flipcard will only break your template.

      Delete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.