anchor tag styling being ignore

John Nerge

10 Oktober 2016 15:57

I can't seem to get my CSS on anchor tags to be respected by the viewer. Here's the line of html I'm using:

 

<a style="color:green;" href="http://www.google.com">Print this report</a>

 

I'm trying to do some more advanced styling (making an a tag that looks like a button and will run a workflow), but this example keeps it simple.

 

Here's how it appears in GE Manager:

 

_img_ alt="User-added image" src="https://latitudegeo--c.na53.content.force.com/servlet/rtaImage?eid=90660000000PDmf&feoid=Body&refid=0EM60000000HT0X"_/_img_

 

Here's how it appears in the Viewer:

 

_img_ alt="User-added image" src="https://latitudegeo--c.na53.content.force.com/servlet/rtaImage?eid=90660000000PDmf&feoid=Body&refid=0EM60000000HT0c"_/_img_

 

Notice that it's still using the default browser link color instead of the green I told it to use.

 

I did a little troubleshooting, and it appears that if I remove the href property then the Viewer will show the right color text. But obviously that defeats the purpose of having a link since it won't go anywhere.

 

Any ideas on why the viewer isn't styling the a tag like I'm telling it to?

0

• 

  Permanently deleted user

  10 Oktober 2016 16:37

  To override this behavior, place a <span> tag around the text in the <a> tag and style that.  For example:

   

  <a style="color:green;" href="http://www.google.com">Print this report</a> would be

   

  <a href="http://www.google.com"><span style="color:green;">Print this report</span></a> or

   

  (untested) better yet

   

  <a href="http://www.google.com"><span class="linkBtn"> Print this report</span></a> which should allow you to add all your customization to that class in your Desktop.css

   

   

  0
• 

  John Nerge

  10 Oktober 2016 18:54

  Perfect, thank you, Marshall!

   

  Here's the button:

   

  _img_ alt="User-added image" src="https://latitudegeo--c.na53.content.force.com/servlet/rtaImage?eid=90760000000PDJs&feoid=Body&refid=0EM60000000HT11"_/_img_

   

  Here's my html:

   

  <a href="command:RunWorkflowWithArguments?workflowId=Print_Report&pid={PID}&address={CONCAT_ADD}"><span class="print-button">Print this report</span></a>

   

  And here's my CSS:

   

  .print-button{

   

      background-color:#69BE28;

   

      border-radius: 4px;

   

      color:white;

   

      padding: 4px;

   

      

   

  }

   

  .print-button:hover, .print-button:active  {

   

      background-color:#49861C;

   

      text-decoration: none;

   

  }

   

  a:hover {text-decoration:none;}

  0
• 

  Permanently deleted user

  12 Oktober 2016 12:16

  Great idea John,  I think I'm going to use this going forward.  The only change I made is that rather than remove text decoration from all 'a' tags, I set it so just the 'a' tags in the feature description would be affected: .feature-description a{ text-decoration:none; }

   

   

  0
• 

  John Nerge

  12 Oktober 2016 12:55

  Good idea, I made that change to my CSS too, thanks.

   

  One warning I came across while researching how to do this:

   

  https://css-tricks.com/use-button-element/#article-header-id-6

   

  Enter and the space key both work for activating buttons in the GVH, but like the article says only the enter key activates a link.

  0

Du måste logga in om du vill lämna en kommentar.