This is the markdown code effect of stackoverflow:
Code from stackoverflow
Nearly no extra space at the beginning
And this is the markdown code effect of gitbook:
The extra blanks at the beginning is confusing for me. So I decided to change it by myself.
I did:
cd /usr/local/lib/node_modules/gitbook/theme/stylesheets/base
vim markdown.less
In which there is a code block which looks like:
code {
padding: 0;
padding-top: 0.2em;
padding-bottom: 0.2em;
margin: 0;
font-size: 85%;
background-color: #f7f7f7;
border-radius: 3px;
}
I changed the font-size to 385% and border-radius to 0px. I used git serve . to restart my gitbook server, but the code effect didn't change.
I got these files which havs code keyword in the theme directory, which should I modify?
.//assets/app.js
.//assets/fonts/fontawesome/fontawesome-webfont.svg
.//assets/fonts/fontawesome/fontawesome-webfont.ttf
.//assets/fonts/fontawesome/FontAwesome.otf
.//assets/print.css
.//assets/style.css
.//javascript/utils/sharing.js
.//stylesheets/base/markdown.less
.//stylesheets/base/normalize.less
.//stylesheets/website/highlight/night.less
.//stylesheets/website/highlight/white.less
.//stylesheets/website/markdown.less
.//templates/book/includes/exercise.html
.//templates/ebook/includes/exercise.html
What else should I do?
This should be a comment, but you can't fiddle in comments.
As you can see below, the style information you've given doesn't include the styles you want to change, you've left out some important information from somewhere.
The code you've included is shown on the left, the problem you've described is on the right.
code {
padding: 0;
padding-top: 0.2em;
padding-bottom: 0.2em;
margin: 0;
font-size: 85%;
background-color: #f7f7f7;
border-radius: 3px;
}
.described {
padding: 20px;
}
<code>fprintf(...);</code>
<code class="described">fprintf(...);</code>
To over-ride the Gitbook default styles, create a file called 'styles/website.css` in the root of your gitbook project.
Edit the book.json file and add the following to define the source of your own custom styles
{
"styles": {
"website": "styles/website.css",
"ebook": "styles/ebook.css",
"pdf": "styles/pdf.css",
"mobi": "styles/mobi.css",
"epub": "styles/epub.css"
}
}
Anything in this file will over-ride the Gitbook styles (if you get the names right).
Then find out the names of the html elements you wish to apply or change styles to using your browser inspector. Open your Gitbook project in a browser and right click on a code block, this brings up a menu with Inspect or Inspect Element.
You will need to restart gitbook serve when changing styles as it only reads the styles/website.css file on startup.
The styles I defined to over-ride the Gitbook ones can be seen in this Github Gist
https://gist.github.com/jr0cket/9cc41eb9dd0b6c6d091831be43fa3e42
The results of these can styles can be seen at:
https://practicalli.github.io/clojure/basic-clojure/
Thank you
Related
Newbie here, I am adding additional css to my wordpress theme while inspecting it with chrome dev tools.
For example, this element has the following styles (by default, provided by my theme):
.product p.price {
float: left;
margin: 0;
}
I want to add this:
padding: 10px 0;
And now it looks like this:
.product p.price {
float: left;
margin: 0;
padding: 10px 0;
}
When I'm done, do I have to copy the 3 lines from dev tools to my theme's additional css or just the one line I added? Does it matter if my additional css reads this:
.product p.price {
padding: 10px 0;
}
instead of this:
.product p.price {
float: left;
margin: 0;
padding: 10px 0;
}
Is there a right/wrong way when adding additional css to a theme?
I'm not familiar with the way wordpress does these things, but i doubt you want to edit the CSS into your template. Templates can get updated over time and when you update them it'll likely just remove all the old files and replace them with the newly downloaded versions - all your changes would be wiped.
I imagine wordpress either provides a separate place for you to override styles, or allows you to manually add extra stylesheets (fresh empty .css textfiles).
In either case, you'd only add your changes to the stylesheet.
Based on your example, the right thing to add would be:
.product p.price {
padding: 10px 0;
}
Lets start out by saying that I am not great at writing CSS...so this may require some patience
I was following this tutorial: https://css-tricks.com/float-labels-css/
And it was my first time seeing CSS written with the following syntax:
form {
width: 320px;
float: left;
margin: 20px;
/* This is the part I am confused about */
> div {
position: relative;
overflow: hidden;
}
}
Maybe this is a stupid question, but is this the same as
form {
width: 320px;
float: left;
margin: 20px;
}
form > div {
position: relative;
overflow: hidden;
}
?
I am trying to utilize this syntax but I cannot quite figure it out. Can someone explain it to me please? :) Also, does this syntax have a name? I am having trouble even looking it up. Thank you!
Look for scss/sass. You will then write .scss files and then compile those to .css. You can simply install it via npm and then tell your IDE to automatically compile the files on save - or will have to make npm watch the files if you editor doesn't support it. But yeah, simply look for "how to install scss"
I am trying to create a printable document using CSS in my angular project.
For my print document that runs into multiple pages I need automatically to avoid printing the date and title in the header. At the same time I want to make sure that the document is printed with some margins. To achieve this I am using the approach suggested in this answer on SO. However I am not able to get the styling to apply.
My CSS Code looks like this
#media print {
#page {
size: auto;
margin: 0;
}
body {
margin: 2cm !important;
}
}
I have tried pasting this code in both the app.component.scss file as well as the styles.scss file. Both approaches don't seem to work. Any suggestions?
You need to put the following css in your styles.css file
#media print {
#page {
size: auto;
margin: 0mm; // added mm
}
body {
margin: 2cm;
}
}
And if you need component specific styling, you can add that to your component's css file as well:
#media print {
section {
color: orange;
}
}
Here is a Stackblitz example.
You can also try to print this page (https://angular-j4ab2g.stackblitz.io), and you will see that the date from the header is gone, and my custom section has orange text.
EDIT
I think the best option to remove the footer and header is to un-check the box in the print settings
Then you do not need to add the 0mm margin to the #page selector and the 2cm margin on the body selector.
I'm trying to override a particular widget's style using UiBinder. What am I overlooking?
<ui:style>
/*************
* Note #1
*************/
.btnVote {
display: inline-block;
width: 50px;
height: 50px;
background: #fff;
margin: 5px;
text-align: center;
outline: none;
cursor: pointer;
}
/*************
* Note #2
*************/
.btnVote-up-hovering, .btnVote-down-hovering {
background: #ddd;
}
.btnVote-up-disabled, .btnVote-down-disabled {
border-shadow: inset 0 1px 3px #aaa;
}
.lblName {
line-height: 50px;
font-size: 40px;
padding: 5px 10px;
}
.clear {
clear: both;
overflow: auto;
}
.floatLeft {
float: left;
}
</ui:style>
<g:HTMLPanel styleName="{style.clear}">
<g:FlowPanel styleName="{style.floatLeft}">
/*************
* Note #3
*************/
<g:PushButton ui:field="btnVoteUp" stylePrimaryName="{style.btnVote}">
(+)
</g:PushButton>
<g:PushButton ui:field="btnVoteDown" stylePrimaryName="{style.btnVote}">
(-)
</g:PushButton>
</g:FlowPanel>
<g:FlowPanel styleName="{style.floatLeft}">
<g:Label ui:field="lblName" stylePrimaryName="{style.lblName}"/>
</g:FlowPanel>
</g:HTMLPanel>
Note 1: This rule is being applied and works fine
Note 2: This other rules seem to be getting ignored (they don't take effect)
Note 3: The default naming for the widget is being reset, hence Note 1 works fine. The base class is set to GOGXR1SCFI instead of gwt-PushButton
Why aren't they other rules working? When I hover the widget, the class GOGXR1SCFI-up-hovering is indeed set to the widget, but no accompanying CSS.
Thanks for your help.
Update
Something I ran into that gave me a hard time for a while: when you use the #external keyword, you must place a semi-column at the end of the #external statement, as in:
<ui:style>
#external .btnVote;
.btnVote {
...
}
</ui:style>
<g:FlowPanel styleName="{style.btnVote}"/>
One thing you could do is to create your CSS using ClientBundle, define all the different states there, then handle the various states manually. This way you don't need to define classes as #external, and GWT will optimize the CSS for you (shorten the names, only ship what gets used, etc.). This is especially beneficial for custom widgets and such.
The easiest way to deal with this is to write #external .btnVote, .btnVote-up-hovering, .btnVote-down-hovering, .btnVote-up-disabled, .btnVote-down-disabled at the top of your <style> section.
The original GWT widgets do not work well with CSS resources (like the one you have in your UiBinder). They depend on a primary style name that they append things like "up-hovering" to. This is terrible for CSS resources and UiBinders because when you type "up-hovering" it becomes things like SDLFJKS.
The button styles do NOT get obfuscated (so you can read "up-hovering"). Your UiBinder styles DO get obfuscated. You can never make them match as long as obfuscation is going on.
So, the #external keyword tells UiBinder and CssResource not to obfuscate certain styles. Now, when you use {style.btnVote-up-hovering}, that will actually come through to the final HTML, which is where these old-fashioned GWT styles will be applied.
I suspect you have CSS stylenames being obfuscated by GWT in your UIBinder. Reference - garbled css name when styling within UiBinder
Chose the approach you find easier to integrate in your proces. Cheers :)
I use GWT 2.1.1
In package resources i have png images and one css file.
In css file i wrote:
.finishedTask {
background: white url("tick64.png") center center;
padding: 0.5em;
border: 0;
}
.unFinishedTask {
background-color: white;
padding: 0.5em;
border: 0;
}
Than i create ClientBundle interface extension. With this CSS and images.
Than in UiBunder view i try to change css style:
textArea.setStyleName(isFinished() ? res.style().finishedTask() :
res.style().unFinishedTask());
When this code executed css layout of textArea are broken but i see that class changed (FireBug). Seems bug in css.
Maybe somebody already tried do the same thing.
Probably you should use addStyleName or addStyleDependentName instead of setStyleName which remove existing styles.