Am trying to make the bottom line tab become transparent (blue here) when the tab is selected.
On the picture below it works on the "active" state, when I click, but once selected, the tab still show the blue lie at the bottom, cf. second picture.
Below is my CSS code.
.tab-pane {
border-left: 3px solid #ff6a00;
border-right: 3px solid #ff6a00;
border-bottom: 3px solid #ff6a00;
border-radius: 0px 0px 0px 0px;
padding: 0px;
}
.nav-item {
background-color: #efefef;
border-left: 3px solid #007BFF;
border-right: 3px solid #007BFF;
border-top: 3px solid #007BFF;
border-bottom: 3px solid #007BFF;
}
.nav-item:active {
border-bottom-color: transparent;
}
.nav-item:current {
border-bottom-color: transparent;
}
.nav-tabs {
margin-bottom: 0;
}
Since the .active class is set on nav-link, the custom borders should also be set on nav-link...
.nav-tabs .nav-link {
background-color: #efefef;
border-left: 3px solid #007BFF;
border-right: 3px solid #007BFF;
border-top: 3px solid #007BFF;
border-bottom: 3px solid #007BFF;
}
.nav-tabs .nav-link.active {
border: 3px solid #007BFF;
border-bottom-color: transparent;
}
Demo
Related
Is there a better way I can write this CSS border property in one line as top-left is 1px and right-bottom are 3px
border-top: 1px solid #000;
border-right: 3px solid #000;
border-left: 1px solid #000;
border-bottom: 3px solid #000;
Yeah, when you say:
border: 1px solid black;
It gets translated this way:
border-left-color: rgb(0, 0, 0);
border-left-style: solid;
border-left-width: 1px;
border-right-color: rgb(0, 0, 0);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgb(0, 0, 0);
border-top-style: solid;
border-top-width: 1px;
The first line is called shorthand version.
border: 1px solid black is basically shorthanded for border-color, border-width, border-style.
And each of these are also a shorthand.
You can just say it this way:
border: solid black;
border-width: 1px 3px 3px 1px;
You only can merge top + bottom and left + right (example case .two).
You can save 1 line by using border-color, border-style and border-width (the order is top, right, bottom and then left).
You can save 1 additionnal line by merging border-color and border-style in border
.square{
width:50px;
height:50px;
background-color:orange;
margin-bottom:10px;
}
.one{
border-top: 1px solid #000;
border-right: 3px solid #000;
border-left: 1px solid #000;
border-bottom: 3px solid #000;
}
.two{
border-color: #000;
border-style: solid;
border-width: 1px 3px;
}
.three{
border-color: #000;
border-style: solid;
border-width: 1px 3px 3px 1px;
}
.four{
border: #000 solid;
border-width: 1px 3px 3px 1px;
}
<div class="square one"></div>
<div class="square two"></div>
<div class="square three"></div>
<div class="square four"></div>
I'm trying to add two borders to an input text when it's focused, the solution I did is to add a border and a box shadow.
The issue I'm having is that I want the outer border to have a radius of 1px and the inner doesn't have a radius.
How can I achieve that ?
input:focus {
border: 1px solid #14a7a7;
box-shadow: 0px 0px 1px 3px #83d7d8;
border-radius: 0;
}
input {
border: 1px solid #979797;
outline: 0;
}
<input type="text" />
Use the box-shadow as the inner border and you can easily add radius
input:focus {
box-shadow: 0 0 0 1px inset #14a7a7;
border: 3px solid #83d7d8;
border-radius: 3px;
}
input {
box-shadow: 0 0 0 1px inset #979797;
border: 3px solid transparent;
outline: 0;
}
<input type="text" />
Or consider an extra wrapper and :focus-within
input:focus {
border: 1px solid #14a7a7;
}
input {
border: 1px solid #979797;
outline: 0;
}
label {
border: 3px solid transparent;
border-radius: 3px;
display: inline-block;
}
label:focus-within {
border: 3px solid #83d7d8;
}
<label><input type="text" /></label>
I’m trying to adapt some css code I found, however my table seems ugly (according to me). I'll explain this on a picture.
css:
td, th {
border-left: 1px solid #494437;
border-top: 1px solid #494437;
padding: 10px;
text-align: left;
}
th {
background-color: #b8ae9c;
-webkit-box-shadow: inset 2px 2px 0px 0px rgba(255,255,255,1);
-moz-box-shadow: inset 2px 2px 0px 0px rgba(255,255,255,1);
box-shadow: inset 2px 2px 0px 0px rgba(255,255,255,1);
border-top: none;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
td:first-child, th:first-child {
border-left: none;
}
I explained what I want by an image:
EDIT: For example I expect white area on right side, when I add padding-right: 0.2em; into "th". But it doesn't change anything.
Is this what you are expecting?
.table {
border: 1px solid #000;
float: left;
}
.header {
border: 2px solid #ccc;
border-width: 2px 0 0 2px;
background-color: #b8ae9c;
margin: 2px;
float: left;
}
<div class="table">
<div class="header">Header</div>
<div class="header">Header</div>
</div>
There are two div in the screenshot. the one with calendar in it, is in behind the calendar. but second div contains the control that are on top of the calendar.
there are also two css file. one is bootstrap v3 css file and the other one is attached here.
I'm using a control to pick date from calendar
this is script manager of the control:
<pdc:PersianDateScriptManager ID="PersianDateScriptManager" runat="server" CalendarCSS="PickerCalendarCSS"
CalendarDayWidth="50" FooterCSS="PickerFooterCSS" ForbidenCSS="PickerForbidenCSS"
ForbidenDates="" ForbidenWeekDays="" FrameCSS="PickerCSS"
HeaderCSS="PickerHeaderCSS" SelectedCSS="PickerSelectedCSS" WeekDayCSS="PickerWeekDayCSS"
WorkDayCSS="PickerWorkDayCSS">
</pdc:PersianDateScriptManager>
and this is validator of the control:
<pdc:PersianDateValidator ForeColor="Red" ID="PersianDateValidator3" runat="server" ControlToValidate="FinishDateTextBox" Display="Dynamic" ErrorMessage="Invalid Date" Text="*"></pdc:PersianDateValidator>
and this is field of date:
<pdc:PersianDateTextBox CssClass="form-control text-left input-sm" Width="160" ID="FinishDateTextBox" runat="server" DefaultDate="1392/01/01" IconUrl="~/Images/Design/Calendar.gif" SetDefaultDateOnEvent="OnDoubleClick"></pdc:PersianDateTextBox>
the problem is calendar goes behind other controls. I took a screenshot so you can see.
and finally here is the css file of the control.
.PickerCSS
{
background-color: #ffffff;
border-right: #000000 2px solid;
border-top: #000000 2px solid;
border-left: #000000 2px solid;
border-bottom: #000000 2px solid;
}
.PickerHeaderCSS
{
background-color: lightgrey;
height: 30px;
}
.PickerFooterCSS
{
background-color: lightgrey;
}
.PickerWeekDayCSS
{
background-color: lightgrey;
text-align: center;
font-size: 8pt;
border-right: black 1px solid;
border-top: black 1px solid;
border-left: black 1px solid;
border-bottom: black 1px solid;
height: 19px;
}
.PickerCalendarCSS
{
background-color: #e8f4ff;
border-right: black 1px solid;
border-top: black 1px solid;
border-left: black 1px solid;
border-bottom: black 1px solid;
height: 19px;
}
.PickerWorkDayCSS
{
background-color: #ffffff;
border-right: black 1px solid;
border-top: black 1px solid;
border-left: black 1px solid;
border-bottom: black 1px solid;
}
A.PickerWorkDayCSS
{
color: black;
text-decoration: none;
border: none;
}
.PickerForbidenCSS
{
background-color: #e8f4ff;
color: Red;
border-right: black 1px solid;
border-top: black 1px solid;
border-left: black 1px solid;
border-bottom: black 1px solid;
font-weight: bold;
}
.PickerSelectedCSS
{
background-color: #e4e8ff;
border-right: black 1px solid;
border-top: black 1px solid;
border-left: black 1px solid;
border-bottom: black 1px solid;
}
A.PickerSelectedCSS
{
font-weight: bold;
color: #0066ff;
text-decoration: underline;
border: none;
}
Thank you Very much.
use the z-index. assuming that the .pickerCalendarCSS class is the one you want to be on top, change to this:
.PickerCalendarCSS
{
background-color: #e8f4ff;
border-right: black 1px solid;
border-top: black 1px solid;
border-left: black 1px solid;
border-bottom: black 1px solid;
height: 19px;
z-index:10;
}
the z-index is relative, does not matter if it's value is 10 or 10000, just what the values of other elements are in relation.
i'm new to gnome-shell modding. i've been struggling to make some modification to my gnome-shell theme. i like the concept of old-ish, simple *box desktop. so i tried to modified my gnome-shell to looks like one.
i tried to make some bevel on my gnome-shell, and it turned out to be like this. i don't know what's wrong with my code, i tried many combination.
http://i.stack.imgur.com/E0aRq.png
i want to make at least like this one, is it possible?
http://i.stack.imgur.com/gFuL1.png
here's my code
.panel-button {
-natural-hpadding: 12px;
-minimum-hpadding: 8px;
font-weight: bold;
color: #4A4A4A;
border: 3px solid #000000;
border-top: 3px solid transparent;
border-bottom: 5px solid #000000;
box-shadow:
1.5px 1.5px 0px rgba(0,0,0,1), /*bottom external highlight*/
0px 0px 3px #666, /*top external shadow*/
inset 0 -1px 1px #000000, /*bottom internal shadow*/
-1px -1px 1px rgba(255,255,255,1); /*top internal highlight*/;
}
sorry for my bad English.
I dont know if there is something special to gnome shell when it comes to styling but expect this to work.
JSFiddle
button {
height: 25px;
background: #ddd;
border-bottom: solid 1px #aaa;
border-right: solid 1px #aaa;
border-top: solid 1px #fff;
border-left: solid 1px #fff;
}
button.active {
border-bottom: solid 1px #fff;
border-right: solid 1px #fff;
border-top: solid 1px #aaa;
border-left: solid 1px #aaa;
}