Disabling CSS for screenshots, and making a separate file for the CSS

This guide will cover two requirements for the final exam. These requirements are there so cencors can get a better impression fot the work you have done altering your chosen WordPress theme with CSS. Since you can choose any WordPress theme and because of the enormous amount of available wordpress themes it is very hard for cencors to determine if the site is the result of your own work or simply using a wordpress theme. Here is how you document the CSS work you have done.

FIrst you need to disable all your CSS so you can take a screenshot of site with none of your CSS active. Therea re two ways of doing this, I will show the easiest way first. This way will not work if you have used comments in your CSS. In CSS the way to make comments is the standard way to make a block comment in most programming languages.

Disabling CSS by using comments

/*
Slash and star starts the comment, the opposite ends it at the bottom

Everything inside the comment markers is a comment. This can also be used to disable code.

Star slash ends the comment
*/

So by using the comment markers above you can disable your entire CSS code by putting slash star in front of it and star slash at the end, BUT if you have any other comments inside your CSS the comment will stop being a comment as soon as it meets a */. So you can either delete all you comments, or try the following:

Disabling CSS by copying all the text to a separate document.

This is also pretty easy, but it is important not to mess it up so I will describe a few extra precautions for not losing all your CSS. This mostly covers the part of making a separate document of your CSS, but it is also closely related with disabling your CSS so this section will cover both.

Step one is to save your CSS in a separate document before you remove it from your site for the screenshot. Go to your CSS panel in WordPress, click inside the panel and press Ctrl + A (Win) or Cmd + A (Mac) to mark all the CSS, then click Ctrl + C (Win) or Cmd + C (Mac) to copy it to your clipboard. Open up a code editor such as brackets, notepad or visual studio code. Make a empty document and then paste all your CSS inside this empty document and save it as a .css ot .txt file. Keep this file and hand it in with your exam assignment. If you make further CSS adjustments you should update this file with your lates CSS changes.

Before you remove all you CSS from wordpress for the screenshot, make sure you have everything from the CSS. It is a good idea to looke closely at the start and end of the CSS in wordpress and in your code editor to see that it matches. You can also check the line numbers on the left and see that it matches. If you want to be extra careful you can compare your text edotr CSS with your wordpress CSS usin a diff tool such as diffchecker. To use diffchecker copy all CSS from wordpress, paste it into the left window on diffchecker and then do the same woth the code editor CSS to the right diffchecker window and click ‘compare’. Diffchecker will then highlight any differences.

Once you are sure your code editor CSS is complete and identical to what is in WordPress make sure you save it. Once that is complete you can simply delete all the CSS in WordPress, click publish and take your screenshot. When you are done you simply paste the CSS back.

Good luck!