Add a small image (icon but not a font) into caption areas

Hi Rikard

Yes, I understand how to set the properties; my question is what is the correct syntax to apply it to both of the following, just like I did for a fullwidth slider, as per above –

An image
A masonry gallery item

thanks!

Not meaning to bump but I’m hoping for a reply soon, please :) I need to get this site done soon.

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 :)

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 :)

Sorry, I kept working on it so changed some elements, and I think I have it now unless you think there is a better way to do this? It’s the 3rd image in the masonry grid, the one with ‘EMPIRE’

/* add arrow to specific items */

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

Then style the text using this element –

/* titles over images */

.av-masonry-entry-content.entry-content {
    font-family: 'AndesLight';
    font-weight: normal;	
	text-transform: uppercase;
	font-size: 22px;
	/* line-height: 32px; */
	letter-spacing: 2px;
	text-shadow: 2px 2px 4px #000;
    color: #fff !important;
    opacity: 1 !important;
	text-align: right;		
}

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? :)

Worked perfectly! Thanks so much :)