edge to edge default slideshow problem

[rlrpt]

Hi, I want to use the default widget kit slideshow because I want the shaded box behind the caption.

My slideshow works fine when using the circumference file, but when I set it to default it leaves a block on the left side showing the background. Suggestions?

• This topic was modified 6 years, 11 months ago by rlrpt. Reason: resize image

Attachments:

You must be logged in to view attached files.

[Sushil Adhikari]

Dear Renee,

Thank you for contacting Styled Themes support Team.

Could you please provide us your site url so we can provide you appropriate solution. And we assumed that it may some time happen if image size is smaller than viewport size, so please check by keeping large image size that best fits to the screen.

We look forward for your response.

Thanks

[rlrpt]

Hi, my site is not live yet, still finishing it up using bitnami on my machine.

All the images are 2560×600 as suggested in the tutorials, and they work just fine using the circumference wk file, but not the default wk file.

[Sushil Adhikari]

Dear Rlrpt,

We had made some changes on widgetkit file which comes along with theme package to ensure proper design and looks appealing . That why you might be getting such issue with default widgit kit.

Let us know if we are understanding this fully or perhaps this is not what you meant for.

Thanks

[rlrpt]

Ok, well can you tell me the code to create the opaque block behind the caption in the circumference file and where to insert it?

[Sushil Adhikari]

Hi there,

Please do reference this tutorial from w3 school for cretaing opaque block
http://www.w3schools.com/css/css_image_transparency.asp
http://www.w3schools.com/css/tryit.asp?filename=trycss_transparency

I hope this will be helpful for you.

Thanks

[rlrpt]

Thanks. What file would I put this code in?

div.transbox {
  margin: 30px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity: 0.6;
  filter: alpha(opacity=60); /* For IE8 and earlier */
}

div.transbox p {
  margin: 5%;
  font-weight: bold;
  color: #000000;

}

[Sushil Adhikari]

Hi there,

Thanks for coming back to us, you can put on child theme style.css or if you are using WordPress 4.7 you got default feature on customizer to add additional custom css.

Let us know if you have any problem on this.

Thanks

[rlrpt]

And then this code goes in the caption box on the widgetkit page?

<div class="transbox">
    <p>This is some text that is placed in the transparent box.</p>
  </div>

[rlrpt]

Ok, thanks for your help, I made good progress on this.

It looks good, but I have a small problem with the text. I am using your code snippet for my captions, so I can change the margin slightly for each line. But I want to use the same font throughout, so I changed each div class to “caption 2”, and the problem is that it cuts off the bottoms of hanging letters like “y” and “g”. How can I correct this?

<div class=transbox>
<div style=”text-align:right;”>
<div class=”caption2″ style=”margin-right: 28%; color: #fff;”>Personalize it</div>
<div class=”caption2″ style=”margin-right: 23%; color: #fff;”>by Customizing it!</div>
<div class=”caption2″ style=”margin-right: 13%; color: #fff;”>Make it Your Way</div>
</div>
`

Attachments:

You must be logged in to view attached files.

[rlrpt]

close up attached

Attachments:

You must be logged in to view attached files.

[rlrpt]

Okay, so I think I solved that problem by overriding the caption2 2em/1em in the main css to just 2em in the child css. Now the lines are spaced more than I would like but it works.

NOW what I would like to solve, and don’t seem to be able to, is to be able to move the transparent box and caption higher or lower on the slide – it seems to be vertically centered in the circumference slideshow and I would like to be able to move it based on the underlying image. I tried several variations of “position” and “vertical-align” with no success at all.

The default wk slideshow placed them at the bottom of the slide, which seems preferable in most cases on my selected slides.

Thanks. Sorry to keep posting that I have figured something out and then moving on to something else, but we seem to be on opposite sides of the world and I can only get one response from you per day 🙂

[rlrpt]

Hi, any thoughts on how to pin the caption to the bottom of the slider instead of centered vertically?

[Sushil Adhikari]

Dear Rlpt,

You can add this css on child theme style.css or Additional css section of customizer, to align caption on bottom:

.wk-slideshow-circumference .caption {
    bottom: 0;
}

Note: You can increase / decrease bottom value as per you requirememt.

Thanks

[rlrpt]

Thanks for the reply! That solution didn’t work for me though, unfortunately. That was supposed to override

/*
 * Widgetkit Slideshow: Circumference Style
 */

/* Caption
----------------------------------------------------------------------------------------------------*/
.wk-slideshow, .wk-slideshow .slides {
margin-left: 0!important;
}
.wk-slideshow-circumference li::before {
	content: "";
}
.wk-slideshow-circumference ul,
.wk-slideshow-circumference li {
	margin: 0;
	padding:0;
	list-style:none;
}
.wk-slideshow-circumference .caption {
	width:auto;
	padding: 0;
	bottom: 5em;
	left:0;
	background:none;
}

??

I tried several variations without success. Other suggestions?

[Author]

Posts