Hi There, I am trying to figure out how to dynamically modify my CSS depending on what member content is output via the $content variable. For example in layout.phtml <!-- member content starts here --> <div class="am-block"> <h3><a href="/members/content/p/id/188/">Recording - Practice Session (Audio / MP3)</a></h3> <h3><a href="/members/content/p/id/189/">Recording - Practice Session (Video/ MP4)</a></h3> <h3><a href="/members/content/p/id/189/">Recording - Practice Session (Document / PDF)</a></h3> </div> Right now I have added a checkmark to the block via the CSS code in site.css .am-block h3 a { /* Category dynamic drip items built shown with orange checkmark */ background-image:url('../img/orange-circle-checkmark-14.png'); background-repeat:no-repeat; background-position:0px 0px; padding:0px 0px 0px 24px; /* Indent list left */ } What I really want to do is dynamicallyquery the .am-block content for whether it is a link to a file type (MP3, MP4 or PDF) as mentioned in the <a>text description</a>. Then depending on what file type, modify the .am-block h3 a {...} to place an audio icon, a video icon or a PDF file type icon rather than a checkmark. On regular pages where I have total code control I can add icons in front of downloadable file types via CSS but with the dynamically built $content variable this isn't an option. JavaScript Solution I don't mind writing some JS to do the <a>text description</a> query after the PHP page is fully rendered but I can't figure out how to integrate this with the <?php echo $content ?> output. Any suggestions? Thanks so much. Aly
Another way to do this, I guess, would be to somehow add a class to the am-block div that indicates file type. Then static CSS could be written to then style the file type icon appropriately. With this solution how would you add a class? A custom database field could be added to Protected Content > Files that indicates file type but then I don't know how to make aMember query that custom field and append a class to the am-block div. My coding skills are intermediate, any help is appreciated.
I guess it is very common use case and I happy to incorporate it to core. I go ahead and already did it. I can apply changes to your installation directly if you do not mind. Just submit ticket to our helpdesk (https://www.amember.com/support) and ask to apply commit #9839591 to your installation. Then each link will have additional CSS classes based on content type eg: Code: class="am-resource-file am-resource-file-image am-resource-file-image-gif" Best Regards.
Caesar, This solution is fantastic, I couldn't have hoped for better, thank you so much. Do I need to be on the latest version of aMember 4.7.2? Right now I'm working on 4.5.1. If so I'll upgrade before submitting a ticket. Aly
I can apply patch to any version but I suggest to upgrade your install to latest one (5.0.3) if possible. I can help you with it if necessary.
Thanks Caesar, I will get to the upgrade in the next few weeks myself. Our membership is quite busy so we have to plan for the upgrade and testing the upgrade on the development system beforehand. I really appreciate the offer for help and your support.
It is quite stable. There is not any known issue. We already use it in production on our site several months.