Friends,
I am using a major BI vendors analytics software and so far I managed
to overwrite a couple of .CSS classes with my own design choices however
it does not seem to work for the following case:
enter image description here
I tried the following two ways but those did not work:
DIV.clsAppPane {background-color: #000000!important;border-top: 1px solid #000000!important;} .clsAppPane {background-color: #000000!important;border-top: 1px solid #000000!important;}
I would be greatefull for any ideas.
Well this is not an answer but the only way I can add another image.
I have added the large white line. That was my doing and it works.
Now I want to get the green line (colored using Google Dev Tools just to highlight it - it is white be default) also in black or just remove it.
But...my css code does not work.
See image for more details- larger scrren print
/*does not work*/
DIV.clsAppPane {
background-color: #000000!important;
border-top: 1px solid #000000!important;
}
.clsAppPane {
background-color: #000000!important;
border-top: 1px solid #000000!important;
}
/*works*/
.appbar {
border-bottom: 1px solid white;
background-color:#2C2C2C;
You need to add an space before !important:
DIV.clsAppPane {background-color: #000000 !important;border-top: 1px solid #000000 !important;} .clsAppPane {background-color: #000000 !important;border-top: 1px solid #000000 !important;}
Related
Greetings I have problem. How get rid of border-bottom on calendar view(see image 1)?
This appears if using this css.
.fc-scrollgrid-section-body > td {
border-bottom: 1px solid gray;
}
What happens if you change border-bottom to border and sets to 0px then? Well calendar loses completely its bottom row(see image 2) It also did not showing in dayView and monthView.
I tried add another custom styles to css(before that setting .fc-scrollgrid-section-body > td its border to 0px )
1)I know what (investigated in inspector) what days have fc-day style(see image 3)
I added this styles to CSS but it also not working it completely not showing red border
.fc .fc-timegrid-col{
.fc-day{
border-bottom: 1px solid red;
}
}
//and
.fc-day{
border-bottom: 1px solid red;
}
another try
.fc .fc-timegrid-cols{
.fc-day,
.fc-timegrid-col{
border-bottom: 1px solid red;
}
}
using role tag to achieve same result
[role=gridcell] {
.fc-timegrid-col
.fc-day {
border-bottom: 1px solid red;
}
}
What I want is to have day columns bottom line and grid axe do not have one.
I found solution for dayGrid and WeekGrid not for month yet.
.fc-day .fc-timegrid-col-frame {
border-bottom: 1px solid $pitch-black-100;
}
UPDATE after 3+ hours of investigating
to add line for gridView month need to add this thing to styles
.fc-daygrid-body {
border-bottom: 1px solid $pitch-black-100;
}
It is possible to set a border or background-color for an Angular md-chip? I want background color to be whatever color (say, white) and then a slim black border.
OK here is the link to the Angular reference page on md-chips.
Here is the CSS to add a black border and white background.
.md-chips md-chip {
border: 1px solid #000;
background-color: #fff;
}
You may need to add !important in order to override the default styles, like so:
.md-chips md-chip {
border: 1px solid #000 !important;
background-color: #fff !important;
}
I have a problem with the chrome browser. When I make custom "hr" tag with a "div" and top and bottom border, there is a white 1px line between the borders ...
IE and Firefox do well.
.nav_links_container_line {
border-top: 1px solid #096ebd;
border-bottom: 1px solid lightgrey;
}
<br><br><br><br>
<div class="nav_links_container_line"></div>
I try different thing (overflow, height 0px) but with no success.
My Chrome Browser is up to date (Version 62.0.3202.94)
Thank you
Simon
Actually that is not a white space, you used light-grey color to bottom and both border top and bottom attached and it's illusion like there is white space. If you want shadow for bottom of your custom hr then you can use following css for it -
.nav_links_container_line {
border-top: 1px solid #096ebd;
box-shadow: 0px 2px 10px #000;
}
What about using a real <hr/>? With that, I don't have the rendering issue you encountered, and it actually makes more sense to use hr in its own role.
.nav_links_container_line {
border-top: 1px solid #096ebd;
border-bottom: 1px solid lightgrey;
border-left: none;
border-right: none;
}
<br><br><br><br>
<div class="nav_links_container_line"></div>
<hr class="nav_links_container_line"/>
I want to change the border colors surrounding my header tables from the default grey given by the packageHTMLTable to black. I cannot figure this out for some reason. I've tried the following:
htmlTable(data, css.table = "margin-top: 0.5px; margin-bottom: 0.5px; border: 1.5px solid black;", css.cgroup="border-bottom: 1px solid black; border-top: 1.5px solid black; text-align: center;", file = "data.html")
I've also changed css.cgroup to css.rgroup but nothing happens. Help would be much appreciated!
There must be a better way to do this using the HTMLTable package, but this will do the trick:
mytableout <-htmlTable(data)
sink("data.html")
cat("<style>th {border-bottom: 1px solid black !important;border-top: 2px solid black !important;}</style>")
print(mytableout,type="html",useViewer=TRUE)
sink()
Black:
Grey:
What is happening
I am running into a problem. I have a menu like this:
<div id='feeds'>
<div class='feed'>Super Dense</div>
<div class='feed'>Everything</div>
<div class='feed current-feed'>Smashing Magazine Feed</div>
<div class='feed'>Hot Questions - Stack Exchange</div>
</div>
I style this with CSS (I only show the border and background properties here):
.feed {
background: -webkit-gradient(linear, left top, left bottom, from(#DDD), to(#CCC));
border-bottom: solid 1px #AAA;
border-left: solid 1px #AAA;
border-right: solid 1px #AAA;
}
.feed:first-child {
border-top: solid 1px #AAA;
}
.feed.current-feed, .feed:active {
background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#444));
border-bottom: solid 1px #000;
border-left: solid 1px #000;
border-right: solid 1px #000;
}
.feed.current-feed:first-child, .feed:active:first-child {
border-top: solid 1px #000;
}
This is the result (view on jsFiddle WebKit only):
Yes, Jeff, all the extra Stack Exchange feed traffic comes from me constantly reloading my feed reader. Sorry :)
The Problem
This might look nice, but there is a little problem. There is a #AAA line above a black box, and this does not look nice (pixel perfection):
My Question
Is there a way in CSS to check if the next element is of a certain class, so I can set border-bottom to solid 1px #000, or is there another way to solve my problem?
My web app heavily uses JavaScript, so if this is required, it's not a problem, but CSS is cleaner in my opinion.
One way I can think of:
Position every .feed relatively:
.feed {
position: relative;
/* ... */
}
Then find the next immediate sibling using the + combinator, make it sit above its previous sibling using a greater z-index and a negative margin, and give it the desired border (notice that this is a top border):
.feed + .feed.current-feed, .feed + .feed:active {
margin-top: -1px;
border-top: 1px solid #000;
z-index: 1;
}
The top black border will sit above the previous sibling's bottom border and thus be visible over it. The W3C box model means that the content height of each .feed isn't affected, so an equally thick negative margin is all you need to counter the thickness of the added top border.
Take a look at the preview and see if that's what you're looking for. Also, a screenshot:
You can use the jQuery .parent() function to do this:
http://api.jquery.com/parent/
JSFiddle