Home › Forums › WordPress Themes – Premium › Circumference › edge to edge default slideshow problem
- This topic has 20 replies, 2 voices, and was last updated 6 years, 11 months ago by
Sushil Adhikari.
-
AuthorPosts
-
December 20, 2016 at 3:04 pm #40841
rlrpt
ParticipantHi, 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.December 21, 2016 at 5:21 am #40852Sushil Adhikari
ModeratorDear 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
December 21, 2016 at 11:28 pm #40879rlrpt
ParticipantHi, 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.
December 22, 2016 at 5:16 am #40880Sushil Adhikari
ModeratorDear 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
December 22, 2016 at 3:44 pm #40899rlrpt
ParticipantOk, well can you tell me the code to create the opaque block behind the caption in the circumference file and where to insert it?
December 23, 2016 at 4:48 am #40909Sushil Adhikari
ModeratorHi 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_transparencyI hope this will be helpful for you.
Thanks
January 5, 2017 at 5:17 pm #41170rlrpt
ParticipantThanks. 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; }
January 6, 2017 at 4:57 am #41180Sushil Adhikari
ModeratorHi 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
January 6, 2017 at 3:56 pm #41189rlrpt
ParticipantAnd 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>
January 6, 2017 at 11:28 pm #41197rlrpt
ParticipantOk, 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.January 6, 2017 at 11:30 pm #41199January 7, 2017 at 1:11 am #41201rlrpt
ParticipantOkay, 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 🙂
January 8, 2017 at 1:05 pm #41234rlrpt
ParticipantHi, any thoughts on how to pin the caption to the bottom of the slider instead of centered vertically?
January 9, 2017 at 6:18 am #41259Sushil Adhikari
ModeratorDear 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
January 10, 2017 at 1:48 am #41321rlrpt
ParticipantThanks 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?
-
This topic was modified 6 years, 11 months ago by
-
AuthorPosts
- You must be logged in to reply to this topic.