Sometimes when you check a website, you can find half-transparent div hanging above another div (or image). Like in a sport website, they lay a panel of sport score over an image.
Can I also achieve this using Foundation 4?
The example just looks like the JS component Orbit's bottom, where you can see a half-black div with words on top, while at the same time being able to see the picture.
http://foundation.zurb.com/docs/components/orbit.html
You can achieve this effect buy using relative and absolute positioning in css. Here is an example:
http://www.w3schools.com/css/tryit.asp?filename=trycss_zindex
to make div transparent check:
Transparent background on DIV
Related
Per How to Change Apache Superset Template from the Superset User Interface? , I was able to change the CSS template for Superset dashboard. But the charts inside the dashboard are not affected. e.g. most of the charts have white colored background(e.g. Piechart) and some people dislike it. How to change the chart background color? I mean change it for all charts or for one chart.
Disclaimer: This should work, but is a bit hacky and could have long-term support implications:
I've been fiddling with a "dark mode" dashboard just to kick the tires on this. Here's a screenshot just for fun:
So... what did I do?
Click "Edit Dashboard" in the top right of your screenshot
When in edit mode, the top right menu has an option to "Edit CSS"
Use your browser's inspector to hack away! That said, here are a couple of key ingredients:
.dashboard-component{ background: whatever} - sets the main background of each viz card, but you'll still see many components still have white backgrounds within these wrappers.
.slice_container svg{
background-color: transparent !important;
} - this overrides the white background of the components I ran into (including Pie charts!).
If viz components use SVG you can get pretty clever with inspecting/overriding various bits. A couple of gotchas with the above:
If a viz component contains multiple SVG elements, this may have side effects.
If a viz uses canvas instead of svg you will run into more trouble
In the worst case scenario, you may need to check out the superset-ui-plugins repo and make tweaks. This dev process isn't super straightforward, but some of us are working to improve that.
Easiest solution for me is using dark reader extension.
I am trying to customize the video player example that comes with the SDK. I am displaying the videoplayer on the left side of the screen and the playlist on the right side with the navigation through this playlist.
However I am able to display only few videos on the rightside. Hence I need to add scroll to the playlist so that I can display all the videos there.
I have reserched on it and found the rotextscreen that provides scroll but that opens a whole new screen which doesnot serve my purpose as I want to show the playlsit on tthe right side of the player more like you tube.
I cannot use Rogridscreen for the same reason as rotextscreen.
Is there any other component i can use to display the playlist and add the vertical scroll to the playlist or any other approach I can take??
I am a bit lost at the moment. Any suggestions would be really appreciated.
Have a look at roListScreen, a scrollable list will be on the left
I want to know if exist templates to add text on photoshop like in the following pictures:
http://sphotos-e.ak.fbcdn.net/hphotos-ak-ash4/485070_566956359990277_263279122_n.jpg
https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-ash4/3263_403189956409783_609225582_n.jpg
Could you suggest some pages where I can study and try those effects ?
Thanks.
Step1: Find the fonts. Search on font sites for similiar fonts or try to cut out the font and upload it to http://www.whatfontis.com/ or http://www.myfonts.com/WhatTheFont/
Step2: just play around with blending options and stuff.
from what I can see it's these settings you want too look at:
"Notche Latina": Gradient overlay, white stroke and black dropshadow.
"photo recoblablabla": inner shadow and might be in overlay-mode or something
"Festival de la bira": once again, white stroke
First make a layer adjust the objcet on layer as per your requirement.
Add some effects from filter gallery if you required (or layer style).
Click on the text toolbar type your text (required text).Then to apply effects
right click on text layer and click on rasterize type.now you can add effects from the filter gallery to the text.(or Layer style eg-inner shadows,bevel and emboss).
I would like to have some kind of navigation for a slider when viewed on a mobile device. Since the directional arrows won't show on mobile (if anyone can tell how to make them, that would be awesome) I thought a good solution would be to have a different slider, same images, that is "show-for-small" and has bullets underneath.
It works, but there is an issue that's killing me. If you load the page with the browser window wide (desktop) and scale to a mobile width the sliders switch, but the bullets aren't centered. They appear shifted to the right. If you reload the page at that mobile width with they are fine, perfectly centered below the image.
Does anyone have any clue on how to fix this? I set up a page to demonstrate the problem. www.jonesco.com/_foundation/bullet_problem.html
Thanks
Add the following to your stylesheet:
.orbit-bullets {
display: table;
text-align: center;
}
Is there a way to show more than 1 panel at a time with the coda slider? I want to keep its original scrolling logic the same. The only difference, to show more than one panel at a time. Such as 2 or 3 or 4 panels in view.
How would we go about doing that?
Thanks
Here is a sample that heads in the direction of a working example of what you'd like. I'll explain why it seems to be more trouble than it's worth (Assuming you want flexible content in both panels) and tell you how I did it.
Here is the jsFiddle.
So, the initial issue is that the current slide is taken into account for height. Well, what if the next slide contains more content and requires a higher slider height? I suppose you'd need to compare the height of both for each height calculation. That's not so difficult, but it may lead you to more trouble if you had to fight with Niall's code.
The second issue is that you have to set a static width for two elements, which is normal in most cases for this slider, but potentially a drag depending on what your content is.
Anyhow:
.coda-slider-wrapper.arrows .coda-slider, .coda-slider-wrapper.arrows .coda-slider .panel { width: 230px }
.coda-slider { float: left; overflow: hidden; position: relative; width: 460px !important }
You should be able to locate these selectors using find in your editor. The !important is a drag, but required if you don't want to rework much code. Basically, you want to set .coda-slider .panel to the width you want each panel, then double the width of .coda-slider.
Let me know if I've missed anything here or failed to explain something properly. I'd be happy to go over this more! I've worked with this slider a lot due to inheriting a project at work that made extremely heavy use of it. I've since moved on to something custom.