Stylesheets not working?

Is something not working the way you expect? Enter it here because someone else might have a similar issue.
mikeg
Posts: 1
Joined: Fri Mar 20, 2009 11:23 am

Stylesheets not working?

Postby mikeg » Fri Mar 20, 2009 11:26 am

I am evaluating protoshare and was excited by the fact that you can add your own styles to the project stylesheet, and I have done so, using standard css convention:

.myCustomButton {

border: 1px solid #999999;
background-color: #003399;
color: #FFFFFF;
font-family: Verdana;
font-size: 12px;
}

and then i set the .class attribute in the property panel of my button to myCustomButton but it just does not seem to be applying the styles.

Also, is there a way project by project to say that certain components (like a button) will always use myCustomButton class?

Peter Uchytil
Posts: 26
Joined: Mon Feb 02, 2009 4:34 pm

Re: Stylesheets not working?

Postby Peter Uchytil » Thu Mar 26, 2009 10:34 am

Hi, Mike. The stylesheet does work, but it is definitely tricky to get the selectors correct. That's something we're going to be working on. Right now stylesheet editing almost requires using Firebug or some other DOM browser to get things right. We don't recommend running Firebug all the time as it can slow down ProtoShare (or any web app), but when you're doing stylesheet editing, it really does help.

In your example, if you change .myCustomButton { ... } to .myCustomButton button { ... } you should see the styles take affect.

Peter
Peter Uchytil
peteru@protoshare.com
Site9, Inc. / ProtoShare Product Manager
blog.protoshare.com / twitter.com/protoshare

pkregel
Posts: 1
Joined: Tue Apr 28, 2009 11:06 am

Re: Stylesheets not working?

Postby pkregel » Tue Apr 28, 2009 11:36 am

Peter,

Can you give us a hint as to how we would find it in Firebug? (i.e. how would we find a box we created with a class for a custom background-color?

Paula

Peter Uchytil
Posts: 26
Joined: Mon Feb 02, 2009 4:34 pm

Re: Stylesheets not working?

Postby Peter Uchytil » Thu Apr 30, 2009 4:11 pm

Hi, Paula. Most items can be accessed with just the class or id you set in the properties for a component. If a setting doesn't work, the first thing to try is to add

Code: Select all

.protoshare-body
to the CSS rule.

For example if you had:

Code: Select all

.roundbox { -moz-border-radius: 0.5em; }
and it wasn't working, try:

Code: Select all

.protoshare-body .roundbox { -moz-border-radius: 0.5em; }
If that still doesn't work then it means there is some other ProtoShare CSS that hasn't been overridden yet. This is when you need to use Firebug.

The simplest way to do it is to open Firebug in the Wireframe Editor and select the inspector tool in Firebug. Click on the element on the canvas you want to target and look at the CSS styles to see what might be overriding your changes. There's no guaranteed formula, it's all a bit hit and miss as there are a lot of different styles in ProtoShare to make the defaults work.

I hope that clears it up a little. If not, let me know and I'll try to explain more.

Peter
Peter Uchytil
peteru@protoshare.com
Site9, Inc. / ProtoShare Product Manager
blog.protoshare.com / twitter.com/protoshare


Return to “Troubleshooting & Bug Reports”

Who is online

Users browsing this forum: No registered users and 1 guest

cron