de-activating the tabs css from jquery-ui.css - css

I am using Jquery UI, and I need the jquery-ui.css for datepicker and buttonset. However, I am also using jquery tabs in the site.
I have added custom styling to the tabs in my own css folder (not jquery-ui.css), but when I add the jquery-ui.css it adds lots of other styling to my tabs, which look really bad.
I was wondering is there a way to remove the tabs styling from jquery-ui.css?
If it helps this is the html and styling for my tabs:
<ul id="product_tabs_list"><li>Description</li><li>Features</li><li>Specifications</li><li>Technical</li><div class="clr"></div></ul>
#product_tabs_list{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-bottom: 10px;
padding: 11px 5px;
text-align: center;
}
#product_tabs_list li {
float: left;
}
#product_tabs_list li a {
background: #fff;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#fff), to(#eaeaea)) no-repeat;
background: -webkit-linear-gradient(#fff, #eaeaea) no-repeat;
background: -moz-linear-gradient(#fff, #eaeaea) no-repeat;
background: -ms-linear-gradient(#fff, #eaeaea) no-repeat;
background: -o-linear-gradient(#fff, #eaeaea) no-repeat;
background: linear-gradient(#fff, #eaeaea) no-repeat;
border: 1px solid #cfcfcf;
color: #3463a0;
font-weight: bold;
padding: 10px 20px;
-webkit-text-shadow: 1px 1px 1px #fff;
-moz-text-shadow: 1px 1px 1px #fff;
text-shadow: 0px 1px 1px #fff;
}
#product_tabs_list li a:hover {
background: #fff;
}
#product_tabs_list li.ui-tabs-active a {
background: #3463a0;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#3463a0), to(#233f64)) no-repeat;
background: -webkit-linear-gradient(#3463a0, #233f64) no-repeat;
background: -moz-linear-gradient(#3463a0, #233f64) no-repeat;
background: -ms-linear-gradient(#3463a0, #233f64) no-repeat;
background: -o-linear-gradient(#3463a0, #233f64) no-repeat;
background: linear-gradient(#3463a0, #233f64) no-repeat;
color: #fff;
-webkit-text-shadow: 1px 1px 1px #00204b;
-moz-text-shadow: 1px 1px 1px #00204b;
text-shadow: 0px 1px 1px #00204b;
}

Related

Creating a button with pure css

I'm trying to create a button like this:
This needs to be done in pure css.
I tried to do, nothing happened, it does not work correctly:
display: inline-block;
width: 165px;
text-align: center;
color: #fff;
background: linear-gradient(180deg, #4b3529 21%, #4c2e1a 100%);
border-radius: 5px;
border: 1px solid #ffffff;
font-family: Arial;
font-weight: normal;
border-left: 2px solid #e5ccaf;
border-image: linear-gradient(to bottom, #ffd400,rgba(0, 0, 0, 0)) 0 100%;
border-top: 1px solid #ffd400;
How can I do that?!
You can add the CSS properties inside a class. Then add the class to an HTML element with text-decoration: none; property as follows:
.pure_css_button {
display: inline-block;
width: 165px;
text-align: center;
color: #fff;
text-decoration: none;
background: linear-gradient(180deg, #4b3529 21%, #4c2e1a 100%);
border-radius: 5px;
border: 1px solid #ffffff;
font-family: Arial;
font-weight: normal;
border-left: 2px solid #e5ccaf;
border-image: linear-gradient(to bottom, #ffd400, rgba(0, 0, 0, 0)) 0 100%;
border-top: 1px solid #ffd400;
}
<a href="#" class="pure_css_button">
Button</a>
button {
cursor: pointer;
font-size: x-large;
padding: 0.6rem 2rem;
font-weight: bold;
overflow: hidden;
color: #fff;
background: linear-gradient(180deg, #4b3529 21%, #4c2e1a 100%);
border:0;
border-radius: .3rem;
position: relative;
border-top: 2px solid hsl(24, 49%, 15%);
border-bottom: 2px solid hsl(24, 49%, 15%);
}
button::after,button::before{
content: '';
height: 100%;
width: .15rem;
position: absolute;
top:0;
background:linear-gradient(to bottom, #ffd400, rgba(0, 0, 0, 0)) ;
}
button::before{
left: 0;
}
button::after{
right: 0;
}
<button>
Pure Css</button>
it's possible using body::after content "text" and style it

How to position buttons in exactly same line

I created two buttons. My intention is to set them in exact same line as buttons at the left side. As U can see at my attachement, delete button is scrolled up one line. Any ideas how to achieve my intention?
Here are CSS rlues for yellow button:
.button-own_I {
float:right;
display: inline-block;
text-align: center;
vertical-align: middle;
padding: 7px 6px;
border: 1px solid #a12727;
border-radius: 8px;
background: #ffff4a;
background: -webkit-gradient(linear, left top, left bottom, from(#ffff4a), to(#998f26));
background: -moz-linear-gradient(top, #ffff4a, #998f26);
background: linear-gradient(to bottom, #ffff4a, #998f26);
text-shadow: #591717 1px 1px 1px;
font: normal normal bold 11px arial;
color: #ffffff;
text-decoration: none;
margin:5px;
}
.button-own_I:hover,
.button-own_I:focus {
background: #ffff59;
background: -webkit-gradient(linear, left top, left bottom, from(#ffff59), to(#b8ac2e));
background: -moz-linear-gradient(top, #ffff59, #b8ac2e);
background: linear-gradient(to bottom, #ffff59, #b8ac2e);
color: #ffffff;
text-decoration: none;
}
.button-own_I:active {
background: #99992c;
background: -webkit-gradient(linear, left top, left bottom, from(#99992c), to(#998f26));
background: -moz-linear-gradient(top, #99992c, #998f26);
background: linear-gradient(to bottom, #99992c, #998f26);
}
Here are CSS rules for red button:
.buttonDelete {
float:right;
display: inline-block;
text-align: center;
vertical-align: middle;
padding: 8px 12px;
border: 1px solid #a12727;
border-radius: 8px;
background: #ff4a4a;
background: -webkit-gradient(linear, left top, left bottom, from(#ff4a4a), to(#992727));
background: -moz-linear-gradient(top, #ff4a4a, #992727);
background: linear-gradient(to bottom, #ff4a4a, #992727);
text-shadow: #591717 1px 1px 1px;
font: normal normal bold 11px arial;
color: #ffffff;
text-decoration: none;
}
.buttonDelete:hover,
.buttonDelete:focus {
background: #ff5959;
background: -webkit-gradient(linear, left top, left bottom, from(#ff5959), to(#b62f2f));
background: -moz-linear-gradient(top, #ff5959, #b62f2f);
background: linear-gradient(to bottom, #ff5959, #b62f2f);
color: #ffffff;
text-decoration: none;
}
.buttonDelete:active {
background: #982727;
background: -webkit-gradient(linear, left top, left bottom, from(#982727), to(#982727));
background: -moz-linear-gradient(top, #982727, #982727);
background: linear-gradient(to bottom, #982727, #982727);
}
ABCDEFGHIJKLMONOPQRSTUVWXYZ
The yellow button has a margin at the end, the other don't. If you remove the margin from the yellow, or add margin to the red one your problem will be solved
Here's a pen showing it working:
https://codepen.io/anon/pen/xWWZdo
.button-own_I {
float: right;
display: inline-block;
text-align: center;
vertical-align: middle;
padding: 7px 6px;
border: 1px solid #a12727;
border-radius: 8px;
background: #ffff4a;
background: -webkit-gradient(linear, left top, left bottom, from(#ffff4a), to(#998f26));
background: -moz-linear-gradient(top, #ffff4a, #998f26);
background: linear-gradient(to bottom, #ffff4a, #998f26);
text-shadow: #591717 1px 1px 1px;
font: normal normal bold 11px arial;
color: #ffffff;
/* --- HERE -- */
text-decoration: none;
margin:5px;
}
.buttonDelete {
float:right;
display: inline-block;
text-align: center;
vertical-align: middle;
padding: 8px 12px;
border: 1px solid #a12727;
border-radius: 8px;
background: #ff4a4a;
background: -webkit-gradient(linear, left top, left bottom, from(#ff4a4a), to(#992727));
background: -moz-linear-gradient(top, #ff4a4a, #992727);
background: linear-gradient(to bottom, #ff4a4a, #992727);
text-shadow: #591717 1px 1px 1px;
font: normal normal bold 11px arial;
color: #ffffff;
/* --- AND HERE -- */
text-decoration: none;
margin:5px;
}

adjusting css width for customized drop down box

Here is drop down box I got to work for me.
But it goes outof boundry on left end. Actually menu items should fit exactly below the text box.
Check Fiddle
I tried changing width of all element but could not set it. Can some one tell me which class exactly controls width of menu item which appear when dropdown box is popped?
css:
.container {
width:90%;
margin:10% auto;
}
.dropdown-menu{
width:85%;
margin:0 auto;
}
.twitter-typeahead .tt-query, .twitter-typeahead .tt-hint {
margin-bottom: 0;
width: 360px; !important;
}
.twitter-typeahead .tt-hint {
display: block;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.428571429;
border: 1px solid transparent;
border-radius:4px;
}
.twitter-typeahead .hint-small {
height: 30px;
padding: 5px 10px;
font-size: 12px;
border-radius: 3px;
line-height: 1.5;
}
.twitter-typeahead .hint-large {
height: 45px;
padding: 10px 16px;
font-size: 18px;
border-radius: 6px;
line-height: 1.33;
}
.tt-dropdown-menu {
min-width: 260px;
margin-top: 2px;
padding: 5px 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, .2);
*border-right-width: 2px;
*border-bottom-width: 2px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
.tt-suggestion {
display: block;
padding: 3px 20px;
}
.tt-suggestion.tt-is-under-cursor {
color: #fff;
background-color: #0081c2;
background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
background-image: -o-linear-gradient(top, #0088cc, #0077b3);
background-image: linear-gradient(to bottom, #0088cc, #0077b3);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0)
}
.tt-suggestion.tt-is-under-cursor a {
color: #fff;
}
.tt-suggestion p {
margin: 0;
}
On your class .dropdown-menu add this:
.dropdown-menu{
width:360px;
left:auto;
margin:0 auto;
}
The Fiddle demo
It's because 360px is the size of your input .twitter-typeahead .tt-query, .twitter-typeahead .tt-hint.
And the left:auto to keep the original distance no matter the absolute position.

Box shadow using CSS

I am trying to create a table like the following image:
I have also created table like the above except the style as it is above. my table.
This is what is my CSS:
.table thead th {
vertical-align: middle;
background-color: #FFFFFF;
border-bottom: thin;
border-top: thick;
border-bottom-width: 4px;
width:300px;
height:30px;
background-color:white;
box-shadow: 2px 2px 5px grey;
border-bottom : thin;
border-top:thick;
}
.table th {
font-weight: bold;
cursor: pointer
width:100%;
height:40px;
background-color:#FFFFFF;
box-shadow: 0 0 5px grey;
border-bottom: thin;
border-top:thick;
vertical-align: middle;
border: 1px solid #DDD
}
.table th,.table td {
height: 20px;
max-width: 250px;
padding: 1px 5px 2px 10px;
overflow: hidden;
line-height: 20px;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: middle;
border: 1px solid #DDD
}
The result is not what I am looking for. I am not able to give you the html table code since it is generated during run time using backgrid.js with backbone.marionette.js
UPDATE :
this is the CSS
box-shadow:
inset 0px 11px 8px -10px #CCC,
inset 0px -11px 8px -10px #CCC;
but still the line is visible between td, I want to show only the horizontal lines not the vertical one.
How to do that?
Please help me to get this done.
Add before the table the following element:
<div id="fade"></div>
And in the CSS file:
#fade {
height: 22px;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,255)), color-stop(50%,rgba(247,247,247,247)), color-stop(51%,rgba(245,245,245,245)), color-stop(100%,rgba(243,243,243,243)));
background: -webkit-linear-gradient(top, rgba(255,255,255,255) 0%,rgba(247,247,247,247) 50%,rgba(245,245,245,245) 51%,rgba(243,243,243,243) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,255) 0%,rgba(247,247,247,247) 50%,rgba(245,245,245,245) 51%,rgba(243,243,243,243) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,255) 0%,rgba(247,247,247,247) 50%,rgba(245,245,245,245) 51%,rgba(243,243,243,243) 100%);
filter: progid:DXImageTransform.Microsoft.Gradient( StartColorStr='#00ffffff', EndColorStr='#00f3f3f3', GradientType=1);
}
(change to the colors you want etc)

Text of link will only show if my mouse hovers over link area, not anywhere in whole button

I don't know if I'll successfully convey what I mean but here goes. I have some CSS and am trying to get the text label of a link in a navigation to button to show if I hover anywhere over that button, not just over where the link should display. What happens is when I hover over most of the button, the button goes all-white. I want it to be white background, but show the text. Make sense?
Just try something as below:
CSS:
.CSSButton {
border: 1px solid #D1D1D1;
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.1, #FFFFFF), color-stop(0.9, #D1D1D1) );
background: -moz-linear-gradient( center top, #FFFFFF 10%, #D1D1D1 90% );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#D1D1D1');
background-color: #FFFFFF;
-moz-box-shadow: inset 0px 1px 2px 0px #FFFFFF;
-webkit-box-shadow: inset 0px 1px 2px 0px #FFFFFF;
box-shadow: inset 0px 1px 2px 0px #FFFFFF;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
text-shadow: 1px 1px 2px #FFFFFF;
font-weight: bold;
margin: 5px 5px;
padding: 6px 6px;
color: #999999;
letter-spacing: 1px;
font-family: 'Arial', sans-serif;
font-size: 16px;
width: 150px;
text-transform: capitalize;
text-align: center;
text-decoration: none;
cursor: pointer;
display: inline-block;
}
.CSSButton:hover {
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.1, #D1D1D1), color-stop(0.9, #FFFFFF) );
background: -moz-linear-gradient( center top, #D1D1D1 10%, #FFFFFF 90% );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#D1D1D1', endColorstr='#FFFFFF');
background-color: #D1D1D1;
}
.CSSButton:active {
position: relative;
top: 1px;
left: 0px;
}
HTML:
<span class="CSSButton">Click Me!</span>

Resources