CSS - Control Display -- What's the approach?

92 views
Skip to first unread message

cud

unread,
Jun 2, 2015, 3:56:31 PM6/2/15
to fanc...@googlegroups.com
I want to say this is a great tool. I really need a tree widget that stores the nodes in a model, and that I can update on the fly.  Bravo.

I need to make the tree look right in my publication -- For example, I can't have a box around it. What is the approach I should take to modify the display at that level.  Things I want to do include:
* No box around the tree
* Smaller text for the tree nodes
* Different highlight for selected node
* No highlight on hover -- just darken the text

Also, I'd like to control the timing for the tooltips.

Ok, so I'm not much experienced with jQuery.ui, and this is my first use of fancytree.  I'm not sure where in the chain I'm supposed to make these changes, nor am I sure how to find which style affects what?  Any help in WHERE TO GO to find out how these things work would be much appreciated.  I don't want you to solve my specific issues, but if you can help me understand how to solve them myself that would be wonderful.

Again, thanks much for this widget.  It's really good.

cud

unread,
Jun 3, 2015, 5:36:30 AM6/3/15
to fanc...@googlegroups.com
Ok, so I found a message on stackoverflow about this:
http://stackoverflow.com/questions/26024818/fancytree-remove-blue-border-when-selected

That shows a css statement that will override the blue border.  So I just create a stylesheet inside my html file to override the fancytree skin.  So far I've added in the following to override the border when the tree widget is selected.
    <!-- Override fancytree... -->
    <style>
        ul.fancytree-container {
            border:none !important;
            outline:none !important;
        }
    </style>

If you want multiple trees on a page, and some need the selection border, I suppose you cold put this inline in the div you bind to the fancy tree.

mar10

unread,
Jun 3, 2015, 3:31:49 PM6/3/15
to fanc...@googlegroups.com
Yes, you can always override css rules to tweak an existing theme (although I would use `!important` as last resort only).

If you want to create an own theme, I would recommend to copy an existing theme and modify the LESS file.
See here for a reference: https://github.com/mar10/fancytree/tree/master/dist/skin-custom-1  (EDIT 2015-06-26: update URL)

I am not aware of a method to control the browser's system tooltip timings, but fancytree markup should be compatible with existing tooltip plugins such as https://jqueryui.com/tooltip/
Reply all
Reply to author
Forward
0 new messages