I have included the less files for Ant Design (antd) into my React-app, because I want to customise the theme, as explained here and here. However, I am uncertain which variables to change, to edit or remove the fading-effect when hovering menu-items. (I.e. I would like the text and background color of the hovered menu item to change faster or immediately.)
You cannot achieve that level of customization through editing theme variable. you would need to manually apply custom css on those elements that you would like to customize, eg
for example, making the hover animation to 4s while you hover it.
.ant-menu-item:hover {
transition-duration: 4s;
}
to find exact classname you can always inspect the node
using the same idea you can fit your custom needs.
Related
I have a ComboBox with thousands of items bound to it.
The problem I'm facing is when I run the app on a tablet the scrollviewer's scrollbar is very thin hence I cannot hold and drag it and can only swipe to move inside the ComboBox.
Hence I was wondering is there a way to change the style template of the ScrollViewer inside the ComboBox inorder to make the ScrollBar width larger.
You'll have to dig in to the style template and change some hard set properties for Width / Height that sit on the parts like the Thumb that you will find on the default style template. You can extract a copy via selecting a Scrollbar -> Right Click -> Edit Style -> Edit a copy. Save the copy wherever you need it, like a resource dictionary if you plan to use it multiple places or to the instance where you need it.
(Note: Generally folks start at the ScrollViewer level, then find a Scrollbar in it, and apply the style changes there so they can apply the style directly to ScrollViewers)
Once you have your changes made to the control template you then need to pass them to your ComboBox. If you only need it for the one ComboBox, You can just put the style template in it's Resources and remove the x:Key name you gave it so it hits the instance of the TargetType via inheritance for just that ComboBox.
However if you want it to hit EVERY ComboBox, then you'll need to edit the ComboBox style template and add a reference to the Style template you just made to it's embedded ScrollViewer.
You'll find long tutorials out there for stuff like WPF/Silverlight that pretty much the same concept but little nuance differences in the templates and syntax of properties.
Hope this helps, give it a shot and if you get stuck come on back and we'll get you sorted.
I want to give a different color to my Toggle Switch when it is On mode.I was going through the Standard Style but couldn't find anything which i am looking for.
First, I'd check the default template again. You can bingoogle it to get this:
http://msdn.microsoft.com/en-us/library/windows/apps/xaml/jj709931.aspx
You might then want to change the "On" visual state Storyboard to update the Background of the "InnerBorder" element or add another background element and use a DoubleAnimation in the Storyboard to control its Opacity.
The easiest way to modify the template might be to use Blend. Similar to what I have done in my answer to this question:
Listview selection display with no padding and no checkmark
I have a UIBarButtonItem with the UIBarButtonSystemItemSearch type. I can programmatically change the tint color, like so:
searchButton.tintColor = [UIColor purpleColor];
However, what I'm trying to do is figure out a way to programmatically "fill" the button (i.e. the magnifying glass) with a given color. More generally, I'm trying to use a change in the icon to indicate that the search functionality is active.
I really like the built in search icon, but the lack of an obvious fill functionality is annoying. Is there any way to do something like this without creating an entirely custom button/icon? If not, what's the easiest way to utilize the existing search icon to create a custom button that does have the ability to be filled?
First off I would suggest simply using the tintColor to show your selected/unselected states without trying to mess with the shape itself since it is much easier and will convey what you're trying to do. Keep in mind that in this specific case, the magnifying glass may not even look right if it is filled in, that shape is very specific and people are used to seeing empty space in the circle.
If you want to continue on that route though, no you cannot easily change the built-in search icon. Your options are 1. programmatically take a snapshot of such an icon on the screen and try to manipulate that using CoreGraphics (not a great solution) or the better solution 2. which is just to get/make your own image and then you don't have to do any of it programmatically.
I successfully changed the background color of a Gtk.TextView (GTK3) with method override_background_color:
color.parse(self.settings.get_string("bgcolor"))
self.ui.NoteView.override_background_color(Gtk.StateType.NORMAL,color)
I also override the foreground color.
Unfortunatelly in that case making a selection in the text is invisible.
How can I modify the background and foreground color of a TextView without loosing the visible text selecting?
It's best to format the text in a GtkTextView by using GtkTextTags. You can apply any sort of text formatting(background & foreground colors, font, size, weight, etc..) to any portion of the text.
Click here for an example.
Hope that helps!
By the way, what you're doing is changing the style of your TextView. In Gtk it's best to stay away from doing this, especially if you aren't in a controlled environment or plan on releasing your software for others to use, because gtk's philosophy is to leave the styling and theming up to the end user for their own personal touches/needs.
This is why you are getting some unwanted results by overriding style colors.
In terms of a GtkTextView it does however offer simple formatting of the text(even support for adding images/widgets) via use of GtkTextTags as the link shows above.
I want to learn how can i design a site which background and images color will be changeable by the user. Colors could change by only one color within 4 colors such as green, blue, white etc. in the sites such as msn, yahoo etc. But, there was no effects like drop shadow or gradient overlay in that images. However, I want to change color of images which applied effects such as drop shadow, gradient overlay. Moreover, with each color. Just like chameleon.
I can put a text link on the right of the top. A color selector like at Photoshop can open, when the user clicked this link. Color selector generates a hex code according to selected color. Color of site changes to color which the user selected.
I changed an image background color which is transparent by using JavaScript DOM. Color of transparent area in the image will be the same with the background color of div tag which contains this image. But, if the image has got effects like shadow, overlay etc., the changing color will be disable.
How can I do it, and which technology will I use, jQuery, Ajax? How I create a site which color could change.How I create a site which color will be changeable by the user.
Just like chameleon...
Hmm, well this might take a while to implement, if you're starting with little knowledge.
My suggestion, to get you started, is to have a javascript which changes the class of the body element according to a selection the user makes. So let's say I visit the page, the <body> tag has no class, and default css is used.
Then I click on the link to make things red. Using javascript, or jquery, give the body the class "red-body".
Have css in your stylesheet which only works for elements which are children of an element with this class.
Html:
Go Red
jQuery
$('.go-red').click(function(){$('body').removeClass();$('body').addClass('red-body');});
So if you have code like:
#navigation li{color:#000;}
.red-body #navigation li{color: #af000;}
This will make this possible. This means you can do it all with just one stylesheet, which I think is the best way.
There are a number of ways to store the users choice. One of the easiest ways is to set a cookie in their browser. You can do this with javascript, here's the introduction from w3schools: http://www.w3schools.com/JS/js_cookies.asp