Following along to the tutorial at http://refinerycms.com/guides/getting-started which says to
Seemed simple enough. So I created app/assets/stylesheets/about-page.css wtih some test code
p {
color: green;
font-size: 32px;
}
But that sitll got applied to the home page.
What am I doing wrong here?
That is not what is meant.. the about-page refers to an id so it's like this using SCSS syntax with, say, styles.css.scss which is included by application.css automatically using the asset pipeline:
body#about-page {
p {
color: green;
font-size: 32px;
}
}
Can't give you the right answer, but instead you could also use body id's, so each individual page has an id of it's page name in the body. That way it is even more specific to target your css. At least that's what I do using Wordpress:)
Related
Does anybody know how to force mdbook to use the whole content area? Currently there is a large margin left and right and the whole content (especially tables) are heavily compressed.
See https://github.com/rust-lang/mdBook/issues/1847
Full quote from the link:
There isn't a specific setting for the width. Something like this should work:
:root {
--content-max-width: 500px;
}
There are several css files and such that you can override. https://rust-lang.github.io/mdBook/format/theme/index.html discusses the files, and mdbook init --theme will give you a copy of the defaults.
The answer of sarema points exact to the correct solution, but there is still one detail which is important. So, for everyone else who is interessted in this problem, here the full solution:
In the main book.toml file you can specify a custom .css file:
[output.html]
additional-css = ["custom.css"]
In this custom.css file you can override all available css classes as sarema already has posted:
:root {
--content-max-width: 500px;
}
When you take a look to the page source within your web browser, you can examine all the available css classes. https://rust-lang.github.io/mdBook/format/theme/index.html gives an overview about the main .css files, but in order to get the details there is no other solution than to examine this files by hand. So in my case I have additionally changed some margins of .css classes I found in the page sources like this:
:root {
--content-max-width: 80%;
}
.chapter li.part-title {
color: var(--sidebar-fg);
margin-bottom: -5px;
margin-top: 11px;
font-weight: bold;
}
.chapter li.chapter-item {
line-height: 1.5em;
margin-left: 0.5em;
margin-top: 0.6em;
}
Hope, this description is helpful for some others who despair of the styling of their mdbook ;)
I have multiple landing page that contain the same element that I want to apply an underline to. I'm using Wordpress custom JS/CSS plugin to add the CSS for each page but I want to make easier by only matching a part of the ID name instead of doing it for each page individually.
This is the code for each LP:
#hi-call-button1-2{
text-decoration: underline;
}
And this the code I'm trying to make to work to no avail:
div[id*="hi-call-button1"] {
text-decoration: underline;
}
Here is what the code of an element looks like:
<div id="hi-call-button1-3" class="brz-css-uiyth brz-wrapper">
<div class="brz-d-xs-flex brz-css-qllru">
<div class="brz-rich-text brz-css-tuigc" data-custom-id="vgqcolqiepoliqsomiyljswpbpwviqeqybcq">
<p class="brz-fs-sm-17 brz-lh-lg-1_9 brz-lh-sm-im-1_6 brz-lh-xs-im-1_6 brz-ls-lg-0 brz-ls-sm-im-0 brz-ls-xs-im-0 brz-ff-overpass brz-ft-google brz-fw-lg-400 brz-fw-sm-im-400 brz-fw-xs-im-400 brz-text-lg-justify brz-text-xs-center brz-text-sm-right brz-fs-lg-24 brz-fs-xs-im-23">+1 (800) 123-4567</p>
</div>
</div>
</div>
The problem is that it works in JsFiddle here but not in my pages. I tried adding !important with no success. I don't know how to troubleshoot the problem. Any help would be appreciated.
EDIT: Here is a test page that replicate the problem https://1on1finance.com/test/
The reason it's not working is that is this CSS http://prntscr.com/uiwac5
html body div[id^="hi-call-button1"] a.link--external {
text-decoration: underline !important;
}
Use the above CSS this will override the CSS in your website.
Please clear your autoptimize cache to reflect the CSS changes.
I see you already have
you may try to add this to: appearance/customize
a[href]{
text-decoration: underline !important;
}
if it doesn't work, try adding this :
.brz .brz-rich-text .link--anchor, .brz .brz-rich-text .link--external, .brz .brz-rich-text .link--popup {
text-decoration: underline !important;
}
PS: it is not a good practice to use the (!important flag)... as it will bother any other developer who may work on the same project in the future...
So if the above code worked fine, try removing the (!important flag) and test if it works... if it doesn't, then you have no other option...
try this css
div[id^="hi-call-button1"] .link--external {
text-decoration: underline ;
}
You will need to overwrite the rules already being applied. Remember if you are using Autoptimize to 'Aggregate CSS files' and/or 'Also aggregate inline CSS?' it might be effecting the load order of rules so you can turn these options off and reload your cache to check.
.brz div[id^="hi-call-button1"] .brz-rich-text .link--external {
text-decoration: underline;
}
By using the two-character operator “^=” we can target the div element that starts with val "hi-call-button1"
Im not sure if this is resolved or not. I managed to get it working on your test page like this
div[id^="hi-call-button1"] a {
text-decoration: underline !important;
}
I am creating my new travel website https://airlineticketsbestprice.com. So I have downloaded a travel theme and updated my content.
Also, I have add some more section in home page (example call to action, popular destinations, subscribe newsletter and latest aticle ). But as I have noticed that there are much more space between these section, so I am trying to fix this through CSS file but issue still remain.
So could you please tell me which file and CSS file class should I change.
Kindly help me to send exact Css class file code.
Thanks
In your style.ccs you might change this:
p {
margin-bottom: 1.5em;
margin-top: 0;
}
to this:
p {
margin-bottom: [any number]em;
margin-top: 0;
}
or
p {
padding-bottom: [any number]em;
margin-top: 0;
}
Please note, that it will effect all your paragraphs on your website.
Or if you don't want to have any space after a paragraph use the Shift+Enter combo.
Apologies if this question has been asked or if there's a much better way to achieve my objective - I'm very new on the subject.
Using .scss within my React project I have a variable which is used in a number of visual elements as a highlight, eg.:
$theme = red;
.element{
color: $theme;
}
I'd like the user to be able to customize this to suit their tastes within the app client, however it is compiled down by sass-loader/style-loader to something like:
.element{
color: red;
}
which would require me to manually maintain a list of element classes to fire style edits at after the fact.
I am hoping that someone here knows a practical way to achieve what I'm after or, if that doesn't exist, could assist me with modifying sass-loader to also spit out a list of class names where the variable is used to a file that I can load post-compile.
You can use CSS variable instead.
Declare variables:
:root {
--theme-color: red;
}
... and then use it ...
#div1 {
background-color: var(--theme-color);
}
#div2 {
background-color: var(--theme-color);
}
Note: It does not work on Internet Explorer
https://caniuse.com/#search=css%20variables
Learn more about CSS variables
https://www.w3schools.com/css/css3_variables.asp
If I have a file called 'structure.scss' and inside this file I have the code
body { margin: 20px; }
and I have another file called 'fonts.scss' with the following code inside
body { color: red; }
and I use codekit to compress I get the following code
body{margin:20px;}body{color:red;}
Is there any way to get the code minified even further or is there an option in codekit to do this to make the code...
body{margin:20px;color:red;}
No, that is not possible in Codekit.