Southern Listeners

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

Monday, May 21, 2012

Rename 'Recent Date Label Author' in Flipcard Dynamic Views

Before
After
So, this is becoming increasingly popular. Few readers have asked me how to rename the four categories that you see in Flipcard view: Recent, Date, Label and Author. It might be useful to personalize these tags to suit your blog's theme. Whatever your reason is, this is how you do it (Won't work in IE btw).

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.
#controls ul#groups li{
font-size: 0px;
}
#groups>li:nth-of-type(1):after{
content: "Recent";
font-size: 14px;
}
#groups>li:nth-of-type(2):after{
content: "Date";
font-size: 14px;
}
#groups>li:nth-of-type(3):after{
content: "Label";
font-size: 14px;
}
#groups>li:nth-of-type(4):after{
content: "Author";
font-size: 14px;
}
Change lines 5, 9, 13 and 17 in the code above accordingly. All the best!

133 comments:

  1. hey! do you have any idea how to remove the "Posted 4 hours ago by Yoboy" part in all posts? -on dynamic views blogger?? thank you! I know that you're such a genius when it comes to things like this. Hope to see your reply...

    ReplyDelete
    Replies
    1. Hi Almeda,

      Oh yes I do. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      .publish-info{
      display: none;
      }

      Cheers! :)

      Delete
    2. oh thank you so much for that! you're such a genius :)

      Delete
  2. hey ho...
    first thank u for all the tutorials:)

    but i dont know why my " recent, date, label, author" dont want to change?
    any suggestions?
    happy face
    katja

    ReplyDelete
    Replies
    1. Hi Katja,

      Don't include the numbers in the code. They are there just for referencing purposes. This is what you should have:

      #groups li:nth-child(1), #groups li:nth-child(2), #groups li:nth-child(3), #groups li:nth-child(4){
      font-size: 0px;
      }
      #groups>li:nth-of-type(1):after{
      content: "NEW";
      font-size: 14px;
      }
      #groups>li:nth-of-type(2):after{
      content: "OLD";
      font-size: 14px;
      }
      #groups>li:nth-of-type(3):after{
      content: "TAGS";
      font-size: 14px;
      }
      #groups>li:nth-of-type(4):after{
      content: "PEOPLE";
      font-size: 14px;
      }

      Good luck! :)

      Delete
  3. Is there any way to make posts sort by certain labels? My photo blog has some photos with multiple categories, but i want them to show under certain labels when in flipcard - all photos fall into one of 4 (nature, macro, colour splash, urban).

    ReplyDelete
    Replies
    1. Hi Hannah,

      I can think of some ways but they all involve cutting Blogger's (Google-hosted) DV scripts open and altering bits in them.. I don't see a way forward with CSS alone.. You know as much as I do that HTML changes to DV templates are pretty much useless, and there's nothing we can do at the moment.. But I do believe that we'll have a greater control of the scripts in the future.. We'll keep our fingers crossed.. :)

      Delete
    2. From trail and error, I believe they are sorted on alphabetical basis.... so by the label that comes first alphabetically.... ANNOYING

      Gonna play with symbols to try and alter this

      Delete
    3. A bit late, but I use numbers next to preferential labels so they sort to the top of the list. E.g. " 3 NATURE " will sort above "NATURE", and above other names, but below "1 ... " and "2 ...." Hope that helps ...

      Delete
  4. Hi Yoga!

    brilliant you help to Blogger HTML5!

    Is it possible to remove all this sub-categories from view?

    Tank´s in advance for your help.

    ReplyDelete
    Replies
    1. Hi antonio,

      Oh yes, it is possible. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      .flipcard #groups li{
      display: none !important;
      }

      Cheers :)

      Delete
    2. Excellent. Thanks so much Yoga, your tips and tricks have helped me tremendously. Thank you for being so generous in sharing these techy solutions

      Delete
    3. Hi Julia,

      I'm happy to be of help. Thanks for dropping some words here.

      Cheers :)

      Delete
    4. Hi, Yoga!

      I have remove all this sub-categories from view using your code, but now there is an empty space between the cards/posts and the pages bar...

      how can I remove it?

      thanks,
      renata

      Delete
    5. Hi again,

      Sorry I should have read all comments before write comment myself...

      I found your code to add some space between banner and the flips, so I just try it with a -40 and I got what I wanted.

      Thanks for all the help, I have changed a lot of stuff using your tutorial!

      There are only two things remaining. I use the "ask a question" but then I saw that people use the comments to ask you stuff.

      1. I would like to know if it is possibly to add music to flipcard dynamic view template.

      and

      2. I would like to know if there is a automatic way of having always the same post has the first flipcard. [I can do that changing the date, but I need to do that everytime I publish a new post]

      Thanks again, and sorry if this is not the right place to ask for help in this 2 questions.

      Delete
    6. Hi Nata,

      Sometimes it'll take ages for me to reply comments in this blog, which is why I encourage readers to use the Official Blogger's forum, so that they won't have to wait. I did have a look at your 'music' thread (and replied in your 'first post' thread), and I'd have to agree with Nitecruzr there. HTML/Javascript in DV templates are pretty much useless, and diving into your template's HTML might break your template (if not now, definitely some time in the future).. So the only option left for you is to include your HTML in your Posts (edit your post, switch to HTML view). This, of course, is tedious, as you'd have to do it for each one of your posts, and it will only work when your post (flipcard) is viewed (as in, it won't work on the main page).

      Delete
    7. OK, I undestood the thing about the questions in comments :)

      Since putting music in all posts is tedious and at the end, there will still be no music in the main page, I think I will create a page just for the music... it is a pitty that we can put the music all over the blog, but if it's not possible, i's not possible!

      Anyway, many thanks for all the answers, I will continue to came here to check new stuff.

      Keep the nice work!

      Delete
  5. you are an alchemist Yoga!

    By the way, is it possible to add some customisation to the flip-boxes on Flipcard [both sides, the front and back that appears on mouse-in], I mean change field area of text inside the box, colour of the line border, background, etc....?
    tanks for your kind help!

    ReplyDelete
    Replies
    1. Hi Antonio,

      We could actually. Let me know your preferences (what color you want for where and stuffs). It'll be much easier for me to give you a specific answer than a generic one :)

      Cheers~

      Delete
    2. Hi Yoga,
      tanks for your kind attention.
      Well, at first I need to change/customise the background colour of a 2 specific flipcard "post´s" and leave the others as the predefined grey. Second, need to expand the field text overlay of the flipcards on the back.
      Also, is there a way to put an image on flipcard front without publishing that image on their associated post?

      Hope this aren't too many questions, Yoga...

      Cheers!

      Delete
    3. Hi antonio,

      1) Not possible. Either you change all of them, or you don't change at all. In any case, this is how you'd do it. Add this to your CSS:

      .flipcard .item .card .front{
      background: red;
      }

      2) Not sure if I'm following. Mind using an actual example, perhaps one from your blog?

      3) Yeap, I happen to know a trick. See the following link:
      http://www.southernspeakers.net/2011/10/change-blogger-dynamic-views-thumbnail.html

      Cheers :)

      Delete
    4. Yoga

      tanks for your reply.

      yes, I think I can use the image trick for the 2 specific [flip]cards and leave the rest as by default. About the second question, what I need is to have the same amount of words(=same words) in front and in the back of the flipcard.


      take a view at www [dot]makearevolution[dot]com

      Feel free to contribute to this "thread"! :)

      tanks for your work
      cheers_

      Delete
    5. Hi Antonio,

      That won't be possible. Right now I can think of a way to make static text appear at the back of all the cards. To duplicate the name of the title and make it appear at the back of each code will take some dynamic tweak, and at the moment we can't do any of it.

      Delete
    6. OK Yoga
      I ended up thinking that it could have a easy way...

      Tank´s for your help !

      cheers :)

      Delete
    7. Hi Yoga

      is it possible to have some predefined number of flipcards distributed horizontally? I mean, for example, 10 flipcards for each row?

      Tanks in advance for all your help and for southernspeakers blog! :)

      Delete
    8. Hi Antonio,

      What a coincident. I'm planning to have a post published on what you've asked some time this week. Just bare with me alright? I'll get it posted tomorrow or Wednesday :)

      Delete
  6. that's very cool Yoga!... I mean, Brilliant!

    Dont´t worry, I will be patient ! :)

    ReplyDelete
  7. i want to remove (Recent, Date, Label, Author) thing... just under the FLIPCARD drop down menu..... how to!!?

    ReplyDelete
    Replies
    1. Hi Sufian,

      To remove them altogether, add this to your CSS:

      .flipcard #controls{
      display: none !important;
      }

      Cheers :)

      Delete
    2. Thanks a lot man!!! this worked for me . Simply, you rock!!

      Delete
    3. Hi Yoga!

      Thanks a lot for your blog, it is the greatest help I found to customize mine!

      However, I did not manage to remove the (Recent, Date, Label, Author) thing from my flipcard. I tried the CSS you gave to Sufian earlier, it did not work. Any idea?

      Thanks in advance! :)

      Cheers,

      Mathilde

      Delete
    4. Hi Mathilde,

      Check if the code is saved, by closing your browser and reopening it. If the code is indeed saved in your blog, you should be able to see the code in your 'Add CSS' box even after restarting your browser.

      Let me know how it goes.

      Cheers :)

      Delete
  8. Hey Yoga,

    I'm back with another question (sorry for bugging you so much). I was able to rename them just fine but I was wondering if there is a way to set one of the labels as the home page. I would like my page to open to Label view instead of recent. Is this possible?

    Thanks a million!

    ReplyDelete
    Replies
    1. Hi Conrad,

      Someone else asked the same question this morning. Unfortunately, it is not possible to set a default landing page for flip card view at the moment.

      Cheers.

      Delete
    2. Ah that's too bad but thanks for looking into it and thanks for all the hard work! You're awesome!

      All the best,
      Conrad

      Delete
  9. hi Yoboy,

    Thanks for all the valuable info provided by you.
    Just curious, is there a way to remove date which shows up on the back of pic (when pic flips) when we take pointer to the pic.
    Thanks in advance.

    ReplyDelete
    Replies
    1. Hi Anon,

      I can think of a way. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      .flipcard .overlay .date{
      display: none !important;
      }

      Cheers :)

      Delete
    2. doesn't work for me :-(

      Delete
    3. What's your blog's address?

      Delete
    4. Hi Yoga,

      Thank's a lot for all these tutos.
      I was going to use your trick to remove the date but I thought it would be nice to display my favicon instead of nothing. I know you are a genious with that, can you help me ?

      And do you know a trick to change the orden of these displays, as "Recent Label Date Autor".

      My blog if you want to have a look at the Favicon:
      http://veronique-machine-recipe.blogspot.fr/?view=flipcard

      Thank you in advance.
      Sorry for my bad English.
      Salut

      Delete
    5. Hi Machinette,

      Just to clarify, did you mean you want to replace your 'date' box with a gif/pic? I could give a try. Could you provide the link to this icon?

      Btw, there isn't a feasible to change the order of the categories, unfortunately.

      Delete
    6. Sorry I did not see your reply before.
      I would like to remove the date which shows on the back of the pic when it flips and show my icon instead of it.
      Well my icon is no more then the letters VK in "URW Chancery L" in bold and in blue, I did not create it but I like it.

      About the categories, I removed out the date category and done.

      Thank you very much for your help, you are very kind.
      Salut

      Delete
    7. Using a custom font is too tricky, but here's how you can get the VK in bold blue:


      .overlay .date{
      font-size: 0px !important;
      }
      .overlay .date:after{
      content: "VK";
      font-size: 14px !important;
      color: blue !important;
      font-weight: 900 !important;
      }

      Delete
    8. Hi Yoga,

      You are wonderfull.
      Thank you very much for your help.
      It's nice to have somebody so helpfull around.

      Thank's again.
      Salut

      Delete
    9. Hi Yoga,

      I finnally added that
      font-family: monotype corsiva !important;
      beetween color and font weight, ir works and it looks just so I desired.
      I changed the size to 20px
      Thank you so much, I'm learning a lot with all your help.
      Thank's
      Salut

      Delete
  10. Hi Yoga,

    How to remove Flipcard groups ? I dont want to see flipcard on my blog.
    I just want to see (Recent, Date, Label, Author) on my blog.

    Thanks u so much

    ReplyDelete
    Replies
    1. Hi Margareth,

      I'm a little confused. Recent, Date, Label and Author are all in Flipcard view. If you remove flipcard from your blog, you won't be able to see the above 4. Or were you referring to a certain text in your blog?

      Delete
  11. Please how I could contering (recent, date. author in label) in flipcard, thank you in advance

    ReplyDelete
    Replies
    1. Hi Tazi,

      Add this to your CSS :)

      #controls{
      text-align: center;
      width: 100% !important;
      }

      #controls ul#groups {
      float: none !important;
      }

      Delete
    2. thanks for the code :')

      Delete
  12. thanks for all these tutorials, great job. On "# groups", it depends on the purpose of the site. in my case I'm choosing quite simply to hide it (not 100% sure...).

    here : http://madeinbrazil.eu

    ReplyDelete
  13. Hi Yoga,

    When In dynamic view,you select the label category, you have the label name all in BLACK.And they don't stand out when i have a darker background. Is it possible to change the colour?

    Many thanks,

    ReplyDelete
    Replies
    1. Hi Selin,

      If you were referring to the Flipcard view, yes, it is possible to change the color. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      .flipcard .group-label span{
      color: white !important;
      }

      Cheers :)

      Delete
    2. Many many thanks Yoga…
      This is an amazing site.. you are helping a lot.. thanks to you we all have super customised blogs! =)

      And is it possible to centre the text behind the flip cards?

      Many thanks

      Delete
    3. H Yoga, I want to remove Date category. Can help to provide me to code? Thanks in advance :)

      Delete
    4. Hi Kalerina,

      Yeap, use the following code:

      .group:nth-child(2){
      display: none !important;
      }

      Cheers :)

      Delete
    5. You are very helpfull,
      I just removed "date".
      thank's for your help.
      Salut

      Delete
  14. Is it also possible to change the font of this label??

    Many many thanks

    ReplyDelete
    Replies
    1. Hi Selin,

      Thanks for your kind words.. As for the text on the back of your flip cards, aren't they centered already by default? I'd be happy to have a look at your blog if this isn't the case..

      And yes, we could change the font as well - although only a group of fonts is supported.. It'd be easier for me to give you a code if you could name a font for me, rather than going on a generic note :)

      Delete
  15. Hi Yoga,

    As centered as was meaning vertically centred also..

    I'm using Josephin Sans in certain part, so that would be great if its possible…

    Many thanks,

    ReplyDelete
  16. Or can it be "permanent marker"?

    thanx very much

    ReplyDelete
    Replies
    1. Hi Selin,

      This should allow you to change the vertical position of the contents on the back of your flipcard:

      .flipcard .back .overlay {
      position: relative;
      top: 8px;
      }

      And this to change the Label's font type to permanent marker:

      .flipcard .group-label span{
      font-family: 'Permanent Marker', cursive !important;
      }

      All the best! :)

      Delete
  17. Hi Yoga,

    My comp crashed so I'm not sure if you got my msg..
    Many thanks for the codes... though I have problem with fitting and stuff - I discovered it was because of 'permanent marker'font..
    so changed it..know it looks great! =)
    Many thanks,


    ReplyDelete
    Replies
    1. Hi Yoga,

      This blog customizing never ends =)))

      My flipcard labels are DATES. They are arranged in alphabetical order. Can I reverse this order .?

      ex: 2011-04 bruges is the first
      2012-07 Bergen is the last label

      I would like to have (2012-07 ) to be the first label, until there is a newer label .

      I hope I was able to express my need..

      Many thanks,
      Selin

      Delete
    2. Hi Selin,

      Unfortunately, there's no way to reverse or alter the post order in any way.. Blogger uses blog feed to fetch posts from your user data. The actual content of the user data itself has never been made transparent, making it impossible to alter the way posts are loaded into a blog..

      Delete
  18. Hi Yoga !

    I'm not sure this is a "real" problem, but since we're all a little bit 'perfectionists', I realize (perhaps wrongly, you'll tell me) that when I rename 'Recent Date Lebel & author' in the Flipcard View, the same change does not occur when I access directly the permalink. I ride on windows7 (arghh. ..) and I tested with the following browsers: chrome, firefox and explore (opera is a disaster for dynamic views!). The same for htc & samsung / android ...

    Note: to change the image of the back of flipcards:

    . flipcard. item. card. {back
    background: url (MY_IMAGE.jpg);
    }

    thx for all !!!

    ReplyDelete
    Replies
    1. Hi Madein BrazilEurope,

      This is a real problem alright - 'too' real to be corrected by us, users. Multiple reports have been sent to Blogger about this issue - where some CSS rules are ignored and overwritten when the direct URL of posts are used. Unfortunately, the matter is still being discussed in the Help Forum (I happened to be the one who escalated the issue) and nothing new has been learned so far. Here's the link to the thread:

      https://productforums.google.com/d/msg/blogger/oCxn3oOQci4/-I5XFhI6Xy0J

      Feel free to pile pressure on Blogger by supporting Rory's course in that thread.. Not too much, just enough to make them do something.. :P

      Delete
  19. Yoga -
    You are a master. You're advice has been a huge blogging help!

    In Flipcard view, can I make the post title (which appears on the back of the flipcard) also appear either over the front image, or underneath as a caption of sorts, so that one does not have to hover over it in order to view the title?

    ReplyDelete
    Replies
    1. Hi Schmendrick,

      Thanks. Unfortunately, there isn't a way to fetch the title from the back of the card since it is defined in a separate div tag.. I'm sorry I couldn't be much more of a help..

      Delete
  20. Thanks for this tutorial, it was so helpful!

    I still have a few things I need to fix with my blog, I'm hoping you could help me?

    http://lindabraouyk.blogspot.ca/

    As you can see where the links were before, a drop shadow still remains, any way to get rid of those lines?

    Secondly, I would like to add some space between my banner and the flips, is that possible?

    Thanks so much!

    ReplyDelete
    Replies
    1. Hi Linda,

      Here, try these. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.


      1) To remove the bottom shadow from your menu bar, use the following code..

      #header .header-drawer, .ss{
      -moz-box-shadow: 0px 0px 0px transparent !important;
      -webkit-box-shadow: 0px 0px 0px transparent !important;
      box-shadow: 0px 0px 0px transparent !important;
      }

      2) To add space between your header and your flipcards, add the following code:

      #main{
      position: relative;
      top: 40px !important;
      }

      Adjust the value 40px accordingly..

      Cheers :)

      Delete
  21. Wow, you have rocked my blogging world! I couldn't find much info online about all of this until I stumbled across your site. Thanks for helping us all out!

    ReplyDelete
    Replies
    1. And I'm glad you find the info here helpful. Appreciate your feedback :)

      Happy weekend Michelle.. Cheers and God bless.. :)

      Delete
  22. I want to separate the post in the recent label by the day they were posted. Is it possible?

    ReplyDelete
    Replies
    1. Hi KP,

      Customisations in Dynamic View are limited to basic cosmetic tweaks only. Any mod that involve restructuring is pretty much impossible. There isn't a way to separate the posts by date at the moment. Let's hope this feature will be available in the future.

      Cheers :)

      Delete
  23. Hi Yoga,
    I'm just new to blogging, and am making a photo blog for a team. I cannot find where I would change the default size of photos in the dynamic view - is it possible to set them to extra large? Thank you for your help,
    KC

    ReplyDelete
    Replies
    1. Hi KC,

      It depends. You can change the image size in Classic view, Sidebar view and post pages (the page that pops up when you click on a post's title) using the tweak below:

      http://www.southernspeakers.net/2010/11/resize-blogger-post-images.html

      But for other views that summarizes your posts (such as Mosaic, Magazine, Flipcard, Timeline and Snapshot), the front page thumbnail image size is pretty much fixed. You can only enlarge your post page pictures (using the method in the walkthrough above).

      Hope this helps. Cheers :)

      Delete
  24. how make the "Label" as a default view from flipcard ??

    thx

    ReplyDelete
    Replies
    1. Unfortunately, we can't set the flipcard-label page as the default view at the moment.

      Delete
  25. heya. i'm having a problem with several of the dynamic views--especially flipcard crashing my browsers... i've had friends test it as well. any hints? esbenquinn365.blogspot.com thanks!

    ReplyDelete
    Replies
    1. Hi EstebanQuinn,

      Checked your blog, can't spot anything out of the ordinary.
      Some DDX questions:

      1) What browser were you using?
      2) What about your friends?
      3) Do you have any add-ons installed in your browser?
      4) Have you tried clearing your cache/cookies?

      Delete
  26. Hi Yoga, how are you ?

    i have 2 questions concerning the flipcard mode and the label.

    1 - When i click on label, i would like to change the color of the text (as you can see here : http://cl.ly/image/2w2U2F3s0Z16)

    2 - I've changed the back of my flipcard, but when i click on label, the flipcards become smaller but not the back. Can i change this ? Or center the back of my flipcard ? (As you can see here : http://cl.ly/image/3e2a1B2z2o1v)

    I hope the pictures can help you. (and me :) )

    Thanks for your help.
    Thomas
    http://www.lespetitsbruits.fr

    ReplyDelete
    Replies
    1. Hi Thomas,

      1) Use the following to change the link color:

      #labels .group-label, #labels .group-label a, #labels .group-label span{
      color: white !important;
      }

      2) It appears the main view and label view are using the same handlers for both cards. As such, we can't change the cards for one view specifically, as inputting any code will affect both views (since the way to address them are the same).

      Cheers :)

      Delete
  27. Hey, I already deleted the dynamic view menu from my template. Now I also want to delete the 'recent, date, lebel, author' menu from my blog, but is doesn't work with the code you gave above. I think it's because the code that removes the dynamic view menu is already in my CSS text frame? I don't use IE, so that's not the problem.

    Thx

    ReplyDelete
    Replies
    1. Let's have a look at your blog. What's your blog's address?

      Delete
    2. http://www.femkebaten.blogspot.nl/

      Delete
    3. Leave the existing code as it is. In addition, add the following code to your 'Add CSS' box:

      #groups{
      display: none !important;
      }

      Cheers :)

      Delete
  28. Hi there, is there any way to remove just one or two categories rather than all of them (as you've explained above)? Great blog by the way!

    ReplyDelete
    Replies
    1. Hi Sven,

      Yeap, it is possible. It will be easier for me to provide the specific code that you need if you could tell which links you wanna hide, rather than going on a generic note :)

      Delete
  29. Wow, fast response! I just want to hide the 'Author' category; my blog is: http://sventaylorpaintings.blogspot.co.uk/

    ReplyDelete
    Replies
    1. Hi Sven,

      Try this:

      .group:last-child{
      display: none !important;
      }

      Cheers :)

      Delete
  30. Perfect!

    Was going to write that it doesn't work, but then realized that the Google Blogger CSS editor is faulty in Google Chrome. ('Apply to Blog' button sometimes doesn't work.)

    Had to go to Microsoft IE to get it working properly.

    ReplyDelete
    Replies
    1. Yeap, it is an outcry. Also won't work with Firefox.

      Delete
  31. Hi Yoga,
    great blog here, lots of quick help!
    I would like to mix things that were mentioned above here..do you think it is possible to hide one of the four submenue categories, rename the rest and connect all three to certain labels? I added three single label gadgets (and can filter them), but I don´t understand how the submenue refers to them (the filter doesn´t work there)? In general, I am trying to work around the same problem Hannah had above.

    Thanks a lot for any help!
    Bernie

    ReplyDelete
    Replies
    1. Hi Bernie,

      Though we can hide any one of the categories and rename the rest, we still can't change the link of these categories - not even singularly. There's just no way to do so - the links are always fixed, we can't alter it.

      Let me know if you wanna proceed with removing one of your categories and rename the rest (let me know which one and the names that you'd like to use). The links of these categories will remain the same.

      Cheers :)

      Delete
    2. Hi Yoga, thanks for the quick answer. I think I hide this bar completly and sort with three or four label gadgets. And someday I´ll maybe understand how to do a multiple search (and not just for one label), but that is probably in another thread?

      Best,
      Bernie

      Delete
    3. Sounds good. Here's what you need to hide the entire bar:

      .flipcard .group{
      display: none !important;
      }

      Cheers :)

      Delete
  32. Hi Yoga,

    I want to hide all the categories except 'Label' how i can achieve this?

    Thanks,
    Logan

    ReplyDelete
    Replies
    1. Hi Logan,

      Use this code instead:

      .group:nth-child(1), .group:nth-child(2), .group:nth-child(4){
      display: none !important;
      }


      Cheers :)

      Delete
  33. Looks like this doesn't quite work anymore, it displays the original label right next to your custom one now. At least it did for me, so I had to remove it from The Review

    www.thereviewonline.info

    ReplyDelete
    Replies
    1. Hi Stephen,

      Thank you for informing. I've updated the code above and it should work again now.

      Cheers..

      Delete
    2. Dude, you are awesome. Thanks a bunch!

      Delete
  34. Hey yoga, you know how the flipcards get smaller under "date" "label" and "author"? Is there any way to make them bigger?
    Also, under "date" "label" and "author", is there any way to change the font (face, color & size) of the categories listed on the left-hand side?

    ReplyDelete
  35. Hello again, I want to hide all the categories and then include a link in the header bar to the "flipcard" view but grouped by labels. Is it possible? I can't find a specific url to the "group by labels" view.

    ReplyDelete
    Replies
    1. Hi jescapism,

      Let's bring these discussions to the forum:
      https://productforums.google.com/forum/#!msg/blogger/QuhpZKW9EYM/xUMChOQ3-xwJ

      I'm more equipped to help you there.

      Delete
  36. Thanks Bro, now I want customize the font of the labels list when we group by Labels. Want to highlight it yo know?

    check it out: legarb.blogspot.com

    ReplyDelete
    Replies
    1. Sure thing. What kind of customisation do you have in mind?

      Cheers :)

      Delete
  37. Hi Yoga -

    Is there a way to switch the Date at Type label? Currently on my blog I have WORK, DATE AND TYPE but would prefer WORK TYPE DATE. It's not the end of the world if I cant switch them but I'm just curious. You can check it out here: www.conradjacob.com

    Thanks!

    ReplyDelete
    Replies
    1. Hi Conrad,

      Sorry for the late reply. I've not given this a try, but do give this a whirl and let me know how it goes:

      #groups > li:nth-of-type(2):after{
      position: relative;
      left: 83px !important;
      }
      #groups > li:nth-of-type(3):after{
      position: relative;
      right: 83px !important;
      }

      Cheers :)

      Delete
    2. You did it! Unbelievable. Appreciate it greatly!

      Delete
  38. Thanks for sharing your wisdom Yogi. I’ve never messed with HTML before, but your tips have really helped. For example, I changed the Nav categories per your instructions, eliminating three and renaming one.

    I thought it worked fine, but now there’s some mystery artifact that appears to overlap my single remaining category —the word ““Categories.” Curiously I see a similar thing happen to the “Y” in your name on your site.

    So, three questions regarding that Nav:

    1. How do I remove that text (or whatever) piece overlapping the “C” in “Categories”?

    2. Is it possible to use more than one word for my one category? I’d like to have it read “View By Category,” but when I put this is in the HTML it became three lines, each word above the next on the site.

    3. Is it possible to remove the box surrounding this text?

    Here's the site:
    http://ericosterhausportfolio.blogspot.com

    Thanks for sharing your mind.

    — Eric

    ReplyDelete
    Replies
    1. That's strange. I don't see anything overlapping your "C", or my "Y".

      This should take care of the rest:

      #groups>li:nth-of-type(3):after{
      content: "View by Category";
      display: block !important;
      position: relative !important;
      top: -30px !important;
      width: 140px !important;
      font-size: 14px;
      }
      #controls ul#groups li{
      border: 0px !important;
      }

      Delete
  39. Thanks Yoga.

    How should I use the code you provided? I tried it instead of my current HTML and then in addition but I couldn’t get it to work either way. The site stayed the same.
    Here's my current code in Add Custom CSS:

    .flipcard .overlay .date{
    display: none !important;
    }
    #controls ul#groups li{
    font-size: 0px;
    }
    .group:nth-child(1){
    display: none !important;
    }
    .group:nth-child(2){
    display: none !important;
    }
    #groups>li:nth-of-type(3):after{
    content: "Categories";
    font-size: 14px;
    }
    .group:nth-child(4){
    display: none !important;
    }
    .header-bar #search{
    display: none !important;
    }
    .header-bar #search{
    display: none !important;
    }

    Regarding the overlapping, it turns out the issue with “C” in “Categories” on my site and the “Y” in “Yoga” happens in Safari for both sites, but not in Chrome or Firefox (on two different Macs). I have screen shots but not sure how to share them with you. but if you know any way to fix that let me know.

    http://ericosterhausportfolio.blogspot.com

    Thanks Yoga.
    Eric

    ReplyDelete
    Replies
    1. Hi Eric,

      You need to insert the CSS code into the 'Add CSS' box, by going to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog. Let me know how it goes.

      Delete
  40. Yoga, I finally got it to work (in both browsers) when I made the changes in Chrome instead of Safari.
    Thanks so much.
    The overlaps are gone, "View By Category" shows up on one line, and the small box surrounding that text does not show up initially, but does upon mouse over and after selecting the type, so if you know any way to fix that let me know.
    Thanks again for all your help — and patience.
    —Eric

    http://ericosterhausportfolio.blogspot.com/

    ReplyDelete
    Replies
    1. Hi Eric,

      Here, give this a try:

      #controls ul#groups li.selected, #controls ul#groups li:hover:not(.selected){
      background-image: none !important;
      box-shadow: none !important;
      }

      Cheers :)

      Delete
  41. thank you a lot :), i just applied it on my blog http://12capture.blogspot.com/
    i want to ask you; is it possible to have the blog description under the blog title instead of being next to it?.

    ReplyDelete
    Replies
    1. Hello rasha,

      See my reply here:

      http://www.southernspeakers.net/2014/01/show-description-text-in-full-in.html?showComment=1390532227095#c4800733287830586321

      Delete
  42. Hey Yoga,
    Thanks for all these awesome tips around here... and for being so responsive, your comments are at least as informative as main articles !

    I was wondering if you would know a way to center the "Recent, Date, Label, Author" ?
    And also if you have found a way to get rid of the outline around posts in flipcards ?

    This is the blog I am trying to apply this to:
    spotabike.blogspot.com

    Thanks a lot for everything !

    ReplyDelete
    Replies
    1. I thought I had covered that in the past, but I hadn't. I've just published a post on this:
      http://www.southernspeakers.net/2014/08/centering-recent-date-label-author-in.html

      As for the border, were you referring to the border of the cards? Coz I'm not sure I'm seeing any outline around the post box.

      Delete
  43. Dear sir
    i'm testing the blogger use on my http://testsadun.blogspot.com
    when i edit the following css
    \\\\remove li
    #groups li:nth-child(1),
    #groups li:nth-child(2),
    #groups li:nth-child(4)
    {
    display: none !important;
    }
    \\\\rename li
    #groups li:nth-child(1), #groups li:nth-child(2), #groups li:nth-child(3), #groups li:nth-child(4){
    font-size: 0px;
    }
    #groups>li:nth-of-type(1):after{
    content: "NEW";
    font-size: 14px;
    }
    #groups>li:nth-of-type(3):after{
    content: "TAGS";
    font-size: 14px;
    }
    i do not get what i need
    in error plz help me sir

    ReplyDelete
    Replies
    1. Hello Testadun,

      Sorry for the late reply. Could you briefly put me through the result you're trying to go for?

      Delete

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