14. May 2013

How to debug :hover pseudo class in Google Chrome Developer tool

Google Chrome developer tool is simply one of the best tools available for debugging of HTML5 applications.

It has one neat feature: possibility to inspect CSS of element and editing it on the fly.

That works fine for normal styles, but what about :hover state?

There is one “hidden” option which allows to switch element to :hover state.

Inspect element of HTML. You should see Styles on the right hand side. There are 3 icons. Click the middle one with arrow sign. It will pop up menu with checkboxes. You can select here CSS pseudo classes like :active, :focus, :hover or :visited.

google-chrome-dev-hover

To learn more about capabilities of Google Chrome developer tools I recommend to go through free course Discover Dev Tools from Codeschool.com.

12. May 2013

How to fix broken style in Plone

Some Products for Plone are little bit broken and uninstallation procedure does not work very well. When you install and then uninstall crappy product you might end up with messed layout of Plone portal.

That’s the time to pay a visit to plone_css folder in ZMI.

Remove any reference to broken style (whole box with style has yellow color) and click Save to reset Plone CSS caching system.

  • Where is the fish?

  • Further info

  • Twitter

    Follow @jurajmichalek on twitter.

  • Comments

  • Tags

  • Topics