Using Developer Tools

This article will details how to use developer tools inside your browser to allow for further customization of your web page. In this tutorial we have used Google Chrome, but this can also be done in Firefox & Safari.

Please note that HTML / CSS experience is recommended when using developer tools.

Stage 1

We will be using the Cookie Notifications widget to demo this feature today. Make sure that you have this, or any other widget that you want to modify on your canvas.

Stage 2

Preview your page in browser so that you can see the widget being displayed on the webpage.

Stage 3

Right click on your webpage and select 'Inspect Element.'

Stage 4

The developer panel will look like this. Select the small magnifying glass displayed in the top left hand corner of the developer window.

Stage 5

Click on the Cookie Notification bar at the top of the page. If you are using a different widget then select the part of the widget that you want to modify using the Magnifying Glass.

Stage 6

In this example we will modify the height of the bar - an option which is not available from the Options panel. To change the height, add the height attribute into the CSS on the sidebar, in this example we have set the height to 50px.

Stage 7

Once inserted you will notice that the height of the Cookie Notification bar changes to 50px.

Stage 8

To implement this into Muse, highlight the complete CSS block that you have been working on.

Stage 9

In Muse, go to Object > Insert HTML.

Stage 10

In the box that appears, first add the Style tags; without these your code will not be implemented. Your pasted material should appear between the two <style> </style> tags. Only the 'height: 50px;' attribute is needed between these two tags as the other elements are already being defined by the widget. You can keep the whole block of code if you wish or take it out like shown below.

Completed!

When you preview your page in browser the 50px height will now become a permanent attribute of the widget.