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>
Related
I have seen conflicting information about how to use a master style sheet and have experienced some bugs when testing methods. Just want to get clarification on the proper way to do this.
I would like to store cross website branding styles in a master global.css sheet and make page specific adjustments on a second .css file.
For example, this code would live on the master sheet:
#headline1{
font-family: 'Roboto', sans-serif;
font-size: 96px;
letter-spacing: -1.5px;
}
and this code would be page specific:
.headline {
color: #FFFFFF;
text-align: center;
}
I have recently read something that said you should not use ID in this manner. I've also run into issues when using it multiple times in the same grouping. I initially tried doing this using just classes instead of the ID, but it never worked. Not sure why.
Is this method considered proper? If not what is the proper way to do this?
If you create a master.css with:
.headline {
font-family: 'Roboto', sans-serif;
font-size: 96px;
color:#000
letter-spacing: -1.5px;
}
You can build upon/replace it per page as long as your custom css comes after the master.css
.headline {
font-size: 45px;
color: #FFFFFF;
text-align: center;
}
Quick example of a page:
<link rel="stylesheet" type="text/css" href="master.css"/>
<style>
.headline { //
font-size: 120px; // size overides master
color: #FF0000; // color overides master
text-align: right; // added alignment, which is overiding the browsers base css
}
</style>
I'm not sure if this is quite what you are looking for, but I hope it helps
In the example you provided a can only assume you have something along the lines of:
<div id="headline1"><span class="headline">Title</span></div>
This would basically mean any style applied to the div, the span would inherit unless told otherwise.
To further expand on this, you can also use inline styles <span style="color:#FFF"> which will dominate any other styling UNLESS an !important; has been added to a style element.
I built a website with a WYSIWYG website builder using a template provided by the program. I have since abandoned the template and use CSS to style everything, but for some reason I cannot change the default text color of the whole site.
I thought that simply changing the body color in the CSS would change the default color:
body {
font-family: Lato;
font-size: 14px;
line-height: 1.42857143;
color: #ff9900;
background-color: #750204;
So I tried changing the color: #ff9900 to "b6b6b6" but that didn't work.
Then I literally replaced every instance of ff9900 in the CSS file to b6b6b6 and still the website shows the color ff9900. I don't get how that's possible.
Obviously I don't really know what I'm doing so be gentle. Thanks for any advice.
EDIT: here is what I see when I inspect the live page:
Why your code is not working
Although your code logically is correct, you must take into account how CSS works, especially in how it sets styles. If you have a certain element with that has color: blaa;, then it will always set that after what it inherits. So when you use body {blaa...}, you will only be able to see the results if nothing else later on overrides that. Here is a diagram to show you this:
For an element with the ID of "ID" in something like: body > nav > #ID then the styles will be applied like this:
BODY STYLES:
NAV STYLES
#ID STYLES or .CLASS STYLES
* STYLES
In this, if you specify a rule like: body { color:red }, and then #id { color:blue } then the color will be blue as it is the latest out of the 2 in the list above.
Why dooj sahu's answer has been down voted
This is because !important is not the best to use when there are other ways to go without it.
The way to do it
The best way to solve your problem is by using;
* {
color: #b6b6b6
}
* {
color: #b6b6b6
}
If you are begineer, i add a precision:
"*" target entire website, you can change background-color for example and whatever property you want.
Simply use !important:
body {
font-family: Lato;
font-size: 14px;
line-height: 1.42857143;
color: #b6b6b6 !important;
background-color: #750204;
}
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.
Can I have hand please? I am struggling to over-ride the CSS on the Wordpress Custom Fields Search plugin, which seems to use the same style for search boxes that appear in the widget and the page. If you look at http://www.landedhouses.co.uk/parties/, the white text is visible by the search boxes in the widget but not so visible on the page. Any ideas how to fix this!? Unfortunately adding this to the page's php didn't achieve anything:
<h2>By size and price</h2>
<p style="color:000;"><?php if(function_exists('wp_custom_fields_search'))
wp_custom_fields_search(); ?></p>
Many thanks!
This is the style rule that is causing you problems.
/* searchforms.css line 15 */
.searchform-label {
display: block;
float: left;
width: 200px;
overflow: hidden;
font-size: 1.1em;
font-family: sans-serif;
font-weight: bold;
padding-top: 4px;
color: white;
}
You can do a few things using css. You can make an overwriting rule in the style sheet:
.searchform-label {
color: black;
}
if that doesn't work, you can make a more specific rule:
label.searchform-label {
color: black;
}
or you can in the worst case scenario make an !important rule.
.searchform-label {
color: black !important;
}
As an extension of the above answer (i still cannot comment :( )
Generally speaking, a more specific rule will override the property if the original is not using !important,
so as the original targets .searchform-label, you just need to target something more specific, such as label.searchform-label, and if that doesnt work, include a direct parent element and a > e.g. if the label is wrapped in a P, use p>label.searchform-label
there should rarely be a need for !important, although they should make a !notimportant, for easy override :D
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.