font-size does not change font size

GWT Designer allows you to quickly create the modules, composites, panels, remote services and other elements that comprise Google Web Tookit applications.

Moderators: Konstantin.Scheglov, gnebling, Alexander.Mitin, jwren, Eric Clayberg

font-size does not change font size

Postby jeremia.morling » Sun Oct 05, 2008 2:31 pm

Hi!
I am having trouble changing the font size on my buttons.

I created a new Java GWT project using GWT designer and added a module. I then added some buttons.
Then I tried to change the font size for the buttons, by adding the following to my css file:

.gwt-Button {
font-size: 12px;
}

Nothing happened!? Except that the frames for selecting the buttons moved away from the buttons themselves in GWT Designer. I had to close and reopen the file again to get it proper.

The thing is that it works to add other css properties. like:
.gwt-Button {
color: red
}
:roll:
It also works to create a new styleName:
test{
font-size: 12px;
}
But it gets quite ugly since I then loose the other style properties for the button.

I guess there are some main GWT style somewhere which overrides the font-size for my buttons?
How can I preserve the look and feel on the buttons, but still make the text smaller?
Any help is appreciated!

/ Jeremia
jeremia.morling
 
Posts: 2
Joined: Sun Oct 05, 2008 2:21 pm

Re: font-size does not change font size

Postby Eric Clayberg » Mon Oct 06, 2008 11:09 am

GWT does provide its own default CSS file.

If you are using the very latest GWT Designer build, you can override the default CSS file as shown in the attached example project.

ThemeLibrary.png
Screenshot
ThemeLibrary.png (88.86 KiB) Viewed 3678 times
Attachments
GWT_Test.rar
Sample project with alternative CSS
(9.81 KiB) Downloaded 136 times
Eric Clayberg
Software Engineering Manager
Google
http://code.google.com/webtoolkit/download.html

Author: "Eclipse Plug-ins"
http://www.qualityeclipse.com
Eric Clayberg
Moderator
 
Posts: 4503
Joined: Tue Sep 30, 2003 6:39 am
Location: Boston, MA USA

Re: font-size does not change font size

Postby jeremia.morling » Tue Oct 07, 2008 3:44 pm

Hi Eric!
Thanks for your reply!!! :)
I have tried to override the css, but with no success. The thing is that some properties works, while other doesn't.
Do I really need to link in another css than the one I created for my project? I tried that also, but with no success.
I have switched to ext-gwt now to see if that would work better, but I ended up with the same problem. See more info below.

Here is a copy of a part of the css i use ("CarPoolBookingApp.css"):
.smallButton {
font-size: 5;
margin-left: 20px;
text-decoration: underline;
border-left: 100px;
padding-left: 100px;
}

The above css is applied to a gwt-ext button with title "Skapa organisation" in the screenshot.
As you can see the margin-left and text-decoration works, but the font-size, border-left and padding-left does not seem to work.

Here is my html file where I have a reference to the css above ("CarPoolBookingApp.html"):
<html>
<head>

<!-- -->
<!-- Any title is fine -->
<!-- -->
<title>Wrapper HTML for CarPoolBookingApp</title>

<!-- -->
<!-- Use normal html, such as style -->
<!-- -->
<!--
<style>
body,td,a,div,.p{font-family:arial,sans-serif}
div,td{color:#000000}
a:link,.w,.w a:link{color:#0000cc}
a:visited{color:#551a8b}
a:active{color:#ff0000}
</style>
-->

<!-- Specifies default language: Swedish -->
<meta name="gwt:property" content="locale=sv_SE"/>

<!-- Enable UTF-8 Unicode charachters encoding -->
<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<!-- Application specific css -->
<link rel="stylesheet" type="text/css" href="CarPoolBookingApp.css"/>

<!-- css files for GWTExt -->
<link rel="stylesheet" type="text/css" href="js/ext-2.0.2/resources/css/ext-all.css"/>
<link rel="stylesheet" type="text/css" href="js/ext-2.0.2/resources/css/xtheme-gray.css" />

<!-- scripts for GWTExt -->
<script type="text/javascript" src="js/ext-2.0.2/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="js/ext-2.0.2/adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="js/ext-2.0.2/ext-all.js"></script>

<!-- -->
<!-- This script loads your compiled module. -->
<!-- If you add any GWT meta tags, they must -->
<!-- be added before this line. -->
<!-- -->
</head>

<!-- -->
<!-- The body can have arbitrary html, or -->
<!-- you can leave the body empty if you want -->
<!-- to create a completely dynamic ui -->
<!-- -->
<body>

<!-- OPTIONAL: include this if you want history support -->
<iframe src="javascript:''" id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe>

<script type="text/javascript" language="javascript" src="org.jeremiaMorling.carPoolBookingApp.CarPoolBookingApp.nocache.js"></script>

</body>
</html>

Here is my gwt.xml file where I now added the reference to my stylesheet, like in your example ("CarPoolBookingApp.gwt.xml"):
<module>

<!-- Inherit the core Web Toolkit stuff -->
<inherits name='com.google.gwt.user.User'/>

<stylesheet src="CarPoolBookingApp.css" />

<!-- GWTExt -->
<inherits name="com.gwtext.GwtExt"/>

<!-- Specify the app entry point class -->
<entry-point class='org.jeremiaMorling.carPoolBookingApp.client.CarPoolBookingApp'/>

<!-- GWT theme -->
<inherits name="com.google.gwt.user.theme.chrome.Chrome"/>

<!-- Support for localizations -->
<inherits name="com.google.gwt.i18n.I18N"/>

<!-- Locale Swedish -->
<extend-property name="locale" values="sv_SE"/>

<!-- GWT logging -->
<inherits name="com.allen_sauer.gwt.log.gwt-log-INFO" />
<!-- <inherits name="com.allen_sauer.gwt.log.gwt-log-OFF" /> -->
<set-property name="log_ConsoleLogger" value="ENABLED" />
<set-property name="log_DivLogger" value="DISABLED" />
<set-property name="log_FirebugLogger" value="DISABLED" />
<set-property name="log_GWTLogger" value="ENABLED" />
<set-property name="log_SystemLogger" value="DISABLED" />
<set-property name="log_RemoteLogger" value="DISABLED" />
<set-property name="log_WindowLogger" value="DISABLED" />
</module>

Here is a part of my code where i set the css for an gwt-ext button ("OrganizationsPanel.java"):
Button createOrganizationButton = new Button( LocalePhrasesUtil.LOCALE_PHRASES.createOrganization() );
createOrganizationButton.setCls( "smallButton" );

Thanks again for your help!! :D
/ Jeremia
Attachments
screenshot.jpg
screenshot.jpg (154.5 KiB) Viewed 3634 times
jeremia.morling
 
Posts: 2
Joined: Sun Oct 05, 2008 2:21 pm

Re: font-size does not change font size

Postby Eric Clayberg » Tue Oct 07, 2008 5:11 pm

At that level, your CSS question is beyind me.

Does it work in hosted mode or when deployed (e.g., is this a general GWT issue)?

Did you try the sample project I proivided?
Eric Clayberg
Software Engineering Manager
Google
http://code.google.com/webtoolkit/download.html

Author: "Eclipse Plug-ins"
http://www.qualityeclipse.com
Eric Clayberg
Moderator
 
Posts: 4503
Joined: Tue Sep 30, 2003 6:39 am
Location: Boston, MA USA


Return to GWT Designer

Who is online

Users browsing this forum: No registered users and 2 guests