CSS Question for Integrating Ubillboard plugin with Karma Theme WordPress
- SOLVED
Hi there,
I'm trying this out for the first time to see how this goes. I've integrated the ubillboard plugin into the karma theme and made it a type of full width slider. With this came several small problems.
- I want it to be centered on smaller browsers, which i know is just a little css tweak.
I inserted it using php.
<div class="homeslider-outer">
<div class="homeslider-inner">
<?php the_uds_billboard(); ?>
</div>
</div>
and then i put in the following css:
#main {background:url(images/_global/bg-div-main.jpg) 0 0 repeat-x;display:table-footer-group;position:relative;width:100%;}
#main .main-area {width:980px;margin:0 auto;padding:43px 0 5px 0;}
.tools .place {float:right;}
.main-holder {height:1%;overflow:hidden;padding-top:45px;}
.carousel-holder {width:315px !important;}
<strong>.homeslider-outer {width: 100%; height: 490px; background: #000000;}
.homeslider-inner {width: 1400px; margin-left:auto; margin-right:auto; margin-top: 0px; margin-bottom: 0px;}
.homeslider-bottom { width: 960px; height: 38px; background: url(images/karma-autumn/bg-home-slider.png); margin-left: auto; margin-right: auto; margin-top: 0px; margin-bottom: 0px;} </strong>
- Aside from that, <strong>I have no idea how to move the little paginator bullets down below the slider</strong>, centered directly under the shadow (homeslider-bottom). I can't figure out if the position is css only, or if I have to edit something else beyond that. This is the real question, and I don't even know what is currently determining their position. The only css i could from the billboard plugin is this:
.uds-bb-paginator.oldskool .uds-bb-bullet {
background: url(../images/skin-oldskool/bullet.png) no-repeat;
}
.uds-bb-paginator .uds-bb-button,
.uds-bb-paginator .uds-bb-position-indicator-bullets {
position: relative;
z-index: 5;
}
/* Paginator */
.uds-bb-paginator {
position: absolute;
}
.uds-bb-paginator .uds-bb-button {
float: left;
text-indent: -5000px;
cursor: pointer;
}
Not sure if any of those are really what is affecting their position.. I don't know if it's related to the javascript files or the php file..
<strong>Here is the link to the site in development: http://66.147.244.75/~cantorsi/cantorsimoncohen</strong>
That's it! Hope someone can provide quick help.
Answers (2)
Christianto answers:
Hello,
Did you want to move the little pagination bullet to the bottom center of the slider?
Please open
billboard.min.css on directory wp-content/plugins/uBillboard/css/billboard.min.css
Replace the content with:
.uds-bb{position:relative;}.uds-bb-slides{position:absolute;top:0;}.uds-bb-preloader-wrapper{position:absolute;width:100%;height:100%;z-index:10;left:0;top:0;}.uds-bb-preloader{position:absolute;width:160px;height:20px;overflow:hidden;}.uds-bb-preloader-indicator{background:url(../images/load.gif) no-repeat 0 0;position:absolute;width:160px;height:20px;left:-160px;}.uds-stage{position:absolute;z-index:1;top:0;left:0;}.uds-next{position:absolute;z-index:2;top:0;left:0;}.uds-square{position:absolute;overflow:hidden;}.uds-square-inside{position:absolute;}.uds-bb-description{position:absolute;}.uds-bb-description-inside{margin:10px 20px 20px;overflow:hidden;}.uds-bright .uds-bb-description,.uds-bb .uds-bb-description.uds-bright{background:url(../images/bg-bright.png);color:#222;}.uds-dark .uds-bb-description,.uds-bb .uds-bb-description.uds-dark{background:url(../images/skin-oldskool/bg.png);color:#fafafa;text-shadow:1px 1px 1px #222;}.uds-bb .uds-bb-description.uds-bright{text-shadow:1px 1px 1px #fff;}.uds-bright .uds-bb-description.uds-transparent,.uds-dark .uds-bb-description.uds-transparent{background:none;color:inherit;text-shadow:none;}.uds-bb-controls{display:none;}.uds-bb-countdown{float:right;left:-85px;top:-10px;position:relative;}.uds-bb-countdown canvas{width:100px;height:100px;position:absolute;z-index:3;}.uds-bb-paginator .uds-bb-button,.uds-bb-paginator .uds-bb-position-indicator-bullets{position:relative;z-index:5;}.uds-bb-paginator{position:absolute;}.uds-bb-paginator .uds-bb-button{float:left;text-indent:-5000px;cursor:pointer;}.uds-bb-paginator.mini{background:white;right:20px;bottom:20px;padding:5px;z-index:5;}.uds-bb-paginator.outside.mini{bottom:-25px;right:0;}.uds-bb-paginator.mini .uds-bb-playpause{width:14px;height:14px;background:url(../images/minimal-controls.png) no-repeat;margin-right:1px;}.uds-bb-paginator.mini .uds-bb-playpause:hover{background:url(../images/minimal-controls-hover.png) no-repeat;}.uds-bb-paginator.mini .uds-bb-next{width:14px;height:14px;background:url(../images/minimal-controls.png) no-repeat -30px 0;margin-right:3px;}.uds-bb-paginator.mini .uds-bb-next:hover{background:url(../images/minimal-controls-hover.png) no-repeat -30px 0;}.uds-bb-paginator.mini .uds-bb-prev{width:14px;height:14px;background:url(../images/minimal-controls.png) no-repeat -15px 0;margin-right:1px;}.uds-bb-paginator.mini .uds-bb-prev:hover{background:url(../images/minimal-controls-hover.png) no-repeat -15px 0;}.uds-bb-paginator.mini .uds-bb-position-indicator{font-size:12px;float:left;height:14px;line-height:16px;color:#222;margin-top:-1px;}.uds-bb-paginator.ubbv2 .uds-bb-button{width:50px;height:50px;cursor:pointer;background:url(../images/skin-ubbv2/buttons.png);}.uds-bb-paginator.ubbv2 .uds-bb-button.uds-bb-next{position:absolute;right:10px;background-position:0 0;}.uds-bb-paginator.outside.ubbv2 .uds-bb-button.uds-bb-next{right:-75px;}.uds-bb-paginator.outside.ubbv2 .uds-bb-button.uds-bb-prev{left:-75px;}.uds-bb-paginator.ubbv2 .uds-bb-button.uds-bb-prev{position:absolute;left:10px;background-position:0 50px;}.uds-bb-paginator.ubbv2 .uds-bb-button.uds-bb-playpause.play{background-position:0 100px;}.uds-bb-paginator.ubbv2 .uds-bb-playpause.pause{background-position:0 150px;}.uds-bb-paginator.ubbv2 .uds-bb-bullet{background:url(../images/skin-ubbv2/bullet.png) no-repeat;}.uds-bb-paginator.ubbv2 .uds-bb-bullet.active{background-position:0 -10px;}.uds-bb-paginator.oldskool,.uds-bb-paginator.oldskool-bright,.uds-bb-paginator.silver,.uds-bb-paginator.ubbv2{width:100%;height:100%;}.uds-bb-paginator.oldskool .uds-bb-button,.uds-bb-paginator.oldskool-bright .uds-bb-button{background:url(../images/skin-oldskool/bg.png);width:30px;height:30px;padding:8px 10px;border-radius:3px;cursor:pointer;}.uds-bb-paginator.oldskool-bright .uds-bb-button{background:url(../images/bg-bright.png);-webkit-box-shadow:1px 1px 1px #666;-moz-box-shadow:1px 1px 1px #666;box-shadow:1px 1Px 1Px #666;}.uds-bb-paginator.oldskool .uds-bb-button span,.uds-bb-paginator.oldskool-bright .uds-bb-button span{background:no-repeat center center;display:block;width:30px;height:23px;margin-top:4px;}.uds-bb-paginator.oldskool .uds-bb-button span{background-image:url(../images/skin-oldskool/buttons.png);}.uds-bb-paginator.oldskool-bright .uds-bb-button span{background-image:url(../images/skin-oldskool-bright/buttons.png);}.uds-bb-paginator.oldskool .uds-bb-playpause,.uds-bb-paginator.oldskool-bright .uds-bb-playpause,.uds-bb-paginator.ubbv2 .uds-bb-playpause{position:absolute;}.uds-bb-paginator.oldskool .uds-bb-playpause.play span,.uds-bb-paginator.oldskool-bright .uds-bb-playpause.play span{background-position:0 0;}.uds-bb-paginator.oldskool .uds-bb-playpause.pause span,.uds-bb-paginator.oldskool-bright .uds-bb-playpause.pause span{background-position:0 -23px;}.uds-bb-paginator.oldskool .uds-bb-next,.uds-bb-paginator.oldskool-bright .uds-bb-next{position:absolute;right:10px;}.uds-bb-paginator.outside.oldskool .uds-bb-next,.uds-bb-paginator.outside.oldskool-bright .uds-bb-next{right:-60px;}.uds-bb-paginator.oldskool .uds-bb-next span,.uds-bb-paginator.oldskool-bright .uds-bb-next span{background-position:0 -69px;}.uds-bb-paginator.oldskool .uds-bb-prev,.uds-bb-paginator.oldskool-bright .uds-bb-prev{position:absolute;left:10px;}.uds-bb-paginator.oldskool.outside .uds-bb-prev,.uds-bb-paginator.oldskool-bright.outside .uds-bb-prev{left:-60px;}.uds-bb-paginator.oldskool .uds-bb-prev span,.uds-bb-paginator.oldskool-bright .uds-bb-prev span{background-position:0 -46px;}.uds-bb-paginator.oldskool .uds-bb-position-indicator-bullets,.uds-bb-paginator.ubbv2 .uds-bb-position-indicator-bullets,.uds-bb-paginator.oldskool-bright .uds-bb-position-indicator-bullets{background:url(../images/skin-oldskool/bg.png);position:absolute;bottom:-30px;right:50%;padding:3px 5px;border-radius:3px;}.uds-bb-paginator.outside.oldskool .uds-bb-position-indicator-bullets,.uds-bb-paginator.outside.ubbv2 .uds-bb-position-indicator-bullets,.uds-bb-paginator.outside.oldskool-bright .uds-bb-position-indicator-bullets{bottom:-30px;}.uds-bb-paginator.oldskool-bright .uds-bb-position-indicator-bullets{background:url(../images/bg-bright.png);-webkit-box-shadow:1px 1px 1px #666;-moz-box-shadow:1px 1px 1px #666;box-shadow:1px 1Px 1Px #666;}.uds-bb-paginator.oldskool .uds-bb-bullet,.uds-bb-paginator.oldskool-bright .uds-bb-bullet,.uds-bb-paginator.uTube .uds-bb-bullet,.uds-bb-paginator.modern .uds-bb-bullet,.uds-bb-paginator.ubbv2 .uds-bb-bullet{width:10px;height:10px;float:left;margin:2px;cursor:pointer;}.uds-bb-paginator.oldskool-bright .uds-bb-bullet{background:url(../images/skin-oldskool-bright/bullet.png) no-repeat;}.uds-bb-paginator.oldskool-bright .uds-bb-bullet.active{background-position:0 -10px;}.uds-bb-paginator.oldskool .uds-bb-bullet{background:url(../images/skin-oldskool/bullet.png) no-repeat;}.uds-bb-paginator.oldskool .uds-bb-bullet.active{background-position:0 -10px;}.uds-bb-paginator.silver.inside .uds-bb-prev{width:40px;height:40px;position:absolute;left:0;background:url(../images/skin-silver/paginator-inside.png) repeat-x;box-shadow:0 0 2px #666;-webkit-border-bottom-right-radius:10px;-webkit-border-top-right-radius:10px;-moz-border-top-right-radius:10px;-moz-border-bottom-right-radius:10px;}.uds-bb-paginator.silver.inside .uds-bb-prev span{background:url(../images/skin-silver/prev.png);width:40px;height:40px;position:absolute;left:0;}.uds-bb-paginator.silver.inside .uds-bb-prev span:hover,.uds-bb-paginator.silver.outside .uds-bb-prev span:hover{background:url(../images/skin-silver/prev.png) 0 40px;}.uds-bb-paginator.silver.outside .uds-bb-prev{width:40px;height:40px;position:absolute;left:-40px;background:url(../images/skin-silver/paginator-inside.png) repeat-x;box-shadow:0 0 2px #666;-webkit-border-bottom-left-radius:10px;-webkit-border-top-left-radius:10px;-moz-border-top-left-radius:10px;-moz-border-bottom-left-radius:10px;border-bottom-left-radius:10px;border-top-left-riadus:10px;}.uds-bb-paginator.silver.outside .uds-bb-prev span{background:url(../images/skin-silver/prev.png);width:40px;height:40px;position:absolute;left:0;}.uds-bb-paginator.silver.inside .uds-bb-next{width:40px;height:40px;position:absolute;right:0;background:url(../images/skin-silver/paginator-inside.png) repeat-x;box-shadow:0 0 2px #666;-webkit-border-bottom-left-radius:10px;-webkit-border-top-left-radius:10px;-moz-border-top-left-radius:10px;-moz-border-bottom-left-radius:10px;border-bottom-left-radius:10px;border-top-left-radius:10px;}.uds-bb-paginator.silver.outside .uds-bb-next{width:40px;height:40px;position:absolute;right:-40px;background:url(../images/skin-silver/paginator-inside.png) repeat-x;box-shadow:0 0 2px #666;-webkit-border-bottom-right-radius:10px;-webkit-border-top-right-radius:10px;-moz-border-top-right-radius:10px;-moz-border-bottom-right-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:10px;}.uds-bb-paginator.silver.inside .uds-bb-next span{background:url(../images/skin-silver/next.png);width:40px;height:40px;position:absolute;right:0;}.uds-bb-paginator.silver.outside .uds-bb-next span{background:url(../images/skin-silver/next.png);width:40px;height:40px;position:absolute;right:0;}.uds-bb-paginator.silver.inside .uds-bb-next span:hover,.uds-bb-paginator.silver.outside .uds-bb-next span:hover{background:url(../images/skin-silver/next.png) 0 40px;}.uds-bb-paginator.silver.inside .uds-bb-position-indicator-bullets-container{height:22px;float:left;background:url(../images/skin-silver/paginator-inside.png) repeat-x;padding:9px 10px;position:absolute;bottom:0;-webkit-border-top-right-radius:10px;-webkit-border-top-left-radius:10px;-moz-border-top-right-radius:10px;-moz-border-top-left-radius:10px;border-top-left-radius:10px;border-top-right-radius:10px;box-shadow:0 0 2px #666;z-index:5;}.uds-bb-paginator.silver.outside .uds-bb-position-indicator-bullets-container{height:22px;float:left;background:url(../images/skin-silver/paginator-inside.png) repeat-x;padding:9px 10px;position:absolute;bottom:-40px;-webkit-border-bottom-right-radius:10px;-webkit-border-bottom-left-radius:10px;-moz-border-bottom-right-radius:10px;-moz-border-bottom-left-radius:10px;border-bottom-left-radius:10px;border-bottom-right-radius:10px;box-shadow:0 0 2px #666;}.uds-bb-paginator.silver .uds-bb-position-indicator-bullets{float:left;}.uds-bb-paginator.silver .uds-bb-bullet{background:url(../images/skin-silver/bullet.png) no-repeat;width:14px;height:14px;float:left;margin:5px 10px 0 0;cursor:pointer;}.uds-bb-paginator.silver .uds-bb-bullet.active,.uds-bb-paginator.silver .uds-bb-bullet:hover{background:url(../images/skin-silver/bullet-active.png) no-repeat;}.uds-bb-paginator.silver .uds-bb-playpause{background:url(../images/skin-silver/playpause.png) no-repeat;width:14px;height:14px;float:left;margin:5px 0 0 0;}.uds-bb-paginator.silver .uds-bb-playpause:hover{background:url(../images/skin-silver/playpause.png) 0 14px;}.uds-bb-paginator.uTube{width:100%;height:40px;background:red;position:absolute;bottom:0;background:url(../images/skin-uTube/bg.png) repeat-x;z-index:6;}.uds-bb-paginator.outside.uTube{bottom:-40px;}.uds-bb-paginator.uTube .uds-bb-button{background-image:url(../images/skin-uTube/buttons.png);width:40px;height:40px;float:left;}.uds-bb-paginator.uTube .uds-bb-prev{background-position:0 0;}.uds-bb-paginator.uTube .uds-bb-playpause{background-position:-40px 0;}.uds-bb-paginator.uTube .uds-bb-playpause:hover{background-position:-40px -40px;}.uds-bb-paginator.uTube .uds-bb-prev:hover{background-position:0 -40px;}.uds-bb-paginator.uTube .uds-bb-next{background-position:-80px 0;float:right;margin-left:20px;}.uds-bb-paginator.uTube .uds-bb-next:hover{background-position:-80px -40px;}.uds-bb-paginator.uTube .uds-bb-position-indicator-bullets{height:27px;padding-top:13px;float:right;}.uds-bb-paginator.uTube .uds-bb-bullet{background:url(../images/skin-uTube/bullet.png) no-repeat;}.uds-bb-paginator.uTube .uds-bb-bullet:hover{background-position:0 -10px;}.uds-bb-paginator.uTube .uds-bb-bullet.active{background-position:0 -20px;}.uds-bb-paginator.modern{width:100%;height:30px;position:absolute;bottom:0;background:url(../images/skin-modern/bg.png) repeat-x;}.uds-bb-paginator.moderncontainer{width:100%;height:30px;position:absolute;bottom:0;background:url(../images/skin-modern/bg.png) repeat-x;z-index:5;}.uds-bb-paginator.outside.modern{bottom:-30px;}.uds-bb-paginator.modern .uds-bb-prev{background:url(../images/skin-modern/buttons.png);width:30px;height:30px;float:left;}.uds-bb-paginator.modern .uds-bb-prev:hover{background-position:0 -30px;}.uds-bb-paginator.modern .uds-bb-next{background-image:url(../images/skin-modern/buttons.png);background-position:-63px 0;width:31px;height:30px;float:right;margin-left:10px;}.uds-bb-paginator.modern .uds-bb-next:hover{background-position:-63px -30px;}.uds-bb-paginator.modern .uds-bb-playpause{background:url(../images/skin-modern/buttons.png);background-position:-30px 0;width:33px;height:30px;float:left;}.uds-bb-paginator.modern .uds-bb-playpause:hover{background-position:-30px -30px;}.uds-bb-paginator.modern .uds-bb-position-indicator-bullets{height:21px;padding-top:9px;float:right;background:url(../images/skin-modern/bg.png) repeat-x;}.uds-bb-paginator.modern .uds-bb-bullet{background-image:url(../images/skin-modern/bullet.png);background-repeat:no-repeat;width:10px height:10px;}.uds-bb-paginator.modern .uds-bb-bullet:hover,.uds-bb-paginator.modern .uds-bb-bullet.active{background-position:0 -10px;}.uds-bb-thumbnails{position:absolute;z-index:4;overflow:hidden;}.uds-bb-thumbnails.oldskool,.uds-bb-thumbnails.utube,.uds-bb-thumbnails.modern{background:url(../images/skin-oldskool/bg.png);}.uds-bb-thumbnails.oldskool-bright{background:url(../images/bg-bright.png);}.uds-bb-thumbnails.silver{background:url(../images/bg-bright.png);}.uds-bb-thumbnail-container{display:block;position:relative;}.uds-bb-thumbnails.bottom{bottom:-86px;width:100%;padding:4px 0;}.uds-bb-thumbnails.top{top:-87px;width:100%;padding:4px 0;}.uds-bb-thumbnails.left{left:-99px;height:100%;}.uds-bb-thumbnails.right{right:-99px;height:100%;}.uds-bb-thumbnails.inside.bottom{bottom:0;}.uds-bb-thumbnails.inside.top{top:0;}.uds-bb-thumbnails.inside.left{left:0;}.uds-bb-thumbnails.inside.right{right:0;}.uds-bb-thumb{margin:5px;cursor:pointer;background-color:#ededed;padding:4px;-moz-box-shadow:1px 1px 1px #444;-webkit-box-shadow:1px 1px 1px #444;box-shadow:1px 1px 1px #444;line-height:0;border-radius:2px;}.uds-bb-thumb:hover{background:#20b1be;}.uds-bb-thumb.active{background:#20b1be;}#branding .uds-bb-thumb img{width:auto;height:auto;margin:0;}.uds-bb-thumbnails.bottom .uds-bb-thumb,.uds-bb-thumbnails.top .uds-bb-thumb{float:left;}
Basically I change the right and bottom position to 50% and -30px
.uds-bb-paginator.oldskool .uds-bb-position-indicator-bullets,.uds-bb-paginator.ubbv2 .uds-bb-position-indicator-bullets,.uds-bb-paginator.oldskool-bright .uds-bb-position-indicator-bullets{
background:url(../images/skin-oldskool/bg.png);
position:absolute;
bottom:-30px;
right:50%;
padding:3px 5px;
border-radius:3px;
}
Sorry I miss the other one, the part that you want to center the content.
<blockquote>I want it to be centered on smaller browsers, which i know is just a little css tweak.</blockquote>
Your site content already centered, did you mean that the focus of the viewport of the browser to be in the center? If true, afaik, it only can be done with custom JavaScript.
lifeblogs comments:
Hi there! Let me clarify: When I put in the slider and made it full width, i forgot to put in some css that automatically centers it within the site. Without the slider, when someone wants to view the site on a smaller screen, they automatically see the content centered. With the slider, the first thing you see (i'm using the resizemybrowser online tool) is the far left side of the site. I just want to know what css to put in that will make sure that on smaller screens, it wont focus on the far left (that it will show the site centered automatically).
Christianto comments:
Ok, You mean when the browser with smaller resolution display your site, it will look like
http://www.use.com/21c10797c99fef56c3a6?p=2#photo=2
But you want it to look centered like this
http://www.use.com/21c10797c99fef56c3a6#photo=1
Here my suggestion, because the slide images is too wide (1400px), the browser will automatically display your site on far top left first and scroll bar will appear, this is not because your slider is not centered but simply view port doesn't fit enough for slider images.
Without the slider the content will centered because the width of the content still fit with the browser with smaller resolution screen, but the same thing will happen if we resize the browser to more smaller size than the content width, it won't centered.
http://www.use.com/c6aae4b17e64e332e6aa
The main thing that you should understand that centering content against html element wrapper is different with centering content against viewport of browser.
If you need your site to be centered in viewport (browser display screen of the site), the easiest way is by change the slider width to smaller size/same with content width.
we can use JavaScript to make it centered by force the viewport to focus to the center of the screen (manually we use scroll bar) but it might result in incorrect place in some browser (ie).
Christianto comments:
lifeblogs, I guess I'm give you an incorrect opinion.
Regarding your reply to Sébastien, when you refer to a site:
http://www.elegantthemes.com/preview/MyCuisine
I found by put css overflow-x: hidden; to body element the scroll bar is disappear.
body{
overflow-x: hidden;
}
maybe you could try it if it works.
Christianto comments:
ignore above comment, its still won't make it center.. :(
Sébastien | French WordpressDesigner answers:
send me the folder of the plugin by mail : maildeseb @ gmail . com
i look at that
lifeblogs comments:
Hi and thanks again for your help. I'm not sure what the protocol is for adding more money but I've increased this by $10 (not sure why it's not visible on the questions page though).
What you said is right - I want it to be centered on smaller screens, even if the slider is too wide, just like you showed in the sample pictures. There is a theme, http://www.elegantthemes.com/preview/MyCuisine, that has widescreen images in their slider, but when I use resize my browser, it automatically centers, even on the larger images that are outside of the main content area (some of their slide are within, but one is definitely much wider.)
Are they using javascript to achieve this? If so, can you tell me what to do?
Sebastian - I will email you the plugin
Sébastien | French WordpressDesigner comments:
the width of the slider (1400px in your case) is a setting in the administration of the plugin.
You can only use a with in pixels
but you need to use a width in % (100%)
Sébastien | French WordpressDesigner comments:
my advice : use this width for the slider : 980px
and put this slider in a div
this div have this width : 100% and this background : #000
lifeblogs comments:
If I do that though, then i can't upload full width images (1400px) via the plugin's admin. They will have to be 980px im guessing, so that doesn't solve the problem unless I'm mistaken? Can you clarify?
Sébastien | French WordpressDesigner comments:
have a centered slider AND full width images (1400px) is not possible
have a centered slider AND smallest width images (980px) is possible
other solution : find another plugin