The default resume template from the pagedown package is visually not very appealing. There are quite white spaces along the borders, the sidebar is too thick, and the font is not appropriate. I guess I should be knowledgeable in CSS to make changes to manipulate the changes. This is what I have tried so far:
# Manipulating the margins
p * {
/* Override default margins*/
--pagedjs-margin-right: 0.2in;
--pagedjs-margin-left: 0.2in;
--pagedjs-margin-top: 0.2in;
--pagedjs-margin-bottom: 0.2in;
}
# Manipulating the sidebar
:root{
--sidebar-width: 10rem; /* side bar width */
--sidebar-background-color: #e2a2a2;
--decorator-border: 2px solid #a2e2e2; /* change color and thickness of timeline */
}
# Manipulate the font
/* Define the font family here */
body{
font-family: "Roboto", sans-serif;
I have inserted this code chunk after defining YAML. When I play around with the second and third options and knit the file, they work as intended. However, no matter what number I use to change the margins, it remains the same. What should I do?
Related
I am trying to reduce the font size for speaker notes in Quarto's revealjs format. My CSS file looks like this:
.slides h1 {
font-size : 150%;
}
.slides h2 {
font-size: 140%;
}
.speaker-notes {
font-size: 4px;
}
/* .show-speaker-notes .speaker-notes { */
/* font-size: 4px; */
/* } */
/* .slides .speaker-notes { */
/* font-size: 4px; */
/* } */
/* .slides speaker-notes { */
/* font-size: 4px; */
/* } */
The font changes for h1 and h2 work as expected. But I can't figure out how to tweak speaker notes. I've commented out things I tried that didn't work.
I realize that once speaker notes are loaded, it's possible to use Ctrl-- and Ctrl-+ to change the relative font size. But it seems like the default should be adjustable. Also, I don't really want 4px -- that was just to make the change obvious.
Custom CSS provided to the css: key in the YAML header of your .qmd is not used by reveal.js' speaker notes plugin (CSS classes like speaker-notes live in a separate CSS file [...]/libs/revealjs/dist/reveal.css).
You could use ::: blocks to generate divs and apply inline CSS. Here's an example:
## A Slide with speaker notes
Slide content
::: {.notes}
Here are your notes
::: {style="font-size:14px"}
... and here are some small-font notes.
- This doesn't break markdown.
:::
We're larger, again
:::
Result
Update:
I have actually a made Quarto Extension filter style-speaker-note that allows to write css style in a css file and apply those for speaker notes font or other components. Read the repo readme to know about "Installation", "how to use" and for more examples.
You can include a CSS chunk inside the {.notes} Divs. And then in that CSS chunk define a CSS class and specify all the CSS properties you want for that class. And then use that class for elements that you want to change. (Of course, you can define more than one CSS class, but all of them have to be inside that .notes div.
---
title: "Changing styles of Speaker notes."
format: revealjs
engine: knitr
---
## A Slide with speaker notes
Slide content
:::: {.notes}
```{css, echo=FALSE}
#import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap');
.change-note {
font-size: 14px;
font-family: 'IBM Plex Mono', monospace;
background-color: #D4FFE9;
}
```
Here are the notes.
::: {.change-note}
These fonts are in smaller size and with different font family.
:::
and these are larger in size.
::::
Now two important things to note,
Since Quarto generates separate HTML bodies for the speaker notes for each different slide, the defined CSS class can only be used for that specific slide note where you defined it.
And (though it is not relevant to the question, just saying for avoiding any confusion) I have used engine: knitr for the above reprex, otherwise it would be rendered using jupyter kernel (since the very first code chunk quarto finds, a CSS chunk).
I am looking for best practice for changing component styling in Ionic 4, such as font size. I've read many sources but not clear on what the best approach is.
As I understand it, there is an SCSS file for each component that can be used to set styling for that component, and global.scss for global changes.
Are there any special considerations here? For example, is using element names appropriate or should classes be preferred?
What about when the styling varies between platforms? Is that best done with something like...
ion-card-header {
.ios & {
}
.md & {
}
}
To change globally, add it to the global SCSS?
Also how to work appropriately with CSS variables.
Looking for thoughts and best practices please, and any considerations special to the structure of Ionic 4.
I am having a go at answering this myself, to collect the information I have been looking at.
Utility Attributes - text-wrap, no-padding etc.
Ionic 4 includes a number of utility attributes that can be used to modify elements where they are available. Examples include text-wrap or padding-start.
These can be applied to any element, to adjust the styling by using an attribute. This is the preferred approach for changes that only apply to a single case, and would not benefit from a rule.
The utilities include:
Text Modification
text-center, text-wrap, text-capitalize etc.
Element Placement
float-left, float-end etc.
Content Space
padding-start (adds 16px padding at start), no-padding, margin-bottom etc.
Flex Properties
justify-content-evenly, align-items-baseline, nowrap, align-self-center etc.
For the text modification and element placement attributes, they have responsive versions, such as text-lg-center or float-sm-end.
CSS Variables - --color, --padding-start etc.
Ionic 4 is built using CSS Variables (more on CSS Variables), replacing SCSS variables and enabling runtime changes.
Global CSS Variables - --ion-color-primary, --ion-color-primary-contrast etc.
Colour Variables
--ion-color-primary, --ion-color-primary-contrast etc.
Application Variables
--ion-font-family, --ion-grid-padding-md etc.
These are described in more detail below.
Global Colour CSS Variables
Theme colours should be used for any colour that is used throughout your application. Ionic 4 provides 9 theme colours out of the box, which can be used to change the colour of many components. Examples include:
<ion-button>Default</ion-button>
<ion-button color="primary">Primary</ion-button>
<ion-button color="secondary">Secondary</ion-button>
<ion-button color="tertiary">Tertiary</ion-button>
<ion-button color="success">Success</ion-button>
<ion-button color="warning">Warning</ion-button>
<ion-button color="danger">Danger</ion-button>
<ion-button color="light">Light</ion-button>
<ion-button color="medium">Medium</ion-button>
<ion-button color="dark">Dark</ion-button>
Modifying Colour Variables
You should set all of appropriate variables when changing a colour, such as...
:root {
--ion-color-secondary: #006600;
--ion-color-secondary-rgb: 0,102,0;
--ion-color-secondary-contrast: #ffffff;
--ion-color-secondary-contrast-rgb: 255,255,255;
--ion-color-secondary-shade: #005a00;
--ion-color-secondary-tint: #1a751a;
}
The colour generator can be used to generate these for a base colour. It can't be done with SCSS because it needs to work at runtime. Solutions to support this are being worked on.
Adding Colours
New colours that are used throughout your application can be added, as an alternative to modifying a default colour.
Modifying the Background Colour or Text Colour
When modifying the background colour or text colour variable, a large set of stepped colours also need to be updated. An example is...
:root {
--ion-background-color: #ffffff;
--ion-background-color-rgb: 255, 255, 255;
--ion-text-color: #000000;
--ion-text-color-rgb: 0, 0, 0;
--ion-color-step-50: #f2f2f2;
--ion-color-step-100: #e6e6e6;
--ion-color-step-150: #d9d9d9;
--ion-color-step-200: #cccccc;
--ion-color-step-250: #bfbfbf;
--ion-color-step-300: #b3b3b3;
--ion-color-step-350: #a6a6a6;
--ion-color-step-400: #999999;
--ion-color-step-450: #8c8c8c;
--ion-color-step-500: #808080;
--ion-color-step-550: #737373;
--ion-color-step-600: #666666;
--ion-color-step-650: #595959;
--ion-color-step-700: #4d4d4d;
--ion-color-step-750: #404040;
--ion-color-step-800: #333333;
--ion-color-step-850: #262626;
--ion-color-step-900: #191919;
--ion-color-step-950: #0d0d0d;
}
These can be easily generated.
Global Application CSS Variables
A number of global application variables are available. These should be used where they can be. Examples include --ion-font-family, --ion-padding and --ion-margin. Those last two modify the values used by the utility attributes for padding and margin that were discussed above.
Global Grid CSS Variables
A number of global grid variables are available. These should be used where they can be. Examples include --ion-grid-columns and --ion-grid-padding-xl.
Component CSS Variables
The CSS Variables that a component accepts can be found in the Custom Properties section of its entry in the API Reference.
For example, see the Custom Properties for ion-button, such as --ripple-color or --color-activated.
Setting CSS Variables
To set global variables, use the src/theme/variables.scss file, and set them on the :root selector, such as...
:root {
/* Set the font family of the entire app */
--ion-font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif;
}
To set component variables, use the component selector, such as...
/* Set the color on all ion-button elements */
ion-button {
--color: #222;
}
CSS variables should be used to modify components where they are available.
Getting CSS Variables
To get a CSS variable, the var() CSS function should be used, which allows any number of fallback values, such as...
.fancy-button {
--background: var(--charcoal, #36454f);
}
Platform Styling
Platform specific styling should be changed using the .ios and .md selectors, such as:
.ios ion-badge {
text-transform: uppercase;
}
Global variables should be used for this where they are available, such as:
.ios {
--ion-background-color: #222;
}
When printing to PDF in Google Chrome ("Save to PDF" virtual printer), there's an option to set margins for every page in inches // cm. However, by default they are always white. Is there a way to change color to blue, or use background-image?
What I've tried:
Ensured all background graphics are printed:
#media print and (color) {
* {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}
Tried to set bg-color for #page attribute:
#page {
size: 7in 10in;
margin: 1in;
}
Tried to set bg color for every element on page: html, body, #content .
This article shows an example, how to affect margins areas with footnotes:
#page:right{
#bottom-left {
margin: 10pt 0 30pt 0;
border-top: .25pt solid #666;
content: "My book";
font-size: 9pt;
color: #333;
}
}
But it doesn't work for me.
Also I've tried to inspect chrome build-in PDF previewer and found a string:
<embed id="plugin" type="application/x-google-chrome-pdf" src="chrome://print/190/0/print.pdf" stream-url="chrome://print/190/0/print.pdf" headers="" background-color="0xFF525659" top-toolbar-height="0" top-level-url="undefined">
However, it's a bit tricky to modify background-color though it's already loaded and rendered. And I'm not sure, if it affects resulted PDF or just preview:
Any other options? This feature is rather critical for me, so I'm ready for memory hotpatching or even rebuilding Chromium from source if needed at least.
Target platform: Win 10 x64
There exist no direct way, but you can fake it:
Goto Format > Page.
Set the margin to 0cm. Ignore printer warning.
Set the background to your favorite color in tab Area.
Goto tab Borders and define a border in the same color. On that tab use the setting "Spacing to Contents" to fake the margins.
I would like to include a code block in a presentation I am preparing with Restructured Text. But the font used in the code block is huge and it can not fit inside resulting code box:
How can I reduce the font size used in code blocks?
Set the fontSize property of the code style in your style file.
e.g.
code:
parent: literal
fontSize: 10
Some of the builtin themes (alabaster) accept usage of custom.css.
Create _static/custom.css and add the following to adjust the code-block font-size:
_static/custom.css:
.highlight { background: #f8f8f8; font-size: x-small;}
You need a layout.html in a dir mysources/_templates and in your mysources/conf.py you need a declaration templates_path = ['_templates'].
In layout.html add a declaration
div.highlight {
font-size : 0.8em; /* or another value you prefer */
}
This works for me because I use the html_theme sphinxdoc. Maybe in other themes the declarations differ. If so you must find out the declaration by a html debugger like Inspektor in Firefox or Developer Tools in Chrome or DOM Explorer in IE.
I'm pretty new to this Qt thing and its whole stylesheet system. My background of HTML/CSS helps a little to understand the system, but a lot of things just happens for no apparent reason....or don't happen.
Anyway, the mystery of the HLINE and the VLINE and how to change the lines' color is just a mystery for me. I learned from other questions and various fora that it's linked to the QFrame elements. And I can change the color of the line if I just use something like
QFrame
{
color: red;
}
But this of course changes the color of tons of other things that uses a QFrame as well. I could of course go into the HLINE element and put color: red; in there and that works fine, but my app requires that I put everything in a single stylesheet that gets loaded into the app. So styling individual elements is not an option.
A solution would look something like
QFrame HLine, QFrame VLine
{
color: red;
}
QFrame[frameShape="4"] /* QFrame::HLine == 0x0004 */
{
color: red;
}
QFrame[frameShape="5"] /* QFrame::VLine == 0x0005 */
{
color: green;
}
HLine and VLine are tricky to style. It's worth taking a look at the "Detailed Description" section of the documentation. For a quick fix, I found that this set of rules allows customizing the appearance of such lines via stylesheet in a reliable and relatively clean manner:
QFrame[frameShape="4"],
QFrame[frameShape="5"]
{
border: none;
background: red;
}
This works regardless of the frameShadow property, which otherwise affects their appearance and the effect of style rules. Keep in mind that the width of the lines are not 1px by default -- this can be changed using the min-width, max-width, min-height or max-height properties, as appropriate.
For a more detailed overview of my findings, read along.
Most QFrames have the QFrame::Plain frameShape by default, but HLine and VLine's default frameShape is QFrame::Sunken. This means that they are not really lines, but thin boxes that contain a mid-line that's used to provide the 3D effect. From the documentation:
The mid-line width specifies the width of an extra line in the middle of the frame, which uses a third color to obtain a special 3D effect. Notice that a mid-line is only drawn for Box, HLine and VLine frames that are raised or sunken.
If you set the frameShape to Plain, this midline is still visible, and can be styled with the color property (note: that's not a background-color or border-color!)
But this doesn't work for a HLine/VLine that's left with the default Sunken appearance. One way to fix this could be to set separate styles for Plain and Sunken QFrames by using attribute selectors with the decimal values of the property enums (which are described in the documentation in hehadecimal), like so:
/* Reference (from doc.qt.io/qt-5/qframe.html#types):
* - frameShape[4] --> QFrame::HLine = 0x0004
* - frameShape[5] --> QFrame::VLine = 0x0005
* - frameShadow[16] --> QFrame::Plain = 0x0010 (default for most widgets)
* - frameShadow[48] --> QFrame::Sunken = 0x0030 (default for HLine/VLine)
*/
QFrame[frameShape="4"][frameShadow="16"],
QFrame[frameShape="5"][frameShadow="16"]
{
...
}
QFrame[frameShape="4"][frameShadow="48"],
QFrame[frameShape="5"][frameShadow="48"]
{
...
}
but since the styles that work for HLine/VLine with QFrame::Sunken also work for those with QFrame::Plain, it's usually a waste to do so. I show them above for educational value only about how to use attribute selectors.
The best approach is to treat the QFrame as the box that it is, and either (1) set border-top or border-right coupled with a max-height: 0px (or max-width for a VLine), to ensure the inside of the box doesn't take up space in the layout; or (2) use a background color coupled with border: none (in which case, max-height/width should be 1 or larger, otherwise the QFrame is invisible). The latter is the solution I'd recommend, as shown in the first code block above.
Hope this helps!
According to QDarkStyleSheet issue, You could use:
QFrame[width="3"], QFrame[height="3]
These selectors, they seem to work cross-platform, and they are unlikely to change.
Probably better than using enum values as ints, as they are likely to change with Qt versions, and line styling are not, as they fulfill certain requirements.
but my app requires that i put everything in a single stylesheet that
gets loaded into the app.
You can use Conflict Resolution. Suppose that you have a QMainWindow object with lots of widgets on it . Set these style sheets for the maindionw style sheet :
QLabel#label{
background-color: rgb(255, 170, 255);
}
QPushButton#pushButton{
color: rgb(0, 0, 255);
}
QFrame#line{
background-color: rgb(0, 170, 255);
}
The first css just changes a QLabel name label on your mainwindow and set its back color to rgb(255, 170, 255). The next will change text color of a QPushButton named pushButton to (0,0,255);. The third one change property of a line.Lines are just a QFrame.
So the solution that I can offer is to place your css in a file and then load this file using QFile and QTextStream and then set the contents of the file for css of your main winodw or main widget using setStyleSheet ( const QString & styleSheet ) function. or If you are using creator just right click on your main window and select change stylesheet and then paste your css. But bear in mind that you should use conflict resolution.
You can leave Qt's hlines and build up your own very easy. For frames you want looks like hline add property "class" as "HLine" (for example), in designer or in c++ code:
frame->setProperty("class", "HLine")
.
Then, you can define in main view's or in global app stylesheet something like this:
QFrame.HLine {
border: none;
border-bottom: 2px solid red;
}
and you will get horizontal two pixels red line.