Hi there,

The JavaScript is located in scripts/spin.js

If you see icons for those posts, that means you don't have the "video" post status applied (just keep that in mind).

Those icons have the following styling...

.postInfo .commentsLink,
.postInfo .post-edit-link,
.postInfo .post-sharing {
    font-size: 12px;
    margin-right: 10px;
}

Hope that helps!

Best,

Christopher

How do I edit the Javascript?

I'm referring to the social icons that come below the videos in the video gallery. Every video has its own scroll bar, and the very bottom displays several social media icons. I'm not referring to the social media icons on a project page, only in the scrolling video gallery. Do you know what I mean?

Thanks!
Jo

Hi there,

The loading position (center of page) is automatically done by the JavaScript that creates it. You'll need to edit the script itself to make changes to that.

Are you referring to the social icons at the bottom of the page? If so, here is the current styling...

#socialIcons a {
    border-radius: 50%;
    display: block;
    float: right;
    font-size: 125%;
    line-height: 28px;
    position: relative;
    text-align: center;
    width: 28px;
    z-index: 1;
}

Hope that helps!

Best,

Christopher

Thanks! I was hoping to move the loading icon down, but it isn't working with what you gave me. Please advise.

Also, I wanted to increase the size of the share icons under my videos in my gallery, and I looked at your response to someone else's post a while ago, but increasing the size with the information you gave them didn't work for me for some reason. I would love your advice regarding this as well.

Thanks!

Hi there,

Here is the current styling for those elements...

1. The loading circle (scripts/custom.js lines 28-48)...

///////////////////
//LOADING ANIMATION
///////////////////
var opts = {
  lines: 13, // The number of lines to draw
  length: 8, // The length of each line
  width: 3, // The line thickness
  radius: 15, // The radius of the inner circle
  corners: 1, // Corner roundness (0..1)
  rotate: 0, // The rotation offset
  direction: 1, // 1: clockwise, -1: counterclockwise
  color: '#fff', // #rgb or #rrggbb or array of colors
  speed: 1, // Rounds per second
  trail: 100, // Afterglow percentage
  shadow: false, // Whether to render a shadow
  hwaccel: false, // Whether to use hardware acceleration
  className: 'spinner', // The CSS class to assign to the spinner
  zIndex: 2e9, // The z-index (defaults to 2000000000)
  top: '50%', // Top position relative to parent
  left: '50%' // Left position relative to parent
};

2. The "X" button (style.css lines 1392-1414)...

.closeVideo {
	position: absolute;
	top: 20px;
	right: 20px;
	font-size: 26px;
	display: block;
	width: 35px;
	height: 35px;
	line-height: 35px;
	border-radius: 50%;
	border: 2px solid #fff;
	z-index: 100;
	color: #fff;
	text-align: center;
	background: rgba(0,0,0,.35);
	cursor: pointer;
	font-weight: lighter;
}
.closeVideo:hover {
	background: #fff;
	color: #191919;
	font-size: 32px;
}

Hope that helps!

Best,

Christohper

Hi there,

Can you please give me the necessary customization information to move the following:

1. The loading circle

2. The "x" you press to exit out of videos. When I use vimeo links, it is ending up on top of some of the icons that are always displayed with vimeo videos in the upper right corner. Thanks!