I am using Onsen UI in my Cordova project, how is it possible to make custom modifier like chevron, tappable etc? In documentation it is nothing about this http://onsen.io/guide/overview.html#UsingModifier
I want to make theme switcher and load another css files when e.g. modifier="orange" or modifier="blue". Thx.
Defining custom modifiers is quite easy. A modifier will add a suffix to the base CSS class, i.e. for <ons-button> the base class is .button, so if you write
<ons-button modifier="orange">Orange button</ons-button>
the class .button--orange will be added. You can style the modified button by using the following CSS:
.button--orange {
background-color: #ffb836;
}
See how it's done in this simple example:
http://codepen.io/argelius/pen/bVwzJL
Related
I used reactjs app, i am use coustom css file. i use css class name for a page , now I have added some styles in that class. now If face some problem, when I add sem class name in another page , it automatically gets previous that style. I don't want to get any previous style in that class, how can I solve this problem?
recommend use styled-component or taiwwind etc easier to controll your css.
I would like my React Data Table to have Material Ui classes so it can work better with the rest of my App. It was mentioned in the docs that you can override the css with styled components but I have not managed to do that nor found an example.
i would like to add Mui class names to the rtd class names for example:
<div class="rdt_TableCell"/>
should be
<div class="rdt_TableCell MuiTableCell"/>
link to mentioned feature:
https://www.npmjs.com/package/react-data-table-component#css-overrides
some basic sandbox to play around with:
https://codesandbox.io/s/react-data-table-materialui-9iebe
The react-data-table-component library does not currently provide any way to customize a cell's classname. When it refers to overriding CSS using styled-components, it means an approach like the following:
const StyledDataTable = styled(DataTable)`
& .rdt_TableCell {
background-color: lightblue;
}
`;
This lets you customize the CSS properties associated with the rdt_TableCell class, but doesn't give you any easy way to leverage the Material-UI TableCell styles except by copying them.
I have the following code:
header_contents.push(<DropdownButton bsSize='xsmall' bsStyle='link' pullRight={true} id={1} title='Menu'>
{item_menu}
</DropdownButton>);
I want to have the styling in Bootstrap to be white lettering (currently blue) as I think the link option is defaulted to that. How can you change the styling for Bootstrap to pass link color, and other properties like if you want to move the link down a little on the page?
I should mention we do very little CSS styling as most of that is done within the ReactJS components.
Either override bootstrap CSS in a css file (that is what your seem to avoid I understand): it is the better way to ensure a global effect over every link in your application.
Or do no sent bsStyle='link' as DropdownButton property but instead, insert a style property with custom CSS. Yet you can insert style even if you don't remove bsStyle. You could then create your own component wrapping DropdownButton to ensure the same graphic chart in your application.
I figured it out with the help of an online chat room. Here's what I did.
I first made a style (dropDownLinkStyle) in the react component like this.
let dropDownLinkStyle = {
color: 'white'
};
Then I used it (dropDownLinkStyle) in the dropdownButton like this.
header_contents.push(<DropdownButton bsSize='large' style={dropDownLinkStyle} bsStyle='link' pullRight={true} id={1 /* avoids react warning */} title='Menu'>
{item_menu}
</DropdownButton>);
I hope this helps. This allowed me to keep my bsStyle which is link (tells Bootstrap I want a link type on my screen instead of a button) and allows me to change that link to white lettering. I could also pass more styling by just adding it to the object -- dropDownLinkStyle
I have html of slider with with js and css in working condition, now i have to implement Joomla banners in that slider is it possible or right way ? if not than guide me how to do this or another method
Yes, is possible. In this case you need add your custom code in your template, and the custom code via override.
First try to add the HTML and content for example in one Custom HTML module for test:
Adding JavaScript and CSS to the page (add the css in your main css file)https://docs.joomla.org/J3.x:Adding_JavaScript_and_CSS_to_the_page
By default the component banners has a single call at the same time, you'll have to modify the php code and include, for example a cycle to recover more banners or similar.
Here you can find more info:
Understanding Output Overrides.
Create an override.
I have a particular rounded button, with his CSS, but when I use it, my CSS blow up, because there are Ionic CSS "standard" rules.
My .button class is ruinded by the .button CSS class of Ionic.
I already tried to change name to my .button class but nothing. The only way to get my button is to not import the Ionic.css file, but of course, I need it for the other elements,
My button is nested inside other elements, for which I need the Ionic CSS
So, I need to know if is possible to exclude a specific HTML tag from the Ionic CSS rules, without edit Ionic.css file
Not possible. Go into the Ionic.css and Edit it. You can edit it. I checked the Docu for Sass: http://ionicframework.com/docs/cli/sass.html The CSS is placed in this folder: www/lib/ionic/css The better solution is, to set up an Sass environment. Then you can use only the components you need.
And other solution, but a bit dirty, is, to override the rule with a deeper selector. Maybe with .container .button or div.button or button.button or body .button.
You can use other class name in your custom css and use the property !important in each of your css rules. Anyway you could change the order of the imports.