I came across a defualt class called 'x-btn-over' on Extjs which is triggered on a mouse hover. I wanted to ask what the default properties of this class is? Also where can I find all the list of these built-in classes. The docs doesn't seem to cover these properties. Thanks
These css classes are generated when the application is built. It's not documented because it is not recommended to use them for styling ExtJS apps (though you can guess them by using an inspector tool like "Inspect Element" in Chrome dev tools). Although nothing would stop you to use these css classes in scss files and manually created stylesheets, and personally I use it sometimes when I want to do a quick and dirty solution, it should be avoided because chances are these values could be changed or removed in a new version of the framework.
The ExtJS framework has its own theming system.
The scss variables are usually documented in the "Theme Variables" section of a component. For example: Button theme variables
To find "over" related scss variables filter the properties with "over" and scroll down to the "Theme variable" section:
Related
Why can't I customize the styling of web component libraries i.e UI5, beyond themes? I have tried everything from inline styling to wrapping the web components in Styled-components. I tried using :host(), ::slott. I've tried to inject style tags into the template itself. I'm really at a loss, I wasn't able to change one pixel of styling. I'm leaning towards the issue being multiple shadow dom or encapsulated CSS.
<TabContainer backgroundDesign={"red"} ref={ToggleRef} className={`webCompToggleTabBar`} id="UI5TabContainer" tabs-overflow-mode="StartAndEnd" collapsed fixed>
{Object.keys(Tabs).map((subTemplate, i) => {
return (<Tab className="webCompToggleTab" key={Math.random()} additional-text={subTemplate} name={subTemplate} />);
</TabContainer>
Now the outer Tabcontainer is easilystyled with any type of styling, but when I attempt to style any of the tabContainer's inner Tabs...crickets
Just for clarity, I am building a lit-html wrapper around pre-built web-component libraries to work with React and Angular. But I need to be able to restyle the imported web-components
so the issue with styling web components from freely available libraries are:
Web components are usually created using the shadowDOM, this is great for
encapsulation. But when you want to go back in and try to override that
encapsulation and completely overwrite the web components CSS. You will
get stuck in the top layer of the web component, just outside it's shadowDOM(if there using it). With some libraries,
this is done on purpose, others allow you to do this but you may have
to fork over some hefty cash to use those libraries.
Fortunately, there are some things you can do to spice up the web-
components. CSS variables, A lot of libraries build CSS variables into
their components for theming. So one thing you can do is find their list of CSS variables either on their Documents page or in the elements tab in your browser and just cut and paste them
in.
If this is not enough for you there is another option.
You can create your own web components in a way very similar to
creating them in ReactJS. There is a tool called Stencil which
gives you a way to create web component using typescript and CSS.
Stencil solved all my issues, it has all the polyfills built in.
It sets up all your testing and deploying. https://stenciljs.com/
I am a web developer and recently started working with Ionic 4 which is based on Web Component. I was trying to edit the CSS of the components but I was not able to edit the same and later on figured out that it was because of Web-Components which do have #shadow-root.
My Question is, Is there any way to edit the CSS and JS of a Web Component.
If not, why is it there?
The drawbacks of the same according to me are:
- Not able to apply the custom CSS into the child components of the Component.
- Plugins like Stylus will be useless as the CSS won't be applied and we won't be able to get the dark mode.
The Component Author decides the level of styling that can be applied.
no #shadow-root
All global CSS applied
all children are part of the main document DOM
ShadowDOM created with this.attachShadow({mode:"open"})
No global CSS applied
CSS Properties (if used by the Component author) are applied
You can access the shadowRoot and overwrite everything inside
(this is like buying an IKEA table and putting a saw in it)
shadowDOM created with this.attachShadow({mode:"closed"})
No global CSS applied
CSS Properties (if used by the Component author) are applied
You can not access the shadowRoot
Documentation
source: https://developers.google.com/web/fundamentals/web-components/shadowdom
TL;DR
Shadow DOM removes the brittleness of building web apps. The
brittleness comes from the global nature of HTML, CSS, and JS. Over
the years we've invented an exorbitant number of tools to circumvent
the issues. For example, when you use a new HTML id/class, there's no
telling if it will conflict with an existing name used by the page.
Subtle bugs creep up, CSS specificity becomes a huge issue (!important
all the things!), style selectors grow out of control, and performance
can suffer. The list goes on.
Shadow DOM fixes CSS and DOM. It introduces scoped styles to the web
platform. Without tools or naming conventions, you can bundle CSS with
markup, hide implementation details,
and author self-contained components in vanilla JavaScript.
Read all about styling components:
https://developers.google.com/web/fundamentals/web-components/shadowdom#styling
(not a standard yet) https://developers.google.com/web/updates/2019/02/constructable-stylesheets
I want to change the icon of 'annotationStyleEditButton' and 'annotationDeleteButton' to a self designed PNG, I would like to know is those buttons are available to change the icon?
I just found a method to change the Tools icon by using updateTool(), but seems we cannot change the 'style' and 'delete' button?
There are ways to change the icons but unfortunately, there are no APIs to do it. This is mainly due to the UI being completely open-source and open to everyone to customize and also contribute to. You are free to clone, download, or fork our repo here: WebViewer UI Repo. You will need some knowledge of React (and maybe some redux) but it should be relatively easy to pick up.
To change the icon, you will have to change the img property of the ActionButton to use your images in the AnnotationPopup component. Alternatively, you could also just use HTML buttons and images if you would like. You can find a guide on advanced customizations here: Advanced Customization. Once you do have the UI built, it will generate a build folder in the root directory. Simply copying this folder and replacing the one under lib/ui should update it to the one you just built.
As a last resort, you could always use some vanilla JavaScript to swap out the icons for your own. A query with the DOM can get you those elements to change:
document.querySelector('iframe[title="webviewer"]').contentDocument.querySelector('div[data-element="annotationStyleEditButton"]');
I would recommend sticking to the WebViewer UI method to avoid any unwanted results. It would also be better to own your UI as opposed to using this intrusive method.
Let me know if this helps!
Hi I'm an average in CSS but I did not understand why in many websites I find that this file does not appear and many theme I do not find the css file in charge of this class is this way in css I do not know.
I want to edit this class from the file but can not find the file?
Strangely, it's not the automatic properties of the browser.
Not necessary that class must have css written. Sometimes classes written to manage JavaScript.
You are looking at the final result of what is probably a CSS-in-JS approach that many popular tools out there provide. The original classes that the developer writes in their code are transformed into the sort of garbled looking classes when the build process is run.
The result is CSS classes that are unique and do not conflict in the traditional global CSS sense. This also means you cannot so easily track down the source of the code through your inspector unless the developer has generated and provided source maps as well.
A good example of one of these CSS-in-JS tools is Styled Components (https://www.styled-components.com/) but there are many others out there.
I would like to apply a CSS stylesheet to all page views in a Firefox browser using a menu option and be able to toggle this when required. (The functionality I want exists in IE: Tools | Internet Options | Accessibility | Format Documents Using my Stylesheet (although I think this may affect pages outside of simply IE).
You could use the file userContent.css lying within the directory named chrome in your Mozilla Firefox profiles directory. There is also an example file named userContent-example.css.
you can use Stylish, you can define global styles in firefox and ability to switch it on and off fast from Firefox.
Usage page.
Global styles, you can see code and how it is done.
There is another Firefox addon called Platypus which which adds a toolbar for editing site styles. It does require you to install Grease Monkey.
I just installed Stylish and my first impression is that is nicer than Platypus, especially when it comes to sharing your styles with others. But I'll reverse my judgment as to which I think is better when I have more time to compare them. :)