Can someone point to in the right direction about what I need to do to customize Zurb Foundation-4 "ORBIT" image slider?
There are things that I want to change. For example:
- I want the arrow graphics to be custom designed.
- I want the bullets graphics to be customized.
- I want the bullets background area to customize.
- I want the Image Description area NOT to have a dark background and also use custom Google Web Fonts for it
etc.
I somehow cant find any documentation on these aspects.
Any help is appreciated.
I want the arrow graphics to be custom designed
There are no images used in the Orbit component. The arrow icons, the previous and next icons, are created in CSS and it's best that you follow the same pattern (of not using images). You can, however, customize it any way you want. Here are the classes you need to look into (and override):
The following are the classes that applies to the background of the "arrow" icons.
.orbit-container .orbit-prev, .orbit-container .orbit-next
Here are the ones for the arrow icons:
.orbit-container .orbit-prev > span
.orbit-container .orbit-next > span
I want the bullets graphics to be customized. - I want the bullets
background area to customize
Again no images are used for the bullets and they are created in css. Here's the class you need to look into and modify:
.orbit-bullets li - for all bullets in the Orbit
.orbit-bullets li.active - for the active bullet in the Orbit
I want the Image Description area NOT to have a dark background
This is the class and property that you need to modify
.orbit-container .orbit-slides-container > * .orbit-caption
Having a good knowledge of CSS you can easily override those classes and apply your own.
Check out the answer to this question here:
orbit slideshow custom next prev buttons links left right arrows
It worked for me!
Related
For Wordpress, how can I make it like https://store.google.com/us/category/connected_home
Hotspot info, Top-tab for changing the spot. Can be made with slide revolution?
Inspect the page. They've positioned the elements with percentage based left and top values.
If I was to build something like this, I'd use javascript to hide and show the various labels when I click the menu tabs. And I'd add CSS animations so they transition in like in your example.
By default, vue-js-modal scales from the central point, which is pretty strange. Is it possible to scale it like all other windows (according to one of the edges)?
EDIT
On the official page (http://vue-js-modal.yev.io/), when you 'click' resizable, you can see what I mean. In the docs there is a line, which describes 'resizable' attribute: "If true allows resizing the modal window, keeping it in the center of the screen". I didn't find other info and don't want to change the source code. I don't want it to be keeping in the center, because I think that this is not correct.
You need to use CSS styles to configure it manually before Overlay
.v--modal-overlay{
//add style like u r requirement
}
In style, you can also add these line to make it left align after it overlays
v--modal-box v--modal.{
left:0px !important
}
My app features a progress bar which background and thumb Image need to be changed. I found that the thumb image could be changed via a constant in the designer but which I could not find in the #Constants paragraph of the page on CSS selectors.
I tried to change the slider UIID to the one I created in the css file like this
MyStyle {
background-image: url(pics/whatever.png);
cn1-background-type: cn1-image-scaled-fit;
cn1-source-dpi: 320;
}
but only the image appears I can't see the progress indicator (eg mySlider.setProgress(50)).
Can it be done and if so how ?
Please note : I read mission 2 of CN1 bootcamp about CSS styling but could not find slider styling.
EDIT September 18th 2017
Following Shai's advice, I set the MyTheme and MyThemeFull with different background images. Indeed MyTheme is always drawn completely in the background and MyThemeFull is drawn bit after bit while the progress is increasing. So when the progress reaches 100% MyThemeFull background image is shown completely.
The cursor (thumb) image can be set via Slider.setThumbImage().
Any help or links to resource material appreciated ;-)
Slider has two UIID's: Slider & SliderFull. Which are drawn one on top of the other to produce the slider effect.
If you change the UIID they become MyStyle & MyStyleFull and you need to customize both.
I'm new to web programming, recently I've been asked to make some home pages for someone.
Unfortunately I've run into some problem, the homepage will be on a touch screen for touch input, I've got reports like buttons most of the time doesn't work when clicked on, one of my suspects is invisible borders caused by PNGs.
TL;DR - http://puu.sh/6HQez.jpg The corner of the red button is being blocked by the invisible border of the purple button, are there any ways to fix that?
EDIT: No I'm not asking for how to remove the dotted line, I made them visible to show you.
It seems like what you are referring to is not an 'invisible border' but an 'invisible background'.
Your PNG files are rectangular shaped when it comes to event handling, even if some parts are transparent.
If you need to disable some elements from being clicked, you can go about it few ways:
Disable pointer-events with CSS to make sure that a specific
element does not caputre clicks.
#mypurplediv {pointer-events: none;}
Use Z-index to decide the hierarchy of your elements:
#mypurplediv {z-index: 0;}
#myrediv {z-index: 1;}
EDIT:
Per your comments, it seems that you need to retain the abiity to click on ALL elements.
As I mentioned above , your current PNGs are actually rectangles with some parts being transparents.
So you have these options:
1) Use SVG which are vector based shapes (that will by default not have invisible backgrounds). Good tutorial here.
2) Use image mapping and area to create your shapes and give them href. This is a good tutorial about image mapping.
example - <area shape="poly" coords="74,0,113,29,98,72,52,72,38,27" href="index.htm">
3) Use 3rd party javascript/jQuery libraries such as ImageMapster.
Hope this helps!
That dotted border is called focus outline. You can turn it off by applying CSS to the image.
img { outline: none; }
I'm developping a Wordpress website for a painter, and I'd like to use paintings as backgrounds for menu elements, just like on this picture :
http://img829.imageshack.us/img829/7364/capturedcran20120509094.png
The active page has colors, the inactive ones are in black and white, and become colored on mouse over.
I'm using a premium WP theme to have a similar menu, but I don't know how to achieve this menu. (this is a dropdown menu, if there is a submenu, everything below it drops down as it appears, but there is no spacial background on the submenu).
Do you know how to achieve that, please ?
There is no any type of option in WP menu but you can do it by assign class for each menu from WP menu section and providing custom CSS
Like
And CSS with bg image
.dashboard a {
background: url(../../images/navicons/81.png) no-repeat;
}
Just use the ID of the items and apply a background with CSS. Then add a Greyscale script: http://www.pryde-design.co.uk/2011/08/greyscale-jquery-plugin/ You can also apply a CSS fall-back if necessary (not with grey scale, but with opacity).