I have added following code in my theme functions.php
function my_loginlcustomization() {
wp_register_style('custom_loginstyle', get_template_directory_uri() . '/login/login-styles.css', __FILE__);
wp_enqueue_style('custom_loginstyle');
}
add_action('login_head', 'my_loginlcustomization');
Custom login page:
<?php
/*
Template Name: Login
*/
?>
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Login Form</title>
</head>
<body>
<?php wp_login_form(); ?>
</body>
</html>
CSS:
body.login {
/*background-image: url('images/example-image.jpg');*/
background-color: #258960;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
.login label {
font-size: 12px;
color: #555555;
}
.login input[type="text"]{
background-color: #ffffff;
border-color:#dddddd;
-webkit-border-radius: 4px;
}
.login input[type="password"]{
background-color: #ffffff;
border-color:#dddddd;
-webkit-border-radius: 4px;
}
.login .button-primary {
width: 120px;
float:right;
background-color:#17a8e3 !important;
background: -webkit-gradient(linear, left top, left bottom, from(#17a8e3), to(#17a8e3));
background: -webkit-linear-gradient(top, #17a8e3, #17a8e3);
background: -moz-linear-gradient(top, #17a8e3, #17a8e3);
background: -ms-linear-gradient(top, #17a8e3, #17a8e3);
background: -o-linear-gradient(top, #17a8e3, #17a8e3);
background-image: -ms-linear-gradient(top, #17a8e3 0%, #17a8e3 100%);
color: #ffffff;
-webkit-border-radius: 4px;
border: 1px solid #0d9ed9;
}
.login .button-primary:hover {
background-color:#17a8e3 !important;
background: -webkit-gradient(linear, left top, left bottom, from(#17a8e3), to(#0d9ed9 ));
background: -webkit-linear-gradient(top, #17a8e3, #0d9ed9 );
background: -moz-linear-gradient(top, #17a8e3, #0d9ed9 );
background: -ms-linear-gradient(top, #17a8e3, #0d9ed9 );
background: -o-linear-gradient(top, #17a8e3, #0d9ed9 );
background-image: -ms-linear-gradient(top, #0b436e 0%, #0d9ed9 100%);
color: #fff;
-webkit-border-radius: 4px;
border: 1px solid #0d9ed9;
}
.login .button-primary:active {
background-color:#17a8e3 !important;
background: -webkit-gradient(linear, left top, left bottom, from(#0d9ed9), to(#17a8e3));
background: -webkit-linear-gradient(top, #0d9ed9, #17a8e3);
background: -moz-linear-gradient(top, #0d9ed9, #17a8e3);
background: -ms-linear-gradient(top, #0d9ed9, #17a8e3);
background: -o-linear-gradient(top, #0d9ed9, #17a8e3);
background-image: -ms-linear-gradient(top, #0d9ed9 0%, #17a8e3 100%);
color: #fff;
-webkit-border-radius: 4px;
border: 1px solid #0d9ed9;
}
But no effect on page.
Related
I have menu this html tabs:
<div class="myTabs">
Employee
Global
<div style="clear:both;"></div>
</div>
Css:
.myTabs {
border: 1px solid #797979;
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #d6d6d6 100%);
background: -webkit-linear-gradient(top, #ffffff 0%, #d6d6d6 100%);
background: linear-gradient(to bottom, #ffffff 0%, #d6d6d6 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d6d6d6', GradientType=0);
}
.myTabs a {
color: #000000;
border-left: 1px solid #797979;
display: block;
padding: 5px 10px;
float: right;
text-decoration: none;
}
.myTabs a:hover {
background: #ffffff;
background: -moz-linear-gradient(top, #d6d6d6 0%, #ffffff 100%);
background: -webkit-linear-gradient(top, #d6d6d6 0%, #ffffff 100%);
background: linear-gradient(to bottom, #d6d6d6 0%, #ffffff 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#d6d6d6', endColorstr='#ffffff', GradientType=0);
text-decoration: none;
}
.myTabs a:active,
.myTabs a:visited {
text-decoration: none;
}
That I want to do is to insert shadow to selected link. For example If I pick Employee table, keep it selected with shadow and if I select Global one dissapear selected from Employee and select Global. How can I achive it?
There is a demo: JsFiddle
.myTabs {
border: 1px solid #797979;
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #d6d6d6 100%);
background: -webkit-linear-gradient(top, #ffffff 0%, #d6d6d6 100%);
background: linear-gradient(to bottom, #ffffff 0%, #d6d6d6 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d6d6d6', GradientType=0);
}
.myTabs a {
color: #000000;
border-left: 1px solid #797979;
display: block;
padding: 5px 10px;
float: right;
text-decoration: none;
}
.myTabs a:hover {
background: #ffffff;
background: -moz-linear-gradient(top, #d6d6d6 0%, #ffffff 100%);
background: -webkit-linear-gradient(top, #d6d6d6 0%, #ffffff 100%);
background: linear-gradient(to bottom, #d6d6d6 0%, #ffffff 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#d6d6d6', endColorstr='#ffffff', GradientType=0);
text-decoration: none;
}
.myTabs a:active,
.myTabs a:visited {
text-decoration: none;
}
<div class="myTabs">
Employee
Global
<div style="clear:both;"></div>
</div>
Hope this is what you are looking for. I could do a jQuery solution that will work a lot easier.
I had to add class tabs to each tab so we can select it easier. And added the .active style to make the tabs shados
(function() {
var tabs = document.getElementsByClassName('tab');
for (i = 0; i < tabs.length; i++) {
tabs[i].addEventListener('click', function(e) {
removeActive();
e.target.classList.add('active');
})
}
})();
function removeActive() {
var tabs = document.getElementsByClassName('tab');
for (i = 0; i < tabs.length; i++) {
tabs[i].classList.remove('active')
}
}
.myTabs {
border: 1px solid #797979;
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #d6d6d6 100%);
background: -webkit-linear-gradient(top, #ffffff 0%, #d6d6d6 100%);
background: linear-gradient(to bottom, #ffffff 0%, #d6d6d6 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d6d6d6', GradientType=0);
}
.myTabs a {
color: #000000;
border-left: 1px solid #797979;
display: block;
padding: 5px 10px;
float: right;
text-decoration: none;
}
.myTabs a:hover {
background: #ffffff;
background: -moz-linear-gradient(top, #d6d6d6 0%, #ffffff 100%);
background: -webkit-linear-gradient(top, #d6d6d6 0%, #ffffff 100%);
background: linear-gradient(to bottom, #d6d6d6 0%, #ffffff 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#d6d6d6', endColorstr='#ffffff', GradientType=0);
text-decoration: none;
}
.myTabs a:active,
.myTabs a:visited {
text-decoration: none;
}
.active {
box-shadow: 0px 5px 5px grey;
}
<div id='myTabs' class="myTabs">
Employee
Global
<div style="clear:both;"></div>
</div>
You could certainly use JavaScript object-oriented! I assigned an id attribute to each button, created a JavaScript class called Tab, and updated your .myTabs a:hover CSS so that it is also applied to any element with a CSS class of selected. Does this work for your needs?
var tabs = [];
class Tab
{
select()
{
$("#" + this.id).addClass("selected");
}
deselect()
{
$("#" + this.id).removeClass("selected");
}
handle_click()
{
// deselect all other tabs
for (var i = 0; i < tabs.length; ++i)
tabs[i].deselect();
// select this tab
this.select();
}
constructor(id)
{
var tab = this;
this.id = id; // record HTML id for future use
tabs.push(this); // save tab in global list of all tabs
// add listener for click event
$("#" + this.id).click(function(){
tab.handle_click();
});
}
}
$(function() {
new Tab("empleados");
new Tab("puestos");
});
.myTabs {
border: 1px solid #797979;
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #d6d6d6 100%);
background: -webkit-linear-gradient(top, #ffffff 0%, #d6d6d6 100%);
background: linear-gradient(to bottom, #ffffff 0%, #d6d6d6 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d6d6d6', GradientType=0);
}
.myTabs a {
color: #000000;
border-left: 1px solid #797979;
display: block;
padding: 5px 10px;
float: right;
text-decoration: none;
}
.myTabs a:hover, .myTabs a.selected {
background: #ffffff;
background: -moz-linear-gradient(top, #d6d6d6 0%, #ffffff 100%);
background: -webkit-linear-gradient(top, #d6d6d6 0%, #ffffff 100%);
background: linear-gradient(to bottom, #d6d6d6 0%, #ffffff 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#d6d6d6', endColorstr='#ffffff', GradientType=0);
text-decoration: none;
}
.myTabs a:active,
.myTabs a:visited {
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myTabs">
<a id="empleados" href="#empleados" aria-controls="empleados" role="tab" data-toggle="tab">Employee</a>
<a id="puestos" href="#puestos" class="active" aria-controls="puestos" role="tab" data-toggle="tab">Global</a>
<div style="clear:both;"></div>
</div>
Currently my pagination looks as such:
I'm trying to work out how to remove the space between the buttons, but have been unsuccessful. In the css files the only references I can find to pagination are:
jquery.dataTables.css (319 - 394):
}
.dataTables_wrapper .dataTables_paginate {
float: right;
text-align: right;
padding-top: 0.25em;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
box-sizing: border-box;
display: inline-block;
min-width: 1.5em;
padding: 0.5em 1em;
margin-left: 2px;
text-align: center;
text-decoration: none !important;
cursor: pointer;
*cursor: hand;
color: #333333 !important;
border: 1px solid transparent;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
color: #333333 !important;
background-color: white;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, gainsboro));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, white 0%, gainsboro 100%);
/* Chrome10+,Safari5.1+ */
background: -moz-linear-gradient(top, white 0%, gainsboro 100%);
/* FF3.6+ */
background: -ms-linear-gradient(top, white 0%, gainsboro 100%);
/* IE10+ */
background: -o-linear-gradient(top, white 0%, gainsboro 100%);
/* Opera 11.10+ */
background: linear-gradient(to bottom, white 0%, gainsboro 100%);
/* W3C */
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
cursor: default;
color: #666 !important;
border: 1px solid transparent;
background: transparent;
box-shadow: none;
}
/*.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
color: white !important;
border: 1px solid white;
background-color: white;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #585858), color-stop(100%, #111111));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #585858 0%, #111111 100%);
/* Chrome10+,Safari5.1+ */
background: -moz-linear-gradient(top, #585858 0%, #111111 100%);
/* FF3.6+ */
background: -ms-linear-gradient(top, #585858 0%, #111111 100%);
/* IE10+ */
background: -o-linear-gradient(top, #585858 0%, #111111 100%);
/* Opera 11.10+ */
background: linear-gradient(to bottom, #585858 0%, #111111 100%);
/* W3C */
} */
.dataTables_wrapper .dataTables_paginate .paginate_button:active {
outline: none;
background-color: #2b2b2b;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2b2b2b), color-stop(100%, #0c0c0c));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
/* Chrome10+,Safari5.1+ */
background: -moz-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
/* FF3.6+ */
background: -ms-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
/* IE10+ */
background: -o-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
/* Opera 11.10+ */
background: linear-gradient(to bottom, #2b2b2b 0%, #0c0c0c 100%);
/* W3C */
box-shadow: inset 0 0 3px #111;
}
dataTables.bootstrap.css (32 - 50):
div.dataTables_paginate {
margin: 0;
white-space: nowrap;
text-align: right;
}
div.dataTables_paginate ul.pagination {
margin: 2px 0;
white-space: nowrap;
}
#media screen and (max-width: 767px) {
div.dataTables_length,
div.dataTables_filter,
div.dataTables_info,
div.dataTables_paginate {
text-align: center;
}
}
However, I can't seem to find a reference to any large margins or padding. Although CSS isn't exactly my strong suit.
Does anyone know if there are other references to the paginate buttons that might be related? Or have to fix the problem outright?
This issue has already been noted in their bug database.
You do not need to hack the css.
bootstrap pagination looks bad #39
No need to include DataTables' own stylesheet (jquery.dataTables.css) since Bootstrap and the integration file provide everything that is needed.
So just delete jquery.dataTables.css, and keep dataTables.bootstrap.min.css in your html style sheets.
Oh yes. Easy to reproduce the error. To solve it, add this CSS after other CSS references :
.dataTables_wrapper .dataTables_paginate .paginate_button {
padding : 0px;
margin-left: 0px;
display: inline;
border: 0px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
border: 0px;
}
demo -> http://jsfiddle.net/s6c35ogt/
Try to comment out the added CSS in the top right corner, and you will see the exact same behaviour as you describe.
.paginate_button { padding: 0!important; margin-left: 0!important; }
For not a single space
As Bae pointed out, including 'jquery.dataTables.css' does cause this bug.
But, if you are using the DataTables' 'select' functionality, the visual aspects will be lost by removing this .css file.
So, it really is a decision you make of removing the .css file if you do not use 'select', if you do, you'll have to pinch the css styling for selected items.
Or, keep the .css and overwrite the css so that the pagination is not messy.
This CSS will remove all of the messy spacing around pagination.
.dataTables_paginate ul li {
padding: 0px !important;
margin: 0px !important;
border: 0px !important;
}
I am trying to make my current CSS buttons on my website 2 or 3 times their actual size for mobile devices.. i'm not having much luck
The sytles
.all-news-btn {
background: #666666;
background-image: -webkit-linear-gradient(top, #666666, #333333);
background-image: -moz-linear-gradient(top, #666666, #333333);
background-image: -ms-linear-gradient(top, #666666, #333333);
background-image: -o-linear-gradient(top, #666666, #333333);
background-image: linear-gradient(to bottom, #666666, #333333);
-webkit-border-radius: 3;
-moz-border-radius: 3;
border-radius: 3px;
font-family: Arial !important;
color: #ffffff !important;
font-size: 12px !important;
padding: 7px 8px 7px 7px;
text-decoration: none;
margin-left: 3px;
}
.all-news-btn:hover {
background: #666666;
background-image: -webkit-linear-gradient(top, #666666, #000000);
background-image: -moz-linear-gradient(top, #666666, #000000);
background-image: -ms-linear-gradient(top, #666666, #000000);
background-image: -o-linear-gradient(top, #666666, #000000);
background-image: linear-gradient(to bottom, #666666, #000000);
text-decoration: none;
}
The Media query
#media only screen and (max-device-width: 480px)
{
.all-news-btn {width: 100%; font-size: 4.25em;}
}
Working example
.bt{
background: #333;
color: #fdfdfd;
min-height: 35px;
margin: 0;
border-radius: 3px;
border: 0;
line-height: 35px;
text-align: center;
margin: .5em 0 .5em 0;
}
a.bt{
display: inline;
padding: 7px 10px 7px 10px;
}
.bt:hover{
background: #000;
}
#media only screen and (max-width:480px) {
.bt {
width: 100%;
}
a.bt{
display: block;
padding: 0;
}
}
<button class="bt">Button example</button>
<a class="bt">A example</a>
<input class="bt" type="button" value="Input example"/>
Solving
You can easly solve this issue by adding a min-width attribute to your main button class. Check it out:
In JSFiddle too :)
or Codepen
.all-news-btn {
background: #666666;
background-image: -webkit-linear-gradient(top, #666666, #333333);
background-image: -moz-linear-gradient(top, #666666, #333333);
background-image: -ms-linear-gradient(top, #666666, #333333);
background-image: -o-linear-gradient(top, #666666, #333333);
background-image: linear-gradient(to bottom, #666666, #333333);
-webkit-border-radius: 3;
-moz-border-radius: 3;
border-radius: 3px;
font-family: Arial !important;
color: #ffffff !important;
font-size: 12px !important;
padding: 7px 8px 7px 7px;
text-decoration: none;
margin-left: 3px;
min-width: 100px;
min-height: 30px;
display: inline;
}
.all-news-btn:hover {
background: #666666;
background-image: -webkit-linear-gradient(top, #666666, #000000);
background-image: -moz-linear-gradient(top, #666666, #000000);
background-image: -ms-linear-gradient(top, #666666, #000000);
background-image: -o-linear-gradient(top, #666666, #000000);
background-image: linear-gradient(to bottom, #666666, #000000);
text-decoration: none;
}
#media only screen and (max-width:480px) {
.all-news-btn {width: 100%; font-size: 4.25em; }
}
<button class="all-news-btn">Button example</button>
<input class="all-news-btn" type="button" value="Input example"/>
I have the following links :
<div class="links">
Home
About Me
Contacts<span></span>
Contact Author
<div class="link">
</div>
</div>
with this css file:
.links {
height: 50px;
display: inline;
text-align: center;
padding: 0px 0px 0px 170px;
margin-right: 0px;
margin-top: 7px;
border: none;
line-height: 25px;
}
.links a {
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
color: black;
font-family: Calibri;
font-size: 13px;
text-decoration: none;
padding: 2px 10px;
border: 1px solid #ccc;
}
.links a span {
width: 0;
height: 0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-top: 3px solid #555;
display: inline-block;
margin: 2px 7px;
}
I want the links to show in one line ie: [home] [contacts] [link3] etc
but currently its showing on seperate lines like:
[home][contacts]
[link3]
How can I get them on one line?
You've got display: block assigned to your <a> tags. That will put each one on their own line. Remove that, and they'll be on the same line.
I've implemented a search bar on my Rails app but it will not pull right for the life of me. With the method I've used, there's a form_tag that seems to overlay the top navbar.
The code for the search bar looks like this:
<%= form_tag search_path, :method => 'get', :class => "form-search", :style => "height:24px;" do %>
<div class="input-append" style="padding-top:5px;">
<%= text_field_tag :search, params[:search], :class=>"span3 watermark search-query", :placeholder => "Search By Device or PIN"%>
<button class="btn" type="submit"><i class="icon-search"></i></button>
</div>
<% end %>
The navbar looks like:
Adding pull-right as a style in any of the tags is not working. Has anyone experienced this problem before?
The Bootstrap CSS override code:
#Wrapper {
margin: 0 auto;
width: 900px;
}
.navbar-fixed-top {
padding-bottom:0px !important;
height:42px;
}
.navbar-inner {
background-color: hsl(27, 94%, 39%) !important;
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c05a05", endColorstr="#c05a05");
background-image: -khtml-gradient(linear, left top, left bottom, from(#c05a05), to(#c05a05));
background-image: -moz-linear-gradient(top, #c05a05, #c05a05);
background-image: -ms-linear-gradient(top, #c05a05, #c05a05);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c05a05), color-stop(100%, #c05a05));
background-image: -webkit-linear-gradient(top, #c05a05, #c05a05);
background-image: -o-linear-gradient(top, #c05a05, #c05a05);
background-image: linear-gradient(#c05a05, #c05a05);
border-color: #c05a05 #c05a05 hsl(27, 94%, 39%);
color: #fff !important;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.00);
-webkit-font-smoothing: antialiased;
.border-radius(0) !important;
}
.navbar .brand {
display: block;
float: left;
padding: 10px 20px 10px;
margin-left: -20px;
font-size: 20px;
font-weight: 200;
color: white;
text-shadow: 0 0px 0 #;
}
.navbar .nav > li > a {
color: white;
float: none;
padding: 10px 15px;
text-decoration: none;
text-shadow: 0 0px 0 #ffffff;
}
.navbar .nav > li > a:focus
.navbar .nav > li > a:hover {
color: orange;
text-decoration: none;
background-color: transparent;
}
.container {
max-width:900px;
}
.row-fluid {
max-width:900px;
}
.span3 {
max-width:210px;
}
.well {
background-color: hsl(33, 100%, 93%) !important;
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffeedb", endColorstr="#ffeedb");
background-image: -khtml-gradient(linear, left top, left bottom, from(#ffeedb), to(#ffeedb));
background-image: -moz-linear-gradient(top, #ffeedb, #ffeedb);
background-image: -ms-linear-gradient(top, #ffeedb, #ffeedb);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffeedb), color-stop(100%, #ffeedb));
background-image: -webkit-linear-gradient(top, #ffeedb, #ffeedb);
background-image: -o-linear-gradient(top, #ffeedb, #ffeedb);
background-image: linear-gradient(#ffeedb, #ffeedb);
border-color: #ffeedb #ffeedb hsl(33, 100%, 93%);
color: #333 !important;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.00);
-webkit-font-smoothing: antialiased;
}
.well-thumbnail {
background-color: white;
border-radius: 5px;
padding-top: 5px;
padding-left: 5px;
padding-right: 5px;
}
.row-padded {
padding-top: 10px;
background-color: #B8B8B8;
border: 5px solid #DDD;
margin-top: 10px;
}
.btn-danger {
}
.btn-custom-danger {
background-color: hsl(0, 69%, 22%) !important;
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b42121", endColorstr="#5e1111");
background-image: -khtml-gradient(linear, left top, left bottom, from(#b42121), to(#5e1111));
background-image: -moz-linear-gradient(top, #b42121, #5e1111);
background-image: -ms-linear-gradient(top, #b42121, #5e1111);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b42121), color-stop(100%, #5e1111));
background-image: -webkit-linear-gradient(top, #b42121, #5e1111);
background-image: -o-linear-gradient(top, #b42121, #5e1111);
background-image: linear-gradient(#b42121, #5e1111);
border-color: #5e1111 #5e1111 hsl(0, 69%, 17%);
color: #fff !important;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.33);
-webkit-font-smoothing: antialiased;
}
.btn-custom-primary {
background-color: hsl(193, 32%, 49%) !important;
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b8d3da", endColorstr="#5493a4");
background-image: -khtml-gradient(linear, left top, left bottom, from(#b8d3da), to(#5493a4));
background-image: -moz-linear-gradient(top, #b8d3da, #5493a4);
background-image: -ms-linear-gradient(top, #b8d3da, #5493a4);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b8d3da), color-stop(100%, #5493a4));
background-image: -webkit-linear-gradient(top, #b8d3da, #5493a4);
background-image: -o-linear-gradient(top, #b8d3da, #5493a4);
background-image: linear-gradient(#b8d3da, #5493a4);
border-color: #5493a4 #5493a4 hsl(193, 32%, 41.5%);
color: #333 !important;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.49);
-webkit-font-smoothing: antialiased;
}
#thumbnail-font{
font-size:small;
}
Thank you.
Try using float:right to sent .form-search to the right of the header.
.form-search {
float:right;
}