When using Flash Builder to create a new component Skin based on an existing Skin, one has the option to include Actionscript styling code or not. Wouldn't this code always be necessary?
Here is an example of two people, both of whom have skinned the spark Panel.
With styling code:
http://blog.flexexamples.com/2009/10/19/repositioning-the-control-bar-on-a-spark-panel-container-in-flex-4/
Without styling code:
http://www.popamihai.com/2010/11/flex/skinning-flex-4-components-skinning-the-spark-panel-component/
But they both seem to run fine. How can this be?
The styling code still gets applied due to the fact that you're extending a class.
You should add the styling code when you intend to change it.
Related
I am trying to build my own components with the library element-plus as a base.
I have great success so far when it comes to easy stuff like colors, which can be overridden easily forwarding the default theme
However, when it comes to things built-in a component, I find myself stuck.
For example, the Alert component is fairly customizable by default.
I was able with css to modify both color and shape, as well as using built-in API to custom the closing icon for example.
Image of Alert Component
However, I failed so far to change the success / info etc icons element-plus provides, since they are added programmatically inside the component code. Furthermore, the color of this icon is inherited from the background and I failed to change it alone.
My Alert Component Here
The source of the Alert component can be found here
And it seems the element plus components are not customizable further from what they explicitly let you modify.
Am I missing something ? Can this be achieved by extending the components ? Or by heavy css ?
Thanks a lot,
I have a jsp page which I want to style using Materialize framework, but as soon as I add the href to materialize.min.css in my page (or in the entire project from the beginning), it overrides my existing styles from all the application and I want to be able to call Materialize only when I need it, not to change the whole style because it becomes a mess.
It's also the first time I'm using Materialize, so maybe I'm missing something.
That's how CSS frameworks work, generally. Most of them will normalize and apply a base style to your website, even if you are not using framework specific class names.
I usually work the other way around: I let my framework of choice control all of my UI, and when I want to override something, I use custom CSS styles. To do that, make sure you add a link to your own styles on the tag after the Materialize CSS link.
I like the DataGrid from Clarity Design System. But I want just to use the DataGrid in one component. The other components shouldn't be affected.
I'm using Angular CLI for my project.
The DataGrid just works if I reference the CSS in the .angular-cli.json as follows:
"styles": [
"../node_modules/bootstrap-4-grid/css/grid.css",
"../node_modules/clarity-icons/clarity-icons.min.css"
]
The DataGrid doesn't work if I copy the styles directly to the componet's .css file.
How can my problem be solved?
Unfortunately, Clarity does not provide support for the use of just individual components, and you must include the full clarity-ui styles in your styles array for it to work. Including it inside of the component styles will cause issues because of encapsulation mode in Angular and how it will process the CSS in ways that the Datagrid will not understand.
Clarity is intentionally created as a full design system, and we don't bundle any of the components individually for consumption. There are many reasons, but the major one is that to ensure proper and consistent UX Clarity expects to be the foundation of your application design. The best suggestion I can make is to let Clarity define your design instead of Bootstrap.
UPDATE: The project on NPM is now at #clr/ui instead of clarity-ui.
I'm working on a web application which is using Materialize as a front-end framework along with Kendo UI for the grid component.
I'm hitting problems in cases where both Kendo UI and Materialize have styles for the same element - for example they both override the styling on check boxes - this results in a broken layout due to the clash.
One option I realize is to pick either Materialize or Kendo UI and drop the other... however I would like to avoid this if possible as they in the most part have complemented each others weaknesses well.
If it was simply one element here or there putting specific overrides in would be an option however with the scale of the two frameworks this would be a maintenance nightmare as when one changed the overrides would possibly have to be refactored.
Are there any ways to solve this issue that I am missing?
One way to workaround such a clash is to build your MaterializeCSS to include only the parts you so need for your project.
For instance, if you do not need the buttons styling of MaterializeCSS, you could simply, via sass, compile the materialize.scss and cherry pick buttons out of the file.
If going down the path of building your custom .css of Materialize is a long short for you, you can try using materialize.khophi.co (Disclaimer: I built it).
Find more about how to customize your MaterializeCSS: http://materializecss.com/getting-started.html
I know it's usually suggested not to duplicate code, and you want to try steering away from overrides, but would it be possible to find the section of css you like (i.e. select box from materialize) and copy that in to a new custom css file, renaming the selector so you can use it seperately from Materialize/Kendo UI?
You can manually edit the stylesheet of eighter party. Take the non-minified CSS, and prepend every base path with a short prefix:
.card {
....
}
becomes
.mat.card {
....
}
That way, for every materialize style, you use .mat before anything. Or, if you mainly use materialize, do the same thing for Kendo UI.
This is a lot of pain, but would solve your issue.
I'm new to Qt and have been designing forms using Qt Creator. I've noticed that I can apply styles for specific widgets in the form's stylesheet, and it will style every widget on the form. For example "QPushButton{color: red;}" will make all the QPushButtons on the form have red text.
Is there a way to only apply styles to certain groups of widgets? For example, if I promote a QPushButton and call it MyButton, how can I set styles only for MyButtons. I would expect to be able to do something like "MyButton{color: green;}" but that doesn't seem to work.
Is there a better way to do what I'm trying to do (preferably using Qt Creator)? I can't seem to find an example of this anywhere, but maybe it's because I'm not using the correct terminology.
Thanks,
Mark
There are a lot of options for specifying selectors in style sheets. They are documented here.
One that I use (that is hinted to in the official style sheet reference document) is
|=
QPushButton[objectName|="somePrefix_"]
I use this to select items that have the same object name prefix. You could of course achieve a similar thing by applying a stylesheet to a panel containing the buttons you want to style differently but this can get tricky.
IIRC that should work, but creator might not show the preview correctly as it is not instantiating your button. Personally I think working with a global .css file that gets loaded at startup works better than applying single styles on each element in creator.
Use QApplication::setStyleSheet() to set a global stylesheet