How to Grab CSS Elements from Other Profiles using Inspect Element in Spacehey

This is a very short blogpost showing how you can use the Inspect feature in your browser to easily find and use CSS from other people's profiles on your Spacehey page. I recommend using Firefox, or a Firefox-based browser, as the Inspect function in Firefox is much better in comparison to Chromium-based browsers or Microsoft browsers. This post is targeted towards Firefox users, but I should imagine it is not too difficult to do the same on non-Firefox browsers.

Step 1: Finding an element to grab

So to start, find an element off of a person's profile that you would like to use on your profile.

For example: lets use the CRT filter from my own profile.

Now to find that, find the element on screen and click "Inspect".

Inspect an element by clicking "Inspect".

Step 2: Find the element in the Style Editor

So to find the CSS, once you have successfully inspected the element (the HTML you inspected should now be selected) you will need to find the first inline style sheet that this HTML has been used in.

First, now that you are in Inspect mode, you will need to find the "Filter Styles" area near the bottom of the page.

Once you have found that, then click on the first inline style sheet that you see. To do so, go to the right of the first element, and if it has a format of inline:x then click, and it will redirect you to the Style Editor.

Do note that it has to be exactly inline:x, not just "inline" or any other CSS style sheet.

The "Filter Styles" section. ^ This specific bit is for the CRT element on this page.

Step 3: Copy the CSS!

So once you are in the Style Editor, the inline should take you to the exact CSS that that HTML element uses. In this case, the element is html::before. Also note that whilst you can use the CSS fragment seen in the Filter Styles area, it is more appropriate to use the Style Editor as it allows you to see exactly how the CSS is laid out in the profile, meaning that if it requires other parts of the CSS in the style sheet, they can easily be scrolled down and looked at, rather than having to find more HTML elements.

Now, all you need to do is copy the CSS fragment in the style sheet using Ctrl+C, and then Ctrl+V to paste it in your own profile.

Do note that if the element has a ::before tag, then it may conflict with other ::before elements in your profile's style sheet - to avoid this, use a <div> with a separate stylesheet within, then take out the ::before tag and paste the code in there. Make sure the CSS is assigned the div class: so if the class is <div class="myclass">, then to assign the CSS use .myclass {} where the CSS code is in the brackets.

The same CSS section in the Style Editor. ^

Conclusion:

Your profile should now have my CRT image laid over the top of it, if you have followed the example and this post correctly.

If you have any issues, leave them in the comments at the bottom of this post.

CRT border should look similar to this. ^