How do I turn on /off the blue halo around a field that shows it is in focus?
I believe that's part of the underlying css for a given theme. The color is different in different themes (blue, green, etc.), so one point of (semi-) control is in your choice of theme. Not sure it's otherwise under direct control, either to enable/disable it or change the color. There's some nascent discussion on the forum re the possibility of editing the css files themselves or adding new themes, coupled with concern about whether or not that might end up violating the EULA. I'm sure a lot more will be said about those possibilities.
Personally, I like the halo, as it's a highly standard UI for indicating focus in most apps. I like my fm files to feel more like an app and less, well, "mechanical." But that's just me.
Mark Scott, MD wrote:Personally, I like the halo, as it's a highly standard UI for indicating focus in most apps...
Mark Scott, MD wrote:
Personally, I like the halo, as it's a highly standard UI for indicating focus in most apps...
I agree - I like the halo effect in principle. I'm not always crazy about the halo colors that have been chosen to go with a given theme, though.
Meanwhile, I agree that these are theme attributes that we don't have direct control over in v12 - explorations into the CSS underpinnings notwithstanding. ;)
R J Cologon, Ph.D.
FileMaker Certified Developer
Author, FileMaker Pro 10 Bible
NightWing Enterprises, Melbourne, Australia
You can MANUALLY change this. Note the two Inspector screen shots (from the CLASSIC theme) based on Normal & In Focus:
I may be missing something (quite possible), but I think there's an attribute here that is not exposed in the Inspector. It may not show up in the Classic theme, but most other themes add a glowing halo around fields in Browse mode when they have focus, which is not controllable even when the Inspector popup is set to "In Focus" as in your second screenshot. You can, of course, set a different line weight and/or color (as in your screenshots where the Normal State is set to a solid, 1-pt, gray-color line, while the In-focus state is set to the same but black color), but the halo lies outside of the line, similar to the "outer-glow" effect in Illustrator. I believe that's the "blue halo" to which Kyle was referring (although it may be green or another color depending on the theme, much to Ray's dismay ;-). I'm relatively thrilled with the new bit of polish, but understandably it may not be desired in every setting.
Mark may not be dropping the menu.
Top of Inspector is a drop down menu. Check it out. Allows you to set 4 'modes' for a field.
Focus is just one of them.
ch0c0halic wrote:Top of Inspector is a drop down menu. Check it out. Allows you to set 4 'modes' for a field.
Regardless, Mark is correct that the attribute in question is not exposed in the Inspector - nor in the menu system, for that matter - ie this is the case whether or not "In Focus" has been selected from the drop-down menu you're indicating.
Most themes include a blurred and colored CSS box-shadow for the "In Focus" state of field edit boxes - however when the In-Focus option in the Inspector is chosen (with a field edit box selected), the surrounding blurred/coulored shadow ('glow') effect cannot be removed, added or modified in any way (other than by the use of the "remove all styles..." button, which takes *everything* away), because there is no control for it in the Inspector, nor elsewhere in the interface of FileMaker 12.
The blurred box-shadow for the focus state is by no means the only layout object attribute that is not exposed in the interface in this release, though it is the one that has presently drawn Kyle's attention.
here is the rundown on removal (or mod).
rt click on the filemaker app icon and select show package contents.
drill down into the resources folder (pretty sure its resources) - u are in the right directory when there are a bunch of system icons and some additional folders.
find folder "themes".
each theme has its own folder so find the one u r trying to mod.
going to take a wild guess that it is coolGrey u r seeing the offending blue halo u r trying to nuke.
make a copy unless u want to mod the orig (even then make backup).
in each folder u will find the theme name.css and manifest.xml.
the other 13 or so files are there to support other languages.
open both in a text exitor. manifest has a few global settings and
the theme name and which group it is assigned to.
the css file has all the accessible css for the theme.
the selectors for the webviewer are about 70% down next to containers. i think i recall three selectors for the webviewer. all in , u will see 4-6 colorcode instances.
u r looking for the active state
box shadow. it is an rgb code, not hex so u will see an array with
3 numbers e.g 206 245 78.
if u have a color widget handy, copy paste the color number
to visually match the blue.
replace with whatever unwant.
a quick overview on how css works
whatever themes u have in that folder will bake into the db file at the moment of creation.
u cannot make any mods whatsoever and expect to see changes.
u have to make the change, then create a new db
(which will bake in ur changed version), at which point
u will see ur change.
in ur example. go do as i wrote. create a new db. make a webviewer and see ur change.
reelsteve wrote:...whatever themes u have in that folder will bake into the db file at the moment of creation.u cannot make any mods whatsoever and expect to see changes.steve
...whatever themes u have in that folder will bake into the db file at the moment of creation.
I'm afraid that's not correct. In general and for all themes save the default, it's not at the moment of creation of a file that the theme data is embedded into it. Rather, it is at the moment that a given theme is first applied to any layout in a file that the theme specifications (manifest and css) are imported into the file's internal Theme Catalog (and any associated images into the file's Library Catalog etc).
It's true, however, that once embedded there is no facility in FileMaker 12 to modify the specifications/resources for a given theme within the existing file - contrary to suggestions in other recent threads, merely re-applying an existing theme to a layout will not update the CSS (it will only revert the layout to the theme defaults based on the theme specification already held in the file's theme catalog).
reelsteve wrote:...the css file has all the accessible css for the theme.the selectors for the webviewer are about 70% down next to containers. i think i recall three selectors for the webviewer. all in , u will see 4-6 colorcode instances.u r looking for the active state box shadow.
...the css file has all the accessible css for the theme.
u r looking for the active state box shadow.
I'm not sure why you're directing Kyle to the CSS for Web Viewer objects, since the thread is about the "blue halo around a field". Also, the halo effect is associated with the focus state, not the active state, so the parameters for an object's active state will not affect it.
If Kyle were looking to make a custom theme without the focus halo effect on standard field edit boxes, he'd need to define the theme's css edit_box:focus attribute - whereupon a useful strategy might be to specify a box-shadow property with the associated alpha channel value of the rgba property set to 0, allowing it to be set to another value later, if desired. However, it would presumably be desirable to define comparable focus properties for various other field and object types (pop-up menus, drop-down lists etc etc) for a custom theme so that the effect will be congruent throughout the objects on a layout where the theme is applied. FWIW, there are likely to be a dozen or more object focus state properties in any given theme.
Also, I would strongly recommend against making changes to any theme that has shipped as part of the FileMaker application. Rather, I'd suggest placing any user-created or modified theme specification set (manifest and css) and resources into its own folder within the local/user Themes folder (eg ~/Library/Application Support/FileMaker/Extensions/Themes on MacOS or ~\Local Settings\Application Data\FileMaker\Extensions\Themes on Windows), where the application will find it.
Thanks, Ray and steve, for the additional detail and tips. And ch0c0halic is correct that there are now 4 "states" in the Inspector for which you can individually control (some) attributes. Not yet mentioned, for example, is "Hover," which, true to its name, allows different object attributes to be specified for the mouse-over event. Defeinitely cool! Who needs the old "pointing hand" cursor — which never really was the correct UI convention for hovering over buttons anyway — when you can have the button itself change appearance to suggest clickability?
I think the bigger point of this thread is that, as folks discover this "state" menu and begin contemplating the possibilities, they're likely to run into a few surprises when they start looking for just where in the Inspector one sets all the various object attributes for any given state. Right now, there are as many not exposed (e.g., engraved or embossed effect, shape of tab controls, padding around text in field controls, appearance of the button portion of combo boxes, etc.) as are exposed (line weight and color, fill type, corner rounding, etc.). Being the optimist, I'm confident that we'll see more control over these in future versions. I suspect the issue for FMI, as with so many software design decisions, is figuring out a good UI for exposing these while keeping the seeming complexity of it all under control.
The interaction between the style sheets and layouts is interesting and apparently complex. As an experiment, try creating objects on a layout with one theme applied and copying them to a layout with a different theme. Do objects keep their original attributes or adopt those of the destination layout? In my, admittedly limited, testing, attributes "follow the object" for more "granular" objects (field controls, buttons, etc.), whereas objects that enclose other objects (e.g., tab panels, portals) tend to immediately adopt the attributes of the layout into which pasted.
Yes, Mark. The "in focus" setting does NOT give us access to the "glow/halo" that is in the CSS.
Ray has pointed out the pitfalls of editing the CSS and that it does not auto-magically change the layouts that would use the revised CSS.
I'd opine that this "phase I" of the css-in-filemaker-layouts.
"auto-magically" is my new word-for-the-day. Thanks for that! Must now start incorporating into my everyday vocabulary.
thanks for the correction - very helpful for me.
i arrived at my conclusion that it was at creation after
quite a bit of trial and error. The moment of truth occurs when u make a layout and
take a peek at the field to see the results of ur css edits.
Had u not updated me, i have no idea how i would have been able to
make a distinction between a new db and a new db w/ layout.
If i have set my self up for the "its on page 4 of the user guide" killshot,
by all means - hit me with it ;)
as to my directing op to webviewer, an awesome display of multiday coding binging and sleep
deprivation. the webviewer was the first area i started noticing the blue halo as something i wanted to go away whilst i was designing a layout. i latched on to words the op had never said because of my own relationhip with the blue halo. What would freud have to say about that !!;)
Am I the only one? The "glow" is defined in the 'Outer Shadow' in the 'Advanced Graphic' section.
The "glow" is defined in the 'Outer Shadow' in the 'Advanced Graphic' section.
The "glow" is defined in the 'Outer Shadow' in the 'Advanced Graphic' section.
Not at the time of the original discussion …
Sorry, I noticed that only after I posted...
Retrieving data ...