edge to edge default slideshow problem

Home Forums WordPress Themes – Premium Circumference edge to edge default slideshow problem

This topic contains 20 replies, has 2 voices, and was last updated by  Sushil Adhikari 2 years, 9 months ago.

Viewing 15 posts - 1 through 15 (of 21 total)
  • Author
    Posts
  • #40841

    rlrpt
    Participant

    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 2 years, 10 months ago by  rlrpt. Reason: resize image
    Attachments:
    You must be logged in to view attached files.
    #40852

    Sushil Adhikari
    Moderator

    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

    #40879

    rlrpt
    Participant

    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.

    #40880

    Sushil Adhikari
    Moderator

    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

    #40899

    rlrpt
    Participant

    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?

    #40909

    Sushil Adhikari
    Moderator

    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

    #41170

    rlrpt
    Participant

    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;
    
    }
    #41180

    Sushil Adhikari
    Moderator

    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

    #41189

    rlrpt
    Participant

    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>
    #41197

    rlrpt
    Participant

    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.
    #41199

    rlrpt
    Participant

    close up attached

    Attachments:
    You must be logged in to view attached files.
    #41201

    rlrpt
    Participant

    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 🙂

    #41234

    rlrpt
    Participant

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

    #41259

    Sushil Adhikari
    Moderator

    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

    #41321

    rlrpt
    Participant

    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?

Viewing 15 posts - 1 through 15 (of 21 total)

You must be logged in to reply to this topic.