Custom CSS & Javascript: Interactive Elements
The DocketManager Team is Growing!
June 21, 2019
Portal Showcase: Part 1
July 9, 2019Did you know?
That the look and layout of the web-to-print portals can be customized using CSS?
This blog post will cover fun ways to display your social media icons and other visual enhancements you can make to your portals.
This blog post will cover fun ways to display your social media icons and other visual enhancements you can make to your portals.
Fun-To-Click Social Media Icons
Get more likes / follows / connections by adding these fun-to-click social media icons to your portals.
Slide-out Icons
Enter this in the top of your Portal HomePage HTML
<nav class="social">
<ul>
<li><a href="https://facebook.com/" target="_blank">Facebook <i class="fab fa-facebook-f fa-2x fa-inverse f-fw"></i></a></li>
<li><a href="https://twitter.com" target="_blank">Twitter <i class="fab fa-twitter fa-2x fa-inverse f-fw"></i></a></li>
<li><a href="http://linkedin.com" target="_blank">LinkedIn <i class="fab fa-linkedin-in fa-2x fa-inverse f-fw"></i></a></li>
</ul>
</nav>
Enter this in your Custom CSS
.social {
position: fixed;
top: 40%;
left:18px;
}
.social ul {
padding: 0px;
-webkit-transform: translate(-270px, 0);
-moz-transform: translate(-270px, 0);
-ms-transform: translate(-270px, 0);
-o-transform: translate(-270px, 0);
transform: translate(-270px, 0);
}
.social ul li {
display: block;
margin: 5px;
background: rgba(0, 0, 0, 0.36);
width: 300px;
text-align: right;
padding: 10px;
-webkit-border-radius: 0 30px 30px 0;
-moz-border-radius: 0 30px 30px 0;
border-radius: 0 30px 30px 0;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.social ul li:hover {
-webkit-transform: translate(110px, 0);
-moz-transform: translate(110px, 0);
-ms-transform: translate(110px, 0);
-o-transform: translate(110px, 0);
transform: translate(110px, 0);
background: rgba(255, 255, 255, 0.4);
}
.social ul li a {
color: #261E34;
font-weight:bold;
text-decoration:none;
font-size:16px;
}
.social ul li:hover i {
color: #fff;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.social ul li:hover i.fa-facebook-f {
background:#3A579B;
}
.social ul li:hover i.fa-twitter {
background:#007AB9;
}
.social ul li:hover i.fa-linkedin-in {
background:#598DCA;
}
.social ul li i {
color: #000;
padding: 10px;
text-align:center;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
width:40px;
height:40px;
font-size: 20px;
background: #ffffff;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
Enter this in your Custom JavaScript
$(document).ready(function(){
$('.menu span:last-child').click(function(){
$('.menu span').not(':last-child').toggleClass('hidden show') ;
})
})
Glowing Icons
Enter this in your HTML where you would like the social icons displayed. For the Charcoal Studio Theme, we replaced the existing icons located in the Header HTML.
<div class="col-md-12 social">
<ul>
<li class="facebook"><i class="fab fa-facebook-f fa-2x" aria-hidden="true"></i></li>
<li class="twitter"><i class="fab fa-twitter fa-2x" aria-hidden="true"></i></li>
<li class="linkedin"><i class="fab fa-linkedin-in fa-2x" aria-hidden="true"></i></li>
</ul>
</div>
Enter this in your Custom CSS
.social {
position:absolute;
bottom:30px;
}
.social ul {
list-style: none;
}
.social ul li {
width: 45px;
height: 45px;
line-height: 10px;
margin: 0 15px;
text-align: center;
cursor: pointer;
border-radius: 50%;
border: 4px solid #DFB059;
float: left;
transition: all 0.5s ease;
}
.social ul li i {
color: #DFB059;
margin-top: 9px;
transition: all 0.5s ease;
font-size:20px
}
/*facebook*/
.social ul li:hover.facebook {
border: 4px solid #3b5998;
box-shadow: 0 0 15px #3b5998;
transition: all 0.5s ease;
}
.social ul li:hover .fa-facebook-f {
color: #3b5998;
text-shadow: 0 0 15px #3b5998;
transition: all 0.5s ease;
}
/*twitter*/
.social ul li:hover.twitter {
border: 4px solid #00aced;
box-shadow: 0 0 15px #00aced;
transition: all 0.5s ease;
}
.social ul li:hover .fa-twitter {
color: #00aced;
text-shadow: 0 0 15px #00aced;
transition: all 0.5s ease;
}
/* linkedin */
.social ul li:hover.linkedin {
border: 4px solid #598DCA;
box-shadow: 0 0 15px #598DCA;
transition: all 0.5s ease;
}
.social ul li:hover .fa-linkedin-in {
color: #598DCA;
text-shadow: 0 0 15px #598DCA;
transition: all 0.5s ease;
}
Accordion Slider
Enter this in your HTML where you would like the social icons displayed.
<div class="accordion">
<ul>
<li>
<div> <a href="#">
<i class="fab fa-facebook-f fa-2x"></i>
<span>Facebook</span>
</a> </div>
</li>
<li>
<div> <a href="#">
<i class="fab fa-twitter fa-2x"></i>
<span>Twitter</span>
</a> </div>
</li>
<li>
<div> <a href="#">
<i class="fab fa-linkedin-in fa-2x"></i>
<span>LinkedIn</span>
</a> </div>
</li>
</ul>
</div>
Enter this in your Custom CSS
.accordion {
width: 120px;
max-width: 1080px;
height: 40px;
overflow: hidden;
}
.accordion ul {
width: 100%;
display: table;
table-layout: fixed;
margin: 0;
padding: 0;
}
.accordion ul li {
display: table-cell;
position: relative;
width: 16.666%;
height: 250px;
background-repeat: no-repeat;
background-position: center center;
transition: all 500ms ease;
}
.accordion ul li div {
display: block;
overflow: hidden;
width: 100%;
}
.accordion ul li div a i,
.accordion ul li div a span {
color: #fff;
}
.accordion ul li div a {
display: block;
height: 250px;
width: 100%;
position: relative;
z-index: 3;
padding: 10px 10px;
box-sizing: border-box;
color: #fff;
text-decoration: none;
font-family: "Roboto Condensed";
transition: all 200ms ease;
}
.accordion ul li:nth-child(1) div a {
padding: 10px 15px;
}
.accordion ul li div a span {
display: inline-block;
opacity: 0;
margin: 0;
text-overflow: ellipsis;
position: relative;
z-index: 5;
white-space: nowrap;
overflow: hidden;
font-size: 13px;
float: right;
line-height: 20px;
}
.accordion ul li div a i {
font-size: 20px;
float: left;
}
.accordion ul li div a h2 {
font-family: Montserrat, sans-serif;
text-overflow: clip;
font-size: 24px;
text-transform: uppercase;
margin-bottom: 2px;
top: 160px;
}
.accordion ul:hover li {
width: 8%;
}
.accordion ul:hover li:hover {
width: 60%;
}
.accordion ul:hover li:hover a {
background: rgba(0, 0, 0, 0.4);
}
.accordion ul:hover li:hover a span {
transition: all 500ms ease;
transition-delay: 0.3s;
opacity: 1;
}
.accordion ul li:nth-child(1) {
background-color: #4e71a8;
}
.accordion ul li:nth-child(2) {
background-color: #1cb7eb;
}
.accordion ul li:nth-child(3) {
background-color: #1686b0;
}
Interactive Elements
Keep visitors on your portal longer by adding these interactive elements sure to catch their eye.
Enlarge on hover
Find the class of the item you would like to enlarge by right clicking > inspect element.
For the Vintage Video homepage logo the class is "logomain" and we are further targeting the image within that class with "img".
Paste the following in your Custom CSS:
For the Vintage Video homepage logo the class is "logomain" and we are further targeting the image within that class with "img".
Paste the following in your Custom CSS:
.logomain img {
width:60%;
transition:0.5s;
transition-timing-function: ease-in-out;
}
This will set the initial width of the logo as well as the time it takes for the transition to complete and the ease of the transition. Increase or decrease the time of transition as you would like.
Next, set the styling for the item when it is being hovered over with a mouse:
Next, set the styling for the item when it is being hovered over with a mouse:
.logomain img:hover {
width:70%;
}
You can set the width to be larger (will enlarge on hover) or smaller (will decrease in size on hover).
Slide in on page load
First, set the starting point for the element. Again I'm using the class "logomain" to target the html content for the Vintage Video theme.
.logomain{
padding-top:200px;
opacity:0;
animation:load_up 2s forwards;
-webkit-animation:load_up 2s forwards;
}
This will set the content 200 pixels from the top on page load and at an opacity of 0 (can not be seen). It also gives our animation a name of "load_up" which we will now reference.
Next, we must style the finished animation with our "load_up" animation name:
Next, we must style the finished animation with our "load_up" animation name:
@keyframes load_up{
from{opacity:0;padding-top:200px}
to{opacity:1;padding-top:20px;}
}
@-webkit-keyframes load_up{
from{opacity:0;padding-top:200px}
to{opacity:1;padding-top:20px;}
}
.social ul li {
width: 45px;
height: 45px;
line-height: 10px;
margin: 0 15px;
text-align: center;
cursor: pointer;
border-radius: 50%;
border: 4px solid #DFB059;
float: left;
transition: all 0.5s ease;
}
.social ul li i {
color: #DFB059;
margin-top: 9px;
transition: all 0.5s ease;
font-size:20px
}
/*facebook*/
.social ul li:hover.facebook {
border: 4px solid #3b5998;
box-shadow: 0 0 15px #3b5998;
transition: all 0.5s ease;
}
.social ul li:hover .fa-facebook-f {
color: #3b5998;
text-shadow: 0 0 15px #3b5998;
transition: all 0.5s ease;
}
/*twitter*/
.social ul li:hover.twitter {
border: 4px solid #00aced;
box-shadow: 0 0 15px #00aced;
transition: all 0.5s ease;
}
.social ul li:hover .fa-twitter {
color: #00aced;
text-shadow: 0 0 15px #00aced;
transition: all 0.5s ease;
}
/* linkedin */
.social ul li:hover.linkedin {
border: 4px solid #598DCA;
box-shadow: 0 0 15px #598DCA;
transition: all 0.5s ease;
}
.social ul li:hover .fa-linkedin-in {
color: #598DCA;
text-shadow: 0 0 15px #598DCA;
transition: all 0.5s ease;
}
This makes the ending style padded only 20 pixels from the top and full opacity. WebKit is a HTML/CSS web browser rendering engine for Safari/Chrome and so the "-webkit-" version of code must be included for the CSS to render animations on those browsers.
Button Hover Effect
With our Custom CSS and Javascript boxes, your options for button effects are endless. While this is just one example of a fun button effect that you may enjoy using, you can find many free examples online by searching for "CSS button effects".
First, paste the following where you would like your button to appear.
First, paste the following where you would like your button to appear.
<a href="#" class="fancy-btn">
<svg width="277" height="62">
<defs>
<linearGradient id="grad1">
<stop offset="0%" stop-color="#FFB76B"/>
<stop offset="100%" stop-color="#FF7F04" />
</linearGradient>
</defs>
<rect x="5" y="5" rx="25" fill="none" stroke="url(#grad1)" width="266" height="50"></rect>
</svg>
<span>View Our Products</span>
</a>
This sets the link for your button, adds an SVG stroke to the outside of the button, and stylizes the stroke colours.
To change the colours, replace the hex codes inside the "lineargradient". Replace the "#" with a link to set where the button will direct the user.
Next, let's paste this into our Custom CSS to stylize the button
To change the colours, replace the hex codes inside the "lineargradient". Replace the "#" with a link to set where the button will direct the user.
Next, let's paste this into our Custom CSS to stylize the button
.fancy-btn {
position: relative;
display: inline-block;
width: 277px;
height: 50px;
font-size: 1em;
font-weight: bold;
line-height: 60px;
text-align: center;
text-transform: uppercase;
background-color: transparent;
cursor: pointer;
text-decoration: none;
font-family: "Roboto", sans-serif;
font-weight: 900;
font-size: 17px;
letter-spacing: 0.045em;
}
.fancy-btn svg {
position: absolute;
top: 0;
left: 0;
}
.fancy-btn svg rect {
stroke-width: 4;
stroke-dasharray: 353, 0;
stroke-dashoffset: 0;
-webkit-transition: all 600ms ease;
transition: all 600ms ease;
}
.fancy-btn span {
background: rgb(255,183,107); /* Old browsers */
background: -moz-linear-gradient(left, rgba(255,183,107,1) 0%, rgba(255,167,61,1) 28%, rgba(255,124,0,1) 73%, rgba(255,127,4,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(255,183,107,1) 0%,rgba(255,167,61,1) 28%,rgba(255,124,0,1) 73%,rgba(255,127,4,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(255,183,107,1) 0%,rgba(255,167,61,1) 28%,rgba(255,124,0,1) 73%,rgba(255,127,4,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb76b', endColorstr='#ff7f04',GradientType=1 );
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.fancy-btn:hover svg rect {
stroke-width: 4;
stroke-dasharray: 196, 543;
stroke-dashoffset: 437;
}
To change the gradient of the text, click here and generate a linear gradient with your own colours. Then replace the text inside ".fancy-btn span { }" with your generated code.
