-
Posts
-
I may be asking too much here but I thought I would try.
I have a site I am building for a band. On the home page to promote upcomming shows I want to show a slideshow slider and have each image show some custom and static info in an opacity bar at the bottom of the slide. This would be editable for each slide.
Below are links to comps of what I am trying to achieve.
Can you suggest a simple way to do this or would this be a complete custom programming job?
Thanks.Hey themeforesttony!
The easy slider has captions you can set for each slide, http://kriesi.at/themes/enfold/homepage/home-v4-small-slider/. It does not look like in your screenshot but you should be able to add HTML inside them to display buttons, images, etc etc.
Best regards,
ElliottHEy Elliot,
Thanks. That got my mind pointed in the right direction.
So I have setup an HTML table (don’t know if it would be better to do DIV in this case or not) and I am pretty close to what I want.
I have two issues.
1. I have added two images to one of the columns (the “like” icon and the “buy ticket” icon). The theme is autosizing these to about 300% larger than they should be (depending on platform I am looking at it). I have tried setting image size inline and as CSS but it does not seem to affect them. How do I get them to be the relative size I have in my comp (and as they are sized) and still be responsive?
2. I have tried adding a “background: rgba(0, 0, 0, 0.5)!important;” quck css to .avia-inner-caption and .avia-caption but am not seeing any opacity change. Can you tell me what I am doing incorrectly?
Below are links to the design comp again as well as the page I am working on.
Thanks again.Hi!
Try adding this to your custom CSS.
.avia-slideshow td img { max-width: 100% !important; width: auto !important; } .avia-slideshow table, .avia-slideshow tr { background: transparent !important; }Best regards,
ElliottHi Elliot,
So the first code block did seem to constrain the images, however there is now a big gap between the elements in that cell so not everything can be seen.
My HTML on the caption content is as follows:
<table width=”100%” border=”0″ cellpadding=”6″>
<tr>
<td>FRIDAY SEPTEMBER 11, 2015<br />
10:30PM</td>
<td align=”center”><p style=”font-size: 24px”>Paladino’s Night Club</p></td>
<td>Share
</td>
</tr>
</table>
Any thoughts?On the second line of code, it is making the whole tr transparent except the border and an opacity around the text. I DO want to get an adjustable opacity to the whole tr background including the border, not a complete transparency. I tried a variation on the rgba call but no luck.
Again, thoughts?Thanks again for sticking with this. I have left the code in place at the same link from above so you can see what it is doing. I will work on some other sections in the meantime.
Hey!
Use this CSS to remove the background from the paragraphs and instead set the background to the TD.
td p { background: transparent !important; } td { background: rgba(0,0,0,0.3) !important; }Best regards,
ElliottElliott,
Sorry for my delay in responding. That worked great for the opacity issue.
Can you help me with why the “share” and “ticket” icon pngs are not sizing down and therefor not appearing on the right table column after the “share text?
Thanks.Hey!
I don’t see the icons. Can you take a screenshot and highlight what your trying to do?
Regards,
ElliottHi Elliot,
The comp of what I am trying to do can be seen at the link I posted at the top of the thread and have posted below. The code I put in the opacity box to this is as follows:
<table width=”100%” border=”0″ cellpadding=”6″>
<tr>
<td>FRIDAY SEPTEMBER 11, 2015<br />
10:30PM</td>
<td align=”center”><p style=”font-size: 24px”>Paladino’s Night Club</p></td>
<td>Share
</td>
</tr>
</table>
You can see the two image call outs referenced that are for the “Share” icon and the “Buy Ticket Icon”
I have changed the CSS for the opacity box to make it taller so you can see what the images are doing on the actual page. So it just seems that space is being added in the third column that is not allowing the images to stay in line.Hey!
I think it’s better if you didn’t use a table because the columns differ in size. Use div or span containers instead. Something like this:
<span class="event-date">FRIDAY SEPTEMBER 11, 2015<br>10:30PM</span> <span style="font-size: 24px" class="event-name">Paladino’s Night Club</span> <span class="event-share"> <p class="share">Share</p> <img style="vertical-align:middle" src="http://rygrocks.com/wp-content/uploads/2015/11/raise-your-glass-pink-tribute-band-share-icon.png" width="34" height="34"> <img style="vertical-align:middle" src="http://rygrocks.com/wp-content/uploads/2015/11/raise-your-glass-pink-tribute-band-buy-ticket-icon.png" width="153" height="35"> </span>Add this in the Quick CSS field:
.avia-caption-content .event-date, .avia-caption-content .event-name, .avia-caption-content .event-share { width: 32%; float: left; } .avia-caption-content { padding: 2%; background: #000; filter: alpha(opacity = 80); background: rgba(0, 0, 0, 0.5); } .avia-caption-content .event-share img { float: left; width: auto; margin: 0 5px; } .avia-caption-content:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; clear: both; overflow: auto; } .avia-caption-content .event-name, .avia-caption-content .event-share .share { background: transparent !important; } .avia-caption-content .event-date, .avia-caption-content .event-name { font-size: 18px; line-height: 1.3em; } .avia-caption-content .event-share .share { float: left; }Cheers!
IsmaelThanks Ismael,
I think I have applied your code correctly but I am seeing the following issues:
1. The styling is affecting all image captions (see the full width slider at the top of the page for example) it now has an opacity box around the container.
2. In the event caption I am back to the “share” and ticket” image not sizing correctly.
Can you take a look and see what I may have done wrong?
Thanks
TonyHey!
1. This is the expecting behavior. If you want to prevent this from happening, then you would need to define a unique css class for the elements in question. Then you can use your new unique css classes instead of the ones Ismael provided to you. To turn on custom css fields for all alb element follow these instructions: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/
2. The new elements (css classes) Ismael provided for you captions need to be styled. For example:
.event-date { position: relative; top: -90px; font-size: 7px !important; }Adjust as needed and do something similar for the other classes of your captions as well.
Regards,
AndyHi Guys,
I finally had a chance to get back to this.
Thanks for all the pointers. I got it almost dialed in but am having two remaining problems.
If you look at the page I cannot get the “SHARE” text to vertical align in the middle with the images. I tried a few variations of alignment declaration in the CSS and the images and just inline but not working.The other problem is that even though the divs are set a %, when viewed on phone screens the content is not being responsive to fit.
Any thoughts?Hi!
I checked the link you have provided but it does not work anymore (s. private content). Your homepage does not seem to show the elements in question neither. Can you check please? and provide us precise links showing what you mean? because we need to be able to inspect the elements.
Regards,
AndyThanks but that just shifts everything in the event-share div down.
I am trying to get the “Share” text vertically centered to the two images next to it.
I have tried text-align to the Div and vertical-align=”middle” to the images.
No effect.Any other ideas? Also any thoughts on making this more responsive to fit on small screens?
I have put the code I am currently using below.
Hi!
posting your code here does not help us. Unfortunately it’s not possible to shift “share” only, because it has no unique css class.
What do you mean with “more responsive”? which look do you want to achieve exactly?
Regards,
AndyBy responsive I mean I want the content in the avia-caption-content div to “shrink’ to fit on smaller screens. It seems to hold ok down to tablet size, but when I look at it on a smartphone, the content falls out of the div. (overflows)
Here is a screenshot of Smartphone display:
Hey!
you could try to make a bigger slideshow for mobile with this code:
@media only screen and (max-device-width: 736px) { .avia-slideshow { width: 118%; left: -28px; }}Then you still need to make smaller captions, use this code:
@media only screen and (max-device-width: 736px) { .avia-caption-content .event-date, .avia-caption-content .event-name { font-size: 10px; }}and adjust as needed.
Best regards,
Andy
- You must be logged in to reply to this topic.