Live CSS Stylesheet Editing

Sometimes we may have a small style change we want to try for our live website, it would be nice if this could be done without editing the stylesheet, saving, adjusting, saving again, and forgetting what the values were before we started.

Well there is a non-destructive way we can test our changes, without changing a single line in our stylesheet, without having to edit or upload our changes.

FireFox and FireBug

If we don’t already have the FireFox browser then we can install it, once we have it installed we can Get fireBug, now we have the Add-On installed we can edit our stylesheet in a live non destructive way.

CSS Live Edit

All we are going to do here is to show in images how we can do a live style edit to any website, we will use this website and just as an example change the title size and colour.

Step 1

First we use FireFox and go to the page we want to test our new style on.

live-edit-1

Step 2

To open FireBug in a new Window, press Ctrl+F12, this will bring up FireBug, select the title and right mouse click and “Inspect Element in FireBug”

In the image the title is highlighted and the style is shown in the Style panel on the right.

live-edit-2

Step 3

Choose the CSS menu item and click on edit and the stylesheet, if there is a dropdown option for the CSS choose the style.css file.

live-edit-3

 

Step 4

In the Live Edit panel go to the last line Ctrl+End this is where we will do our test style changes.

Here we have added a new style, note the !important that was because another style in the header was over-riding our change.

#site-title a {
    font-size:  28px !important;
}

The title font size has changed dynamically, so we can preview how our change will affect our page title.

live-edit-4

Step 5

One more little change to our title, in our test we just change the colour to red.

#site-title a {
    color: #FF0000;
    font-size: 28px !important;
}

live-edit-5

Conclusion

We are able to test changes to our stylesheet in a non-destructive way using FireFox and FireBug, if we are happy with our changes we can then change our themes style.css by adding our changes to the end of the file.

Notices

We do require your feedback to improve our themes and tutorials, please leave your comments good or bad.

Code disclaimer information

If this document contains programming examples, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code from which you can generate similar functions tailored to your own specific needs.

All sample code is provided by http://DigitalRaindrops.net for learning illustrative purposes only.

These examples have not been thoroughly tested under all conditions. www.DigitalRaindrops.net, therefore, cannot guarantee or imply reliability, serviceability, or function of these examples.

All programs contained herein are provided to you “AS IS” without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.

Membership

Registration and Membership is no longer required for downloading files or interacting with Digital Raindrops, posting a comment or topic in the forum does use Captcha to reduce spammers.

This website is a tool to support and promote WordPress and Artisteer theme development, please support, share and give credit for any benefits you gain from the tutorials on this website.

Leave a Reply

Connections

Connect with Us
Follow Digital Raindrops on Twitter Join Digital Raindrops on Facebook
Share

Related Posts

Posted in Tips

colorizer-1_thumb.png

We thought we would use the WordPress Twenty Eleven theme and the the Farbtastic color picker to colorize our theme from the website front page instead of the admin area. We have been looking at the $_SESSION variable, so we thought … Continue reading

Read More