PDA

View Full Version : [CLOSED] CSS Reference All Components



Patrick_G
Dec 07, 2012, 4:10 AM
Hello

I am always looking for samples so I can format the UI with css changes but it is hard to find all the necessary examples.

For instance, I am trying to make Tabs taller. This example shows me how to make some changes to tabs but font-size does not seem to work.
http://forums.ext.net/showthread.php?17376-CLOSED-Menu-style-as-Microsoft-Office-2010

Is there a CSS reference here or on the sencha site that could guide me a bit?

Thank you.

Baidaly
Dec 07, 2012, 4:46 AM
Hello!

Unfortunately, ExtJS doesn't have CSS reference. However, you can try following links:

http://vimeo.com/10076549

http://sporcic.org/2010/07/tuning-extjs-theme/

If you'll have any problems with CSS, please, feel free to ask us but it's better to post an example of the problem.

Patrick_G
Dec 07, 2012, 7:39 AM
This provided me exactly what I needed. I never thought to just use firebug to see what css was being used in order to override it. Brilliant. Thank you.

RCN
Dec 10, 2012, 10:37 AM
Set the font on .my-tabpanel .x-tab-inner, as shown below:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Ext.NET v2 Example</title>
<style type="text/css">
.my-tabpanel .x-tab-inner
{
font-size: 08px;
}
</style>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:TabPanel ID="TabPanel1" runat="server" Cls="my-tabpanel">
<Items>
<ext:Panel ID="Panel1" runat="server" Title="Tab 1" Html="Tab 1" />
<ext:Panel ID="Panel2" runat="server" Title="Tab 2" Html="Tab 2" />
<ext:Panel ID="Panel3" runat="server" Title="Tab 3" Html="Tab 3" />
</Items>
</ext:TabPanel>
</form>
</body>
</html>