|
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!
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...
ReplyDeleteHi Almeda,
DeleteOh 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! :)
oh thank you so much for that! you're such a genius :)
DeleteNay bother :)
Deletethanks buddy!!
DeleteNo biggie mate :)
Deletehey ho...
ReplyDeletefirst 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
Hi Katja,
DeleteDon'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! :)
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).
ReplyDeleteHi Hannah,
DeleteI 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.. :)
From trail and error, I believe they are sorted on alphabetical basis.... so by the label that comes first alphabetically.... ANNOYING
DeleteGonna play with symbols to try and alter this
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 ...
DeleteCool, nice.. :)
DeleteHi Yoga!
ReplyDeletebrilliant you help to Blogger HTML5!
Is it possible to remove all this sub-categories from view?
Tank´s in advance for your help.
Hi antonio,
DeleteOh 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 :)
Excellent. Thanks so much Yoga, your tips and tricks have helped me tremendously. Thank you for being so generous in sharing these techy solutions
DeleteHi Julia,
DeleteI'm happy to be of help. Thanks for dropping some words here.
Cheers :)
Hi, Yoga!
DeleteI 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
Hi again,
DeleteSorry 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.
Hi Nata,
DeleteSometimes 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).
OK, I undestood the thing about the questions in comments :)
DeleteSince 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!
you are an alchemist Yoga!
ReplyDeleteBy 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!
Hi Antonio,
DeleteWe 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~
Hi Yoga,
Deletetanks 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!
Hi antonio,
Delete1) 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 :)
Yoga
Deletetanks 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_
Hi Antonio,
DeleteThat 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.
OK Yoga
DeleteI ended up thinking that it could have a easy way...
Tank´s for your help !
cheers :)
Hi Yoga
Deleteis 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! :)
Hi Antonio,
DeleteWhat 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 :)
that's very cool Yoga!... I mean, Brilliant!
ReplyDeleteDont´t worry, I will be patient ! :)
i want to remove (Recent, Date, Label, Author) thing... just under the FLIPCARD drop down menu..... how to!!?
ReplyDeleteHi Sufian,
DeleteTo remove them altogether, add this to your CSS:
.flipcard #controls{
display: none !important;
}
Cheers :)
Thanks a lot man!!! this worked for me . Simply, you rock!!
DeleteThanks buddy :)
DeleteHi Yoga!
DeleteThanks 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
Hi Mathilde,
DeleteCheck 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 :)
Hey Yoga,
ReplyDeleteI'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!
Hi Conrad,
DeleteSomeone 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.
Ah that's too bad but thanks for looking into it and thanks for all the hard work! You're awesome!
DeleteAll the best,
Conrad
No prob Conrad :)
Deletehi Yoboy,
ReplyDeleteThanks 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.
Hi Anon,
DeleteI 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 :)
doesn't work for me :-(
DeleteWhat's your blog's address?
DeleteHi Yoga,
DeleteThank'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
Hi Machinette,
DeleteJust 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.
Sorry I did not see your reply before.
DeleteI 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
Using a custom font is too tricky, but here's how you can get the VK in bold blue:
Delete.overlay .date{
font-size: 0px !important;
}
.overlay .date:after{
content: "VK";
font-size: 14px !important;
color: blue !important;
font-weight: 900 !important;
}
Hi Yoga,
DeleteYou are wonderfull.
Thank you very much for your help.
It's nice to have somebody so helpfull around.
Thank's again.
Salut
Hi Yoga,
DeleteI 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
Hi Yoga,
ReplyDeleteHow 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
Hi Margareth,
DeleteI'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?
Please how I could contering (recent, date. author in label) in flipcard, thank you in advance
ReplyDeleteHi Tazi,
DeleteAdd this to your CSS :)
#controls{
text-align: center;
width: 100% !important;
}
#controls ul#groups {
float: none !important;
}
thanks for the code :')
Deletethanks 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...).
ReplyDeletehere : http://madeinbrazil.eu
That could work as well :)
DeleteHi Yoga,
ReplyDeleteWhen 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,
Hi Selin,
DeleteIf 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 :)
Many many thanks Yoga…
DeleteThis 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
H Yoga, I want to remove Date category. Can help to provide me to code? Thanks in advance :)
DeleteHi Kalerina,
DeleteYeap, use the following code:
.group:nth-child(2){
display: none !important;
}
Cheers :)
You are very helpfull,
DeleteI just removed "date".
thank's for your help.
Salut
Is it also possible to change the font of this label??
ReplyDeleteMany many thanks
Hi Selin,
DeleteThanks 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 :)
Hi Yoga,
ReplyDeleteAs 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,
Or can it be "permanent marker"?
ReplyDeletethanx very much
Hi Selin,
DeleteThis 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! :)
Hi Yoga,
ReplyDeleteMy 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,
Excellent! :)
DeleteHi Yoga,
DeleteThis 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
Hi Selin,
DeleteUnfortunately, 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..
Hi Yoga !
ReplyDeleteI'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 !!!
Hi Madein BrazilEurope,
DeleteThis 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
Yoga -
ReplyDeleteYou 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?
Hi Schmendrick,
DeleteThanks. 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..
Thanks for this tutorial, it was so helpful!
ReplyDeleteI 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!
Hi Linda,
DeleteHere, 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 :)
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!
ReplyDeleteAnd I'm glad you find the info here helpful. Appreciate your feedback :)
DeleteHappy weekend Michelle.. Cheers and God bless.. :)
I want to separate the post in the recent label by the day they were posted. Is it possible?
ReplyDeleteHi KP,
DeleteCustomisations 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 :)
Hi Yoga,
ReplyDeleteI'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
Hi KC,
DeleteIt 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 :)
how make the "Label" as a default view from flipcard ??
ReplyDeletethx
Unfortunately, we can't set the flipcard-label page as the default view at the moment.
Deleteheya. 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!
ReplyDeleteHi EstebanQuinn,
DeleteChecked 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?
Hi Yoga, how are you ?
ReplyDeletei 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
Hi Thomas,
Delete1) 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 :)
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.
ReplyDeleteThx
Let's have a look at your blog. What's your blog's address?
Deletehttp://www.femkebaten.blogspot.nl/
DeleteLeave the existing code as it is. In addition, add the following code to your 'Add CSS' box:
Delete#groups{
display: none !important;
}
Cheers :)
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!
ReplyDeleteHi Sven,
DeleteYeap, 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 :)
It worked!Thx! :)
ReplyDeleteWow, fast response! I just want to hide the 'Author' category; my blog is: http://sventaylorpaintings.blogspot.co.uk/
ReplyDeleteHi Sven,
DeleteTry this:
.group:last-child{
display: none !important;
}
Cheers :)
Perfect!
ReplyDeleteWas 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.
Yeap, it is an outcry. Also won't work with Firefox.
DeleteHi Yoga,
ReplyDeletegreat 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
Hi Bernie,
DeleteThough 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 :)
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?
DeleteBest,
Bernie
Sounds good. Here's what you need to hide the entire bar:
Delete.flipcard .group{
display: none !important;
}
Cheers :)
Hi Yoga,
ReplyDeleteI want to hide all the categories except 'Label' how i can achieve this?
Thanks,
Logan
Hi Logan,
DeleteUse this code instead:
.group:nth-child(1), .group:nth-child(2), .group:nth-child(4){
display: none !important;
}
Cheers :)
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
ReplyDeletewww.thereviewonline.info
Hi Stephen,
DeleteThank you for informing. I've updated the code above and it should work again now.
Cheers..
Dude, you are awesome. Thanks a bunch!
DeleteHey yoga, you know how the flipcards get smaller under "date" "label" and "author"? Is there any way to make them bigger?
ReplyDeleteAlso, 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?
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.
ReplyDeleteHi jescapism,
DeleteLet'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.
Thanks Bro, now I want customize the font of the labels list when we group by Labels. Want to highlight it yo know?
ReplyDeletecheck it out: legarb.blogspot.com
Sure thing. What kind of customisation do you have in mind?
DeleteCheers :)
Hi Yoga -
ReplyDeleteIs 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!
Hi Conrad,
DeleteSorry 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 :)
You did it! Unbelievable. Appreciate it greatly!
DeleteExcellent! :D
DeleteThanks 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.
ReplyDeleteI 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
That's strange. I don't see anything overlapping your "C", or my "Y".
DeleteThis 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;
}
Thanks Yoga.
ReplyDeleteHow 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
Hi Eric,
DeleteYou 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.
Yoga, I finally got it to work (in both browsers) when I made the changes in Chrome instead of Safari.
ReplyDeleteThanks 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/
Hi Eric,
DeleteHere, 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 :)
thank you a lot :), i just applied it on my blog http://12capture.blogspot.com/
ReplyDeletei want to ask you; is it possible to have the blog description under the blog title instead of being next to it?.
Hello rasha,
DeleteSee my reply here:
http://www.southernspeakers.net/2014/01/show-description-text-in-full-in.html?showComment=1390532227095#c4800733287830586321
Hey Yoga,
ReplyDeleteThanks 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 !
I thought I had covered that in the past, but I hadn't. I've just published a post on this:
Deletehttp://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.
thanks very nice site
ReplyDeleteDear sir
ReplyDeletei'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
Hello Testadun,
DeleteSorry for the late reply. Could you briefly put me through the result you're trying to go for?