PDA

View Full Version : Customizing tabs



DaveC426913
16 Jul 2010, 8:22 AM
I was hoping to use my own images to customize my tabs but it doesn't look like it's set up to encourage that.

It looks like tab styling is integrated right into the main css. I'm looking through ext-touch.css and trying to find and modify x-tab classes (to at least see if I can override them). I'm not having much luck.

It looks like the actual tab images are embedded as data right in the css. I can put a filepth in there to my own graphic, unfortunately, I can't look at the sample graphic to see how it's built.

nosarious
18 Jul 2010, 6:55 PM
I am currently doing something similar for the layout of the Overlay classes.

In my case I determined the names for the various classes using Safari's web inspector (turn developer menu on in preferences)

I added the items into the <head></head> using a <style></style>. According to this site (http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css) if you place !important after the declaration but before the semicolon you will override the items in the original ext-touch.css file. Also according to that site a head and inline declaration should take precedence over the imported ones, but it didn't work without the !important for myself.

I am still experimenting with my work on this, so I suggest you try some trial and error to figure out how to implement the graphics you are working with.

DaveC426913
19 Jul 2010, 5:54 AM
Well yes. Certainly I can customize the entire thing and throw away what I've been provided with. I was kind of hoping that, since they've already built so much, that I wouldn't have to reinvent the wheel...



I determined the names for the various classes

A word of advice: you don't have to figure out what the system-generated names of the classes are. You can (and should) add your own classes. Look up the cls property of almost all components, like this: (cls: myClass). It allows you to add your own class name to a component, which you can then reference in your CSS: (.myClass{some: styling}).

The way you're doing is fraught with risk. Those system-generated class names will change if you change your page. (for example, you realize you need a header graphic on your page, you have to add a component. This will alter the system-generated names of many of the elements following that one) .

Also note that the sys-gen classnames have no meaning to them. Your code will be needlessly cryptic to maintain moving forward, for both you and your developer-descendants.

This is a headache you don't need. Add your own class names.

uxdan
19 Jul 2010, 7:37 AM
I'm not totally familiar with the idea, but I think the "images are embedded as data right in the css" is part of the code that is generated with the SASS framework. So to find the actual code you have to look in resources/sass/src/button.scss

But you can always add your own via your main app css file.

DaveC426913
19 Jul 2010, 7:52 AM
I'm not totally familiar with the idea, but I think the "images are embedded as data right in the css" is part of the code that is generated with the SASS framework. So to find the actual code you have to look in resources/sass/src/button.scss


This is where I found the code that was displaying the tabs:
\resources\css-debug\src\tabs.css

This is a piece of the code:
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAAFYCAYAAADwTLpoAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5c
etc.

I thought it was kind of nasty to do it this way since it makes it very difficult to customize.

Anyway, it's easy enough to strip out the embedded code and insert a regular image in there:
background: url(myImage.png)

But the trouble is, without an unmangled view of that graphic (it's a complex layout that's cut up and distributed via CSS), it's impossible to know how to build an alternate. And I can't view that graphic directly since it's just data.

Anyway, I was able to use Firefox to render it as a whole graphic:
21505
And now I know how to customize the graphic and how to modify the existing CSS (you need only change a few pixels widths, heights and offsets):
21506

nosarious
19 Jul 2010, 8:33 AM
The reason is to cut down on the amount of time required to download files. Every file negotiation has a certain amount of handshaking that goes along with it, so being able to download a hundred small images in one file makes it easier. Most of them are in greyscale and can be colorized in css (so I understand, I could be wrong)

As well, if you were making a html5 cache with all those graphics the cache file would have to be huge. fewer files, easier caching.

And where I was discussing before about the alterations of the css in the header, it was mostly to find out how to change the behavior. There are a lot of tags that are generated in the code. I don't need to change everything, just reduce a few things. Giving it a single css tag (article-wrapper) ruined the format of the page. Changing a few small things made it much easier to control.

Someone else has indicated how to incorporate panels within a carousel, so it's moot. I shouldn't have to rely on the overlay construction anymore, so changing the css in this fashion is unnecessary.

BTW your graphics look very nice. Not sure if the straight portions need to be that wide. One pixel wide and repeated as a background for the text area would work as well.

DaveC426913
19 Jul 2010, 9:28 AM
BTW your graphics look very nice. Not sure if the straight portions need to be that wide. One pixel wide and repeated as a background for the text area would work as well. You misunderstand. That is one single png. I don't have a choice about how wide the straight portion is; it is all part of the same graphic as the curved tab edges.

(You are right, the straight portion only needs to be one pixel wide, but the nature of the implementation is such that the whole png is 72 pixels wide - or in my case 62).