I have been asked to theme my APEX 19.2 app and the designer has come back with a fairly simple ask. The top left hamburger be white and purple like below:
I am using the theme roller to apply the settings and can't seem to get the active and inactive state to stay white and purple.
I have even tried my own CSS in the theme roller like below but only with limited success.
Any ideas how I can achieve this?
CSS I am currently trying
t-Button--icon {
color: #393093!important;
background: #ffffff!important;
border-color: #393093!important;
}
t-Button--header {
color: #393093!important;
background: #ffffff!important;
border-color: #393093!important;
}
t-Button--headerTree {
color: #393093!important;
background: #ffffff!important;
border-color: #393093!important;
}
t-Header-controls {
color: #393093!important;
background: #ffffff!important;
border-color: #393093!important;
}
is-active {
color: #393093!important;
background: #ffffff!important;
border-color: #393093!important;
}
NavigationBar {
color: #393093!important;
background: #ffffff!important;
border-color: #393093!important;
}
Even with all of this my button active and hover still looks like this:
I feel like I am close but after several hours of fiddling, I thought it was about time I consult the collective experts. Any help and advice would be greatly appreciated. If you can't already tell I am still learning CSS.
You ought to use the CSS :hover selector which is used to select elements when one mouses over them.
Assuming the hamburguer menu has a class named burguer
.burguer:hover {
color: #393093;
background: #ffffff;
border-color: #393093;
}
Then change the hover and active effects :)
.burguer:hover {}
.burguer:active {}
It might be worth checking if Apex does not use a selector that has "higher ponctuation" than something so simple. In such case, you might want to create a composite selector
button.t-Button--header .burguer:hover{}
Good Luck
Related
I want to modify the color and the border in a Bootstrap nav bar but when I write this on my SCSS nothing happens:
.nav-link.active {
color: #495057;
background-color: chartreuse;
border-color: black;
}
When I inspect the element in Chrome my code is dismissed, It only takes into account the Bootstrap default style.
Image
Any help will be welcomed.
Thanks.
For a CSS rule to be overriden, you have a lot of options. The cleanest would be to be more specific (by at least one rule) than the one you want to override.
If I follow your example:
.nav-tabs li.nav-link.active {
color: #495057;
background-color: chartreuse;
border-color: black;
}
You'll find more informations here : https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
This is a minor-but-annoying issue (typical web design) with color styling on my submit button. I'm using the page builder Elementor with OceanWP theme in WordPress. Site URL is http://catalystweb.design (under construction, of course)
The issue is that the colors seems to be "muted" on :active and :focus states. They are being applied, but not with full vibrancy.
I am linking to a brief screencast (12 seconds) of the issue, and including the custom CSS I've inserted into that page specifically. FYI the !important flags seem to be required to override some of the theme/builder styles, which makes it even more baffling as to why they are not fully applied in this case.
You'll see that the hover state of the button delivers the colors I've set; but on :focus (using tab) they are muted, and the same on :active (when clicking).
button[type=submit]:focus {
border: 2px solid #63C1FF !important;
background: #ffffff !important;
color: #63C1FF !important;
}
button[type=submit]:active {
border: 2px solid #ffffff !important;
background: #63C1FF !important;
color: #ffffff !important;
}
Thanks, any insights appreciated!
Your stylesheet here: http://catalystweb.design/wp-content/plugins/elementor/assets/css/frontend.min.css?ver=1.8.8
has an opacity setting on hover:
.elementor-button:focus,
.elementor-button:hover,
.elementor-button:visited {
color: #fff;
opacity: .9;
}
How you want to approach fixing that is up to you, while I don't recommend using !important; if you can avoid it:
.elementor-button:focus,
.elementor-button:hover,
.elementor-button:visited {
opacity: 1 !important;
}
would work, or a slightly better approach such
button.elementor-button:focus,
button.elementor-button:hover,
button.elementor-button:visited {
opacity: 1;
}
would work. You can put this in your main stylesheet or in the Additional CSS are of the customizer, or wherever you've been adding custom CSS.
I'm using AdminLTE 2.3.8. It overrides buttons background on it's box header buttons when hovered, but I want to keep original colors when hovered over any buttons. Eg.:
AdminLTE CSS:
.btn-default {
background-color: #f4f4f4;
}
.box.box-solid>.box-header .btn.btn-default {
background: transparent;
}
.btn-default:hover,
.btn-default:active,
.btn-default.hover {
background-color: #e7e7e7;
}
.box.box-solid>.box-header .btn:hover,
.box.box-solid>.box-header a:hover {
background: rgba(0,0,0,0.1);
}
I just want to get rid of these .box.box-solid>... rules without editing vendor's CSS. Is there any way to achieve this without copying every button style (there are different colors)? If there is, solution would be very welcome.
Use !important within your styles, so that any other vendor styles doesn't conflict with these buttons.
Example:
.btn.btn-default:hover {
background-color: blue !important;
}
Hope this helps!
I'm on my early stages of creating a Rails application. What I wanted to do is remove the black background on the links when hovering the cursor on them (as shown in the image). How? I did not add anything on the css files. I'm using Rails 3.2
Seems to be that the culprit to this is at assets/stylesheets/scaffolds.css.scss
a:hover {
color: #fff;
background-color: #000;
}
Only one i can say:
a:hover {
background-color:transparent;
}
I want to make a very basic GUI: tabs, text area.
But I want to color my tabs and make them always looking the same on MAC, Windows and Linux.
So, I tryed to use a stylesheet:
QTabWidget::pane
{
border-top: 2px solid #1B1B1B;
background-color: #262626;
}
QTabWidget::tab-bar
{
left: 5px;
alignment: left;
background: #3E3E3E;
}
QTabBar::tab
{
background: transparent;
color: #757575;
padding: 15px 5px 15px 5px;
}
QTabBar::tab:hover
{
text-decoration: underline;
}
QTabBar::tab:selected
{
color: #DEF600;
background: qlineargradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #262626, stop: 1.0 #3D3D3D );
}
But even if the tabs looks well, there is a problem: The tab pane is still transparent...
I can force a background color by adding:
QWidget
{
background-color: #262626;
}
But as you know, this change the background color of ALL the widgets, even my QPlainTextEdit that I still want to have a white background. And more annoying, this reset the OS skin and display ugly scrollbars (I really want to keep them as they were).
Is there a way to change the tabs pane background without having to reskin all the components ?
I had the same problem. I could get it to work with this:
QTabWidget::pane > QWidget {
background-color: #262626;
}
Try this.
QTabWidget::pane {
background: red;
}
You can read this for details. And one more thing to comment. You can use QObject::objectName() as style sheet's id selector. for example,
QTabWidget#myTab { ... }
hope this helps.
It is possible simply by:
* {background: green;}
This style set background for this widget and all their childs so you need to know one important thing. The area you think is QTabWidget in fact is QWidget which is set inside of QTabWidget. You can easly check where QTabWidget is and where is their child by adding to your style
QTabWidget::pane {background: green; padding: 10px;}
green area is a QTabWidget, all inside is overlapped by QTabWidgets child (any QWidget added by addTab() function).
add style
"background-color:rgb(255,255,255)"
to each tab.
Refer this:
http://doc.qt.digia.com/qt/stylesheet-syntax.html
Read ID Selector under Selector Types. You can instruct a certain style to be applied only for a given object name. So you can use whatever the name you have given to your tabWidget.
Try enabling document mode with
myTab->setDocumentMode(true);
This has worked for me when everything else has failed. You can do it in code, or by twiddling the property in qtcreator.
You still might have to apply some styles to the pane like so:
QTabWidget:pane{
background: red;
}
Read more about this in the documentation.