I wanted to know how to theme a specific Container and not every Container in the whole app.
#ext-element-18 x-scroll-container
if I wanted to change a background color of this would it be?
app.scss
#ext-element-18 x-scroll-container{
background-color: #000;
}
this is not working
It's bad pratice to base your CSS on auto-generated id's like ext-element-18. It can change anytime. So what I suggest is you use the cls config
Give a cls attribute to your contrainer :
cls:'my-css-class'
Then use this class in your CSS or SCSS file to customize the component.
If you ever need to reach children of your component you can now do something like
.my-css-class .x-scroll-container{
// custom style
}
This works too;
Ext.get(Ext.fly('ext-groepen_detail-1').query('.x-scroll-container')).elements[0].style.backgroundImage = 'url("http://somedomain/path/to/test logo 2.jpg")';
Related
I am using ant-design in my CRA app, when I was trying to override the styles for ant component, I gave the element a className in react, but the styles from ant always overrode my styles, only by giving an ID worked.
The CRA app is not ejected but rewired with Less.
Here is how I want to use but doesn't work:
In react component:
<Card className="my-classname"><Card>
In index.css:
.my-classname { ... }
After googling a bit more, I found that className will not override the ant design but combine ant with my css style. So in the case where I tried to override the value that ant design had also specified, my css will not take effect unless I use ID specification.
My question now is should I only use ID so all my css overrides?
The solution which I found after playing abit around the final html code which render in the browser is by overriding the styling of antd class. For ex:- I want to use my custom card styling in project. So, I override the ant-card-head for it. We can override any other class using this. You just have to inspect the rendered react in browser and find correct class associated with it.
.ant-card-head{
border: 0;
text-align: left;
}
I wish to allow users to switch the entire color-scheme of my site with a buttonpress.
I have 2 separate .less files with the same global variables, but different colors. The problem seems quite simple.. "swap 1 .less file for the other". But how do I actually accomplish this?
Of course, I could alter the entire site element-by-element in the .js based on the state of a singleton, but that seems like a duct-tape-solution.
One possible solution by example: say you have a div element that you wish to color its background differently in each theme. Load both .less files and edit them like this (add the theme class to the body element that wraps the whole document):
theme-1.less
body.theme-1 {
div.address {
background-color: yellow;
}
}
theme-2.less
body.theme-2 {
div.address {
background-color: fuchsia;
}
}
Then provide a mechanism for the user to change the theme (e.g. drop-down menu). When the user selects from the menu - say for example changing from theme-1 to theme-2 - issue this JS:
document.getElementsByTagName("body")[0].classList.replace("theme-1", "theme-2");
Generically you can do it in more than one way:
document.getElementsByTagName("body")[0].classList.replace(<currently-selected-theme>, <newly-selected-theme);
or
document.getElementsByTagName("body")[0].classList.remove(<currently-selected-theme>).add(<newly-selected-theme>);
I'm using angular-ui bootstrap carousel and would like to change the right and left navigation links with images. It seems that within the tpl they are hardcoded with ‹ and ›
Does anyone have any recommendations on changing these to images without changing the actual angular-ui bootstrap files? I want to keep this in a library and don't want to change it after each version release.
The only solution I had was a hack to make the control of these angle brackets super small in CSS so they couldn't be seen and placed the images.
.carousel-control {
font-size: 1px
}
.carousel-control.left, carousel-control.right {
background: url(/path/to/[image-here].png) no-repeat !important;
}
Is there a better solution?
The goal for the http://angular-ui.github.io/bootstrap/ project is to have customizable templates so if you don't like the default markup you can swap it for your own. If you want to change carousel's look and feel I would recommend overriding the default template (https://github.com/angular-ui/bootstrap/tree/master/template/carousel).
You can easily override individual templates without messing without touching project's deliverables as described here: https://stackoverflow.com/a/17677437/1418796
Hi I am using twitter bootstrap for my website. I have put dropdown in collpsable which is in modal window. My problem is the dropdow I have put in collaspable inner, it cutoff the menu. Here is that Image
It should show like this :
I have tried by changing the z-index attribute but unable to show it. Can anybody know what is the problem?
I beleive the css it is using is the .dropdown-menu class whose position is set to absolute. If you change the position to relative it will give you the behavior you desire.
So you could isolate this change in your own .css file so you don't touch the main bootstrap.css file so its easier to update without breaking your styles.
So perhaps something in a custom.css:
.dropdown-menu {
position: relative;
}
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.