CSS tricks with pseudo elements.

Sometimes simple jobs in restrictive frameworks make for interesting problems. Somerset Film (The Engine Room) love WordPress.com as a playground/sketchpad. Today’s problem was http://inspiresomerset.wordpress.com/ – decorated with AlienWP’s Oxygen theme but still needing a few CSS hacks to bring it up to spec – so I got involved.

When altering someone else’s css; make sparing, targeted changes and assume as little as possible – class-names are designed be re-used, so reference them uniquely by their position in the page hierarchy.  The “>” css child selector is useful here; it forces the browser’s parsing engine to ignore all but parent-child relationships, saving browser-power and time (where we still have to care about power and time).

The only unusual aspect of the job involved replacing a large image – enforced by the theme – with editable text. Setting the image’s css to display: none; hid it; but to replace it I used the before pseudo element to squeeze in extra text *before* the target class’s normal content:

#primary>#content>.recent-articles:before {
 content: "We are a new consortium of Somerset artists and producers bringing the skills and experience of professional arts and media direct to your school, children's youth centre or youth organisation. We have put together an offer we intend will be useful as well as inspirational and we look forward to hearing your feedback and ideas for taking the work forward - so do get in touch soon - subscriptions are open from March 25th.";

…end result:  Somerset Film are able to edit the front page text with their CSS admin form, independent of any post or page.

Leave a Reply

Your email address will not be published. Required fields are marked *