I'm using QT widgets.I want to change the style of SliderBar.I can make it like this at the end of my efforts.
I did this
but I need this
I am sharing the stylesheet codes below. How can I do as shown in the second picture.
QSlider::groove:horizontal {
height: 6px;
width: 350px;
background: grey;
margin: 8px;
border: 1px solid #c17d08;
border-radius: 12px;
}
QSlider::sub-page:horizontal {
background: #c17d08;
height: 6px;
border-radius: 12px;
}
QSlider::add-page:horizontal {
background: #e9e9e9;
height: 10px;
border-radius: 12px;
}
QSlider::handle:horizontal {
background: transparent;
width: 22px;
margin: -10px;
border: 1px solid transparent;
border-radius: 5px;
}
I changed your stylesheet to this :
QSlider::groove:horizontal {
height: 6px;
width: 350px;
background: grey;
margin: 8px;
border: 1px solid #c17d08;
border-radius: 12px;
}
QSlider::handle:horizontal {
background: #c17d08;
border: 1px solid #c17d08;
width: 14px;
margin: -5px 0;
border-radius: 6px;
}
QSlider::add-page:horizontal {
height: 10px;
background: #e9e9e9;
border: 1px solid #c17d08;
border-radius: 12px;
}
QSlider::sub-page:horizontal {
background: #c17d08;
height: 6px;
border: 1px solid #c17d08;
border-radius: 12px;
}
your border-radius should be proportional to the length and width to become a circle.
Result :
css is not working properly in rails 4.2.5 on implementing home page looks like
the gem file are
gem 'rails', '4.2.5.1'
gem 'pg'
gem 'activeadmin', github: 'gregbell/active_admin'
gem 'devise'
gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'bootstrap-sass', '3.2.0.0'
gem 'coffee-rails', '~> 4.1.0'
gem 'coffee-script-source', '1.8.0'
gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder', '~> 2.0'
gem 'sdoc', '~> 0.4.0', group: :doc
my routes are
Rails.application.routes.draw do
get 'pages/about'
get 'pages/contact'
get 'pages/resources'
devise_for :admin_users, ActiveAdmin::Devise.config
ActiveAdmin.routes(self)
resources :categories
get 'categories/index'
get 'categories/edit'
get 'categories/new'
get 'categories/show'
get 'home/index'
resources :posts
root 'home#index'
end
my css files are:
#import "bootstrap-sprockets";
#import "bootstrap";
body {
margin: 0;
padding: 0;
background: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #6F6F6F;
}
strong {
color: #3F3F3F;
}
h1,h2,h3 {
margin: 0;
padding: 0;
text-transform: uppercase;
font-family: 'Abel', sans-serif;
font-weight: normal;
color: #2B2522;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 2.8em;
}
h3 {
font-size: 1.6em;
}
p,ul,ol {
margin-top: 0;
line-height: 180%;
}
ul,ol {
}
a {
text-decoration: underline;
color: #D93544;
}
a:hover{
text-decoration: none;
}
#wrapper{
width: 1000px;
margin: 0 auto;
padding: 0;
background: #000000;
}
/* Header */
#header-wrapper {
height: 120px;
}
#header {
width: 1000px;
margin: 0 auto;
padding: 0px 0px 0px 0px;
}
/* Logo */
#logo {
float: left;
width: 350px;
margin: 0;
padding: 0;
color: #000000;
}
#logo h1, #logo p {
}
#logo h1 {
margin-left: 30px;
padding: 20px 0px 0px 0px;
letter-spacing: -1px;
text-transform: uppercase;
font-family: 'Abel', sans-serif;
font-size: 3.8em;
font-weight: bold;
color: #D43442;
}
#logo h1 a {
color: #D43442;
}
#logo h1 span {
}
#logo p {
margin: 0;
padding: 0px 0 0 32px;
font: normal 14px Georgia, "Times New Roman", Times, serif;
font-style: italic;
color: #BEBEBE;
}
#logo a {
border: none;
background: none;
text-decoration: none;
color: #707070
}
/* Search */
#search {
float: right;
width: 280px;
height: 60px;
padding: 20px 0px 0px 0px
}
#search form {
height: 41px;
margin: 0;
padding: 10px 0 0 0px;
}
#search fieldset {
margin: 0;
padding: 0;
border: none;
}
#search-text {
width: 170px;
height: 19px;
padding: 4px 5px 1px 5px;
border: none;
background: #FFFFFF;
text-transform: lowercase;
font: normal 11px Arial, Helvetica, sans-serif;
color: #5D781D;
}
#search-submit {
width: 50px;
height: 26px;
background: #D93544;
color: #FFFFFF;
}
/* Menu */
#menu {
float: right;
height: 125px;
margin: 0 auto;
padding: 0;
background: #D43442;
}
#menu ul {
margin: 0;
padding: 0px 0px 0px 0px;
list-style: none;
line-height: normal;
}
#menu li {
float: left;
border-left: 1px solid #000000;
}
#menu a {
display: block;
height: 80px;
padding: 45px 25px 0px 25px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: 'Abel', sans-serif;
font-size: 26px;
font-weight: normal;
color: #FFFFFF;
border: none;
}
#menu a:hover, #menu .current_page_item a{
background: #A32833;
text-decoration: none;
}
#menu .current_page_item a {
}
/* Page */
#page {
width: 980px;
margin: 0 auto;
padding: 0px 0px 0px 20px;
}
#page-bgtop {
padding: 20px 0px;
}
/* Content */
#content {
float: right;
width: 600px;
padding: 40px 0px 0px 0px;
}
.post, .post_full, .page {
margin-bottom: 30px;
padding: 30px 20px 20px 20px;
background: #FFFFFF url (images/page-gradient-bg.png) repeat-x left bottom;
box-shadow: inset 0px 0px 1px 1px rgba(255,255,255,1);
outline: 1px dashed #D4D4D4;
outline-offset: -5px;
}
.post .title, .page .title {
height: 41px;
padding: 0px 0px 0px 0px;
letter-spacing: -1px;
font-family: 'Abel', sans-serif;
}
.post .title a, .page .title a {
text-decoration: none;
color: #202020;
border: none;
}
.post .entry {
padding: 20px 30px 20px 30px;
padding-bottom: 20px;
text-align: justify;
}
.post .byline {
clear: both;
overflow: hidden;
padding-bottom: 20px;
}
.post .meta {
float: left;
}
.post .links {
float: right;
}
/* Full Post */
.post_full .byline p {
padding: 0;
margin: 0;
}
.post_full .byline {
clear: both;
overflow: hidden;
margin-bottom: 15px;
padding: 5px;
background: black:;
color: #fff;
border-left: 5px #D93544 solid;
}
.links a {
}
/* Sidebar */
#sidebar {
float: left;
width: 300px;
margin: 0px;
padding: 20px 20px 0px 0px;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar li {
margin: 0;
padding: 0;
}
#sidebar li ul {
margin: 0px 0px;
padding-bottom: 30px;
}
#sidebar li li {
line-height: 35px;
border-bottom: 1px dashed #191919;
background: url (images/img01.jpg) no-repeat left 15px;
margin: 0px 20px 0px 20px;
border-left: none;
text-align: left;
}
#sidebar li li span {
display: block;
margin-top: -20px;
padding: 0;
font-size: 11px;
font-style: italic;
}
#sidebar li li a {
padding: 0px 0px 0px 0px;
}
#sidebar h2 {
height: 31px;
margin: 0px 0px 0px 0px;
padding: 10px 0px 0px 20px;
background: url(images/img03.jpg) no-repeat left top;
text-shadow: #203060 -1px 1px 2px;
text-align: left;
text-transform: uppercase;
letter-spacing: -0.5em;
font-size: 2em;
color: #FFFFFF;
}
#sidebar p {
margin: 0 0px;
padding: 0px 20px 20px 20px;
text-align: justify;
color: #847F7E;
}
#sidebar a {
border: none;
color: #847F7E;
}
#sidebar a:hover {
text-decoration: underline;
color: #847F7E;
}
/* Calendar */
#calender {
}
#calender_wrap{
padding:20px;
}
#calender table {
width: 100%;
}
#calendar body td {
text-align: center;
}
#calendar #next {
text-align: right;
}
/footer/
#footer{
width: 980px;
height: 50px;
margin: 0 auto;
padding: 0px 0 15px 0;
font-family: Arial, Helvetica, sans-serif;
}
#footer p {
margin: 0;
line-height: normal;
font-size: 10px;
text-transform: uppercase;
text-align: center;
color: #847F7E;
}
#footer a {
color: 847F7E;
}
form label{width: 110px; display: inline-block;}
looks like thisenter image description here
want home about contact to be in column form
and want to remove the header background
So I'm making a website for a school assessment, and I was wondering why my Nav bar links are always slightly below the actual nav bar itself. If anyone could help that'd be great :).
ul {
text-align: center;
padding-left: 1px;
top: -10px;
list-style: none;
}
ul li {
font-family: Arial;
font-size: 15px;
font-weight: bold;
display: inline-block;
margin-right: -4px;
position: 0px;
padding: 10px 89.5px;
background-color: #6C2DC7;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
}
ul li:hover {
background: #8467D7;
}
a:link {color:#FFFFFF;} /* unvisited link */
a:visited {color:#FFFFFF;} /* visited link */
a:hover {color:#FFFFFF;} /* mouse over link */
a:active {color:#FFFFFF;} /* selected link */
a {
text-decoration: none;
}
This is what it looks like on my website.
If you change this it will work:
line 75 of your style.css
ul {
text-align: center;
top: 0px;
list-style: none;
margin-top: -5px;
}
really you should make this just for your nav bar and not for every ul so you could change it to the below: up to you though both ways work :)
#navigation ul {
text-align: center;
top: 0px;
list-style: none;
margin-top: -5px;
}
How to set transition delay on li:after so that it aligns with transition for li:hover? Seems like it doesn't work when transition: all 0.3s; is set, because it appears instantly.
Here is the Fiddle
Maybe if you do something like this, where you first set up the :after and then show it on :hover
body {
background-color: #f01;
}
ul {
background-color: #fff;
}
li {
position: relative;
list-style-type: none;
display: inline;
line-height: 2em;
padding: 5px;
transition: all 1s;
}
li:hover {
background-color: #414C52;
transition: all 1s;
}
li:after {
top: 25px;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-top-color: #414C52;
margin-left: -10px;
transition: all 1s;
border-width: 10px;
opacity: 0;
}
li:hover:after {
opacity: 1;
transition: all 1s;
}
a {
padding: 12px 10px color: #333;
}
<ul class="nav navbar-nav">
<li>asdfasdf</li>
<li class="active">ffffft</li>
</ul>
yes, it should do it but you need an inital li:after before your li:hover:after
I am currently running Joomla with a custom template which I designed. Most everything is working beautifully, but I am having a major problem with the footer: it appears in the middle of the page if the content is longer than a certain height. I have the footer set to absolute with a bottom value of 0, so I cannot figure out why it would show up like this on some pages. Below is the contents of my template's custom.css and index.php for reference. Please also see the screenshots below. The first shows a page with the footer correctly positioned, while the other two highlight the footer problem. Thanks in advance for any assistance!
custom.css
#charset "utf-8";
/* Wowcrofty's Picture Perfect Custom Layout */
/* CSS Descriptor properties order:
1. Positioning properties
2. Width and height properties
3. Margin and padding properties
4. Border and box properties
5. Background properties
6. Text properties */
/* HTML tag styling */
body {
width: 100%;
height: 100%;
background-color: #FF8000;
font-family:Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
}
a {color: #000;}
a:visited {color: #FF8000;}
h1 {
font-size: 28px;
}
h2 {
font-size: 24px;
}
h3 {
font-size: 18px;
}
header {
width: 99%;
height: 310px;
padding-top: 20px;
background-color: #000;
text-align: center;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 40px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
background-color: #000;
line-height: 2;
color: #fff;
font-style: italic;
text-align: center;
}
/* Navigation Styling */
nav {
text-transform: uppercase;
}
.navbar-inner {
min-height: 40px;
padding-left: 20px;
padding-right: 20px;
background-color: #000;
background-image: -moz-linear-gradient(top, #000, #000);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(#000));
background-image: -webkit-linear-gradient(top, #000, #000);
background-image: -o-linear-gradient(top, #000, #000);
background-image: linear-gradient(to bottom, #000, #000);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000', endColorstr='#000', GradientType=0);
border: 0px solid #d4d4d4;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
}
.navbar .nav > li > a {
float: none;
padding: 10px 15px 10px;
-moz-border-top-left-radius: 6px;
-webkit-border-top-left-radius: 6px;
border-top-left-radius: 6px;
-moz-border-top-right-radius: 6px;
-webkit-border-top-right-radius: 6px;
border-top-right-radius: 6px;
color: #fff;
text-decoration: none;
font-size: 18px;
text-shadow: 0 -1px 0 #000;
}
.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
background-color: transparent;
color: #FF8000;
text-decoration: none;
}
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
color: #000;
text-decoration: none;
background-color: #FF8000;
-webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
-moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
}
nav .nav-child {
position: absolute;
top: 95%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
background-color: #FE642E;
border: 1px solid #ccc;
border: 1px solid rgba(0,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,0.2);
-moz-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
box-shadow: 0 5px 10px rgba(0,0,0,0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
nav .nav-child.pull-right {
right: 0;
left: auto;
}
nav .nav-child .divider {
*width: 100%;
height: 1px;
margin: 8px 1px;
*margin: -5px 0 5px;
overflow: hidden;
background-color: #e5e5e5;
border-bottom: 1px solid #fff;
}
nav .nav-child a {
display: block;
padding: 3px 20px;
clear: both;
font-size: 13px;
font-weight: normal;
line-height: 18px;
color: #fff;
white-space: nowrap;
}
nav .nav > li {
position: relative;
}
nav .nav > li:hover > .nav-child,
nav .nav > li > a:focus + .nav-child {
display: block;
}
nav .nav-child:before {
position: absolute;
top: -7px;
left: 9px;
display: inline-block;
border-right: 7px solid transparent;
border-bottom: 7px solid #FE642E;
border-left: 7px solid transparent;
border-bottom-color: rgba(0,0,0,0.2);
content: '';
}
nav .nav-child:after {
position: absolute;
top: -6px;
left: 10px;
display: inline-block;
border-right: 6px solid transparent;
border-bottom: 6px solid #FE642E;
border-left: 6px solid transparent;
content: '';
}
nav .nav-child li > a:hover,
nav .nav-child li > a:focus,
nav .nav-child:hover > a {
text-decoration: none;
color: #000;
background-color: transparent;
}
/* User Bar Styling */
#userheader {
width: 100%;
min-height: 25px;
max-height: 45px;
padding: 3px 8px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background-color: #BDBDBD;
}
.userdata .control-group{
position: relative;
top: -12px;
left: 0;
float:left;
}
#form-login-remember {
position: absolute;
top: 14px;
left: 340px;
}
form ul.unstyled {
position: absolute;
top: 55px;
left: 10px;
display: none;
list-style: none;
}
.logout {
position: relative;
top: -10px;
left: 55px;
float: left;
}
.search {
position: relative;
top: 6px;
}
/* Component Styling */
.breadcrumb {
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
background-color: #BDBDBD;
color: #000;
}
#componentcontainer {
width: 99%;
height: auto;
margin: 0 auto;
padding: 15px;
border: 2px #000 solid;
background-color: #fff;
}
/* Button Styling */
.btn-primary {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #000;
background-image: -moz-linear-gradient(top, #000, #6E6E6E);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(#6E6E6E));
background-image: -webkit-linear-gradient(top, #000, #6E6E6E);
background-image: -o-linear-gradient(top, #000, #6E6E6E);
background-image: linear-gradient(to bottom, #000, #6E6E6E);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000', endColorstr='#6E6E6E', GradientType=0);
border-color: #0044cc #0044cc #002a80;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
*background-color: #000;
/* Darken IE7 buttons by default so they stand out more given they won't have borders */
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled] {
color: #ffffff;
background-color: #000;
*background-color: #000;
}
#contentheader {
position: relative;
top: 20px;
width: 55%;
height: 55px;
margin: 0 auto;
padding: 10px;
border-radius: 10px;
box-shadow: -1px -3px 2px #CDC7C7;
background-color: #000;
font-size: 36px;
color: #fff;
font-weight: bold;
text-align: center;
}
#content {
position:relative;
top: 35px;
background-color: transparent;
font-size: 36px;
text-align: center;
}
.bodycontent {
position: relative;
top: 175px;
width: 97%;
margin: 0 auto;
padding: 10px 0 20px 0;
border-radius: 10px;
box-shadow: -2px -2px 1px #ADA0A0;
background-color: #FD1115;
font-size: 26px;
line-height: 2;
color: #fff;
text-align: center;
}
/*News Ticker Styles*/
#news {
width: 95%;
margin: 0 auto;
box-shadow: -1px -1px 1px #fff;
background-color: #fff;
color: #000;
}
.date {
margin-top: 10px;
padding-top: 6px;
font-size: 18px;
font-weight: bold;
color: #000;
text-align: center;
}
.headline {
font-size: 24px;
font-weight: bold;
background-color: transparent;
color #000;
text-align: center;
}
.headlinebody {
margin-top: 10px;
font-size: 16px;
font-weight: normal;
color: #000;
text-align: center;
index.php
<?php
// Wowcrofty's Picture Perfect Photo Custom Joomla Template for v3.3
// Check that the template is being installed in Joomla.
defined('_JEXEC') or die;
// Add Joomla JavaScript Frameworks
JHtml::_('bootstrap.framework');
// Load Bootstrap stylesheets
JHtmlBootstrap::loadCss($includeMaincss = true);
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<jdoc:include type="head" />
<!--[if lt IE 9]>
<script src="<?php echo $this->baseurl ?>/media/jui/js/html5.js"></script>
<![endif]-->
<link href="templates/wowcroftypictureperfect/css/custom.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="userheader" class="row-fluid">
<div class="row-fluid">
<div class="span9"><jdoc:include type="modules" name="userinfo" style="html5" /></div>
<div class="span3"><jdoc:include type="modules" name="search" style="html5" /></div>
</div>
</div>
<header class="row-fluid">
<div class="span12">
<img src="templates/wowcroftypictureperfect/images/headerbanner.png" alt="Wowcrofty's Picture Perfect Photo, click to go home." />
</div>
</header>
<div class="row-fluid">
<nav class="span12 navbar">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<jdoc:include type="modules" name="nav" style="none" />
</div>
</div>
</div>
</nav>
</div>
<div id="componentcontainer" class="row-fluid">
<?php if ($this->countModules('breadcrumbs')) : ?>
<div class="row-fluid">
<div class="span12"><jdoc:include type="modules" name="breadcrumbs" style="html5" /></div>
</div>
<?php endif; ?>
<?php if ($this->countModules('componentheadermodule')) : ?>
<div class="row-fluid">
<div class="span12">
<jdoc:include type="modules" name="componentheadermodule" style="html5" /></div>
<?php endif; ?>
<div class="row-fluid">
<div class="span12">
<jdoc:include type="message" />
<jdoc:include type="component" />
</div>
</div>
</div>
<footer id="footer" class="row-fluid">
<div class="span9"><jdoc:include type="modules" name="bottomnav" style="html5" /></div>
<div class="span3">Copyright © <?php echo date("Y") ?> Matthew Croft. All rights reserved.</div>
</footer>
</body>
</html>
You might try setting the footer div to relative and #footer.span3 to absolute. I'd might try using float somehow too. I usually debug this type of stuff using the Chrome Inspector.