susy grid background display - susy-compass

I am unable to get the susy-grid-background mixin to display my grid. I have set the grid related variables to true and supplied a grid color, but no matter what I do the grid does not show.
If I run demo code from the Susy website, the grid shows as expected. What am I missing?
.contain {
#include susy-grid-background;
#include container($total-columns);
max-width: 62em;
}
header {
#include span-columns(12 omega, 12);
padding: 1em;
.branding {
font-family: RockSaltRegular;
font-size: 2em;
}
}
.main[role="main"] {
#include span-columns(12 omega, 12);
}
.content {
background: white;
border: 1px solid darken($primary, 30%);
#include border-radius(1em);
#include box-shadow(2px 2px 5px 0 hsla(0, 0%, 0%, 0.35));
padding: 1em;
h1 {
font-size: 1.5em;
}
}
footer {
#include span-columns(12 omega, 12);
font-size: 0.75em;
&.fixed {
bottom: 5em;
position: fixed;
}
}
.hero {
#include span-columns(12);
margin-top: 20%;
#include at-breakpoint($iPadPortrait) {
#include span-columns(7, 12);
#include isolate(3);
}
.branding {
font-family: RockSaltRegular;
font-size: 2em;
margin: 0 auto;
max-width: 6.25em;
text-align: center;
#include at-breakpoint($iPadPortrait) {
font-size: 3em;
}
}
.hero-search {
margin-top: 1em;
text-align: center;
input[type=text],
input[type=search] {
border: 1px solid white;
#include border-radius(1.5em);
margin: 1em 0 2.5em;
padding: 1em;
width: 100%;
-webkit-appearance: caret;
}
button {
background: rgb(157, 151, 139);
border: 2px solid rgb(157, 151, 139);
#include border-radius(1.5em);
#include box-shadow(2px 2px 5px 0 hsla(0, 0%, 0%, 0.35));
color: white;
font-size: 1em;
min-width: 4em;
padding: 0.5em 1.5em;
text-transform: uppercase;
&:hover {
#include linear-gradient($secondary, set-lightness($secondary,10%));
}
}
}
}

I was able to solve this issue by rearranging the import statements. toolkit and bourbon must create some conflict or overwrite something that makes the susy grid show. To get the grid to show I changed the order of the imports to:
#import "compass/reset";
#import "toolkit";
#import "susy";
#import "bourbon";

Related

How to set a stylesheet for the QScrollBar in a QScrollArea?

I can't figure out how to set a stylesheet to modify the QScrollBar in a QScrollArea.
I've first tried:
scrollarea = QScrollArea()
scrollarea.verticalScrollBar().setStyleSheet("""
QScrollBar:horizontal {
min-width: 240px;
height: 13px;
}
QScrollBar:vertical {
min-height: 240px;
width: 13px;
}
QScrollBar::groove {
background: gray;
border-radius: 5px;
}
QScrollBar::handle {
background: blue;
border-radius: 5px;
}
QScrollBar::handle:horizontal {
width: 25px;
}
QScrollBar::handle:vertical {
height: 25px;
}"""
# same for horizontalScrollBar
Then I tried applying the exact same stylesheet directly on the QScrollArea instance, with no success.
Then I tried to define the scrollbar myself :
scrollArea = QScrollArea(self)
verticalScrollBar = QScrollBar(qt.Qt.Vertical, scrollArea)
verticalScrollBar.setStyleSheet(my_stylesheet)
scrollArea.setVerticalScrollBar(verticalScrollBar)
But the exact same stylesheet works on a QSlider (by replacing QScrollBar with QSlider).
Try it:
import sys
from PyQt5.QtWidgets import QScrollBar, QDialog, QVBoxLayout, QApplication
from PyQt5.QtCore import Qt
class MainWindow(QDialog):
def __init__(self):
super().__init__()
self.createWidgets()
def createWidgets(self):
self.layout = QVBoxLayout(self)
self.scrollbar1 = QScrollBar(Qt.Vertical, self)
self.scrollbar2 = QScrollBar(Qt.Horizontal, self)
for widget in [self.scrollbar1, self.scrollbar2]:
widget.valueChanged.connect(self.test)
self.layout.addWidget(widget)
def test(self, event):
print(self.sender().value())
stylesheet = """
/* --------------------------------------- QScrollBar -----------------------------------*/
QScrollBar:horizontal
{
height: 15px;
margin: 3px 15px 3px 15px;
border: 1px transparent #2A2929;
border-radius: 4px;
background-color: yellow; /* #2A2929; */
}
QScrollBar::handle:horizontal
{
background-color: blue; /* #605F5F; */
min-width: 5px;
border-radius: 4px;
}
QScrollBar::add-line:horizontal
{
margin: 0px 3px 0px 3px;
border-image: url(:/qss_icons/rc/right_arrow_disabled.png);
width: 10px;
height: 10px;
subcontrol-position: right;
subcontrol-origin: margin;
}
QScrollBar::sub-line:horizontal
{
margin: 0px 3px 0px 3px;
border-image: url(:/qss_icons/rc/left_arrow_disabled.png);
height: 10px;
width: 10px;
subcontrol-position: left;
subcontrol-origin: margin;
}
QScrollBar::add-line:horizontal:hover,QScrollBar::add-line:horizontal:on
{
border-image: url(:/qss_icons/rc/right_arrow.png);
height: 10px;
width: 10px;
subcontrol-position: right;
subcontrol-origin: margin;
}
QScrollBar::sub-line:horizontal:hover, QScrollBar::sub-line:horizontal:on
{
border-image: url(:/qss_icons/rc/left_arrow.png);
height: 10px;
width: 10px;
subcontrol-position: left;
subcontrol-origin: margin;
}
QScrollBar::up-arrow:horizontal, QScrollBar::down-arrow:horizontal
{
background: none;
}
QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal
{
background: none;
}
QScrollBar:vertical
{
background-color: #2A2929;
width: 15px;
margin: 15px 3px 15px 3px;
border: 1px transparent #2A2929;
border-radius: 4px;
}
QScrollBar::handle:vertical
{
background-color: red; /* #605F5F; */
min-height: 5px;
border-radius: 4px;
}
QScrollBar::sub-line:vertical
{
margin: 3px 0px 3px 0px;
border-image: url(:/qss_icons/rc/up_arrow_disabled.png);
height: 10px;
width: 10px;
subcontrol-position: top;
subcontrol-origin: margin;
}
QScrollBar::add-line:vertical
{
margin: 3px 0px 3px 0px;
border-image: url(:/qss_icons/rc/down_arrow_disabled.png);
height: 10px;
width: 10px;
subcontrol-position: bottom;
subcontrol-origin: margin;
}
QScrollBar::sub-line:vertical:hover,QScrollBar::sub-line:vertical:on
{
border-image: url(:/qss_icons/rc/up_arrow.png);
height: 10px;
width: 10px;
subcontrol-position: top;
subcontrol-origin: margin;
}
QScrollBar::add-line:vertical:hover, QScrollBar::add-line:vertical:on
{
border-image: url(:/qss_icons/rc/down_arrow.png);
height: 10px;
width: 10px;
subcontrol-position: bottom;
subcontrol-origin: margin;
}
QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical
{
background: none;
}
QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical
{
background: none;
}
"""
if __name__ == '__main__':
app = QApplication(sys.argv)
app.setStyleSheet(stylesheet) # <----
GUI = MainWindow()
GUI.resize(300, 200)
GUI.show()
sys.exit(app.exec_())
Update
Upload images from a resource file.
This way is to convert
the res.qrc file in the res_rc.py file through the pyrcc5 file,
which can be directly loaded by import.
In a directory, for example images were put images: right_arrow.png, ...
Created a file such as stylesheet.qrc:
<RCC>
<qresource prefix="/">
<file>images/down_arrow.png</file>
<file>images/down_arrow_disabled.png</file>
<file>images/up_arrow.png</file>
<file>images/up_arrow_disabled.png</file>
<file>images/left_arrow.png</file>
<file>images/left_arrow_disabled.png</file>
<file>images/right_arrow.png</file>
<file>images/right_arrow_disabled.png</file>
</qresource>
</RCC>
Convert stylesheet.qrc to stylesheet_rc.py
pyrcc5 stylesheet.qrc -o stylesheet_rc.py
Paste into main.py - import stylesheet_rc
Transfer the modules main.py and stylesheet_rc.py to some other directory and run main.py
main.py
import sys
from PyQt5.QtWidgets import QScrollBar, QDialog, QVBoxLayout, QApplication
from PyQt5.QtCore import Qt
import stylesheet_rc # <--------
class MainWindow(QDialog):
def __init__(self):
super().__init__()
self.createWidgets()
def createWidgets(self):
self.layout = QVBoxLayout(self)
self.scrollbar1 = QScrollBar(Qt.Vertical, self)
self.scrollbar2 = QScrollBar(Qt.Horizontal, self)
for widget in [self.scrollbar1, self.scrollbar2]:
widget.valueChanged.connect(self.test)
self.layout.addWidget(widget)
def test(self, event):
print(self.sender().value())
stylesheet = """
/* --------------------------------------- QScrollBar -----------------------------------*/
QScrollBar:horizontal
{
height: 15px;
margin: 3px 15px 3px 15px;
border: 1px transparent #2A2929;
border-radius: 4px;
background-color: yellow; /* #2A2929; */
}
QScrollBar::handle:horizontal
{
background-color: blue; /* #605F5F; */
min-width: 5px;
border-radius: 4px;
}
QScrollBar::add-line:horizontal
{
margin: 0px 3px 0px 3px;
border-image: url(:/images/right_arrow_disabled.png); /* # <-------- */
width: 10px;
height: 10px;
subcontrol-position: right;
subcontrol-origin: margin;
}
QScrollBar::sub-line:horizontal
{
margin: 0px 3px 0px 3px;
border-image: url(:/images/left_arrow_disabled.png); /* # <-------- */
height: 10px;
width: 10px;
subcontrol-position: left;
subcontrol-origin: margin;
}
QScrollBar::add-line:horizontal:hover,QScrollBar::add-line:horizontal:on
{
border-image: url(:/images/right_arrow.png); /* # <-------- */
height: 10px;
width: 10px;
subcontrol-position: right;
subcontrol-origin: margin;
}
QScrollBar::sub-line:horizontal:hover, QScrollBar::sub-line:horizontal:on
{
border-image: url(:/images/left_arrow.png); /* # <-------- */
height: 10px;
width: 10px;
subcontrol-position: left;
subcontrol-origin: margin;
}
QScrollBar::up-arrow:horizontal, QScrollBar::down-arrow:horizontal
{
background: none;
}
QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal
{
background: none;
}
QScrollBar:vertical
{
background-color: #2A2929;
width: 15px;
margin: 15px 3px 15px 3px;
border: 1px transparent #2A2929;
border-radius: 4px;
}
QScrollBar::handle:vertical
{
background-color: red; /* #605F5F; */
min-height: 5px;
border-radius: 4px;
}
QScrollBar::sub-line:vertical
{
margin: 3px 0px 3px 0px;
border-image: url(:/images/up_arrow_disabled.png); /* # <-------- */
height: 10px;
width: 10px;
subcontrol-position: top;
subcontrol-origin: margin;
}
QScrollBar::add-line:vertical
{
margin: 3px 0px 3px 0px;
border-image: url(:/images/down_arrow_disabled.png); /* # <-------- */
height: 10px;
width: 10px;
subcontrol-position: bottom;
subcontrol-origin: margin;
}
QScrollBar::sub-line:vertical:hover,QScrollBar::sub-line:vertical:on
{
border-image: url(:/images/up_arrow.png); /* # <-------- */
height: 10px;
width: 10px;
subcontrol-position: top;
subcontrol-origin: margin;
}
QScrollBar::add-line:vertical:hover, QScrollBar::add-line:vertical:on
{
border-image: url(:/images/down_arrow.png); /* # <-------- */
height: 10px;
width: 10px;
subcontrol-position: bottom;
subcontrol-origin: margin;
}
QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical
{
background: none;
}
QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical
{
background: none;
}
"""
if __name__ == '__main__':
app = QApplication(sys.argv)
app.setStyleSheet(stylesheet) # <----
GUI = MainWindow()
GUI.resize(300, 200)
GUI.show()
sys.exit(app.exec_())
My problem was that the stylesheet for QSlider and QScrollBar have sligthly different syntaxes.
My eventual solution is (to be set either as the QScrollArea stylesheet or as the QApplication stylesheet, depending on the desired scope):
stylesheet = """
QScrollArea {
border: none;
}
QScrollBar {
background: gray;
border-radius: 5px;
}
QScrollBar:horizontal {
height: 13px;
}
QScrollBar:vertical {
width: 13px;
}
QScrollBar::handle {
background: green;
border-radius: 5px;
}
QScrollBar::handle:horizontal {
height: 25px;
min-width: 10px;
}
QScrollBar::handle:vertical {
width: 25px;
min-height: 10px;
}
QScrollBar::add-line {
border: none;
background: none;
}
QScrollBar::sub-line {
border: none;
background: none;
}
"""

Express-minify cannot load file CSS file. Removing part of it will make it work

I've installed the express-minify middleware but for some reason it seems to cause an error whilst loading the attached css file.
I have tried validating the CSS with an online service and it doesn't give me any error.
I have tried to debug by removing all elements leaving one at the time and when I hit .mainmenu tr td:hover:not(.mainmenu_item_selected) it fails.
So removing everything from .mainmenu tr td:hover:not(.mainmenu_item_selected) to the end of the file will make it work (Obviously without all the other required styles).
I have even tried to recreate the file and also name it differently without any success.
The express logs are showing me: GET /stylesheets/gctl.css 200 4.954 ms - - meaning that the file should be served correctly.
Its a standard installation as per npm website:
var minify = require('express-minify');
app.use(minify());
File (saved as gctl.css)
In main page (Using PUG): link(rel='stylesheet' href='/stylesheets/gctl.css')
CSS file:
html, body, * {
font-family: 'Raleway', sans-serif;
margin: 0;
}
.centered {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
.loginform {
text-align:center;
vertical-align:middle;
width: 30%;
height: 50%;
}
.closenewitem {
cursor: pointer;
}
/* Tooltip overide settings */
div.tooltip-inner {
max-width: 500px;
}
/* Remove outlines such as in chrome */
input:focus {
outline: 0;
}
/* all input text align center*/
input, textarea, label {
text-align: center;
cursor: pointer;
font-weight: 400;
}
/* Labels for help add help class to them */
label.help:hover {
color: red;
}
/* Logo CSS */
.logo {
position: absolute;
cursor: pointer;
top: 4px;
height: 40px;
}
/* menu css */
.mainmenu {
border-right-width: 1px;
border-right-style: solid;
border-right-color: lightgray;
margin-left: -15px;
height: 100%;
width: 100%;
}
.mainmenu tr td {
padding: 10px;
}
.mainmenu tr td:hover:not(.mainmenu_item_selected) {
border-right-color: red;
border-right-style: solid;
border-right-width: 3px;
color: black;
cursor: pointer;
background-color: #f0f0f0; /*#f9eafc*/
}
/* Selected menu item */
.mainmenu_item_selected {
border-right-color: black;
border-right-style: solid;
border-right-width: 3px;
background-color: lightgray; /*#f7faff*/
font-weight: 700;
color: black;
}
.mainmenu tr td span {
padding-left: 2px;
}
/* Footer div for additions to DB*/
.footer {
overflow: scroll;
position: absolute;
bottom: 0px;
height: auto;
min-height: 50%;
padding-bottom: 20px;
background-color: #f6f6f6;
border-top-color: lightgray;
border-top-style: solid;
border-top-width: 1px;
width: 100%;
}
.fixed-button {
position: absolute;
top: 4px;
right: 4px;
}
/* Error handling CSS */
.customerror {
border-color: red;
border-width: 2px;
background-color: #ffcccf;
font-weight: bold;
}
/* Shadow only for desktop icons panel as otherwise it would appear everywhere and it's annoying! */
.dsk-panel:hover {
-webkit-box-shadow: -1px 5px 15px 0px lightgray;
-moz-box-shadow: -1px 5-webkitpx 15px 0px lightgray;
box-shadow: -1px 5px 15px 0px lightgray;
}
.desktop-icon {
width: 60px;
opacity: 0.6;
}
I'm stuck and have no clue on what is causing the problem!
If you're sure that the default behavior breaks the Bootstrap layout and there is no issue posted about it yet then you should post an issue on GitHub where this project tracks things like that.
But "breaks layout" doesn't say anything really. Does it change margins? Does it remove borders? What exactly does it break and how? So you should prepare a minimal set of CSS that this module breaks in a predictable manner instead of saying vague claims like that if you want your issue to be taken seriously.
It's entirely possible that you found a bug in this module but it's really hard to tell after an overly general claims like this.

Back to top button

How can i get my back to top button to stick to the side of the screen. So when i resize it, it will stay stuck to the left? Right now i have it in a container and it works well on smaller screens, but when i see it on a desktop it is in that container instead of all the way to the left of the screen.
#back-top {
position: relative;
z-index: 1000;
opacity: .7;
position: fixed;
bottom: 30px;
}
#back-top a {
width: 108px;
display: block;
text-align: center;
font: 11px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #bbb;
/* background color transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover {
color: #000;
}
/* arrow icon (span tag) */
#back-top span {
font-size: 8px !important;
width: 75px;
height: 75px;
display: block;
margin-bottom: 7px;
background: url(../img/weed2.png) no-repeat center center;
/* rounded corners */
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
/* background color transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}

Two divs stretched to the end of the page

I have an OUTER div with two inner divs:
one of them is VERTICAL SIDEBAR whose content is fairly short
second one is div with MAIN PAGE whose content varies
They are both set to float: left, so they are next to each other.
I already learned that when setting height or min-height in percentage, all the parents need to have their height specified also.
I would like them both to be stretched to the end of the page. Havent managed to do that, problems begin when MAIN PAGE div is longer than monitor height( so there needs to be scrollbar), then I usually end with that nasty scrollbar inside MAIN PAGE div or I end with the SIDEBAR div being too short.
ok you should set the Outer divs css like so
.outer{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
overflow:auto;
}
This will set the outer div to completely fill the window, with a side bar to scroll the length of the rest of the page. You would only have one main side scrollbar.
Now if you want the sidebar to just fill the page. set its css like so:
.sideBar{
position:absolute //can be relative if necesary.
top:0;
bottom:0;
overflow:none;
}
Now this sets the sidebar to the exact height of the outer div. so it will span the entire page and the overflow is set to none to ensure no scrollbar.
Now the outer div's and sidebar div's height should be dictated by the main div, and you should only have one clean scroll bar.
You could do something like this:
jsFiddle
Setting display: table-cell on both div's inside the outer div with display: table-row will ensure they are always the same height, you'll have to set display: table on body for this to work, or you could just set it directly on the outer div instead of table-row. That will work just fine. This approach should work on anything better than IE7.
CSS:
html {
position: absolute;
bottom: 0px;
top:0px;
left: 0px;
right: 0px;
overflow: scroll-x;
}
body {
height: 100%;
padding: 0px;
margin: 0px;
display: table;
}
.outer {
display: table-row;
height: 100%;
width: 100%;
}
.sidebar, .mainpage {
display: table-cell;
height: 100%;
}
.sidebar {
width: 200px;
background-color: #EFEFEF;
}
HTML
<div class="outer">
<div class="sidebar">sidebar</div>
<div class="mainpage">mainpage</div>
</div>
After seeing your site, this is the fix:
.Page {
width: 970px;
min-height: 100%;
width: 100%;
display: table;
}
.Sidebar {
width: 257px;
background: url(img/sidebar-bg.png) repeat-y;
margin-left: 23px;
background: white;
display: table-cell;
vertical-align: top;
}
.Sidebar-Nav {
padding-left: 15px;
}
.Content {
background: url(img/content-bg.png) repeat;
margin-left: 10px;
width: 680px;
float: left;
background: white;
display: table-cell;
padding: 10px;
}
EDIT: I forgot the .Page styles, I added it.
EDIT: Also, if you want to center it, then use this:
html, body {
height: 100%;
min-height: 100%;
padding: 0px;
margin: 0px;
}
body {
padding: 0px;
margin: 0px;
line-height: 21px;
background: url(img/bg-page-01.jpg) no-repeat;
background-position: 50% 0%;
}
.Page {
height: 100%;
display: table;
margin: 0 auto;
}
.Sidebar {
width: 257px;
height: 100%;
background: url(img/sidebar-bg.png) repeat-y;
background: white;
display: table-cell;
vertical-align: top;
}
.Sidebar-Nav {
padding-left: 15px;
}
.Content {
height: 100%;
background: url(img/content-bg.png) repeat;
margin-left: 10px;
width: 680px;
float: left;
background: white;
display: table-cell;
padding: 10px;
}
If your talking about height issues here, then use this:
html, body {
height: 100%;
min-height: 100% /* for firefox */
}
#main, #sidebar {
height: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
-khtml-box-sizing: border-box;
box-sizing: border-box; /* eliminates increased height due to padding & child margins */
}
#sidebar { background: blue; width: 200px; float:left; margin: 0; }
#main { background: green; width: 960px; margin: 0 0 0 200px; }
edit: fiddle: http://jsfiddle.net/jTwqe/
I'm not really sure what your issue is, but is an alternate solution.
.outer { display: table; }
.sidebar, .main { display: table-cell; padding: 10px; }
.sidebar { background: green; }
.main { background: blue; }
Fiddle: http://jsfiddle.net/Q5CmR/

Text is not completely being displayed inside a div?

You can see everything in the picture (CSS, the behavior and divs).
The lower part of the p letter and g letter are hidden by the div.
http://img573.imageshack.us/img573/3553/screenshot3m.png
EDIT:
style.css:
/* Structure */
.container {
margin: 0 auto;
overflow: hidden;
width: 960px;
}
#header, #intro, #tagline, #content {
background: url(images/bg.png) top center repeat;
}
#branding, .content, .content-block, .posts, #footer a {
margin-left: 10px !important;
margin-right: 10px !important;
}
#intro h2, #content h2, #nav li a {
text-shadow: 0 1px 0 #FFF;
}
/* Header */
#header {
}
#header a {
color: #333
}
#header a:hover {
color: #28A
}
#branding {
float: left;
margin: 10px 0 10px;
width: 940px;
}
#header h1, #lang {
margin: 20px 0 12px;
width: 280px;
}
#header h1 {
float: left;
width: 280px;
}
#nav {
float: left;
margin: 32px 0 10px;
}
#nav li {
float: left;
}
#nav li a {
font-size: 14px;
font-weight: 400;
margin: 0 40px 0 0;
}
#lang {
float: right;
}
#lang li {
float: left;
}
#lang li a {
font-size: 10px;
margin: 0 0 0 30px;
}
/* Intro */
#intro, #intro2 {
background: #333;
padding: 30px 0;
}
#intro {
height: 400px;
}
#intro2 {
background: #333;
padding: 30px 0;
}
#intro2 h2 {
color: #DDD;
}
...
You can try add css attribute line-height
.content h2{line-height: 35px;}

Resources