I'm creating a tree to select a folder for a file destination so it only supports single selection. The expanders are hidden and I have + or - on the folder icons. Clicking on the folder icon with will expand or collapse the tree. The folder icon as well as the title changes (color) to indicate which folder is selected.
I used custom icons because i had different types of folders.
It works for collapsed selected or collapsed unselected. It works for expanded selected, but I can't get the stylesheet to work for a selected, expanded folder.
The following displays the expanded folder icon with a - sign when unselected
span.fancytree-expanded > span.fancytree-custom-icon.FolderWithChildren {
background-image: url("FolderMinus.png");
}
However I can't figure out the syntax for a selected/expanded folder. I've tried many variation but nothing works. For example;
span.fancytree-expanded > span.fancytree-selected span.fancytree-custom-icon.FolderWithChildren {
background-image: url("FolderMinusSelected.png");
}
Thanks for any help.
Try this
span.fancytree-expanded.fancytree-selected > span.fancytree-custom-icon.FolderWithChildren {
background-image: url("FolderMinusSelected.png");
}
Related
In Thunderbid (102) I have numerous sub-folders under "Local Folders / Archives", such as "Friends", "Business" ...
I would like to be able to set a specific icon for each one of them.
In userChrome.css I have been able to change the icon for the "Archives" special folder, using the syntax:
.tabmail-tab[type="folder"][SpecialFolder="Archive"],
treechildren::-moz-tree-image(folderNameCol, specialFolder-Archive) {
list-style-image: url("images/myIcon.ico") !important;
}
But I have not been able to find the appropriate syntax to change a specific NON special folder icon by access through its name.
Does anyone know the answer ?
I tried to set the icon value in userChrome.css, using a syntax like:
/* All non-special folders, e.g those you create */
treechildren::-moz-tree-image(folderNameCol, Name-Friends){
list-style-image: url("images/Friends-16.png") !important;
}
But to no avail.
I'm trying to design my ionic app, and the first step for me is to add a background image. But it won't get visual.
I created a directory in my www folder named img, containing my image.
And in my homepage (home.scss) I've added this code:
page-home {
background-image: url(../img/logo.JPG);
}
This is the errormessage I'm getting:
"This inspection checks references to files and directories."
I guess "page-home" is the name of your component selector.
Instead of putting the background-image directly inside it, you can try to put it inside (if your .html has a , without code, it is hard to tell)
page-home {
ion-content {
background-image: url(../img/logo.JPG);
}
}
Note: since your file name is "logo.JPG", I am wondering: are you trying to make some kind of splashscreen? In that is so, you may prefer directly put your image in the resources folder and configure the splashscreen in your config.xml
I have a menu called XYZ-spanish and created another one called XYZ-english. I want to apply the same CSS style to my new menu but it conditional based on the Joomla menu type name. The css it applies is in /web/templates/templatename/css/custom.css, but I have yet to find how it ties it to the menu-type name.
I have grepped through the whole directory tree with grep -r 'XYZ-spanish' * and grep -r '.scrolltojsmenurightcustom' * which is the class name is applies to the menu. However I have checked the modules and none of them have any classes applied to them. The only clue I have that is I change the menu type name the styling gets removed. I'm going bananas looking for how it's applying it? Where should I look?
I have also searched through the database looking for both words and have yet to locate anything significant.
The only thing listed in the custom css is:
.scrolltojsmenurightcustom {
color: #ff5c00 !important;
padding-top: 0em !important;
line-height: 0px;
}
This depends on which menu system are you using, is your menu an extension? or part of your template?
Also you can use a tool like Firebug or similar to inspect the source code of your page in your browser.
A tool like this will give you information about the selectors and the path where they are located, the line number and the name of the file that contains this selectors. Once you have this information you can add or change the values of the CSS.
I do not want to create the entire theme from the scratch.
I want to use the existing theme.
I want to make some minor style changes (like color) for a few elements.
I don't want to save the changes in the original theme but in its copy.
For example.
I've installed the Bade3 Notepad theme.
I like the notepad++'s highlighting but in find out the grey string are too light.
According to Syntax Highlighting Guide for Atom Syntax Highlighting Guide for Atom I've run Atom in Developer Mode.
I've opened file that contains some quoted string.
Right click some quoted string and select Inspect Element
In the Styles tabs I change the color value in
.string.quoted.php {
color: #8b8b8b;
}
The changes are applied to the real example code so I can adjust color.
Let's say I'm fine with #107000
Now I wish to save this changes.
You can achieve this through your personal style sheet without creating or editing a theme.
Your "stylesheet Ctrl-Shift-P and typing Application: Open Your Style Sheet.
A file will open in Atom that looks similar to this:
// style the background color of the tree view
.tree-view {
// background-color: whitesmoke;
}
// style the background and foreground colors on the atom-text-editor-element itself
atom-text-editor {
// color: white;
// background-color: hsl(180, 24%, 12%);
}
// To style other content in the text editor's shadow DOM, use the ::shadow expression
atom-text-editor::shadow {
// Add Your Styles Here
}
In the area between atom-text-editor::shadow { (line 13) and the closing } (line 15) add you changed styles:
.string.quoted.php { color: #8b8b8b; }
Save the Stylesheet and check it is working as expected in your editor, no need to reload or restart the editor.
Note: if you have the Use Shadow DOM check box unchecked in Atom Settings, accessed through Ctrl-,, then you will need to put your styles between atom-text-editor { (line 7) and the closing } (line 10). Try and work with Atom with the Shadow DOM enabled as the option to disable it will go away in future versions.
Here is a short animation to go through the steps I took to get this to work in Atom 1.8 Beta:
The default icon in the tree view (using gallery-yui-treeview) is a folder icon with an arrow or a page icon . I want to change this to a plus/minus sign. I guess something needs to be done to the skin used but I am not able to figure out what and how. Please help.
Look at this page about YUI skinning : http://yuilibrary.com/yui/docs/tutorials/skins/
Create your own sprite with the folder you want to display (default is : tree_view_icons_blue_01_arrow_beside_folders.gif )
Then, override the span displaying the folder like this :
<style>
.yui3-treeview-label-content{
background-image: url("my_new_folder_sprite.png");
}
</style>