As you can see the header for my blog https://blog.cryformeqq.icu currently has drop shadow for the title, plus there's this weird gradient on top of the background color (which is supposed to be the same as the lighter grey under the navigation bar)
Anyone have any ideas? I tried a bunch of stuff I found online, none if it worked though.
Get rid of this style to get rid of the gradient: #header .header-bar { background-image: -moz-linear-gradient( center top, rgba(255, 255, 255, 0.1), rgba(100, 100, 100, 0.05) ); background-image: -webkit-gradient( linear, left top, left bottom, from(rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0.05)) );.
Delete #header .header-bar .title h1 { text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.3); } to get rid of the text shadow.
Or overwrite with header .header-bar .title h1 { text-shadow: none; } and #header .header-bar { background-image: none; }
Related
I am trying to recreate the image below that gives the button a "opaque" or blurred transparency look. I have tried googling for an opaque background but did not find much. How can I recreate this look?
The effect is called, I believe, glassmorphism. It is generally achieved using backdrop-filter. You can find a generator for this effect at https://css.glass/. Here's some example CSS it kicked out that seems like it approaching the style in your image:
.your-class-here {
/* From https://css.glass */
background: rgba(255, 255, 255, 0.19);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(13px);
-webkit-backdrop-filter: blur(13px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
Obviously there's some extra properties in there you might not need, but you can strip out what you do.
I am trying to create a theme for Gnome 3, but I am running into a bit of an issue with styling the title bar. I am using the following CSS in my attempt to style the bars, but it only applies to windows that utilize a GtkHeaderBar to override the title bar.
headerbar {
border: 1px solid #000000;
border-bottom: none;
border-radius: 4px 4px 0 0;
box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25), inset -1px 1px 0px 0px rgba(255, 255, 255, 0.25);
background-image: linear-gradient(to right, rgba(109, 179, 242, 0.5) 0%, rgba(84, 163, 238, 0.5) 50%, rgba(54, 144, 240, 0.5) 51%, rgba(30, 105, 222, 0.5) 100%);
padding: 0 5px;
}
headerbar:backdrop {
border: 1px solid #303030;
border-bottom: none;
background-image: linear-gradient(to right, #C1C1C1 0%, #B1B1B1 50%, #A2A2A2 51%, #8B8B8B 100%);
}
/* Window Body */
window {
border: 1px solid #000000;
border-top: none;
border-radius: 0 0 4px 4px;
box-shadow: inset 1px -1px 0px 0px rgba(255, 255, 255, 0.25), inset -1px -1px 0px 0px rgba(255, 255, 255, 0.25);
background-image: linear-gradient(to right, rgba(109, 179, 242, 0.5) 0%, rgba(84, 163, 238, 0.5) 50%, rgba(54, 144, 240, 0.5) 51%, rgba(30, 105, 222, 0.5) 100%);
padding: 5px;
}
window:backdrop {
border: 1px solid #303030;
border-top: none;
background-image: linear-gradient(to right, #C1C1C1 0%, #B1B1B1 50%, #A2A2A2 51%, #8B8B8B 100%);
}
window > box {
border: 1px solid black;
border-radius: 3px;
box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.25);
margin: 4px;
background-color: #ABABAB;
background-image: none;
}
It appears that the window manager is using the styling information from the last loaded theme instead of the CSS I am providing. I am switching themes by running gsettings set org.gnome.desktop.interface gtk-theme "<theme name".
This is what the title bar is supposed to look like (applied to a different window)
This is what a gtk3-demo window looks like when switching to my theme after Ambiance
This is what a gtk3-demo window looks like when switching to my theme after Adwaita
My conclusion from this is that there is a separate set of css nodes or classes that are separate from headerbar, although none of the suggestions I have found online such as using .header-bar have lead to any success. I attempted to inspect the css node hierarchy by launching the interactive debugger with GTK_DEBUG=interactive gtk3-demo, but the node hierarchy viewer ends at the window node, which does not include the title bar.
What is the proper way to style the title bar for themes in gnome-3? Is there a master list of css nodes somewhere that could be used for reference?
Edit: I just came across and tried the decoration tag, but it seems to have the same issue as headerbar, where it does not effect windows without a GtkHeaderBar element.
Edit 2: It would now seem that my issue is not necessarily with the CSS I have created. As a last ditch effort to try and induce any change in the title bars, I created a rule * { color: #00ff00; background-color: #ff0000; background-image: none} but it had no effect on the titles. I am now beginning to think the default title bar is styled somewhere other than the application css, possibly in another folder under the ~/.themes/xyz/ directory. Currently I have copied my entire CSS into both the gtk-3.0 and gtk-3.20 folders, but it doesn't seem to change anything. This is a tree of my theme. Are there required files missing from this?
.
├── gtk-3.0
│ └── gtk.css
├── gtk-3.20
│ └── gtk.css
└── index.theme
This issue was caused by forgetting to install the User Themes extension in gnome-tweak-tool. Because the title bar for some applications is provided by the application itself, the theme applied to them, but other programs relied on the shell to provide the title bar, and were therefore left without a style.
For the life of me I can't remove the background/box shadow on a select box in Chrome on OSx. I need it to be flat white like the other inputs. Take a look here:
http://index1.staging.homeflow.co.uk/pdrum/register.html
Some code in use that isn't doing the job:
background: #ffffff;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#ffffff));
background: -moz-linear-gradient(top, white, white);
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0px, rgba(255, 255, 255, 1) 0px);
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
Try:
select{
-webkit-appearance: none;
box-shadow: none !important;
}
:-webkit-autofill { color: #fff !important; }
You may also want to use:
select:focus { outline: none; }
Setting -webkit-appearance: inherit; on #pd-signin select removed it for me.
Then it seems you would need to add some arrow to indicate it is a drop-down.
Also in regards to SW4's comment:
I would not remove the outline on any focussed element as this is poor for accessibility.
Also refer to this article from Chris Coyier
Dropdown default styling - Chris Coyier
Firefox
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
From this answer
I've included Bootstrap CSS, and now want to add a custom class in my own CSS file.
It is simply an exact copy of .btn-success with modified colors and class name only:
.btn-mine {
color: #ffffff;
background-color: #ff8d53;
border-color: #ef8343;
}
.btn-mine:hover,
.btn-mine:focus,
.btn-mine:active,
.btn-mine.active,
.open .dropdown-toggle.btn-mine {
color: #ffffff;
background-color: #ea793e;
border-color: #dc5930;
}
.btn-mine:active,
.btn-mine.active,
.open .dropdown-toggle.btn-mine {
background-image: none;
}
.btn-mine.disabled,
.btn-mine[disabled],
fieldset[disabled] .btn-mine,
.btn-mine.disabled:hover,
.btn-mine[disabled]:hover,
fieldset[disabled] .btn-mine:hover,
.btn-mine.disabled:focus,
.btn-mine[disabled]:focus,
fieldset[disabled] .btn-mine:focus,
.btn-mine.disabled:active,
.btn-mine[disabled]:active,
fieldset[disabled] .btn-mine:active,
.btn-mine.disabled.active,
.btn-mine[disabled].active,
fieldset[disabled] .btn-mine.active {
background-color: #ff8d53;
border-color: #ff6314;
}
.btn-mine .caret {
border-top-color: #fff;
}
.dropup .btn-mine .caret {
border-bottom-color: #fff;
}
Unfortunately, this does not work, as shown here: http://jsfiddle.net/qG2n6/.
I know there are many 3rd-party Bootstrap button makers which can create buttons of any colors.
But I am more interested in knowing why my approach above does not work.
I copy all the styles that contains .btn-success in the original Bootstrap CSS, and only modify the colors and the class name, and I expected it to work.
What am I missing here?
.btn-success contains
.btn-success {
background-color: #5BB75B;
background-image: linear-gradient(to bottom, #62C462, #51A351);
background-repeat: repeat-x;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
color: #FFFFFF;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
While your class contains just some border and background color
You will need to override the background-image as well. That is where the slight gradient of the buttons in Bootstrap 2.3.2 comes from. See here:
.btn-mine {
color: #ffffff;
background-image: none;
background-color: #ff8d53;
border-color: #ef8343;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
http://jsfiddle.net/qG2n6/1/
If you add background-image: none;, add the IE filter and alter the text shadow you will get your button. However, if you want a gradient to match the style of your version of Bootstrap you will need you own CSS gradient. You can use this tool to make one of your own:
http://www.colorzilla.com/gradient-editor/
Which might look something like this:
.btn-mine {
color: #ffffff;
border-color: #dc5930;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background: #ff8d53;
background: -moz-linear-gradient(top, #ff8d53 0%, #ff732d 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff8d53), color-stop(100%,#ff732d));
background: -webkit-linear-gradient(top, #ff8d53 0%,#ff732d 100%);
background: -o-linear-gradient(top, #ff8d53 0%,#ff732d 100%);
background: -ms-linear-gradient(top, #ff8d53 0%,#ff732d 100%);
background: linear-gradient(to bottom, #ff8d53 0%,#ff732d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8d53', endColorstr='#ff732d',GradientType=0 );
background-repeat: repeat-x;
}
http://jsfiddle.net/qG2n6/3/
Could any one let me know the css to create a custom scroll bar which looks like the one in the image? The background should be transparent, I have placed it on a green background for now.
You can do this using the jQuery plugin jScrollPane - http://jscrollpane.kelvinluck.com/
$(function() {
$('.scroll-pane').jScrollPane();
});
The above code with set a div with class "scroll-pane" to scroll.
You can't do with with standard CSS but with CSS3 you can:
pre::-webkit-scrollbar {
height: 1.5ex;
-webkit-border-radius: 1ex;
}
pre::-webkit-scrollbar-thumb {
border-top: 1px solid #fff;
background: #ccc -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(240, 240, 240)), to(rgb(210, 210, 210)));
-webkit-border-radius: 1ex;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
NOTE: This will only work on webkit browsers.