Need advice on constructing a Custom Theme

[K1200]

FileMaker provides clear instructions for creating a custom theme:

http://www.filemaker...ustom.23.9.html

... but nothing on CSS and on modifying themes for FMP12 (nothing that I've found, so far).

Other than "learn CSS", can someone familiar with CSS provide a few tips to help us get a toehold. I've attached a screen capture of a simple FMP12 text field with scroll bar (from the Cool theme). If someone can point out which CSS statements specify the three aspects (as marked) of the display field, I think I can be on my way to making a few needed changes.

I've tried what I thought would be the simplest of all: increasing the width of a text field scroll bar from 17 to 27 points (in the file cool.css). Nothing changed when I applied the modified Theme. So I concluded I must be off base by a mile in my understanding of this.

Any help will be greatly appreciated.

[dansmith65]

My guess is the blue highlight border comes from a :focus Selector: http://www.w3schools.com/cssref/sel_focus.asp

Regarding the scroll bar: it looks to me like the scrollbar itself has a size specified, then objects that can have a scrollbar also define a size. Search the css file for: ".scrollbar_track".

I haven't done it, but I suspect you can learn a little about the applied styles by copying a layout object then convert the clipboard to text via a plug-in like: http://www.goya.com.au/baseelements/plugin

[org]

I know a little CSS but I'm gonna step up the learning now. What I do know is not all the power available is editable through FM's UI.

I'm sure it won't be long before we see some tools to help leverage that power.

I regards your questions: -

'Blue Highlight': suspect via box-shadow property thats in many of the selectors (can currently only edit this in the CSS not via FM UI). You can get an idea of with how it works here http://css3generator.com - you can have inner (inset) and outer shadows with a ton of potential results, it seems usable with most objects (untested).

Note: seems FM ignores 'text-shadow' property in initial tests (might have done it wrong?), they don't have that property in any native themes which seems to confirm that.

'Scroll Bar': It is in a few places in the theme, need to be sure you edit the relevant selector. It changed for me when i made 5pt all occurrences of that property in the css file.

Note: seems FM might have some non theme specific icons for scroll arrows/ calendar (seems internal to app?) - couldn't work that one out in a quick dig around i just had.

'CSS in general' in FMs Themes: Not too sure how FM selectors work yet (need to get reading) but seems to be along the lines of Pseudo Elements and Pseudo Classes http://www.w3schools...o_elements.asp. However FM seems to doing fair bit of its own thing in the CSS which is understandable to replicate previous functions in the new webkit world.

If anyone else has deeper understandings please do let us know.

[org]

Note: Matt Petrowsky has just released a couple of excellent videos explaining a lot of whats going on in the themes.

[dansmith65]

I haven't done it, but I suspect you can learn a little about the applied styles by copying a layout object then convert the clipboard to text via a plug-in like: http://www.goya.com....elements/plugin

Now I have done it, so I can confirm it's possible with the BaseElements plugin. It's also very useful for learning the styles available to you with the new layout engine. But... apparently, support for custom theme's may be revoked at any time: http://fmforums.com/forum/topic/83695-externally-created-custom-themes-are-not-supported-in-filemaker-12/