I decided to use markdown with flexdashboard package for generating a dynamic dashboard.
The dashboard is well designed out of the box thanks to the people who wrote it , BUT I would like to set a sidebar to the right side of the screen (not to the left as given by default).
I have read the documentation flexdashboard's sidebar and googled quite a lot but couldn't find a way how to customize it from the markdown file (Rmd).
Eventually decided to modify bunch of CSS files, and move those html elements.
.section.sidebar {
top: 61px;
border-bottom: 10px solid #ececec;
border-left: 10px solid #ececec;
background-color: rgba(255, 255, 255, 1);
left:1080px;
}
but it seems I have taken the wrong path (CSS tweaking is a headache for me), Can someone suggest a better approach cause I'm kinda lost here?
for demonstration purposes I drew a small sketch:
my illustration
Thank you in advance,
Gil
You have to add this CSS code to parent class:
.container {
justify-content: flex-end;
}
Related
First question on Stackoverflow but I've used it constantly while learning how to make websites and a bunch of other stuff. I've been using Bootstrap to create a website with a friend and in the past we've both seen websites with really beautiful navbars.
What we're wondering is if we can utilise Bootstrap's navbars and add some additional code to add a sort of under-glow to the buttons! In an ideal world too, this glow would move from button to button following the cursor and reset to the currently active page button if none are hovered over. I'm hoping you've seen something like this before but it's actually difficult for me to find an example of this now.
I've been looking at using this sort of effect but turned upside down
body { margin: 30px; }
hr {
border: none;
border-top: 1px solid #eee;
height: 5px;
background: -webkit-radial-gradient(50% 0%, 50% 5px, #aaa 0%, white 100%);
}
<hr>
(Source: http://jsfiddle.net/sonic1980/65Hfc/; (provided by another amazing stackoverflow user))
Is this possible? Thanks for any help, let me know if I can provide any further information.
I tried to replicate it with a box shadow, check it out:
.btn{
box-shadow: 0px 5px 5px #888888;
}
http://jsfiddle.net/gumxt15q/
Using inset
http://jsfiddle.net/q0ere00q/
I am designing my theme for my website, and have no other CSS files in my folder besides template.css.
.header-wrap,
.nav-wrap,
.slideshow-wrap,
.body-wrap,
.sub-footer-wrap,
.footer-wrap {float: left; width: 100%; clear: both;}
.header,
.nav,
.slideshow,
.body,
.sub-footer,
.footer { width: 960px; margin: 0 auto;}
.header-wrap { height: 118px; background: url('files/img/background/bg-header.png')
repeat-x; border-bottom: 1px solid #6A6A6C}
.nav-wrap { height: 38px; background: url('files/img/background/bg-nav.png') repeat-x;
border-top: 1px solid #D9D9DB; border-bottom: 1px solid #B8B8BA}
.body-wrap { background: #F4EDDB url('files/img/background/bg-body.png') repeat-x;}
I don't believe that the issue is relating to that but there must be something else doing this to my webpage:
The red lines show the whitespace that is being generated for some unknown reason. I have been looking at this for a while and have not been able to find the source. I was wondering if anyone has had an issue like this before? Or someone that might be able to point me in the right direction to fix the matter. I have also tried multiple browsers and have the same issue. I have also made sure that it wasnt just an administration issue. It keeps happening no matter what. I am using Google Chrome currently.
--EDIT--
Here is my jsfiddle for those of you who asked (it still does it on there too) this has the full html
http://jsfiddle.net/RCMh7/
Add this to your css.
body { margin: 0px; padding:0px}
Or google "reset.css" and add it into your theme, the Eric Meyer one is fairly popular.
http://www.cssreset.com/
you should put margin-top:0 and margin-left:0 on this divs.
can you show on jsfiddle for us? or a link page?
Use the firebug for firefox tool to check that CSS issue . It might be occurring just due to some background image or CSS file. For all CSS linked to that theme check that theme's .info file also.
Although As per my experience you will able to get exact source of CSS by using firebug .
It may be some background kind of image or CSS effect.
I have two Joomla module positions. They are stacked in the same module position. I need for these two modules to appear on the web page as a single displayed module with a single border surround all of it.
How can this best be accomplished without modifying PHP code for either of these modules? I'm thinking this might be done with CSS, but I'm not an expert with CSS. Maybe a Module Class Suffix added for both of these modules could make them appear appear seamlessly joined? If so, how do I do this?
OKay, without being able to see the HTML, I'll pretend the two components get outputted as <div>s with the class themodule, and that some padding, borders and margins have been applied something like this:
.themodule {
padding: 1em;
border: 0.1em solid black;
border-right: 0;
margin: 2em;
}
If you add this:
.themodule + .themodule {
padding-left: 0;
border-left: 0;
border-right: 0.1em solid black;
margin-left: 0;
}
That means any .themodule directy after another one will get the left padding, border and margin chopped so it butts right up against the previous one and visually is part of the same box.
Hopefully you can apply to your case, but let me know if you have questions.
i have the problem whit my layout, make in css some, whit no javascript because i dont know dynamically position my divs(posts)...this divs have spaces, make lines and i dont want lines because are diferent sizes, see the photo to understand perfectly:
see this photo please
http://postimage.org/image/hibb48iq3/
this is the normal, but the next see this:
http://postimage.org/image/6h9b8mpt9/
this big space i dont want, im try use various properties of display in the css but nothing change this big space, my css to this is it:
#post {
box-shadow: 0px 1px 3px rgba(34, 25, 25, 0.4);
background: #fbffff;
color: #6d6d6d;
margin:10px 0;
padding:15px;
box-sizing: border-box;
font-family: tahoma;
line-height: 20px;
width:30%;
float:right;
}
if someone have some solution, or using css or javascript of a made dinamyc, my code is in ruby on rails some to inform.
Im thanks and wait response, please.
Looks like your going for a "Pinterest" layout. Your best bet is to use jQuery and add the plugin Isotope or Masonry
I'm developing a Grails app and I need to modify some elements' style. I tried to add a css class to the main.css file but it is not working.
In /web-app/css/main.css:
.artistItem {
background-color: #444;
border: 1px solid #fff;
padding: 10px;
color: #ccc;
width: 200px;
}
In the .gsp:
<div class="artistItem">Some text</div>
But the div remains unchanged. Am I missing something?
Thanks!
This isn't a direct answer
Playing around with CSS in grails can be a little frustrating for someone that hasn't had a lot of exposure to CSS in general (I'm speaking form experience). Grails provides a nice clean CSS for a good starting point but trying to build on it without understanding CSS can cause some pain.
I would recommend looking at a couple tools like FireBug for firefox or Chrome's built in developer tools, IE also has a nice developer tool. These tools allow you to see how the browser is rendering your page and what CSS elements are being used or not used. They also expose the javascript console and several other nice debugging tools. I believe this are essential tools to help understand what the browser is doing.
I hope this helps!
Try:
.artistItem {
background-color: #444 !important;
border: 1px solid #fff !important;
padding: 10px !important;
color: #ccc !important;
width: 200px !important;
}
If that works, then you know there is another css stylesheet overriding it. If not the css is not being included properly.