Forum Settings
Must be a Club Member to Reply 
Jul 8, 2016 4:20 PM

Joined: Feb 2010
Posts: 5955
This tutorial is part of our Premade Modern Layouts section:

These are premade maps of the Modern style CSS. Thanks Doomcat55 for the help with mapping!

How to use for finding codes and making original layouts
For example, right click the mapped layout in Firefox and choose Inspect Element. Then use the tool on the upper left and highlight the section you want the code for. It will come up in the Inspect Element tool with the Visibility: visible code in the default map or a color in the colored version.


This first mapped layout is mainly intended for people making original layouts or searching for a particular code. It doesn't seem to change anything, but it adds visibility:visible to each part of your layout. As in the screenshot, you add the mapped version to your CSS edit box and then using the Inspect Element tool (the easiest version is in Firefox), you can select a part of your layout to find codes and customize specific parts of your layouts easily. See the Inspect Element video for more help on this.

It can be combined with most layouts and shouldn't interfere with your CSS!


Here's a separate color mapped version. Use this when you still need to separate all the sections of your list by color.

For more detailed help, use this with the Inspect Element guide:

Modified by Shishio-kun, Jun 15, 8:33 PM
Jun 13, 4:55 PM

Joined: Feb 2010
Posts: 5955
The fully mapped layout in the first post has been vastly updated to include more sections so it'll be real easy to customize and find individual buttons and sections.
Jun 15, 2:53 PM

Joined: Feb 2010
Posts: 5955
I added another map to the top for users designing layouts, this one doesn't use color and can be added to most any CSS. It makes finding particular selector codes easy!