I am using the flexdashboard Package with Rmarkdown and would like to modify the dimensions of headers, location of borders, colors, etc. that result in the webpage created by Rstudio. There are many CSS files associated with flex dashboard and Rmarkdown. Can someone please inform me what CSS files should be modified for this purpose, and where these files are located in the R or Rstudio directories?
By modifying a CSS theme (we chose to modify Lumen) in a flexdashboard subdirectory my colleague and I learned we could control the dimensions of certain elements in flexdashboard.
Specifically, we altered the CSS file in this directory:
C:\Program Files\R\R-3.4.2\library\flexdashboard\rmarkdown\templates\flex_dashboard\resources
See the annotated CSS file (again, for the Lumen theme) below for how we changed the dimensions of the border boxes. The edits shown were placed at the end of the existing lumen.css file.
/* Jeff's Edits */
.storyboard-nav {
box-sizing: border-box;
width: 100% !important; /* This prevents JS transformation on width */
height: auto; /* This overrides the height */
}
.storyboard-nav .sbnext, .storyboard-nav .sbprev {
height: auto; /* This overrides the height */
font-size: 3rem;
}
.storyboard-nav .sbframelist {
height: auto; /* This overrides the height */
}
.storyboard-nav .sbframelist ul {
box-sizing: border-box;
width: 100% !important; /* This prevents JS transformation on width */
height: auto; /* This overrides the height */
}
.storyboard-nav .sbframelist ul li {
height: auto; /* This overrides the height */
width: auto; /* This overrides the width */
}
You can always modify the defaults by adding your own CSS file, instructions here. This way you don't have to modify the default specifications (in case you ever want to use them).
If you want to check the default specifications for each theme, you can find them in the flexdashboard github repo.
Related
I've a code mirror version: 5.65.3 with Blazor. When I've a long line in the editor the horizontal scroll doesn't work, it rather uses the scroll of the page which mess out the whole page.
Like this:
I don't think that I changed any CSS in Codemirror.
Here is some related CSS lines:
.CodeMirror {
/* Set height, width, borders, and global font properties here */
font-family: monospace;
height: 750px;
color: black;
direction: ltr;
}
.CodeMirror-scroll {
overflow: scroll !important; /* Things will break if this is overridden */
/* 50px is the magic margin used to hide the element's real scrollbars */
/* See overflow: hidden in .CodeMirror */
margin-bottom: -50px; margin-right: -50px;
padding-bottom: 50px;
height: 100%;
outline: none; /* Prevent dragging from highlighting the element */
position: relative;
z-index: 0;
}
I'm calling the codemirror through this code: (the onchange is because I'm using Blazor for binding purposes )
window.editor= function (dontNetObjRef) {
editor = CodeMirror.fromTextArea(document.getElementById('myTextArea'), {
lineNumbers: true,
indentUnit: 4,
lineWrapping: true,
tabMode: "shift",
gutters: ["CodeMirror-lint-markers"]
});
//JavaScript function use the onchange event of CodeMirror to invoke the C# method and pass the value of the myTextArea .
editor.on("change", editor => {
dontNetObjRef.invokeMethodAsync("UpdateField", editor.getValue());
// console.log(editor.getValue());
});
Note: even if I used lineWrapping: true it moved to the second line and does the same issue with scroll.
Also, it works well when I set a fixed width like 1000px but I'd like to make it auto in case the screen size of the user changes.
Thanks to Jax-p for giving me some hints to fix the issue.
I've add width:70vw in .CodeMirror class and max-width:70vm in .CodeMirror-scroll
Another thing that was affecting the changes is that I was putting the textarea in inside a <div class=col-11> which was affecting the width in the CSS so I just removed that and everything is working.
While working on a project I've encountered the same issue - that is a problem with CSS.
I fixed it with that pretty simple flexbox solution:
<div class="root-wrapper"> <!-- Editor parent container -->
<div class="cm-editor ͼ1 ͼ2 ͼ4"> <!-- CodeMirror stuff (v6 in my case) -->
...
</div>
</div>
The corresponding styling:
.root-wrapper {
display: flex;
flex-direction: row;
.cm-editor {
width: 0;
flex-grow: 1;
}
}
Working on CSS in Visual Studio Code I want to select multiple lines of property:value code and comment them out separately. For example
Before:
body {
width: 0px;
height: 0px;
color: red;
}
After highlighting the width, height and color lines and applying auto comment with Ctrl+/, VS Code's default behaviour is to include all lines as one comment:
body {
/* width: 0px;
height: 0px;
color: red; */
}
I want to have:
body {
/* width: 0px; */
/* height: 0px; */
/* color: red; */
}
How can this be done?
You mean this:
You hold alt and place the cursor on multiple lines and CTRL+C to comment..
Hold down Alt and select rows/multiple lines to comment and press ‘Alt+Shift+A’. This will Block comment the selected sections. You can comment just parts of code using this method.
I have created a wordpress single theme, but I am getting confuse with CSS code, where CSS rules should change the display to make menu and image slider revolution look closer.
I would like to reduce the space between the main navigation menu and my revolution slider
This is my website url: http://www.warungrempong.com/
I am trying to use this CSS code:
.admin-bar .nav-container {
min-height: 0;
}
But it's not working as desired and only work when I am using it on my browser dev tools.
When I try to change in my website, nothing happen.
How can I solve this issue?
Thanks.
In the style.css file of your active child theme (or theme), You should add this:
.nav-container {
min-height: inherit !important;
}
When looking at the generated source code of your home page, it seems that your theme is embedding some CSS rules in the html document, as you have this (on line 41 of that source code):
<style id='ebor-style-inline-css' type='text/css'>
nav .pb80 {
padding-bottom: 0px;
padding-top:0px;
}
.pt120 {
padding-top: 0px;
}
.nav-container { /* ==========================> HERE ONE TIME */
min-height: 0;
}
.logo { max-height: 300px; }
.nav-container { /* ======================> HERE ANOTHER TIME
As this is the last instance, it get the priority on first one! */
min-height: 491px;
}
.admin-bar .nav-container {
min-height: 523px;
}
#media all and (max-width: 767px){
.nav-container {
min-height: 366px;
}
.admin-bar .nav-container {
min-height: 398px;
}
}
</style>
So may be you have add this CCS rules yourself somewhere in your theme settings. The best thing, should be to remove that 2 repetitive CSS rules, and your issue should get solved without any need…
I have just started to explore GWT, and i'm bit confused with different ways of applying styles to GWT widgets.In gwt docs, there are 4 ways by which you can override default style of a widget,
1) Using a tag in the host HTML page.(Deprecated)
2) Using the element in the module XML file.(Deprecated)
3) Using a CssResource contained within a ClientBundle.
4) Using an inline element in a UiBinder template.
Suppose i have a CSS file in some package say, com.abc.xyz.styles.css .And the file has the following contents,
/**the panel itself**/
.gwt-TabLayoutPanel {
border: none;
margin: 0px;
padding: 0px;
}
/**the tab bar element**/
.gwt-TabLayoutPanel .gwt-TabLayoutPanelTabs {
background-color: #F4F4F4 !important;
}
/**an individual tab**/
.gwt-TabLayoutPanel .gwt-TabLayoutPanelTab {
background-color: #6F6F6E !important;
}
.gwt-TabLayoutPanel .gwt-TabLayoutPanelTab-selected {
background-color: white !important;
}
/**an element nested in each tab (useful for styling)**/
.gwt-TabLayoutPanel .gwt-TabLayoutPanelTabInner {
font-family: Arial !important;
}
/**applied to all child content widgets**/
.gwt-TabLayoutPanel .gwt-TabLayoutPanelContent {
border: none;
margin: 0px;
overflow: hidden;
padding: 15px;
}
How will i inject this css file ? How can this be done using the 3rd and 4th option of styling mentioned above?.
You can simply add your CSS file to the host page. Then you can use the full power of CSS selectors. This is my preferred method of using CSS in GWT:
What the best strategy to structure CSS in GWT?
i'm building a custom theme for wordpress and saw this in the default 2010 style.css file:
#wrapper {
margin: 0 auto;
width: 940px;
}
#wrapper {
background: pink;
margin-top: 20px;
padding: 0 20px;
}
now this is the default code (except the pink). when i try and collapse it, which seems logical, it makes quite a difference.
what i can't figure out is WHY you'd declare the same element twice like that? i've never seen that before...
WR!
It proves useful when you want to apply shared properties at multiple elements. Another useful application is adding stylesheets from multiple sources Example:
#head, #foot {
height: 100px;
}
#foot { /*Another foot*/
color: red;
}
Second example: CSS from multiple sources:
/* External stylesheet: common.css */
body {
background: yellow;
}
/* Inline stylesheet, overrides external stylehseet */
body {
background: pink;
}
When two properties have the same specificity, the lastly declared property will be applied.
It just overrides previously declared properties.
wrapper will now have margin:20px auto 0 auto (Top Right Bottom Left).