Friday, 21 August 2015

How To Retrieve Lost Custom CSS on Blogger/Blogspot

A few days ago, the lovely Ella from Once Upon a Bookish Time contacted me in regards to an issue with her Blogger CSS. The problem? It had gone poof. Completely vanished from her CSS area of Blogger design, and yet, her blog hadn't changed in its look, it had just gone for a wander and never returned. Understandably, Ella was pretty concerned as to a) where the heck her CSS had vanished to, b) why it had vanished in the first place, and c) how she'd get her CSS back without having to go hunting for it all again. Luckily, I had the answer.

Once the problem was solved, I realised the other way I knew of my method was because it has happened to me, and therefore the chances are, other Blogger users had suffered the same fate, and may or may not have been as lucky as myself and Ella where to rescue and reinstate our custom CSS. With permission from Ella, I've decided the share my method of retrieving lost CSS in the hope of helping others too.

First Things First, Back Up Your Template!

You may have lost your CSS in the Advance area option of your design, but I promise you, as long as your blog looks no different, your CSS coding is still easily retrievable, therefore backing up your template is a big must. In fact, it's a great habit to get into backing up your template before making any major changes to your design, or better still, keeping a copy of your HTML code in word document instead of or as well as so you're super duper safe your blog isn't going anywhere.

Once you've got your blog backed up, go into the Template section on the left sidebar and hit the 'HTML' option next to 'Customise'. This will show you your entire blog in code format. Once again, do not panic, it will seem daunting and a little scary, but finding the CSS code you've misplaced will be as easy as pie with the following steps. Each step comes with a print screened imaged to help along the way, so there's nothing that shouldn't be easy to follow.

Step One: Navigating Your HTML

When you've opened your 'Edit HTML' option, press Ctrl and F on your keyboard to be given the search option throughout your HTML on the right hand side of your screen. Search for the following code in the search bar.

.mobile .tabs-inner .PageList .widget-content .pagelist-arrow.

Your code should be like the code featured above, but if your search is unsuccessful, try clicking on the option that opens 'Variable Definitions' and scroll through until you hit what looks like custom CSS. Then scroll slowly back up until you find a code that looks similar to the code highlighted.

Step Two: Locating The CSS

Once you've located the code above or similar, look for } which should be on it's own line just below the code highlighted. Once located, highlight the code that follows after the } until you find ]]></b:skin>. Everything between } and ]]></b:skin> is your CSS that you've lost. Once highlighted, (and don't panic!) cut it from your HTML. Make sure you copy it all into a word document, or something you can easily come to copy it from.

Step Three: Adding The CSS

Save Your Template with the code cut from your HTML. Once saved, click on Template in the sidebar and click 'Customise'. (Don't worry about the preview looking different than your blog, this will be fixed in a moment). Once you've got the customising options, go to 'Advanced' where you enter your CSS and copy in the code you've just cut from your HTML and put into a word document. Your blog should now look like it did previously, and now have all the CSS in the CSS option box. Make sure it looks like your blog did previously before clicking Apply, as you'll have further issues if you save something you don't like.

Step Four (Optional): Keep Copies of Your CSS

Although this is not a required step, I always recommend having your custom CSS saved in a word document so it's easily accessible should anything like this happen in the future. By having this code to hand, it saves problems like this happening again, and saves you having to worry about going into your HTML section in order to recover it in future.

But Amanda, Why Does Blogger CSS Disappear in the First Place?

Sadly, as good as a free platform Blogger is, it's not without it's issues, some of which I've beared the grunt of many a time, and losing my CSS has been one of those issues. It's true that in life, you get nothing for free, and I believe it's the same with blogging, if you ask for free, there will be issues. The best thing to do is the back up your blog regularly, keep copies of your CSS or any custom coding you've made to your blog, and even keep copies of your HTML coding in order to make doubly sure you're ready should anything happen.

Have You Ever Lost Your Custom CSS? What Did You Do?


  1. Thank you again SO SO SO SO much, Amanda!! :)) I don't know what I would've done without your kind help! *sighs in relief* <33

    1. You're welcome Ella, I'm glad you came and asked for help, and I'm glad I could help!x

  2. Posts like this are always so helpful, Amanda! Especially for people like me who are totally clueless. As always, thanks for sharing tips with us! <3

    1. Thanks Lisa! I think it's the little things that make blogging better for me, and it's the little tips I can give that will help others along the way, makes me pleased :)

  3. Okay. Now I am worried. 1. What is CSS and where do I find it in my settings and if it goes missing?!?! 2. How do I backup my blog?!?! AHHHHH! HOW AM I STILL THIS CLUELESS ABOUT ALL THINGS!!! >.<

    1. CSS stands for Cascading Style Sheet and is basically the coding that goes on behind the scenes that make your blog do things it normally wouldn't and look differently than it originally does. Finding the CSS is pretty easy. Remember when you created your own blockquote designs and you inserted the code into the 'Advance' area of your 'Customise' option, found by going onto 'Template' in your sidebar? Any CSS you enter into your blog is stored there, unless, in Ella's case, it goes poof.

      If it does go poof, you just need to follow these instructions and you'll get all your CSS back. In your case, with your blog design having been done by somebody else, it's possible your CSS is all stored in your template already, like in Step Two and Three, so you shouldn't panic if it's not in your Advance section. This is probably something that's worth asking Evie about, just as to where it's located should anything go wrong, which lets me be honest, it's very unlikely to happen, so don't panic.

      Backing up your blog is the easiest thing to do in this post. Go onto your 'Settings' option in left sidebar, then go to 'Other'. At the top with 'Blog Tools' you'll see three options; 'Import', 'Export' and 'Delete Blog'. What you want to do is click 'Export' and then follow the on screen prompts (if there is any). You should then start downloading your blog into your computer, which creates a backup for you if your blog ever has problems. It saves all your content, your design, everything!

      Hope that's all been helpful? Anything else, just give me a message! :)

  4. Thanks!!! You saved my day :D

  5. Thanks Amanda.
    It just happen after I compress 'the skin' content using online html/css compressor.

  6. Set aside the temple of Firefox and the Anti-Internet Explorer camp. Firefox has its issues, as does Chrome, Safari, Opera, or any browser you pick up. None of them are perfect and you'll need to consider each one separately when coding.

    web designing training in chennai

  7. Given so much info in it, These type of articles keeps the users interest in the website, and keep on sharing more ..Best PHP Training in Chennai|PHP Training in Chennai

  8. Thank u so much Amanda...!!!

  9. This is such a great resource that you are providing and give it away for free. I love seeing blog that understand the value of providing a quality resource for free.

    HTML basics for SEO

  10. AngularJS is a toolset for building the framework most suited to your application development. It is fully extensible and works well with other libraries. Every feature can be modified or replaced to suit your unique development workflow and feature needs. Read on to find out how.

    AngularJS Training in Chennai

  11. Retrieve custom css code in blogger i am listening this first time. I have more than 5 blogs, in future if i lost any custom css code i will apply your method. Thanks for the great sharing.

  12. Really it was an awesome article...very interesting to read..You have provided an nice article....Thanks for sharing..
    Android Training in Chennai
    Ios Training in Chennai

  13. How essentially you Solve your Backup and Recovery Issue with Oracle through Cognegic's Exchange Database Recovery?
    At whatever point people generally talking about fortification of Oracle they for the most part slant toward physical support where they can simply restore it to a machine running the right adjustment of Oracle from the support. Regardless, you can in like manner keep running with sound support by using the charge utility to take the fortification and recovery of your Oracle Database. In any case, if still you have any issue regarding fortification and recovery by then rapidly contact to Cognegic's DB Recovery Support or DB Recovery Services. Our Backup Recovery Solution is exceptionally basic and advance.
    For More Info:
    Contact Number: 1-800-450-8670
    Email Address-
    Company’s Address- 507 Copper Square Drive Bethel Connecticut (USA) 06801

  14. I feel really happy to have seen your webpage and look forward to so many more entertaining times reading here. Thanks once more for all the details.
    White Label Website Builder

  15. Good article for beginners how to use css.thank you.
    web programming tutorial

  16. nice post

  17. I am so happy to see your web page about retrieving lost custom css chat room template html on blogger templates. It was definitely a good blog for the beginners and you have specified everything clearly here. The step by step description really helps people like me a lot.Expecting more updates from here.

  18. I accept there are numerous more pleasurable open doors ahead for people that took a gander at your site.we are providing ReactJs training in Chennai.
    For more details: ReactJs training in Velachery | ReactJs training in chennai

  19. Thanks for the good words! Really appreciated. Great post. I’ve been commenting a lot on a few blogs recently, but I hadn’t thought about my approach until you brought it up. 
    Java training in Chennai

    Java training in Bangalore

  20. I appreciate that you produced this wonderful article to help us get more knowledge about this topic.
    I know, it is not an easy task to write such a big article in one day, I've tried that and I've failed. But, here you are, trying the big task and finishing it off and getting good comments and ratings. That is one hell of a job done!

    Selenium training in bangalore
    Selenium training in Chennai
    Selenium training in Bangalore
    Selenium training in Pune
    Selenium Online training

  21. Thanks for sharing this great article. It made me understand few things about this concept which I never knew before. Keep posting such great articles so that I gain from it. Java Training in Chennai | J2EE Training in Chennai | Advanced Java Training in Chennai | Core Java Training in Chennai | Java Training institute in Chennai

  22. Nice post, you provided a valuable information, keep going.

    Prestashop ecommerce development company chennai

  23. TCA, being an online setup, resolves this concern of such aspirants and plays a critical role in saving time, money and energy costs of the aspirants.We are proud to win the trust of hundreds of students with our effectual strategies and powerful mechanism. You can come and join us as TCA Online is surely your gateway to bureaucracy.whatsapp call for
    more info +923133319144

    Online CSS Academy,

    Online CSS Institute,

    Online CSS Preparation,

    Best CSS Academy,

    Best Online CSS Academy in Pakistan,

    Best CSS Academy in Pakistan,

    Best CSS Academy in Islamabad,

    Best CSS Academy in Lahore,

    Best CSS Academy in Karachi,

    Best CSS Academy in Peshawar,

    GK MCQs

  24. Really very happy to say, your post is very interesting to read. I never stop myself to say something about it. You’re doing a great job. Keep it up…

    Softgen Infotech is the Best HADOOP Training located in BTM Layout, Bangalore providing quality training with Realtime Trainers and 100% Job Assistance.

  25. Great post!I am actually getting ready to across this information,i am very happy to this commands.Also great blog here with all of the valuable information you have.Well done,its a great knowledge.

    sap abap training in bangalore

    sap abap courses in bangalore

    sap abap classes in bangalore

    sap abap course syllabus

    best sap abap training

    sap abap training center

    sap abap training institute in bangalore

  26. Effective blog with a lot of information. I just Shared you the link below for Courses .They really provide good level of training and Placement,I just Had HTML Classes in this institute,Just Check This Link You can get it more information about the HTML course.

    Java training in chennai | Java training in annanagar | Java training in omr | Java training in porur | Java training in tambaram | Java training in velachery

  27. Thankful bunch for sharing this blog. It contains valuable information regarding website builder
    white label website builder
    private label website builder
    website builder for resellers

  28. I love the Bulletin with the End and the Thumbnail. You said the supermarket will not work with a tweaked version ... here is my blog blogger's excellent article however I did make some minor modifications. Do you know if it will work?
    Bluehost shared hosting