I have a hard time figuring out how to define a button with a transparent background, a white text and a 1px white outline.
I currently work with this:
.mybutton {
#include button-base();
#include button-size($button-tny, false);
#include button-style(false, true, false, null, #FF0000);
}
I've read the source but it looks like there is nothing to begin with. There is only a color-definition for the border (I found then $button-border-width but am yet puzzled to use it).
So to learn something from this let me rephrase the question:
How can I set a button:
no Background
2px solid border
white text
border should be .3 alpha/opacity (is this possible or only the whole button?)
Thank you
as far as I know that button-style sets the variables on which $button-base is based on.
See this - https://github.com/zurb/foundation/blob/master/scss/foundation/components/_buttons.scss#L143
so I have not tried this, but if you reverse the order, it might work
.mybutton {
#include button-size($button-tny, false);
#include button-style(false, true, false, null, #FF0000);
#include button-base();
}
Related
I have two seperate images right next to one another, and I want them to be contiguous. The problem is that I need to move the right-most image over to the left. I could use the size modifiers for the span mixin (narrow | wide ) but that would change the proportions of the two respective images in relation to one antoher.
Instead I need to move the second image in the flow over to the left by temporarily removing the gutter.
I read from his old post here: https://stackoverflow.com/a/13044025 that I can use with-grid-settings, which is now with-layout.
However there doesn't seem to be any documentation on how to accomplish this particular action.
What would be the proper way to execute such a task?
Thanks in advance
--EDIT--
HTML (Simplified)
<main id="grid">
<section id="main_background_container">
<img id="main_side_img"></img>
<div id="main_primary_container"></div>
</section>
</main>
SCSS
#grid{
#include container(8);
#include background-grid;
}
#main_background_container{
#extend %debug;
#include span(8);
height: auto;
float: right;
margin-top:-16px;
}
#main_side_img{
height: 65%;
#include span(1 no gutter);
}
#main_primary_container{
#include span(4 wide);
background-image: url('../images/background-2b.png');
background-position: top;
background-size: cover;
height: 65%;
}
The with-layout mixin accepts any layout definition using a settings-map, or the shorthand syntax, or any combination of the two — similar to other Susy mixins. But I don't think that's what you want. Changing the gutter size actually changes the grid math, and your elements wont align. I think you want something like this (I'm making things up, since I can't see your code):
.left-area {
#include span(3 no-gutter); // remove the gutter here
}
.right-area {
#include span(9 wide); // span across what would have been the gutter
}
I need to align elements on GUI: actually, a single label, but at the specific position. I know how to use QGridLayout, QHBoxLayout, I know how to change the font to have the specified size. However, I don't know how to align the label like on this picture below. Any advices?
Here is the most direct, but hardcoded way.
#include "widget.h"
#include <QLabel>
#include <QFont>
Widget::Widget(QWidget *parent)
: QWidget(parent)
{
QSize frameSize = this->frameGeometry().size() - this->geometry().size();
this->resize(frameSize + QSize(250, 125));
QLabel * label = new QLabel(this);// parenting instead of layouts
label->resize(130, 32);
label->move(60, 40);
QFont f = label->font();
f.setPointSize(16);
label->setFont(f);
label->setText("Sample");
label->setFrameStyle(QFrame::Box);
}
Widget::~Widget()
{
}
Layouts and alignments are a much better solution, but if you really want to give numbers to everything... Also look into using forms. It makes "hardcoding" sizes and layouts a lot easier.
Hope that helps.
If you want the proportions, but have it resizeable, you can use QBoxLayouts and the addStretch() method. Roughly you have a 1/2/1 proportion, so you first add a stretch with stretch 1, then your widget with stretch 2 and then another stretch with stretch 1. That would be for the horizontal layout, you would then take that layout and put it in a vertical layout with 1/1/1 stretches.
If you know abut layouts and how to use them than great.
To tweak this after you have a layout you should use a style sheet. Here are some examples. You can set a style sheet on QApplication.
QPushButton#buttonName {
margin-top: 30px;
margin-bottom: 30px;
margin-left: 60px;
margin-right: 60px;
min-width: 130px;
min-height : 32px;
}
PS. I know this is student homework :P
I want to change to color in which text is highlighted when the findText() method is used. This color has nothing to do with user selected text. I have tried CSS as well as setting a QPalette. All occurences are always highlighted in yellow.
I've been searching for this as well, and it seems like it's hardcoded deep inside WebKit:
Color RenderTheme::platformInactiveTextSearchHighlightColor() const
{
return Color(255, 255, 0); // Yellow.
}
I really have the same problem. But the good news: Setting the style sheet helps at least to change the fg/bk color.
m_browser->setStyleSheet("QWebView {
selection-background-color: blue; selection-color: white; }");
But this is not the whole truth because it only changes the fg/bk color of the currently found text. No idea how to change the fg/bk color of all occurences.
Axel
I'm trying to make a simple design to select a color and I'm using a QToolButton to open a QColorDialog.
My problem is that I would like the QToolButton to be of the selected color but I've only suceeded to set the background color, which is not what I want.
Here is a picture:
My code:
QColor color = QColorDialog::getColor(m_couleur);
if (color.isValid()) m_couleur=color;
m_labelCouleur->setPalette(QPalette(m_couleur));
m_labelCouleur->setAutoFillBackground(true);
m_buttonCouleur->setPalette(QPalette(m_couleur));
m_buttonCouleur->setAutoFillBackground(true);
Basically I would like the QToolButton to look something like this:
edit: Can anyone explain to me why the website won't let me add "Hi everybody" at the beginning?
QColor color = QColorDialog::getColor(m_couleur);
QPixmap px(20, 20);
px.fill(color);
m_buttonCouleur->setIcon(px);
No CSS involved in this case is (for me ofcourse) big pro
Use the setStylesheet function in order to change the background color of your button
m_buttonCouleur->setStyleSheet(QString("QToolButton{ background: %1; }").arg(m_couleur.name()));
I've done exactly that by using a QPushButton and setting its style sheet to the result from the color picker. I guess a tool button should probably be the same.
button->setStyleSheet(QString("background-color: %1; "
"border: 1px; "
"border-color: black; "
"border-style: outset;").arg(color.name()));
I have a question regarding the QGroupBox stylesheet. I want a custom stylesheet for QGroupBox that looks similar to the image below:
Can you please tell me how to look "Device Info" Style with white background?
Use setStyleSheet function to set any style for any state programmatically.
For your case, first obtain the QGroupBox object and let us assume "pGroupBox".
As you need title's back ground color to be white, you can set it as shown below.
pGroupBox->setStyleSheet("::title{background-color:white}");
Almost you can style anything check below link:
(you can set based on different psuedo states for different sub controls.)
http://doc.qt.io/qt-5.8/stylesheet-examples.html
You need to change style for QGroupBox::title subcontrol. http://developer.qt.nokia.com/doc/qt-4.7/stylesheet-examples.html#id-e7d01e98-168f-4c8a-ac7f-77233a406ba4
You can change the color here
QGroupBox {
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #E0E0E0, stop: 1 #FFFFFF);
border: 2px solid gray;
border-radius: 5px;
margin-top: 1ex; /* leave space at the top for the title */
}
specify the color whatever you want at the place of red.
Look at the Qt Style Sheets Examples.