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?

14 comments:

  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

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

      Delete
  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

    ReplyDelete
    Replies
    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 :)

      Delete
  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!!! >.<

    ReplyDelete
    Replies
    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! :)

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

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

    ReplyDelete
  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

    ReplyDelete
  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

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

    ReplyDelete
  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

    ReplyDelete