Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2

Thread: Purple Border

  1. #1
    Senior Member
    Join Date
    Dec 2013
    Posts
    120
    Member #
    37915
    Liked
    2 times

    Purple Border

    I have a client who has this site. They've asked me to include a purple border around the slider, like the one around the video box.

    I'm not an expert with HTML/CSS, but I have some idea, and am getting close, at this test page. I found and used info from the video box styling:

    Code:
    .videobox{
        background:#E08FE6;
        border-radius: 17px;
        float: left;
        margin-left: 27px;
        padding:12px 13px 8px 12px;
        width: 90%;
    Below is most of the CSS for the slider. There were 140+ lines that seem redundant, with webkit-transform references.

    What do I need to do to make the purple border display right?



    Code:
    /* added to the original element calling slippry */
    .sy-box.sy-loading {
      background: url(assets/img/sy-loader.gif) 50% 50% no-repeat;
      -webkit-background-size: 32px;
      -moz-background-size: 32px;
      -o-background-size: 32px;
      background-size: 32px;
      min-height: 40px;
    }
    .sy-box.sy-loading .sy-slides-wrap, .sy-box.sy-loading .sy-pager {
      visibility: hidden;
    }
    
    /* element that wraps the slides */
    .sy-slides-wrap {
    	
    	background:#E08FE6;
        border-radius: 17px;
        float: left;
        margin-left: 27px;
        padding:12px 13px 8px 12px;
        width: 90%;
    	
      position: relative;
      min-height:330px;
      
    }
    .sy-slides-wrap:hover .sy-controls {
      display: block;
    }
    
    /* element that crops the visible area to the slides */
    .sy-slides-crop {
      height: 100%;
      width: 100%;
      position: absolute;
      overflow: hidden;
      z-index:-1;
    }
    
    /* list containing the slides */
    .sy-list {
      width: 100%;
      height: 100%;
      list-style: none;
      margin: 0;
      padding: 0;
      position: absolute;
    }
    .sy-list.horizontal {
      -webkit-transition: left ease;
      -moz-transition: left ease;
      -o-transition: left ease;
      transition: left ease;
    }
    .sy-list.vertical {
      -webkit-transition: top ease;
      -moz-transition: top ease;
      -o-transition: top ease;
      transition: top ease;
    }
    
    /* single slide */
    .sy-slide {
      position: absolute;
      width: 100%;
      z-index: 2;
    }
    .sy-slide.kenburns {
      width: 140%;
      left: -20%;
    }
    .sy-slide.kenburns.useCSS {
      -webkit-transition-property: opacity;
      -moz-transition-property: opacity;
      -o-transition-property: opacity;
      transition-property: opacity;
    }
    .sy-slide.kenburns.useCSS.sy-ken:nth-child(1n) {
      -webkit-animation-name: left-right;
      -webkit-animation-fill-mode: forwards;
      -moz-animation-name: left-right;
      -moz-animation-fill-mode: forwards;
      -o-animation-name: left-right;
      -o-animation-fill-mode: forwards;
      animation-name: left-right;
      animation-fill-mode: forwards;
    }
    .sy-slide.kenburns.useCSS.sy-ken:nth-child(2n) {
      -webkit-animation-name: right-left;
      -webkit-animation-fill-mode: forwards;
      -moz-animation-name: right-left;
      -moz-animation-fill-mode: forwards;
      -o-animation-name: right-left;
      -o-animation-fill-mode: forwards;
      animation-name: right-left;
      animation-fill-mode: forwards;
    }
    .sy-slide.sy-active {
      z-index: 3;
    }
    .sy-slide > a {
      margin: 0;
      padding: 0;
      display: block;
      width: 100%;
    }
    .sy-slide > a > img {
      margin: 0;
      padding: 0;
      display: block;
      width: 110%;
      border: 0;
    }
    
    /* next/ prev buttons, with arrows and clickable area a lot larger than the visible buttons */
    .sy-controls {
      display: none;
      list-style: none;
      height: 100%;
      width: 100%;
      position: absolute;
      padding: 0;
      margin: 0;
    }
    .sy-controls li {
      position: absolute;
      width: 10%;
      min-width: 4.2em;
      height: 100%;
      z-index: 33;
    }
    .sy-controls li.sy-prev {
      left: 0;
      top: 0;
    }
    .sy-controls li.sy-prev a:after {
      background-position: -5% 0;
    }
    .sy-controls li.sy-next {
      right: 0;
      top: 0;
    }
    .sy-controls li.sy-next a:after {
      background-position: 105% 0;
    }
    .sy-controls li a {
      position: relative;
      width: 100%;
      height: 100%;
      display: block;
      text-indent: -9999px;
    }
    .sy-controls li a:link, .sy-controls li a:visited {
      opacity: 0.4;
    }
    .sy-controls li a:hover, .sy-controls li a:focus {
      opacity: 0.8;
      outline: none;
    }
    .sy-controls li a:after {
      content: "";
      background-image: url(assets/img/arrows.svg);
      background-repeat: no-repeat;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      text-align: center;
      text-indent: 0;
      line-height: 2.8em;
      color: #111;
      font-weight: 800;
      position: absolute;
      background-color: #fff;
      width: 2.8em;
      height: 2.8em;
      left: 50%;
      top: 50%;
      margin-top: -1.4em;
      margin-left: -1.4em;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      -ms-border-radius: 50%;
      -o-border-radius: 50%;
      border-radius: 50%;
    }
    @media only screen and (max-device-width: 600px) {
      .sy-controls {
        display: block;
      }
      .sy-controls li {
        min-width: 2.1em;
      }
      .sy-controls li a:after {
        width: 1.4em;
        height: 1.4em;
        margin-top: -0.7em;
        margin-left: -0.7em;
      }
    }
    
    /* captions, styled fo the overlay variant */
    .sy-caption-wrap {
      position: absolute;
      bottom: 2em;
      z-index: 12;
      left: 50%;
    }
    .sy-caption-wrap .sy-caption {
      position: relative;
      left: -50%;
      background-color: rgba(0, 0, 0, 0.54);
      color: #fff;
      padding: 0.4em 1em;
      -webkit-border-radius: 1.2em;
      -moz-border-radius: 1.2em;
      -ms-border-radius: 1.2em;
      -o-border-radius: 1.2em;
      border-radius: 1.2em;
      display:none;
    }
    .sy-caption-wrap .sy-caption a:link, .sy-caption-wrap .sy-caption a:visited {
      color: #e24b70;
      font-weight: 600;
      text-decoration: none;
    }
    .sy-caption-wrap .sy-caption a:hover, .sy-caption-wrap .sy-caption a:focus {
      text-decoration: underline;
    }
    @media only screen and (max-device-width: 600px), screen and (max-width: 600px) {
      .sy-caption-wrap {
        left: 0;
        bottom: 0.4em;
      }
      .sy-caption-wrap .sy-caption {
        left: 0;
        padding: 0.2em 0.4em;
        font-size: 0.92em;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        -ms-border-radius: 0;
        -o-border-radius: 0;
        border-radius: 0;
      }
    }
    
    /* pager bubbles */
    .sy-pager {
      overflow: hidden;
      *zoom: 1;
      display: block;
      width: 100%;
      margin: 1em 0 0;
      padding: 0;
      list-style: none;
      text-align: center;
    }
    .sy-pager li {
      display: inline-block;
      width: 1.2em;
      height: 1.2em;
      margin: 0 1em 0 0;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      -ms-border-radius: 50%;
      -o-border-radius: 50%;
      border-radius: 50%;
    }
    .sy-pager li.sy-active a {
      background-color: #e24b70;
    }
    .sy-pager li a {
      width: 100%;
      height: 100%;
      display: block;
      background-color: #cccccc;
      text-indent: -9999px;
      -webkit-background-size: 2em;
      -moz-background-size: 2em;
      -o-background-size: 2em;
      background-size: 2em;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      -ms-border-radius: 50%;
      -o-border-radius: 50%;
      border-radius: 50%;
    }
    .sy-pager li a:link, .sy-pager li a:visited {
      opacity: 1.0;
      display:none;
    }
    .sy-pager li a:hover, .sy-pager li a:focus {
      opacity: 0.6;
    }
    
    /* element to "keep/ fill" the space of the content, gets intrinsic height via js */
    .sy-filler {
        background:#E08FE6;
        border-radius: 17px;
        float: left;
        margin-left: 27px;
        padding:12px 13px 8px 12px;
        width: 90%;
    
    /*  width: 100%;  */
    }
    .sy-filler.ready {
    
        background:#E08FE6;
        border-radius: 17px;
        float: left;
        margin-left: 27px;
        padding:12px 13px 8px 12px;
        width: 90%;
    	
      -webkit-transition: padding 600ms ease;
      -moz-transition: padding 600ms ease;
      -o-transition: padding 600ms ease;
      transition: padding 600ms ease;
    }
    Last edited by pranaman; Dec 05th, 2014 at 02:17 AM.

  2.  

  3. #2
    Senior Member sasha_bolcina's Avatar
    Join Date
    Sep 2014
    Location
    Serbia
    Posts
    274
    Member #
    40099
    Liked
    47 times
    This should fix it:

    Code:
    .sy-box {
       border: solid 13px #E08FE6;
       border-radius: 17px;
       height: 444px;
       overflow: hidden;
       margin-bottom: 10px
    }
    
    .sy-slides-wrap {
       position: relative;
       min-height:330px;
       width: 100%;
    }
    
    .sy-filler {
      width: 100%;
    }
    
    .sy-filler.ready {
      -webkit-transition: padding 600ms ease;
      -moz-transition: padding 600ms ease;
      -o-transition: padding 600ms ease;
      transition: padding 600ms ease;
    }


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 03:58 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com