Workflow Soluiton

 View Only

  • 1.  Imagebutton & CSS Styling in Advanced Text Creator

    Posted Apr 23, 2014 07:50 AM

    Hi

     

    I'm currently working with the ListSelect component that's pretty usable for styling.

    At the moment I have following problems:

    1.

    Similar to: https://www-secure.symantec.com/connect/forums/color-responsepageurl

    I tried CSS Styling with class for the Output path links, but it goes everytime to blue/underlined, I can add a general CSS for all links but I would like to do use the "CLASS" like <a href=outputpath class=class1> .... but this doesn't work.

     

    2. I tried to create a Imagebutton for the Outputpath but it seems it forces everytime a link itself instead of a string, is it possible to change that?

     

    Thanks

    Patrick

     

     



  • 2.  RE: Imagebutton & CSS Styling in Advanced Text Creator

    Posted Apr 23, 2014 03:25 PM

    So you are trying to style the listselect items?

    Paste in your html code from the listselect component and I'll take a look. You have "quotes" around the class right?

     

    Image buttons inside of the list select? Probably possible but i've never tried it myself. Again, paste the code and I'll let you know what I see.

     

     



  • 3.  RE: Imagebutton & CSS Styling in Advanced Text Creator

    Posted Apr 24, 2014 03:07 AM

    Yes correct

     

    I set it in quotes but it removes it automatically on runtime I think, and it will be like this (from "arrows" to arrows):

    <HTML><HEAD></HEAD>
    <BODY>
    <STYLE type=text/css>

    a.arrows:text { text-decoration:underline; color:#010101 }
    a.arrows:hover { text-decoration: none; color:#000000 }
    </STYLE>

    <TABLE border=0>
      <TBODY>
      <TR>
        <TD rowSpan=2><A id=0887127b-cabb-11e3-9ed3-5c514f578d42
          contentEditable=true
          href="mergefield://0887127b-cabb-11e3-9ed3-5c514f578d42/"
          unselectable="off"
          atomicselection="true">_select_list_item_.Name</A>&nbsp;-&nbsp;<A
          id=63e9b0b6-cabd-11e3-9ed3-5c514f578d42 contentEditable=true
          href="mergefield://63e9b0b6-cabd-11e3-9ed3-5c514f578d42/"
          unselectable="off" atomicselection="true">_select_list_item_.Quantity</A>
          &nbsp;-&nbsp;<A id=114206eb-cabb-11e3-9ed3-5c514f578d42
          contentEditable=true
          href="mergefield://114206eb-cabb-11e3-9ed3-5c514f578d42/"
          unselectable="off" atomicselection="true">_outcome_Remove_</A></TD>
        <TD><A id=1f360806-cad3-11e3-9ed3-5c514f578d42 contentEditable=true
          href="mergefield://1f360806-cad3-11e3-9ed3-5c514f578d42/"
          unselectable="off" atomicselection="true">_outcome_?_</A></TD></TR>
      <TR>
        <TD><A id=18b54d6d-cad0-11e3-9ed3-5c514f578d42 class=arrows
          contentEditable=true
          href="mergefield://18b54d6d-cad0-11e3-9ed3-5c514f578d42/"
          unselectable="off" atomicselection="true">_outcome_?_</A>
    </TD></TR></TBODY></TABLE></BODY></HTML>

    And if I start the workflow it looks like this in the source:

    <STYLE type=text/css>

    a.arrows:text { text-decoration:underline; color:#010101 }
    a.arrows:hover { text-decoration: none; color:#000000 }
    </STYLE>

    <TABLE border=0>
      <TBODY>
      <TR>
        <TD rowSpan=2>iPhone 5 Apple Lightning to 30-pin Cable (0.2m)&nbsp;-&nbsp;1
          &nbsp;-&nbsp;<a onclick="__doPostBack('l1b_0_0_0','');return false;" id="l1b_0_0_0" href="javascript:__doPostBack('l1b_0_0_0','')">Remove</a></TD>
        <TD><a onclick="__doPostBack('l1b_0_1_1','');return false;" id="l1b_0_1_1" href="javascript:__doPostBack('l1b_0_1_1','')">∧ </a></TD></TR>
      <TR>
        <TD><a onclick="__doPostBack('l1b_0_2_2','');return false;" id="l1b_0_2_2" href="javascript:__doPostBack('l1b_0_2_2','')">∨</a>
    </TD></TR></TBODY></TABLE></td>
         </tr>
        </table>
    </div></span><span id="s3"><input type="submit" name="l3b" value="Back" id="l3b" tabindex="2" class="cButtoncomponent" name="l3b" style="height:25px;width:125px;position:absolute;left:685px;top:-33px;-moz-box-sizing:border-box;box-sizing:border-box;-moz-resize:none;resize:none;" />

     

     

    On the Imagepart I tried the Image and Image Button on every I think possible way, for example:

    <a id="c617a7e1-cb7e-11e3-9016-5c514f578d42" href="mergefield://c617a7e1-cb7e-11e3-9016-5c514f578d42/" atomicselection="true" contenteditable="true" unselectable="off">_outcome_AddtoBasket_<img src="test.png"/></a>

     

     



  • 4.  RE: Imagebutton & CSS Styling in Advanced Text Creator

    Posted Apr 24, 2014 09:08 AM

    Have you tried using the style field inside of the 'dynamic value' window?

     

    Sure it isn't a class, but you can insert things here using workflow itself instead of trying to push it in via the 'html' tab.

    I have also seen on multiple occassions where if you go back and look at the code after saving it... it will change, but if you don't look at it then what you typed in remains until the next time you open the window. I know this sounds crazy... but it happens.



  • 5.  RE: Imagebutton & CSS Styling in Advanced Text Creator

    Posted Apr 25, 2014 04:49 AM

    I don't see the style field for the "outcome" paths, for every other thing its no problem just for the outcome links.

     

    I tested it with closing without changing the window, on compile it takes away the class attribute.

     

    For default formatting, where can I change the standard things for CSS? I tried the theme editor, but there are no options for the "defaults" (example for hyperlinks).



  • 6.  RE: Imagebutton & CSS Styling in Advanced Text Creator

    Posted Apr 25, 2014 07:44 AM
    You can't change the CSS but you can add more via 'include HTML'. Try inline CSS on the links via HTML. If that doesn't work you could white some JavaScript to add the class attributes but that will probably stink. You could also look at the structure and try targeting the links bases on the parent/child tree. Something like 'body div span a {}' Sorry I can't be of more help. I don't use this component that often. When it comes to things like this I write custom HTML or use a different tool all together.


  • 7.  RE: Imagebutton & CSS Styling in Advanced Text Creator
    Best Answer

    Posted May 22, 2014 08:55 PM

    this javascript can be applied to the form body itself as an onload event.

    colorLinks("#e3e4fa");

    function colorLinks(hex)
    {
        var links = ListSelect1.getElementsByTagName("a");
        for(var i=0;i<links.length;i++)
        {
            if(links[i].href)
            {
                links[i].style.color = hex; 
            }
        } 
    }

    set a specific controlid on the list select component you want to format, and swap your value with "ListSelect1" in bold text above.  or just name your component controlid "ListSelect1" and it'll work just fine.

    5-22-2014 6-54-40 PM.png

    this will make your links a lovely shade of lavender.  if you don't like lavender, set the #e3e4fa to whatever you prefer.

    -andrew



  • 8.  RE: Imagebutton & CSS Styling in Advanced Text Creator

    Posted Jun 04, 2014 08:29 AM

    thanks andrew

     

    that does the trick for the style part!

     

    patrick