I have several modules with smartGWT using the same visual theme. Have I to create my own CSS-file and there overwrite necessary classes? If I plug this file to the host-pages of the modules, will my styles always override the standard themes classes?
I used to override somme native style in my css file, the only care I take is to add !important to force my style whatever style is apply by the framework
For exemple:
.formTitle,.formTitleFocused,.formTitleDisabled {
font-family: Arial, Verdana, sans-serif !important;
font-size: 11px !important;
color: black !important;
}
.splitbar:hover {
cursor: e-resize !important;
}
Hope it could help..
The appropriate way to theme/skin SmartGWT is described here.
Related
I am trying to style my hyperlinks but Bootstrap 4 "Reboot" overwrites my css and changes the styling of my links to this:
a {
color: #007bff;
text-decoration: none;
background-color: transparent;
-webkit-text-decoration-skip: objects;
}
Other than copying the reboot css, modifying and hosting it locally, is there any way to prevent reboot from styling the links? It does not matter if you load your custom css last, reboot always writes over the top of it.
Adding !important at the end of style is the easy way but, that triggers a waterfall where you will need to add more !important in your styling files.
This is why you should learn tree structure of styling.
What I recommend is add a class name to your body tag and override reboot.css or whatever like
<body class="body-class-name">
and then go into your css file which has the highest priority and put
body.body-class-name .a{text-decoration: none}
Happy coding!
It looks, that you load your CSS in the wrong sequence.
Put the bootstrap CSS above your own CSS.
Then you can overwrite bootstrap-settings without !important (which should still be the very last option).
try !important at the and of the style.
a {
color: #007bff !important;
text-decoration: none !important;
background-color: transparent !important;
-webkit-text-decoration-skip: objects !important;
}
My application is using Bootstrap and for a certain functionality JSGrid is very adequate, but JSgrid has its own colors and styles. Please let me know if you know of any Bootstrap themed JSGrid css.
You can override the styles in the jsGrid-theme.css like this and add it to your own stylesheet after loading the jsGrid stylesheet:
.jsgrid-header-row > .jsgrid-header-cell {
background-color: red;
color: blue;
font-size: 0.8em;
font-weight: normal;
}
i'm relatively new with this stuff, but i can't seem to figure out why the size isn't formatting?
CODEPEN: https://codepen.io/minacosentino/pen/YxLLQw
.jumbotron p {
font-family: 'Montserrat', sans-serif;
color: #ffffff;
font-size: 4rem;
font-weight: 200;
text-align: center;
}
It's because you have written the link tag inside the HTML section of the codepen.
To add any external css make use of GearIcon on the CSS Section and add the links there. Doing so, make the libraries get added on top of the webpage and your css written in the CSS section can override those styles.
Just as Josan already commented: There is a rule for ".jumbotron p" in bootstrap CSS defining "font-size". To make your CSS override that, link your external style sheet after bootstrap.
I'm trying to use Reveal.js to build a UX portfolio which is responsive. However, I noticed that most of the properties I write in a style sheet are overridden. Is there a way to force slideshows using Reveal.js to use custom CSS for font sizes and other settings?
Yes there is. For sure it's not the best way, but is simple and functional. Carefully, add "!important" to the setting you want to be adjusted. Like:
.reveal section p {
font-weight: bold !important;
font-size: 1.1em !important;
}
.reveal section pre code {
font-size: 0.7em !important;
}
Hope this helps!
You can override the variable --r-main-font-size - used by all of the out-of-the-box themes provided by revealjs.
<style type="text/css">
:root {
--r-main-font-size: 30px;
}
</style>
I did something like this
#font-face{
font-family:"MYFONT" !important;
src: url("/assets/MYFONT.otf") format("opentype") !important;
}
And then I added
*{
font-family:"MYFONT", sans !important;
}
It obliterated the glyphicons from Bootstrap.
How do I globally declare my font and yet keep the bootstrap glyphicon from being destroyed throughout my site?
Thanks.
The problem is *, because it sets the font-family for all elements.
The quick fix is to do it like this: body { font-family:"MYFONT", sans; }
The correct fix is to use the LESS/SASS version of bootstrap and change the variable #font-family-sans-serif to use your custom font.