I have a Tumblr blog, and I'm using the Effector theme. I like it, but unfortunately it colors the backgrounds of all partially transparent images black. Is there any way I can edit the theme's HTML so that it makes transparent backgrounds white? I looked through the code already, but I think I need someone more familiar with HTML to give me advice.
Thanks!
Looking up the tree from the element, you only need to make one change for it to be white, and that’s in the .photo-panel rule:
background: none repeat scroll 0% 0% rgb(0, 0, 0);
Change rgb(0, 0, 0) to transparent, or just remove that rule entirely.
(For full transparency, also remove the background rule on .post .post-panel, and probably its box-shadow too.)
Related
Sorry about possible unclear title and my weak skills of the English language. I use Stylus extension at Firefox. I want to redesign one webpage from website Jyväskylä yliopisto Moodle but I need some help.
Background image comes from external CSS stylesheet and I want to override background at one single page. I want to use white colour as background instead of background image. How can I change background? Technically this should be easy but this CSS stylesheet is very unclear and too complicated for me.
CSS stylesheet can be found here.
Universal background is /theme/image.php/maisteriboost/theme/1566995618/dashboard_bg
It might be something like this:
SOMETHING {
background-color: white !important);
}
But what is that SOMETHING? I tried this:
#dash-page-bg {
background-color: white !important;
}
And also this:
.popover-region-toggle::before#dash-page-bg {
background-color: white !important;
}
But neither of these worked.
I would try adding an inline style for the background. style="background: white"
My guess is maybe the universal background is loading after your styles and it could be causing it to override.
I downloaded a Bootstrap Theme and there they use Sass darken, to make the button more obscure on hover. I managed to use the instagram gradient as it's background, though since the darken function requires a base color I was wondering, how could I achieve the same effect?
(I guess I could just us opacity on hover instead for all of the social buttons but I was hoping to address this just for the sake of science)
background: linear-gradient(to right bottom, darken(#667DB6, 5), darken(#0082C8, 5))
I'm very very bad with CSS (I do not understand syntax at all), I'm just using my knowledge to tinker with code.
I'm using Chrome with Stylish addon, and I want to make dark wikipedia but with my preferences.
I took some code from stylish and just changed colors, but now it's something new where I have
to add stuff so I'm stuck.
It's obviously made in chrome, so it's temporary. This is my problem:
http://imgur.com/a/9IYI3
And my question is how to make that box opaque with like #555 color, without destroying everything else.
Here is code that I'm using: pastebin.com
EDIT: note that opacity will change the opacity of everything in the element it is applied to. Depending on the situation, rgba is the best route.
This can be accomplished a couple of ways:
#mybox
{
background-color:#555;
opacity:0.5;
}
Or
#mybox
{
background-color:rgba(85, 85, 85, 0.5);
}
The opacity property is to change the transparency of an element (0.0 is 0%, while 1.0 is 100%).
The same can be done with rgba (red, green, blue, alpha). Alpha being similar to opacity (same affect really).
As Dwza said in the comments, it would be good for you to take some CSS tutorials. A quick Google search will bring up many. This one looks good: http://webdesign.tutsplus.com/tutorials/the-best-way-to-learn-css--webdesign-11906
I have it in my mind to create:
A patterned fixed background
A white background layer overtop of the patterned background
"transparent" text that is also transparent through the white background so the patterned background as the text.
For those wiser than me out there... is this even possible? If so how?
The text transparency is easy enough rgba(0,0,0,0.1) but I can't get it beyond the white layer to the pattern.
The code so far:
#inner-header {
background: url('../images/white.png'), url('../images/angusplaid.png');
position: fixed;
z-index: 1;
}
#logo a {
color: rgba(0,0,0,0.1)
}
Is there a way to make the white background transparent only where the text is? I have my doubts but would love to have it solved either way.
Cheers.
You have various options:
The first is with CSS background-clip.
Browser support: See http://caniuse.com/#search=background-clip (All & IE 8+, -webkit- prefix for Android 2.x)
How-to (with fallbacks & catches): http://css-tricks.com/image-under-text/
The second is with SVG (SVG.js)
Browser support: See https://svgdotjs.github.io/compatibility/
How to: See https://svgdotjs.github.io. Copy the example on the homepage. The <name> you enter in var drawing = SVG('<name>') must be the ID of the div you want to ouput to.
I'm sure some text to bitmap options must exist too.
Can somebody assist with why the buttons on the page below don't render the background color correctly? The background-color property appears to be set correctly but I'm wondering if there's a conflict with another CSS file my template is using. Any advice?
http://www.chrisboulasphotography.com/store/ferrari-owners-manuals
This gradient (defined in /wp-content/w3tc/min/1088176c.f6146a.css on line 379) is clobbering the background property...
background-image: -moz-linear-gradient(center bottom , #F0F0F0 2%, #FAFAFA 51%);
Alex answered this perfectly right. Using Firefox with Firebug I have been able to disactivate the css line he suggested and it seems that the background color of your buttons appears again.
Have you emptied you cache to check if it's not your browser who has kept the old css in memory?