Link Styles in the RichText component

Discuss techniques and workflows for ProtoShare.
Chris Cavallucci
Posts: 5
Joined: Wed Apr 15, 2009 8:47 am
Location: Philadelphia, PA, USA
Contact:

Link Styles in the RichText component

Postby Chris Cavallucci » Fri Apr 17, 2009 8:47 am

You may have noticed that links appear blue when editing a Rich Text object. However, when you save the change, the links appear to be dark gray in your wireframe.

If you want to change that styling and mimic the browser defaults, try this:
1. click on the Styles tab
2. add these styles

Code: Select all

.RichText a {color:blue;}
.RichText a:visited {color:purple;}
.RichText a:hover {color:gray;}
.RichText a:active {color:black;}


Pay attention to the order because IE has a LoVe HAte relationship with the pseudo-classes.
Of course, you can use whatever colors you prefer instead of the blue, purple, gray, and black that I've used in this example.

Josh Kristof
Posts: 525
Joined: Tue Mar 31, 2009 3:40 pm

Re: Link Styles in the RichText component

Postby Josh Kristof » Mon Feb 28, 2011 1:07 pm

With ProtoShare 5 the syntax for applying CSS has changed. The updated CSS for this example is below:

Code: Select all

.s9-body .s9-rich-text a {color:blue;}
.s9-body .s9-rich-text a:visited {color:purple;}
.s9-body .s9-rich-text a:hover {color:gray;}
.s9-body .s9-rich-text a:active {color:black;}


Return to “Tips & Tricks”

Who is online

Users browsing this forum: No registered users and 2 guests

cron