3 Replies Latest reply on Apr 25, 2006 5:48 AM by Peter Grainge

    Popup Style Help Request

    IainCliffe
      Hi,
      I have a number of topics comprising of simply a title and an informative image. These topics are launched as popups on the hot text (so *save the file* would launch a picture of the Save item on the file menu for example). I'm having two small difficulties which I'm almost sure are finger trouble.

      1) The style of the popup is identical to that for a normal hyperlink. I'm guessing that this is because (as I'm using images) I am launching a topic in the popup window. Is there any way a popup can have a different style - I'm looking it to be identical except with a dotted underline rather than a solid underline. If so, would someone be so kind as to paste in the relevant CSS block. Thanks.

      2) The autosized popup appears far to wide. While I can resize manually I would have thought I could constrain the width of the topic itself via the bar at the top of the topic. This, however, doesn't work (in fact makes the popup window even larger). Am I missing something ??

      Many Thanks,
      Iain.
        • 1. Re: Popup Style Help Request
          Peter Grainge Adobe Community Professional (Moderator)
          The normal code for a link will be something like this except note where I have added class =popup:

          <p>This is a <a HREF="javascript:BSSCPopup('New_Topic.htm');"
          id=a1 class=popup>Popup link</a><!--begin!kadov{{--><script type="text/javascript"
          language=JavaScript1.2><!--
          kadovFilePopupInit('a1');
          //--></script><!--}}end!kadov--></p>

          In your style sheet you need to specify the what you want for ordinary and popup links. The order is important.

          A:link

          A:visited

          A:hover

          A.popup:link

          A.popup:visited

          A.popup:hover

          The definition to just change the text color will be something like

          A.popup:link {color:rgb(95, 45, 145);}

          • 2. Re: Popup Style Help Request
            IainCliffe Level 1
            Thanks for that !

            Sadly (probably due to my HTML knowledge or lack of) I'm not getting very far at all. I've added some skeleton classes to default.css simply to see if anything changes and it's not :-(. Can anyone advise what I might be doing wrong here ? - the final goal is to have normal hyperlinks exactly as they are just now but with popup links to have a dotted underline instead of a solid underline.

            A.link {
            font-size: 10pt;
            font-family: Arial, sans-serif;
            line-height: Normal;
            }

            A.visited {
            font-size: 10pt;
            font-family: Arial, sans-serif;
            line-height: Normal;
            }

            A.hover {
            font-size: 10pt;
            font-family: Arial, sans-serif;
            line-height: Normal;
            }

            A.popup.link {
            font-size: 10pt;
            font-family: Arial, sans-serif;
            line-height: Normal;
            border-bottom: 1px dotted
            }
            A.popup.visited{
            font-size: 10pt;
            font-family: Arial, sans-serif;
            line-height: Normal;
            border-bottom: 1px dotted
            }
            A.popup.hover{
            font-size: 10pt;
            font-family: Arial, sans-serif;
            line-height: Normal;
            border-bottom: 1px dotted
            }
            • 3. Re: Popup Style Help Request
              Peter Grainge Adobe Community Professional (Moderator)
              I assume you have checked the topic is using the default.css stylesheet.

              Add some pretty wild colours to those definitions as that is the quickest way to see that they are taking effect.

              Create a topic with various links and make sure you never click one of them so that you can see the unvisited effect.

              At a quick glance dashed lines don't seem to be an option for the text decoration but this seems to work

              A.popup:link {color:green; text-decoration: none; border-bottom: 1px dashed;}