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,
Related
I'm experimenting with Gutenburg blocks in Wordpress using the create-guten-block tool. What I wanted to know is whether there are standard styles that we can use to style our interfaces. As an example, I have created a very simple control using the TabPanel component which renders as:
Pretty ugly and if we code the component such that the orientation is vertical, there is no change to the layout.
Are we, as developers, responsible for styling these components or is there a standard set of styles we can pull in and use?
For some components you are responsible of styling. Wordpress has added styles for the <TabPanel>component. However Wordpress only uses it in the Block Editor Sidebar, not in the Blocks themselves.
You can get an inspiration from here where the tab styles are defined. It should be easy to mimic them and adapt them to your needs.
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 jut recently tried to upgrade jQuery UI, and after I did I was shocked to find that it completely changed the look of my site. I'd like to use the jQuery UI logic, and I'd like to have whatever minimal CSS is needed to (say) make a dialog have the right dimensions, but I don't want any of jQuery UI's fonts/colors/backgrounds/etc.
Is there any way to get a CSS file like that? I tried playing around with the theme roller, but it seems to assume I want styles for some color and some font, when I don't want any at all.
The root directory of a jQuery UI download zip should include jquery-ui.structure.css which contains just the structural CSS without any of the themeing. You may have to add some of your own styles on top of that to get a usable UI.
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.
When I use a custom skin for my app I get these warnings all over the place. Yes I know why. But I don't need to be told this, and I don't like all the yellow icons cluttering up my workspace. I know if I remove the unused classes they will go away but 1) if later I decide to add a component I want the class to be in-place to style it and 2) my skin is in a shared location so even if this app doesn't use a particular class another app using the same skin probably does. So does anyone know a way to tell flex builder to ignore this particular type of warning?
Thanks.
In the "Additional compiler arguments" box of the Flex Compiler section of your Project Properties, append the following to disable warnings about unused CSS type selectors:
-show-unused-type-selector-warnings=false
It works just fine.
Don't just disable all warnings, it's really important to know that bindings might fail etc.
I haven't tried this, but check it out...
http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&productId=2&postId=12748
or this:
http://www.derekentringer.com/blog/flex-builder-remove-css-type-selector-warnings/