Visit us on FacebookVisit us on TwitterVisit us on YoutubeVisit us on SteamVisit us on TwitchCheck out our Feed

Forums

Welcome Guest 

Show/Hide Header

Welcome Guest, posting in this forum requires registration.





Pages: [1]
Author Topic: Slidedeck 2 lite
Darwood37
Administrator
Posts: 12
Permalink
Post Slidedeck 2 lite
on: July 28, 2013, 11:06
Quote

I just recently added a cool new feature to Gaveroid.com called Slidedeck2. You would have seen it on our home page. It displays up to 5 latests posts and gaveroid youtube videos in one convenient area.

The lite or "demo" version came havily branded and interfered with the viusal effects. I was able to debrand it as well as make some other changes to the navigation buttons by editing the slidedeck.css file. This can be found by clicking on plugins, editor, select slidedeck2 lite. I found the easiest way to debrand was to comment some of the code see below:

/*SlideDeck Bug*/
.slidedeck-frame a.slidedeck-2-bug {
    display: block;
    overflow: hidden;
    position: absolute;
    bottom: 1px;
    left: 1px;
    width: 1px;
    height: 1px;
    /*color: #fff;*/
    text-decoration: none;
    -webkit-border-radius: 11px;
    -moz-border-radius: 11px;
    -o-border-radius: 11px;
    border-radius: 11px;
    z-index: -100;
    /*-moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: width 0.5s ease-in-out;
    -moz-transition: width 0.5s ease-in-out;
    -o-transition: width 0.5s ease-in-out;
    transition: width 0.5s ease-in-out;*/
}
.slidedeck-frame a.slidedeck-2-bug:after {
    position: absolute;
    display: block;
    content: '';
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 3px solid #fff;
    -webkit-border-radius: 11px;
    -moz-border-radius: 11px;
    -o-border-radius: 11px;
    border-radius: 11px;
    -webkit-transition: border 0.3s 0.3s;
    -moz-transition: border 0.3s 0.3s;
    -o-transition: border 0.3s 0.3s;
    transition: border 0.3s 0.3s;
    z-index: 101;
}
.slidedeck-frame a.slidedeck-2-bug.open {
   /* width: 145px;
    -webkit-transition: width 0.3s ease-in-out 0.25s;
    -moz-transition: width 0.3s ease-in-out 0.25s;
    -o-transition: width 0.3s ease-in-out 0.25s;
    transition: width 0.3s ease-in-out 0.25s;*/
}
.slidedeck-frame a.slidedeck-2-bug.open:after {
  /*  border: 3px solid transparent;
    -webkit-transition: border 0.25s;
    -moz-transition: border 0.25s;
    -o-transition: border 0.25s;
    transition: border 0.25s;*/
}
.slidedeck-frame a.slidedeck-2-bug span {
    /*position: absolute;
    display: block;
    height: 34px;*/
}
.slidedeck-frame a.slidedeck-2-bug span.slidedeck-2-bug-logo {
   /* overflow: hidden;
    background: #708ae9;
    top: 0;
    left: 0;
    width: 42px;
    height: 0;
    padding-top: 34px;
    text-indent: 100%;
    -webkit-border-radius: 11px;
    -moz-border-radius: 11px;
    -o-border-radius: 11px;
    border-radius: 11px;
    
    -webkit-transition: -webkit-border-radius 0.25s 0.25s;
    -moz-transition: -moz-border-radius 0.25s 0.25s;
    -o-transition: -o-border-radius 0.25s 0.25s;
    transition: border-radius 0.25s 0.25s;
    
    background-image: url('../images/slidedeck-bug.png');*/
}
.slidedeck-frame a.slidedeck-2-bug.open span.slidedeck-2-bug-logo {
   /* -webkit-border-radius: 11px 0 0 11px;
    -moz-border-radius: 11px 0 0 11px;
    -o-border-radius: 11px 0 0 11px;
    border-radius: 11px 0 0 11px;
    
    -webkit-transition: -webkit-border-radius 0.25s;
    -moz-transition: -moz-border-radius 0.25s;
    -o-transition: -o-border-radius 0.25s;
    transition: border-radius 0.25s;*/
}
.slidedeck-frame a.slidedeck-2-bug span.slidedeck-2-bug-text {
  /*  width: 103px;
    height: 34px;
    top: 0;
    left: 42px;
    padding: 5px;
    color: #fff;
    font-size: 10px;
    line-height: 11px;
    font-family: sans-serif;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: rgb(0,0,0);
    background: rgba(0,0,0,0.7);
    -webkit-border-radius: 0 11px 11px 0;
    -moz-border-radius: 0 11px 11px 0;
    -o-border-radius: 0 11px 11px 0;
    border-radius: 0 11px 11px 0;*/
}
.slidedeck-frame a.slidedeck-2-bug span.slidedeck-2-bug-text strong {
    /*text-decoration: underline;*/
}
/*bug small*/
.slidedeck-frame.sd2-small a.slidedeck-2-bug {
   /* left: 10px;
    bottom: 10px;
    width: 25px;
    height: 20px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -o-border-radius: 7px;
    border-radius: 7px;*/
}
.slidedeck-frame.sd2-small a.slidedeck-2-bug:after {
   /* -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -o-border-radius: 7px;
    border-radius: 7px;
    border: 1px solid #fff;*/
}
.slidedeck-frame.sd2-small a.slidedeck-2-bug.open {
    width: 25px;
}
.slidedeck-frame.sd2-small a.slidedeck-2-bug.open:after {
    /*border: 1px solid transparent;*/
}
.slidedeck-frame.sd2-small a.slidedeck-2-bug span.slidedeck-2-bug-logo,
.slidedeck-frame.sd2-small a.slidedeck-2-bug.open span.slidedeck-2-bug-logo {
    /*width: 25px;
    padding-top: 20px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -o-border-radius: 7px;
    border-radius: 7px;
    background-image: url('../images/slidedeck-bug-small.png');*/
}
.slidedeck-frame.sd2-small a.slidedeck-2-bug span.slidedeck-2-bug-text { display: none; }

/*Full Slide Link*/
.slidedeck-frame a.full-slide-link-hit-area {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    display: none;
    z-index: 1000;
}
.slidedeck-frame.sd2-show-link-slide a.full-slide-link-hit-area { display: block; }

I also changed the opacity of the navigation buttons because they covered up the title of the post or video, you can find the css to change in the same file.

The loading page was somewhat branded as well so i changed that by editing the preview-iframe.php file found in the wp-content/plugins/slidedeck2/views/ folder. look for the line that says "decking out your content".

Hope this helps to enjoy the lite version of SLidedeck2 a little better without having the company that created it pushed in your face.

Pages: [1]

Looking for something?

Use the form below to search Gaveroid.com:

Still not finding what you're looking for?
Contact us so we can take care of it!