How To Use FE CSS Builder

FE CSS Builder is quite a simple tool and takes very little time to get comfortable with. The following steps are all you need to know to start styling your theme:

Step 1: Once you've activated the FE CSS Builder Plugin you should see a paintbrush icon tab on the front-end of your site at the top-left of your browser. Click that icon to open the FE CSS Builder tool.

This will pop-up the FE CSS Builder box on the center of your screen.

Step 2: Next, click the element selectors icon to enable the element selector buttons.

Step 3: Select an element to style by clicking the appropriate element selector icon .

Step 4: Use the provided drop-down menu to select an element to style.

When you hover over element names in the drop-down menu the appropriate element on the page will be highlighted in green.

Step 5: Click the icon to have FE CSS Builder write the CSS code for editing.

FE CSS Builder will write the appropriate code for you, placing the cursor inside the brackets for styling.

Step 6: Select the appropriate menu section to begin styling your element.

Use the provided menu items to begin writing your CSS code.

Step 7: Click the Builder buttons to have FE CSS Builder write the code for you.

Each line of code written by FE CSS Builder will result in the cursor being properly placed on the next line ready for more lines to be written.

Your style changes are visible through your browser in real-time. ( Note that only you see these changes until they are saved to the custom CSS solution of your choice.)

Step 8: Click the “Copy To Clipboard” button to copy your code. (Note that any extra lines added by FE CSS Builder will be cleaned up during this action.)

Step 9: When you see the “Copied!” text you will be ready to paste your copied to to your custom CSS solution of choice to make your style changes permanent.