HOWTO: Firebug and Web Developer Extension for style editing

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Ideas Centre
Locked
dark/Rain
Registered User
Posts: 584
Joined: Mon Mar 19, 2007 4:50 pm

HOWTO: Firebug and Web Developer Extension for style editing

Post by dark/Rain » Thu Feb 28, 2008 3:16 am

Content:
Using Firebug/Web Developer Extension for easier editing of styles.
(And some general Firebug/WebDev Extension/phhpBB3 themeing tips)
--------------------------------------------------------------------------------------------------------------

There are two* quite useful Firefox extensions which allow you to
  • figure out more comfortably which element you need to change,
  • display the current CSS attributes of this element (and other elements in general),
  • make "live" changes to your website (locally) to play around with the design and quickly test changes
  • ...
* Well, there are probably more, but these two seem to be the most useful =)


First of all: make sure that you always have got a current and valid backup of whatever you are editing (and of all the rest, too)!
(Also, no guarantee that the following instructions will work flawlessly and so on...)


Firebug:
Download Firebug at http://www.getfirebug.com/releases/.*

Press F12 to open Firebug (or open it through the various other ways ;) ).

Now you can use the "Inspect" button (topmost Firebug toolbar, near the extension's icon) to... well... inspect elements on a web page - move your mouse over the element you are interested in (the current element gets highlighted) and click on it to fix your selection.

The Firebug window will display the HTML tree (left side; current element has got a blue background) and the CSS properties of the current selected element (right side).

You can now interactively change the CSS properties, jump to the CSS file which contains a specific CSS declaration (use the links displayed all the way to the right) and/or us the HTML tree to search for a more general "parent element" or child elements etc.

Once you have found the CSS class/ID you want to edit, use the "Find in files" functionality of a text editor (for example Crimson Editor or Notepad++ for Windows users) to search for this snippet of text.
Less powerful alternative: performing a simple (Windows) file search using the CSS class/ID as search text ("Search inside files", not "Search for file name" ;) ). You might need to omit the "#" then...

Note: prosilver's CSS files are located in styles/prosilver/theme/

This way you can find out the files you potentially need to edit.

So... sort out which files you really need to edit and then use either the ACP or your favourite text editor (no, not notepad...) and upload them afterwards.

Now... you probably want to jump to "If your changes do not display:"... (come back afterwards)

* The 1.1 beta version seems to be quite stable and does contain quite a lot of fixes; it may be possible though that you automatically get future beta versions of Firebug if you install it.

Note: For security and performance reasons, it's (most probably) better to only enable Firebug when you actually use it. To disable it, right click on the small circle in Firefox' status bar and tick "Disable Firebug" resp. untick it to enable it again.

Web Developer Extension:
Download Web Developer Extension at http://chrispederick.com/work/web-developer/.

First of all, add a toolbar icon for the WebDev extension to Firefox' toolbar if there isn't already one - that will save you a lot of clicking (View -> Toolbars -> Customize...).

Web Developer Extension actually is a toolbar which enables quick access to some of Firefox' settings as well as enabling you to (temporarily, locally) edit the current web page.

Of particular interest to you might be the CSS, Images, Information, Miscellaneous and Outline menus.
You can change the page's CSS (CSS -> Edit CSS) as well as the HTML source code itself* (Miscellaneous -> Edit HTML), display CSS attributes of specific HTML elements (Information -> Display Element Information), display line guides to align elements (Miscellaneous -> Display line guides) as well as displaying a grid to quickly measure element's dimensions (Miscellaneous -> Ruler).
* be aware that the page gets reloaded if you close the "Edit HTML" window - make sure you don't loose information this way!

You can also outline specific elements (headings, links, tables/table cells, ... and custom elements) and - after you actually applied your changes to the template/style/... check your page with various validators using the Tools menu.

If your changes do not display:
Make sure that you actually edited and uploaded the correct files and also uploaded them into the correct directory (yes...).
Then clear your browser's cache (or force-refresh the page (Ctrl-F5 in Firefox)) and "Purge the cache" (ACP main page).
If that doesn't help and you did not edit the files via the ACP, go to ACP -> Styles -> Themes and click on the "Refresh" link for the theme you actually edited.
If they still don't show up, you might want to ask in the support/styles forum/IRC channel/...

To make your life easier, you can enable "Recompile stale style components" in ACP -> Load settings.
That should save you purging the cache/using "Refresh" all the time.
Don't forget your browser's cache though.
Disable this option again when you're done changing the template since it puts extra load on the server and can lead to slower performance.


Hope that this helped a bit :)
(and btw: these two extensions can do a lot more than the stuff mentioned above...)

--------------------------------------------------------------------------------------------------------------
Thanks to will_hough for language-bug fixing :D

Please add some comments if you think that there's something missing (otherwise, too)...

Locked

Return to “[3.0.x] Styles Support & Discussion”