Editing styles

Editing styles at your website should not be difficult.

Also, if you acquire experience in doing this, you will soon have complete control over the layout and appearance of your website.

Software applications are available which help you when editing styles, without putting your live website pages at any risk of being accidentally changed in ways that were unintended.

When using the application suggested below, you will be able to pre-view the changes made to each individual style, live within a browser window.

You can then continue to change and adjust the styles live on screen until the page displays exactly as you want it to display.

The advantage of editing styles as described below, is that you can experiment with different effects and features to obtain the desired results, without risking damaging the appearance of your live website.

The ability to freely experiment without risking damaging the appearance of your live website, is essential to achieving high quality visual designs and layouts.

If you apply an effect to a style and it does not work, you can simply undo the latest edits and revert to the previous version.

Also, when editing styles, you can if you wish save a copy of the edited styles to your local hard drive to avoid accidentally losing any of the edits that you may wish to retain for possible future use.

You can later re-open the saved styles document, and copy the required style selector and declaration into the editing application styles window, and then continue to edit the style.

To access and install the recommended application in either the Firefox or Chrome browser, visit the website at http://chrispederick.com/work/web-developer/

Once the application has downloaded from Chris Pedericks' website and is installed into your browser, access your website using that browser and activate the CSS edit feature by clicking the relevant button displayed in the browser toolbar.

You will be shown two windows within the browser. One window displays the live web page, while the other window displays an editable copy of the website's style sheet.

As you edit the styles in the style sheet window, the viewed page will update to visually display the results of that editing.

Editing the displayed styles, does not update the style sheet at your website, and no one other than you can see the results of the changes you make.

What does happen is that a local copy of the style sheet, which exists only within the browser is updated, and the changes are applied only to the version of the website page displayed in the browser window.

To view the effects of the changes made within the style sheet on a different page at your website, do the following.

First, click within the style sheet window, then Select All and copy the style sheet contents to the clipboard. Then navigate to another page at your website. Click again within the style sheet window and Select All, then paste the style sheet contents from the clipboard into the style sheet window.

The new page will then display with the revised styles displayed.

Once you have finished editing your website styles, you can save the edits to your local hard drive. You can then apply the edited styles to your BB2 website through the Custom CSS Styles window.

You could potentially upload the edited style sheet to your website. Although, when using Solo Build It's BB2 editor, the best procedure is to copy the edited style selector and declaration from the style sheet that you have just edited, and paste those into the Custom CSS window within Site Designer.

Within Site Designer, check that everything displays the way you intended. Then once all is OK, click Save. Next, check your website live within different browsers to ensure that the style changes are workings as intended.

If anthing about the style is not displaying as intended, return to the Custom CSS window in Site designer and make appropriate changes to the style.

Alternatively, delete the style(s) you added in the Custom CSS window, and save those changes to revert your live website pages to the previous arrangement.

Then, go back to viewing the page in the browser window and editing styles within the CSS styles editing application until you obtain the results you want.

Return to the top of the editing styles page.

Return to the website styles page

Article by ©