I have double checked the sftp credentials, these are working fine,
your this link ” https://kriesi.at/support/topic/ (Purchase code hidden if logged out) -firefox/#post-805471″ has nothing to solve my problem.

Hello Victoria,

Thanks very much for that. It seems to have worked for mobile; however, we’re still seeing the black bars above and below the video when resizing the screen on desktop to anything smaller than full size, or for example on an iPad, etc.

Any ideas?

Thanks!

Hi Victoria,

thanks for taking a look, but making the colored overlay disappear is not at all what I am looking for.
I want to change the weird cropping when increasing the images – did you look at the screenshots?

Just a guess – but would there be a way to set the mask (i.e. the white area surrounding the image in a circle) to be the top layer? or is this not how it works?

Thanks!

• This reply was modified 8 years, 9 months ago by Maike.

Hi Victoria,
I just had another try with exactly the same settings, and it now seems to have worked. I am not sure if it actually HAS worked, because the top-menu in the frontend seems not to be displayed correctly. Perhaps you could have a quick look if there just went something wrong in the settings or if the demo-import still has problems? Login-data in private area attached. Thanks!

Thanks, Mike. I like to try and work things out myself, ie, learn as I progress rather than having you do all the work :) I also like to share my code so that others can find quick answers. Yes, we are done for now, although I do have one other quick question –

The ‘REGISTER’ button, top right in the secondary menu is sitting above the 8px white border that is on the main wrapper for the entire page. How do I specify a z-index to have it sit under the page border, or is that the easiest way to do it? :)

Hi Rikard – the topic can be closed – many thanks.
Cheers

Please close this topic. Thanks again.

Hi Mike
Yes, I’ve figured out 2 of the 3 elements! I’m including all of ym code to help others but the arrow in the masonry, at the bottom of this post isn’t quite right yet, so I need a bit of feedback for that last item that is eluding me :)

This is for the fullwidth slider, both left and right, using a div id in the captions –

/* align right */

#alignR {	
	text-align: right;
}

.caption_bottom .slideshow_caption #alignR {
	background: url("img/arrowLeft.png");
	background-repeat: no-repeat;
	background-position: top right;
	margin-right: -50px;
}

.caption_bottom .slideshow_caption .slideshow_inner_caption .slideshow_align_caption #alignR {
	text-align: right;
}

.caption_bottom .slideshow_caption h2 #alignR {
	padding: 10px 60px 0 0 !important;
}

/* align left */

#alignL {	
	text-align: left;	
}

.caption_bottom .slideshow_caption #alignL {
	background: url("img/arrowRight.png");
	background-repeat: no-repeat;
	background-position: top left;
	margin-left: -50px;
}

.caption_bottom .slideshow_caption .slideshow_inner_caption .slideshow_align_caption #alignL {
	text-align: left;
}

.caption_bottom .slideshow_caption h2 #alignL {
	padding: 10px 0 0 60px !important;
}

This is for the arrow in an image used in the 3 col grid –

.av-image-caption-overlay-center {
	background: url("img/arrowRight.png");
	background-repeat: no-repeat;
	background-position: bottom left;
	text-align: left;
	padding: 0px 20px 20px 60px;
	vertical-align: bottom !important;
}

.av-image-caption-overlay-center p {
	text-transform: uppercase;
	color: #fff;
	font-size: 22px;
	line-height: 22px;
	text-shadow: 2px 2px 4px #000;	
}

And finally this is for a specific item in the masonry grid, but this one is not quite right yet, as you can see –

/* add arrow to specific items */

#av-masonry-1-item-204 .av-masonry-entry-content.entry-content {
	background: url("img/arrowLeft.png");
	background-repeat: no-repeat;
	background-position: bottom right;
	padding: 50px 0px 20px 0px;
	margin-right: -10px !important;
}

I need to move the text over to the left but perhaps instead of adding the arrow into the same div as the caption I should go up one element?

Thanks again :)

Yes, that is better. I’m still not able to move the h2 over; here is my code –

.caption_bottom .slideshow_caption #alignR {
	background: url("img/arrowLeft.png");
	background-repeat: no-repeat;
	background-position: top right;
	margin-right: -50px;
}

.caption_bottom .slideshow_caption .slideshow_inner_caption .slideshow_align_caption #alignR {
	text-align: right;
}

.caption_bottom .slideshow_caption .slideshow_inner_caption .slideshow_align_caption #alignR .slideshow_caption h2 {
	padding: 10px 100px 0 0 !important;
}

I need the aligned right text to be moved over to the left 100px so it’s not jammed up against the arrow and edge of the screen, and can’t seem to target just that element.

Once I have this done I still need to know which elements need to be targetted for the masonry and images, please :)