I'm looking for a documentation about Mozilla's Add-ons-Manager layout or XUL-templates - does anybody know the name of this tabbed-layout on the left-row ?
It is a <richlistbox> element with custom styling. Element ID is categories and some styles from http://mxr.mozilla.org/mozilla-central/source/toolkit/themes/winstripe/mozapps/extensions/extensions.css apply to it - look at the styles specified below /*** category selector ***/ comment. Note that I linked to the Windows theme, the styles are different on other platforms.
You can use DOM Inspector to look at the structure of that page yourself.
Related
I am looking for the syntax needed to reference an item in Docusaurus allowing me to modify the background color/text color of a collapsed item.
Example image
enter image description here
How exactly can I reference docusaurus code to modify the coloring of these bubbles?
it is not clear what exactly you are asking.
You can find how to add styling and layout here: https://docusaurus.io/docs/styling-layout
You can create custom react components and add them to the documentation to completely customise the html element. Alternatively you could inspect the element to find the class used by docusaurus to change the css of the elements you want.
I'm using the v-app-bar label for my header and I want the shadow of the element to be lighter since it looks too prominent. I'm unable to apply box-shadow attribute to the v-app-bar element.
should I do?
Method 1
You can use component prop called elevation. Look into the app bar docs into API section (https://vuetifyjs.com/en/components/app-bars/#api) and select PROPS tab you can see elevation prop.
Method 2
You can use builtin elevation classes. You can read more about them here: https://vuetifyjs.com/en/styles/elevation/
Method 3
Vuetify allows you to customize sass styles.
If you go here: https://vuetifyjs.com/en/components/app-bars/#api and select SASS tab you can see that they provide some variables which you can edit.
One of them is elevation which is responsible for box-shadow.
Of course to do so you need to have vuetify installed as a vue-cli plugin or in a we pack environment as you can read here: https://vuetifyjs.com/en/customization/sass-variables/
Method 4
You can apply css directly but not to the v-app-bar because it's only vuetify component name which then gets generated into HTML. You can inspect your page using e.g. chrome dev tools and see what structure app bar has and then apply css styles to the right element.
I have this requirement where I have to change the default styles on my Ext JS application. I am not talking about changing stuff in CSS files yet. I am not that ambitious yet. Here is what I am looking for:
Suppose I need a Submit and Cancel buttons, I use xtype:button and text:Save ( or Cancel ). This will render buttons with the text on them. What should I do if I want to change the look and feel of the button? Or replace the button with a cool Save or Cancel image?
Right now I have all the texts on the application with the default font that ExtJS shows. What am I supposed to do if I want all the text on the application changed to a different font? Everything right from the data in forms/grids and the titles of each component should be changed to some other font my customer prefers. What am I supposed to do?
I understand these are very basic and a generic questions, but I am looking for a good headsup before I proceed with my task.
Thank you all in advance. Waiting for answers :)
Update: So, I found out how we deal with CSS and change the fonts. Can anyone help about the Chaning the look and feel for Submit/Cancel buttons.
I recommend you to use SASS and compass to build your own themes, or better said to change one the existing themes. In the Ext JS documentation you can find the css variables which you can set according to your needs.
If you are not ready for theming with SASS just yet take a look at this example of button configs from the sencha docs:
Stanadalone Example page: http://docs.sencha.com/extjs/4.1.3/extjs-build/examples/button/button.html
CSS that adds customized images to the buttons: http://docs.sencha.com/extjs/4.1.3/extjs-build/examples/button/button.css
JS that shows button configs: http://docs.sencha.com/extjs/4.1.3/extjs-build/examples/button/button.js
Essentially this shows how to use iconCls property on the button config along with a simple CSS class to add desired image to your button.
In ExtJS 4, what's the difference between componentCls, cls and bodyCls ?
ExtJS provide many options in styling the components. Each of these property have its place in implementing proper theming of your components.
cls: This is applied to the component's root element. Quoting from the docs:
An optional extra CSS class that will be added to this component's
Element. This can be useful for adding customized styles to the
component or any of its children using standard CSS rules.
By default, this is empty. If you need to style some child elements (by elements don't mean ExtJs components.. instead, they are HTML elements auto generated by the framework) of a component then, you can use this. For example, If you want to change background color of you's tab panel's inner area, you can do something like this:
.customCss x-box-inner {
background-color: yellow;
}
componentCls: This also gets applied to the component's root element. But, this property is meant to hold CSS styles for the component as a whole. Quoting from the docs:
CSS Class to be added to a components root level element to give
distinction to it via styling.
From result point of view, both cls and componentCls gets applied to the root element. But, the are used for different purposes.
bodyCls: This is available for Panels. You will not find this styling for a button because, there is no body. If you want to provide custom styles for your panel's body region.. you can do so by setting this property.
I'm looking for a sample of how to style a list on the results returned from Sencha.
Do I need 100's of line of custom CSS, or are there some predefined styles I need to apply to make my app look native device like?
The default styling should look OK: at least, consistent with the rest of the Touch UI.
Simply provide an itemTpl: property and bind the list to a store: you should see the items appearing in a list like:
You can of course elaborate on the itemTpl as much as you like. There are also some 'standard' UI behaviors such as the disclosure buttons and index bars. See this screencast for examples: http://vimeo.com/19245335
And finally, of course, it's all just HTML & CSS, so you can go completely crazy with the styling if you want. Check: http://www.sencha.com/blog/2010/12/17/an-introduction-to-theming-sencha-touch/
Use this to make it vertically center aligned always:
.x-list .x-list-item{
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;
}
In the default download of Sencha Touch there is a folder called Kitchen Sink in the demos. There's a basic css file in this demo that you can use as a starting point.
Also, you could give the list or nestedlist a class with the cls:'yourClass' and then, in the source of your project, check the nested divs and their classes...
Another option is to use style:'background-color:black;color:white;' inside the component to get basic styling.
Your best bet would be to check out the kitchen sink special css file as it's indented in a right way and very clear to beginners.