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 ;)
Related
I'm new here and just started learning CSS. This is my first (question)post and maybe the format of my (question)post might not be appropriate.In that case I humbley ask your forgiveness. I'm not very successful in applying/editting css for my site.
I'm trying to center (image)content in the #media only screen and (max-width: 420px)viewport. Searched,found and tried a few solutions for this issue as mentioned in this forum but to no avail. One of the problems is that my wordpress 6.x theme has a load of different style sheets and i have no clue in which order they operate.
This is what i found browsing the style sheets; Beneath each code is the name of the css source file it came from. Can someone please point out which file i should edit and what code i should alter or apply?
If needed i can give access to my site (which is local only atm) or post screenshots!
*source: responsive.min.css :
#media only screen and (max-width:420px){body.boxed:not(.has_general_padding) .wrapper .wrapper_inner,body.boxed.has_general_padding .wrapper .wrapper_inner,body.boxed footer,body.boxed .header_inner,body.boxed .full_width .parallax_content,body.boxed .carousel-inner,body.boxed .content_wrapper{width:320px}.header_bottom,footer .container_inner,nav.content_menu{padding:0 15px}.side_menu .close_side_menu_holder{right:12px}.pp_content{height:250px!important}.pp_hoverContainer{height:200px!important}nav.content_menu .nav_select_menu{border:0}
*source: responsive.css
#media only screen and (max-width: 420px){
body.boxed:not(.has_general_padding) .wrapper .wrapper_inner,
body.boxed.has_general_padding .wrapper .wrapper_inner,
body.boxed footer,
body.boxed .header_inner,
body.boxed .full_width .parallax_content,
body.boxed .carousel-inner,
body.boxed .content_wrapper{
width: 320px;
}
.header_bottom,
footer .container_inner,
nav.content_menu{
padding: 0 15px;
}
.side_menu .close_side_menu_holder{
right: 12px;
}
.pp_content {
height: 250px !important;
}
.pp_hoverContainer{
height: 200px !important;
}
nav.content_menu .nav_select_menu{
border: none;
}
}
The first file (responsive.min.css) is the minified version of the second file (responsive.css), that means that the minified version has no unuseful character like spaces, tabulations...
The minified version of assets like css, js and sometimes directly html page is used to avoid loading unuseful character and to make download faster. So your theme is probably using the minified version.
I really suggest you edit responsive.css and then, thanks to lots of tools you find on the Internet, create the minified version and replace the existing one.
To center the content you have 2 ways:
Setting a fixed width for your content and then setting a margin: auto; property;
Setting the container of your content to display:flex and then setting your content to justify-content: center;
You can check if certain input fields are not filled using the isset() function in PHP: For example:
if (isset($_POST['sku']) {
//exists
}
While to check if the product already exists you have to check if it exists in database so you must necessarily make a query.
I am using antora for documenting a product architecture specification. We have large diagrams so allowing the svg images to scale up as large as possible when maximizing the browser window is a big plus.
I am not even a css novice. I know almost nothing. I can build antora documents (web pages) so I know only a tiny bit of antora from a user perspective.
I found this comment on how to make the scaling work. https://gitter.im/antora/users?at=5d97c8ea37073b36a06fddb8
I can get the desired results if I edit doc.css, build a ui-bundle.zip, point local-antora-playbook.yml at the newly created ui-bundle.zip and rebuild the site.
.doc {
color: var(--doc-font-color);
font-size: var(--doc-font-size);
hyphens: auto;
line-height: var(--doc-line-height);
margin: var(--doc-margin);
/* max-width: var(--doc-max-width); */
padding: 0 1rem 4rem;
}
#media screen and (min-width: 1024px) {
.doc {
flex: auto;
font-size: var(--doc-font-size--desktop);
margin: var(--doc-margin--desktop);
/* max-width: var(--doc-max-width--desktop); */
min-width: 0;
}
}
This is the suggested edit in the comment link I found and posted just above. I would prefer to use the supplemental-ui approach that is referenced here; Antora top navigation bar customization and actually used by the documentation for antora https://gitlab.com/antora/docs.antora.org.
I can see that my edited doc.css gets created in the new site when I build via a supplemental-ui approach. However, I don't get the desired results of being able to use the max-width of the web browser when maximized. I understand that in css if you declare something later it takes precedence. I'm wondering if the absence of a max-width is simply not being observed because of the order of sourcing files. I've tried different file names like doc.css and xdoc.css thinking they were sourced alphabetically. This didn't seem to help.
Is there a way to make this small css change and use the supplemental-ui approach of getting it into my antora site when I build it?
I would like the supplemental-ui approach to work so we can always stay up to date with antora changes and only have our tiny change to max-width. The approach I have working requires building antora with the tiny change and pointing at that new zip file to build antora instead of sourcing the current latest antora in the public antora repo.
For debug I also tried this approach with the supplemental-ui build procedure. I understand !important is not recommended but I was just trying to figure out if I could get something working other than the full build to a zip file.
.doc {
color: var(--doc-font-color);
font-size: var(--doc-font-size);
hyphens: auto;
line-height: var(--doc-line-height);
margin: var(--doc-margin);
/* max-width: var(--doc-max-width); */
max-width: none !important;
padding: 0 1rem 4rem;
}
#media screen and (min-width: 1024px) {
.doc {
flex: auto;
font-size: var(--doc-font-size--desktop);
margin: var(--doc-margin--desktop);
/* max-width: var(--doc-max-width--desktop); */
max-width: none !important;
min-width: 0;
}
}
It's possible to alter the effective css using supplemental UI but is slightly less performant (requiring fetching an additional css file) and I don't recommend it. The process of building a UI bundle puts all the css into one optimized file, which cannot really be modified later using supplemental UI. Therefore what you have to do is add a "new" css file in your supplemental UI containing the modifications or overrides you want, and also include a partial that pulls in your additional file.
For instance, if your additional file is css/expand-svg.css, you'd need also a partials/head-styles.hbs containing
<link rel="stylesheet" href="{{uiRootPath}}/css/site.css">
<link rel="stylesheet" href="{{uiRootPath}}/css/expand-svg.css">
I tried this with the additional css file containing
.doc {
max-width: none;
}
#media screen and (min-width: 1024px) {
.doc {
max-width: none;
}
}
and it appears to work as you want. The !important isn't needed as the additional css appears later than the default UI css so overrides it.
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.
Can anyone tell me why in the world Initializr's bootstrap html template has a single style for body in a element in the head of the page? It's right after the bootstrap.css file.
body {
padding-top: 50px;
padding-bottom: 20px;
}
My question is: isn't it a little odd to throw a one-off style directly in the markup and not just include it in the bootstrap.css file? Is there some specific reason anyone knows of as to why it was done this way? CSS belongs in CSS files, no?
Taking a quick look I would assume because it relates to that page specifically.
What if on another page you didn't want the navigation bar? You then have to override the style implemented in the .css file manually to correct the padding. Seeing as it's only one statement, I'd say it's fair to include it at the top of the page rather than putting it in it's own .css file.
Would you really want to obscure a framework .CSS file by including potentially page-specific code (that would muddy the framework)?
Edit: To elaborate - if you have a rigorous structure across dozens of pages, each with consistent style, it would only make sense to centralise this content into a .css file, however from an industry perspective I would more-than-likely still not put it into a framework .css file (think about future implementations, upgrading the framework, versioning etc etc).
I saw this and just about eliminated my Initializr foundation because:
A) The Initializr index.html rendered differently from the same page on getbootstrap.com and I could not figure out why
B) It was not at all obvious why this style was inline inside the <head> section since there was no comment.
Thankfully I did not delete the Initializr files. It turns out getbootstrap.com includes these same styles (but via a very small stylesheet named theme.css). The values are a bit different than the ones you mentioned, but same idea.
The theme I was referencing included this theme.css:
body {
padding-top: 70px;
padding-bottom: 30px;
}
.theme-dropdown .dropdown-menu {
position: static;
display: block;
margin-bottom: 20px;
}
.theme-showcase > p > .btn {
margin: 5px 0;
}
.theme-showcase .navbar .container {
width: auto;
}
So, long story short- Initializr did the right thing here by removing the extra include in my opinion... HOWEVER, a <!-- Comment --> explaining what those styles are should be there. There are comments on most sections, yet none for this snippet.
Anyways, I am keeping my beautiful Initializr Bootstrap code base, and figuring out what pages need what values of what snippets lol.
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:)