Adobe Community: Message List - How to change the A:href css in a loaded JSON html block

Re: How to change the A:href css in a loaded JSON html block

forums_noreply@adobe.com — Tue, 04 Nov 2014 22:01:48 GMT

Great idea!

On Tue, Nov 4, 2014 at 3:31 PM, QuadrantProductions

Re: How to change the A:href css in a loaded JSON html block

forums_noreply@adobe.com — Tue, 04 Nov 2014 21:31:08 GMT

Thankyou all! These are all helpful.

I ended up calling the external css at the top of the composition with

sym.$("<link rel='stylesheet' type='text/css' href='myexternalstylesheet.css'>").appendTo("#Stage");

Then I set the class of the containing div and changed the css for a:links.

I did it that way so I could call that css from other stages as well in other projects.

Re: How to change the A:href css in a loaded JSON html block

forums_noreply@adobe.com — Tue, 04 Nov 2014 17:35:20 GMT

'<a href="address@gmail.com" style="color:red;">Hello</a>'

This is inline.

Re: How to change the A:href css in a loaded JSON html block

forums_noreply@adobe.com — Tue, 04 Nov 2014 17:33:48 GMT

Add this in the compositionReady event handler if you want all <a> tags to be say "green":

$("a").css({color: "green"});

and if you want to apply this green color to selectively, then add a class to those <a> tags say "greenAnchors" and add the below in compositionReady handler:

$("#greenAnchors").css({color: "green"});

hth,

Vivekuma

Re: How to change the A:href css in a loaded JSON html block

forums_noreply@adobe.com — Tue, 04 Nov 2014 17:22:00 GMT

Just use <style> </style> inline.

How to change the A:href css in a loaded JSON html block

forums_noreply@adobe.com — Tue, 04 Nov 2014 15:49:06 GMT

If we have JSON loading html in and in that text block we have a tags to links (see example below of the JSON string). How do you add the css to control how that a:link should look? It's defaulting right now to standard blue and underlined and is not picking up the text properties of the text div in animate other then the font type.

Would we control it by assigning it a class and then external css? Is there a way to do it without it being inline?

//EXAMPLE JSON LOADED BLOCK

	{
		"image" : "images/th-hp-water.jpg",
		"bigtitle" : "At Palermo Ortho in Oakville ON, we provide braces and orthodontics for kids, teens and adults.",
		"thelinktext":"",
		"thelink" : "",
		"description":"We provide Orthodontics for Children, Teens and Adults.<br></br>The days of scary braces are gone and we have ergonomic braces options that help you achieve that smile you want while never getting in the way of your active lifestyle. If you are looking for braces for kids, teens or adults we've got you covered.<br></br>Learn more about <a href='http://www.palermo-ortho.ca/'>orthodontics for kids</a>, <a href='http://www.palermo-ortho.ca/'>teens</a> and <a href='http://www.palermo-ortho.ca/'>adults</a> including <a href='http://www.palermo-ortho.ca/invisalign-in-oakville.html'>invisalign</a>"
	},

The above block of text is loading fine, (see screen shot) but it's defaulting to blue