Get Rid of the Text-as-Image Export

For the life of me I can't figure out why Adobe would add such an irritating feature and not allow it to be toggled.
Come on Adobe developers, exercise some intelligence here.
I am aware there are potential licensing issues but let's review:
You cannot use system fonts that are not considered 'web safe' without them exporting as image, even though 99% of Windows users will have them and Mac users will have no trouble with them being substituted.
It makes manual CSS font stacks useless since Muse abandons this possibility when it goes the image route.
There are plenty of TypeKit fonts available through Creative Cloud that are accessible when synced, yet many of them are not in Muse's library so will also force image export. If it synced through CC and is licensed for web use then there are no licensing issues. Export as text and let the user drop in their TypeKit code.
Many users will use Google/Typekit web fonts perfectly fine but downloading and self-hosting the font files just to use them in Muse is a waste of time and not necessarily possible.
The workaround is to use a completely different font, thus upsetting the page layout, just so that it exports as text and a simple find and replace can be used to change font-family.
I can't even use Open Sans without it exporting as an image. Seriously? Likely the most widespread web font in existence and you force an image export. That's just bad.
Please get rid of this... allow users to turn image exports off and handle font styling ourselves or remove it entirely.
It was fine beforehand when you could use any font installed locally, including CC synced Typekit fonts, with only the Muse fonts triggering placing of a Muse Typekit code.
This resulted in users having to intervene post-export to have web fonts render properly if they weren't available through Muse which was perfectly reasonable.

Feature Requests
1. Provide access to the complete Typekit font offering.
2. Provide the ability to define and use your own font fallback stacks (aka Web Safe font definitions)
Possible Misconceptions
1. Open Sans isn't readily available as a Web Font in Muse
2. We've changed something in the generated code that makes it more difficult to manually edit the output.
You're correct. The paid Typekit library is not currently easily available from within Muse. We continue to lobby the Typekit team for changes required to enable paid Typekit in a seamless UI within Muse, but thus far we have yet to reach the top of their development team's priority list.
If you're familiar with font stacks you're aware there are very few truly "web safe" fonts. In most cases using a "web safe" font means settling for one of a handful of fonts depending on the OS or device being used to view your site. That font variation means variations in the line breaks within text frames and thus changes to text frame heights which are likely to result in changes to the overall layout of your pages. In most cases a Web Font is a much better choice if the visual fidelity of your design is an important part of your site. It's unlikely Muse will provide the ability to define arbitrary font stacks. Given the target market of Muse and our small development team, future additional font support will likely continue to be in the area of Web Fonts.
If you select "Add Web Fonts" in the Web Fonts section of the Fonts menu you can browser a library of 500+ font families that are provided for free and hosted on Adobe's Typekit service. This set of free fonts is marketed as "Edge Web Fonts." The Edge Web Fonts offering started as the set of public domain fonts hosted by Google with a small number removed due to quality issues and a small number added from the set of fonts Adobe wholly owns. The majority of the ~650 web fonts now hosted by Google are part of the 500+ web fonts readily available within Muse.
Open Sans is one of the font families in the Edge Web Fonts library. Go to "Add Web Fonts" in the Fonts menu, type "open" in the search field of the Web Fonts dialog, click on Open Sans and it will be added to the Web Fonts section of your Muse Font menu for easy future use. On your site the font will be provided via Typekit without any page view limits or requirement to be a Creative Cloud subscriber.
To my knowledge there have not been any changes in Muse output that should impact your ability to use a Web Safe font in Design view, then alter the generated code to replace that font with a font from some other source (i.e. paid Typekit, Fonts.com hosting, etc.). It's never been possible to use a System Font in Muse and then alter the output code to replace the font, since the output for a text frame that uses a System Font has always been an image.
Thank you for taking the time to voice your opinions and provide feature requests.

Similar Messages

  • I upgraded pages.  Now when I begin a new document I automatically have a text box.  How do I get rid of the text box so that it does not automatically appear.  What settings do I need to change?

    I upgraded pages.  Now when I begin a new document I automatically have a text box.  How do I get rid of the text box so that it does not automatically appear.  What settings do I need to change?

    Perhaps you are loading a template that has a text block already on it.
    You might try the blank template option and set that as your go to template in your preferences

  • I just loaded the 'lion' now my mail takes a new life....how do i move the reading panel to the bottom / also how do i get rid of the text/content under each mail..two simple things not sure obvious on this version !!!

    i just loaded the 'lion' now my mail takes a new life....how do i move the reading panel to the bottom / also how do i get rid of the text/content under each mail..two simple things not sure obvious on this version !!!

             

  • I have text appearing whenever I call up a new email format and I want to get rid of the text. Following is DOM source of selection : html id="compArea_test_i516_5171290607393724"

    I have text appearing whenever I call up a new email format. I want to get rid of the text. Following is DOM source of selection : <html id="compArea_test_i516_5171290607393724"><head> <title></title> <meta http-equiv="Content-type" content="text/html;charset=utf-8"> <style type="text/css"> body { background-color:transparent;} </style> <style type="text/css" id="styleSheet_521"> P {margin:0px;} span.mark {background:url(http://l.yimg.com/a/i/us/pim/dclient/cg504_5/img/md5/bfe4082db3a892f1c16cb9b5cf7cef98_1.png) bottom repeat-x;} span.unmark {color:"";} </style></head><body style="font-family: times new roman,new york,times,serif; font-size: 12pt; background-color: white; border: medium none; color: rgb(0, 0, 0);" vlink="#996699" alink="#0066cc" link="#0066cc"><br><div>&nbsp;</div>Name..<br>Sex...<br>Location...<div><br></div> </body></html> in English

    CSS:
    #navigation {margin-top: -3px;}
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists 
    http://alt-web.com/
    http://twitter.com/altweb

  • How to get rid of the large slideshow images in Web gallery (CS4)

    Here is the deal.
    I've created a flash web gallery/ But the new CS4 has the option for slideshow with this flash stuff. CS3 use to create thumbnail and large images folders. The new one creates 3 folders: 1. thumbnails, 2, medium images, 3 large images (for the slideshow). That's great, until I go to upload process. I have pretty limited space. So I'm ready to get rid of the slideshow option, but there's no such option in gallery creating process. The only solution I have in mind is to redirect slideshow images to the medium size folder. But thats pretty annoying process during the creation of each gallery.
    So does anyone has an idea how to skip the slideshow creation or another method to skip creating 3 folders, all with the same images?

    Extend DefaultListCellRenderer, not BasicComboboxRenderer. Here's an example that wraps the original renderer and uses it where possible (i.e. instanceof JLabel). No 'white square'.import java.awt.BorderLayout;
    import java.awt.Component;
    import java.text.DecimalFormat;
    import javax.swing.*;
    public class ComboRendererTest {
      public static void main(String[] args) throws Exception {
        UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
        SwingUtilities.invokeLater(new Runnable() {
          public void run() {
            new ComboRendererTest().makeUI();
      public void makeUI() {
        JComboBox comboBox = new JComboBox();
        comboBox.addItem(new Double(1));
        comboBox.addItem(new Double(2.25));
        comboBox.addItem(new Double(3.5));
        comboBox.setRenderer(new TwoDecimalRenderer(comboBox.getRenderer()));
        JFrame frame = new JFrame();
        frame.add(comboBox, BorderLayout.NORTH);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setSize(200, 200);
        frame.setLocationRelativeTo(null);
        frame.setVisible(true);
    class TwoDecimalRenderer extends DefaultListCellRenderer {
      private ListCellRenderer defaultRenderer;
      private static final DecimalFormat FORMAT = new DecimalFormat("#.00");
      public TwoDecimalRenderer(ListCellRenderer defaultRenderer) {
        this.defaultRenderer = defaultRenderer;
      @Override
      public Component getListCellRendererComponent(JList list, Object value,
              int index, boolean isSelected, boolean cellHasFocus) {
        Component c = defaultRenderer.getListCellRendererComponent(list, value,
                index, isSelected, cellHasFocus);
        if (c instanceof JLabel) {
          ((JLabel) c).setText(FORMAT.format(value));
        } else {
          c = super.getListCellRendererComponent(list, value,
                  index, isSelected, cellHasFocus);
          setText(FORMAT.format(value));
        return c;
    }db

  • LG Lucid 3: How can I get rid of the text message indicator? It says I have a text message, but I do not.

    I have a new LG Lucid 3 and the text message indicator says I have a new message, but I do not. Messaging is empty when I click on it. How can I get rid of the "1" indicator? I tried turning the phone on and off and that did not work.

    Thanks for trying, Anzivina! You've done some strong troubleshooting. Although I do wish it had resolved this matter, I believe we still have options. You've indicated that  you've done a factory reset. Can you walk me through the steps you took to get there? Also, after the factory reset, how long before this message indicator appeared again? Was it before or after you restored all your personal data?
    DionM_VZW
    Follow us on Twitter @VZWSupport
    If my response answered your question please click the "Correct Answer" button under my response. This ensures others can benefit from our conversation. Thanks in advance for your help with this!!

  • How do I get rid of the annoying Improve Images tooltip?

    The improve images tooltip is sooo annoying!
    How do I get rid of it?

    Hi gdav, it depends. If you don't mind having the images compressed and just want to get rid of the messages, you can try to filter or block the script that generates the tooltips. If you want to get the original images, you need to figure out whether you can change the settings in your connection software.
    If you search on the following page for AdBlock, you will see a suggestion for one way to filter the script. Note that each ISP might have a different name and address for its script, so you probably need to take a peek at the source code (Ctrl+u) for a simple page, or a few different pages, to spot the one that's coming from your ISP's server.
    [http://social.msdn.microsoft.com/forums/en-US/iewebdevelopment/thread/3e265aaa-6563-41e8-adf5-9efb192ecbee/ SHIFT+R improves image quality]

  • Getting rid of the date stamp in "Export Waveform to Spreadsheet.vi"

    Probably a very simple and stupid question, but how do I get rid of the date stamp while keeping the time stamp in the "Export Waveform to Spreadsheet File.vi"? I may have found the place on the block diagram, but I'm not entirely clear how that vi works.
    Thanks,
    Joe

    Never mind, I've figured it out.
    For the curious, it was a matter of altering the "Waveform to Date Time String.vi" in the "Export Waveform to Spreadsheet.vi". All you need to do is stop it from concatenating the time string with the date string in that particular VI. I hope this helps some of my fellow newbies.
    Sorry to waste the rest of your time.
    Thanks,
    Joe

  • How to get rid of the text in the bookmark toolbar. I want icons only like in the smart bar.

    Have gone to view, toolbars, checked icons and the text still shows up. How do I get rid on it on the toolbar, do not want text,

    *Incredible Bookmarks: https://addons.mozilla.org/firefox/addon/50722
    You can also do this with code in userChrome.css
    Add this code to [http://kb.mozillazine.org/UserChrome.css userChrome.css] below the @namespace line.
    <pre><nowiki>@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */
    #personal-bookmarks .toolbarbutton-text { display:none!important; }
    </nowiki></pre>
    * http://kb.mozillazine.org/Editing_configuration
    * ChromEdit Plus: http://webdesigns.ms11.net/chromeditp.html

  • How do I get rid of the text boxes in a PDF created in FormsCental when I print the PDF?

    I just started working with Acrobat XI Pro and use to use LiveCycle Designer 9 to create forms. The thing I'm wanting to do is to not have the text response boxes appear in the PDF when it is printed out. I am getting very few options in FormsCentral and it might be in there but I haven't been able to find it just yet. Anyone know how to solve what I'm asking or am I asking to much? Thanks in advance.

    [discussion moved to FormsCentral forum]

  • After the new update, all my apps have their name underneath the logo which is annoying. How do I get rid of the text?

    Since updating to the new 7.1.1, all my apps now have text underneath which I don't like. How do I remove the text and just a keep the app logo?

    all ios versions ever have had text underneath the icon displaying the app name
    http://www.datas-recovery.com/upfiles/fck/update-ios-7-iphone(1).jpg
    here is ios7.0 and ios6 side by side and both have app name under them

  • How do I get rid of the text messages on my phone for good?

    After I delete the texts I can't recieve incoming messages? I can only recieve those messages after I restart my iphone but then all the older messages I had just deleted come back.

    If you wish to delete a whole conversation, then you simply go to the left side of the conversasions panel and slide your finger to the left. If you wish to delete only a few, then hold the bubble until it has a few options come up, chose more than choose delete. That wil not delete the text from the other persons phone, you are not able to do that wothout taking there phone. Hope that helped

  • How can I get rid of the text and only have icons in the bookmarkfield?

    Earlier the bookmarkfied only showed icons but after the upgrade they show icons and text. How can I get back to only icons so I can have the good old overwiw back?

    umparrothead wrote:
    Test this by going to that folder with both in it and click View/Show View Options. In there, de-check "Show icon preview", and you should see the bordered icons go to default file type icons and the unframed ones remain the same. I honestly don't know how to re-embed the image in the icon data, as it does not play well with the typical paste in on Get Info. Hope this gets a solution rolling, because it's something that's bothered me as well.
    Thanks umparrothead. Yeah, I see what you're saying. The copy and paste into the "get info," is buggy, but it does actually work. I have noticed this when trying to change the icon on an .avi file. The copy paste in "get info," initially shows the paste, but it's not reflected immediately in the files icon in the finder window. I have gotten it to show up as the files icon by moving the file to another folder, (in list view), and then... opening then and closing the folder.
    See here the border on the one file is gone!!
    This opening and closing does not work in the folder the file is in. It only works after moving it to another folder and then opening and closing?!? I think it has something to do with quickview trying to over-ride our choice of icon for it's own choice, whether it be a poster frame on a movie file, or in this case it's own "bordered" view of the photo inside. I imagine it might also show up after a restart, but that is surely far more extreme than the dreaded move file/open folder/close folder/open folder/move file back, trick. uuugghhh...
    This copy paste thing is no solution to be sure. But it does work. I just wish there were some kind of script so I can run it on hundreds of photos at a time...
    Any one else out there with any ideas?!?

  • How can I get rid of the earth looking image from nav bar?

    Hi, folks:
    I tried to replace it with another image, by going to folder-> edit-> image tab-> Title image and Rollover image, I uploaded both images, but the nav bar still shows a blue picture of earth.
    null

    In the same page click on the Nav Bar tab
    Click on the nav bar properties <name> link
    click on the Style tab in the nav bar properties
    click on the style properties <name> link
    choose the background image element and remove the background image(which happens to be the earth img by default)
    you can control the rest of the nav bar style elements here
    Hope this helps

  • How do I get rid of the underline in text - tried   style decoration:none

    I am trying to get rid of the underline on some text which is not a link. I have tried putting style decoration: none in various places and I still can't get rid of it.
    Any ideas?
    Here's my HTML
    <!doctype html>
    <div id="businesscircleportfolio">
      <html>
      <head>
      <meta charset="UTF-8">
      <title>Untitled Document</title>
      <link href="style.css" rel="stylesheet" type="text/css">
      <style type="text/css">
    <script src="respond.min.js"></script>
    <script type="text/javascript">
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    /* I have no idea what this code below does but Dreamweaver randomly put it in*/
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    </script>
    /* This is code I put in that I found on the web that said it would work but doesn't*/
    <STYLE>
    <!--
    A{text-decoration:none}
    -->
    </STYLE>
    /* end of that code*/
      </style>
      </head>
      <body>
      <div class="portfoliolinkbackground"><font face= "arial" color= "white" font size="4" > Home </font><a id="portfoliolinkclear" href="index.html"></a>
      </div>
        <div id="adtitletest"><img src="images/adtitlewithwdandgraphics.png" width="700" height="220" alt=""/></div>
      <div id="businesslinkport"><font face= "arial" color= "white" font size="3" >Portfolio</font></div>
        <a id="businesslinkclear" href="portfolio.html" style="text-decoration:none"></div>
        <div id="classicallinkport"><font face= "arial" color= "white" font size="3" >Client</font></div>
       <a id="classicallinkclear" href="client.html" style="text-decoration:none"> </div>
         <div id="hiphoplinkport"><font face= "arial" color= "white" font size="3" >Contact</font></div>
         <a id="hiphoplinkclear" href="contactform.html" style="text-decoration:none"> </div>
         <div id="rocklinkport"><font face= "arial" color= "white" font size="3" >Pricing</font></div>
        <a id="rocklinkclear" href="price.html" style="text-decoration:none"> </div>
        <div id="facebook"><a href="https://www.facebook.com/paul.kirsch.399/about" title="facebook" target="new">
          <p><img src="images/facebookdkblue.png" width= "95" height="60" alt=""></p></div>
      <div id="linkedin"><a href="https://www.linkedin.com/profile/view?id=30306216&trk=nav_responsive_tab_profile" title="linkedin" target="new"><img src="images/linkedin.jpg" width="55" height="52" alt""></div>
      <div id="twitter">
        <img src="images/twitter.png" width="58" height="58" alt ""></div>
        </div>
        <div class="prices"> <font size="3" color=#b3f5f1 font face="helvetica" style= "text-decoration:none">
    Graphics and Web Service Prices<br>
    <ul>
    <li>Custom Web Site Graphics $350</li><p></p>
    <li>Custom Logo $125</li><p></p>
    <li>Custom website ($40/hr - price dependent on complexity and deadline)</li><p></p>
    <li>Five-Page Wordpress Brochure Web Site you can update yourself  $350</li><p></p>
    <li>Each additional page from the same template $40/page</li><p></p>
    <li>interactive forms - (surveys etc.) $250+ </li><p></p>
    <li>Site maintenance (we update your site) $360/yr </li><p></p>
    <li>Rebuild of existing site $40/hour </li>
    </ul></div>   </font></div>    
       </div>
        <p> </p>
        <p> </p>
        <p> </p>
      </body>
      </html>
    </div>
    /* I have 60 tons of CSS much of it junk. It is below*/
    charset "UTF-8";
    /* CSS Document */
    body {
      background-color: rgba(30,30,30,1);
      margin-left: 0px;
      left: -130px;
      margin-top: 50px;
      line-height: 5px;
      position: static;
      padding-top: 5px;
      height: auto;
    #div1 {
      margin-top: -40px;
      margin-left: 275px;
      margin-right: auto;
      position: relative;
    #div9 {
      margin-top: -15px;
      margin-left: 220px;
      margin-right: auto;
      position: relative;
      float: left;
    #adtitle:
    margin-left: 500px;
    #div2 {
      display: block;
      margin-top: 100px;
      margin-left: 450px;
      margin-right: auto;
      position: relative;
      border-radius: 100% / 50%;
    .meatsunsetshadow {
      margin-top: -120px;
      margin-left: 390px;
      width: 500px;
      height: 700px;
      display: block;
      background-image: url("images/me_atsunsetbackground4.JPG");
      background-size: 500px 700px;
      -webkit-box-shadow: inset 1px 2px 23px #FFF;
      box-shadow: inset -5px 30px 25px #000000;
      -webkit-border-radius: 75%;
      border-radius: 75%;
      margin-bottom: -750px;
      top: -60px;
    #clear-oval {
    img src: url(clear-oval.png);
    margin-top: -100px;
    margin-left: 100px;
    -webkit-border-radius: 75%;
      border-radius: 75%;
    #abouttext {
    margin-top:-165px;
    margin-left: 40px;
    #shadow a {
        display:block;
        width:900px;
        height:700px;
    .box-shad {
      margin-top: 100px;
      margin-left: -188px;
      width: 800px;
      height: 600px;
      display: block;
      background-image: url("big-tree-final1.jpg");
      background-size: 800px 600px;
      -webkit-box-shadow: 15px 15px 15px #000000 inset;
      box-shadow: 15px 15px 15px #000000 inset;
      -webkit-border-radius: 50%;
      border-radius: 50%;
      position: static;
    .box-shad a {
        display:block;
        width:900px;
        height:700px;
    #portfolio {
      width: 100px;
      height: 100px;
      margin-top: 610px;
      margin-right: 200px;
      margin-left: -75px;
      margin-bottom: 50px;
      border-radius: 75%;
      -webkit-border-radius: 75% 75%;
      background: rgb(92,87,58);
      position: relative;
      top: -900px;
      justify-content: center;
      align-content: center;
      text-align: 80px;
      text-indent: 77px;
      text-align-vertical: -5px;
    #portfolioprice {
      width: 100px;
      height: 100px;
      margin-top: 256px;
      margin-right: 200px;
      margin-left: -74px;
      margin-bottom: 50px;
      border-radius: 75%;
      -webkit-border-radius: 75% 75%;
      background: rgb(119,87,35);
      position: relative;
      top: -800px;
      justify-content: center;
      align-content: center;
      text-align: center;
    #portfolioclassical {
      width: 100px;
      height: 100px;
      margin-top: -185px;
      margin-right: 200px;
      margin-left: -30px;
      margin-bottom: 250px;
      border-radius: 75%;
      -webkit-border-radius: 75% 75%;
      background: rgb(119,87,35);
      position: relative;
      top: -800px;
      justify-content: center;
      align-content: center;
      text-align: center;
      text-indent: 60px;
    #portfolio2 {
      width: 100px;
      height: 100px;
      margin-top: -200px;
      margin-right: 200px;
      margin-left: -50px;
      margin-bottom: 50px;
      border-radius: 75%;
      -webkit-border-radius: 75% 75%;
      background: rgb(119,87,35);
      position: relative;
      top: -800px;
      justify-content: center;
      align-content: center;
      text-align: center;
    #businesspageportfolio {
      /*this covers the circular portfolio link for hiphop and business*/
      width: 100px;
      height: 100px;
      margin-top: 700px;
      margin-right: 200px;
      margin-left: 225px;
      margin-bottom: 50px;
      border-radius: 75%;
      -webkit-border-radius: 75% 75%;
      background: rgb(92,87,58);
      position: relative;
      top: -800px;
      display: flex;
      justify-content: center;
      align-content: center;
      text-align: center;
      align-items: center;
      text-indent: 77px;
    #textforbusiness{
      position top: -300px;
      margin-top: -840px;
      margin-left: 230px;
      margin-below: -50px;
      margin-bottom: -150px;
    .wrap {
    transition: -webkit-transition 1s ease-in;
    transition-delay: 1s, 2s;
    transition-duration: 1s .5s;
    .wrap:hover {
    -webkit-transform: translateZ(-200px);
    #portfoliobusiness {
      /*This is the circle for business on the portfolio page */
      width: 100px;
      height: 100px;
      margin-top: 262px;
      margin-right: 200px;
      margin-left: 176px;
      margin-bottom: 50px;
      border-radius: 75%;
      -webkit-border-radius: 75% 75%;
      background: rgb(202,177,136);
      position: relative;
      top: -35px;
      justify-content: center;
      align-content: center;
      text-align: center;
      text-indent: 77px;
    #spacertwo {
    #portfoliohome {
      /*this is the circle on the portfolio page for home */
      width: 100px;
      height: 100px;
      margin-top: 76px;
      margin-right: 150px;
      margin-left: -398px;
      margin-bottom: 50px;
      border-radius: 75%;
      -webkit-border-radius: 75% 75%;
      background: rgb(204,197,181);
      position: relative;
      top: -420px;
      justify-content: center;
      align-content: center;
      text-align: center;
      text-indent: 77px;
      line-height: 20px;
    #clearcircleportfolio {
      /* this is in the index page for portfolio link*/
    img src: url(images/clearcircle.png);
      width: 100px;
      height: 100px;
      margin-top: -102px;
      margin-left: -175px;
      left: -60px;
      z-index: 10;
      top: -60px;
    #clearcirlehomeportfoliopage {
      position: absolute;
      top: 8px;
      left: 10px;
      width: 700px;
      height: 900px;
      background-color: green;
    #clearcirclebusiness {
    img src: url(images/findme.png);
      width: 100px;
      height: 100px;
      margin-top: -192px;
      margin-left: -80px;
      margin-bottom: -90px;
      padding-bottom: -90px;
      -webkit-border-radius: 100%;
      border-radius: 50%;
      -webkit-border-radius: 50% 50%;
      left: 40px;
    #clearcircleclient {
    img src: url(images/findme.png);
      width: 100px;
      height: 100px;
      margin-top: -110px;
      margin-left: -00px;
      margin-bottom: -98px;
      padding-bottom: -90px;
      -webkit-border-radius: 100%;
      border-radius: 50%;
      -webkit-border-radius: 50% 50%;
      z-index: 9;
      top: 80px;
    #clientneeds {
      width: 100px;
      height: 100px;
      margin-top: -250px;
      margin-right: 200px;
      margin-left: 70px;
      margin-bottom: 0px;
      border-radius: 75%;
      -webkit-border-radius: 75% 75%;
      background: rgb(138,116,79);
      position: relative;
      top: -800px;
      text-align: 200px;
      text-indent: 77px;
    #contact {
      width: 100px;
      height: 100px;
      margin-top: -100px;
      margin-right: 200px;
      margin-left: 225px;
      margin-bottom: 0px;
      border-radius: 75%;
      -webkit-border-radius: 75% 75%;
      background: rgb(96,89,83);
      position: relative;
      top: -800px;
      text-indent: 113px;
      text-align: center;
      line-height: 55px;
    /*cleaercircle contact is the index page clear circle for contact-*/
    #clearcirclecontact {
    img src: url(images/clearcircle.png);
      width: 100px;
      height: 100px;
      margin-bottom: -90px;
      padding-bottom: -90px;
      -webkit-border-radius: 100%;
      border-radius: 50%;
      -webkit-border-radius: 50% 50%;
      z-index: 999;
      margin-left: -110px;
      margin-top: -121px;
    /*pricing is the price tan circle on index page*/
    #pricing {
      width:100px;
      height: 100px;
      margin-top: -100px;
      margin-right: 200px;
      margin-left: 380px;
      margin-bottom: 0px;
      border-radius: 75%;
      -webkit-border-radius: 75% 75%;
      background: rgb(180,168,144);
      position: relative;
      top: -800px;
      text-align: center;
      text-indent: 115px;
      line-height: 55px;
    /*repeating the above on portfolio page*/
    #business {
      width: 100px;
      height: 100px;
      margin-top: -128px;
      margin-right: 50px;
      margin-left: 250px;
      margin-bottom: 0px;
      border-radius: 75%;
      -webkit-border-radius: 75% 75%;
      background: white;
      position: relative;
      top: 200px;
      justify-content:center;
        align-content:center;
      text-align: center;
      text-indent: 90px;
    #classical {
      width: 100px;
      height: 100px;
      margin-top: -235px;
      margin-right: 200px;
      margin-left: 345px;
      margin-bottom: 0px;
      border-radius: 75%;
      -webkit-border-radius: 75% 75%;
      background: rgb(215,170,38);
      position: relative;
      top: 50px;
      text-align: center;
      text-indent: 77px;
    #hiphop {
      width: 100px;
      height: 100px;
      margin-top: -250px;
      margin-right: 200px;
      margin-left:500px;
      margin-bottom: 0px;
      border-radius: 75%;
      -webkit-border-radius: 75% 75%;
      background: rgb(213,164,97);
      position: relative;
      top: 200px;
      display: flex;
      text-align: center;
      text-indent: 115px;
      justify-content: center;
      align-items: center;
      line-height: 50px;
    #clearcirclehiphop {
    img src: url(images/clearcircle.png);
    width: 50px;
    height: 50px;
    margin-top: -270px;
    margin-left: -150px;
    margin-bottom: 90px;
    padding-bottom: 90px;
    -webkit-border-radius: 100%;
      border-radius: 50%;
      -webkit-border-radius: 50% 50%;
      z-index: 9;
    #clearcirclebusiness {
    img src: url(images/clearcircle.png);
    width: 50px;
    height: 50px;
    margin-top: -620px;
    margin-left: -450px;
    margin-bottom: 90px;
    -webkit-border-radius: 100%;
      border-radius: 50%;
      -webkit-border-radius: 50% 50%;
      z-index: 9;
    #rock {
      width: 100px;
      height: 100px;
      margin-top: -280px;
      margin-right: 50px;
      margin-left: 155px;
      margin-bottom: 0px;
      border-radius: 75%;
      -webkit-border-radius: 75% 75%;
      background: rgb(119, 87, 35);
      position: relative;
      top: 200px;
      text-align: center;
    .vcenter{
        width: 100px;
        height: 100px;
      vertical-align: middle;
    .vcenter:before {
      content: " ";
      display: inline-block;
      height: 100%;
      vertical-align: middle;
      float: left;
    .vcenter :first-child {
      display: inline-block;
      vertical-align: middle;
      left: -40px;
      text-align: center;
      top: -2px;
    #spacerhh {
    width: 200px;
    height: -80px;
    #spacerclassical {
    width: 200px;
    height: 50px;
    #spacerbusiness {
    width: 200px;
    height: 250px;
    #div22 {
      margin-top: 80px;
      margin-left: 200px;
    #div23{
    margin-top: -30px;
    #bustext {
      text-align: left
    Ul {
      list-style-type: square;
      margin-bottom: -29px;
    #clearcircleclassical {
    img src: url(images/findme.png);
    width: 50px;
    height: 50px;
    margin-top: -95px;
    margin-left: 0px;
    margin-bottom: -90px;
    -webkit-border-radius: 100%;
      border-radius: 50%;
      -webkit-border-radius: 50% 50%;
    #clearcirclebusiness {
    img src: url(images/clearcircle.png);
    width: 50px;
    height: 50px;
    margin-top: -120px;
    margin-left: 0px;
    margin-bottom: -90px;
    -webkit-border-radius: 100%;
      border-radius: 50%;
      -webkit-border-radius: 50% 50%;
    #clearcirclepricing {
      image src: url(images/findme.png);
      width: 600px;
      height: 600px;
      margin-top: -140px;
      margin-left: 50px;
    .mytext {
        width: 500px;
      height: 100px;
    .mytext1 {
        width: 500px;
      height: 50px;
    #facebook {
      margin-left: 170px;
      margin-top: -10px;
    #facebookpos {
      margin-left: -20px;
      margin-top: -670px;
      width: 900px;
      height: 900px;
    #linkedin {
      margin-left: 190px;
      margin-top: 20px;
      left: -150px;
    #linkedinposindex {
      margin-left: -20px;
      margin-top: 0px;
    #twitter {
      margin-left: 190px;
      margin-top: 20px;
    #twitterposindex {
    margin-left: -345px;
    margin-top: 5px;
    .prices {
      font-color: white;
      font-size: 14px;
      font-type: helvetica;
      margin-top: -180px;
      margin-left: 350px;
      z-index: 10;
      border: none;
      text-decoration: none;
    #iconsforpricing {
    margin-top: 950px;
    #businesslist {
    width: 600px;
    height: 800px;
    margin-top: 100px;
    #clearovalfortree {
      margin-left: -352px
    #facebookposprice {
      margin-top: -360px;
      margin-left: 30px;
    #linkedinposprice {
        margin-top: 0px;
      margin-left: 30px;
    #twitterposprice {
        margin-top: 0px;
      margin-left: -305px;
    #pricehome {
      width: 100px;
      height: 100px;
      margin-top: -0px;
      margin-right: 150px;
      margin-left: -275px;
      margin-bottom: 50px;
      border-radius: 75%;
      -webkit-border-radius: 75% 75%;
      background: rgb(204,197,181);
      position: relative;
      top: -420px;
      justify-content: center;
      align-content: center;
      text-align: center;
    #priceportfolio {
      width: 100px;
      height: 100px;
      margin-top: 1100px;
      margin-right: 200px;
      margin-left: 175px;
      margin-bottom: 50px;
      border-radius: 75%;
      -webkit-border-radius: 75% 75%;
      background: rgb(92,87,58);
      position: relative;
      top: -900px;
      justify-content: center;
      align-content: center;
      text-align: center;
    #priceclient {
      width: 100px;
      height: 100px;
      margin-top: -150px;
      margin-right: 200px;
      margin-left: 330px;
      margin-bottom: 50px;
      border-radius: 75%;
      -webkit-border-radius: 75% 75%;
      background: rgb(138,116,79);
      position: relative;
      top: -900px;
      justify-content: center;
      align-content: center;
      text-align: center;
    #pricecontact {
      width: 100px;
      height: 100px;
      margin-top: -150px;
      margin-right: 200px;
      margin-left: 490px;
      margin-bottom: 50px;
      border-radius: 75%;
      -webkit-border-radius: 75% 75%;
      background: rgb(96,89,83);
      position: relative;
      top: -900px;
      justify-content: center;
      align-content: center;
      text-align: center;
    #priceprice {
      width: 100px;
      height: 100px;
      margin-top: -150px;
      margin-right: 200px;
      margin-left: 655px;
      margin-bottom: 50px;
      border-radius: 75%;
      -webkit-border-radius: 75% 75%;
      background: rgb(180,168,144);
      position: relative;
      top: -900px;
      justify-content: center;
      align-content: center;
      text-align: center;
    #test {
      width: 800px;
      height: 600px
      position: relative;
      margin-left: 262px;
      margin-top: 10px;
    #test img {
      width: 800px;
      height: 600px;
      position: absolute;
      left: -487px;
      top: 113px;
      -webkit-transition: opacity 1s ease-in-out;
      -moz-transition: opacity 1s ease-in-out;
      -o-transition: opacity 1s ease-in-out;
      transition: opacity 1s ease-in-out;
      margin-left: -80px;
    #test img.top:hover {
      opacity: 0;
    #footercontact {
    width 500px;
      top: 700px;
      margin-top: 1000px;
      width: 400px;
    #wilsontext {
      width: 300px;
      height: 100px;
      left: -10px;
      line-height:.45em;
    #clienthome {
      width: 100px;
      height: 100px;
      margin-top: 110px;
      margin-right: 150px;
      margin-left: -375px;
      margin-bottom: 50px;
      border-radius: 75%;
      -webkit-border-radius: 75% 75%;
      background: rgb(204,197,181);
      position: relative;
      top: -420px;
      justify-content: center;
      align-content: center;
      text-align: center;
    #clearcircle {
    img src: url(images/findme.png);
      width: 50px;
      height: 50px;
      margin-top: -122px;
      margin-left: -250px;
      margin-bottom: -90px;
      padding-bottom: -90px;
      -webkit-border-radius: 100%;
      border-radius: 50%;
      -webkit-border-radius: 50% 50%;
      left: -50px;
    #angelface {
      margin-top: -160px;
      margin-left: 0px;
    #clientlinkportfolio {
    width: 100px;
      height: 100px;
      margin-top: 860px;
      margin-right: 200px;
      margin-left: 270px;
      margin-bottom: 50px;
      border-radius: 75%;
      -webkit-border-radius: 75% 75%;
      background: rgb(92,87,58);
      position: relative;
      top: -900px;
      justify-content: center;
      align-content: center;
      text-align: center;
      text-indent: 77px;
    #clientlinkclient{
    width:100px;
      height: 100px;
      margin-top: -250px;
      margin-right: 200px;
      margin-left: 400px;
      margin-bottom: 0px;
      border-radius: 75%;
      -webkit-border-radius: 75% 75%;
      background: rgb(138,116,79);
      position: relative;
      top: -800px;
      text-align: center;
      text-indent: 77px;
    #clientlinkcontact {
      width:100px;
      height: 100px;
      margin-top: -246px;
      margin-right: 200px;
      margin-left: 520px;
      margin-bottom: 0px;
      border-radius: 75%;
      -webkit-border-radius: 75% 75%;
      background: rgb(96,89,83);
      position: relative;
      top: -800px;
      text-align: center;
      text-indent: 112px;
      line-height: 45px;
    #clientlinkprice {
    width: 100px;
      height: 100px;
      margin-top: -246px;
      margin-right: 200px;
      margin-left: 640px;
      margin-bottom: 50px;
      border-radius: 75%;
      -webkit-border-radius: 75% 75%;
      background: rgb(119,87,35);
      position: relative;
      top: -800px;
      justify-content: center;
      align-content: center;
      text-align: center;
      text-indent: 115px;
      line-height: 45px;
    #checklist {
      margin-left: -120px;
      left: -320px;
    .portfoliolinkbackground {
      background-color: rgba(92,87,58,1);
      background-position: 50px 25px;
      height: 100px;
      width: 100px;
      border-radius: 75%;
      -webkit-border-radius: 75% 75%;
      margin-left: 150px;
      position: relative;
      max-width: 100px;
      max-height: 100px;
      line-height: 20px;
      justify-content: center;
      align-content: center;
      text-align: center;
      text-indent: -1px;
      line-height: 99px;
    #portfoliolinkclear {
      position: absolute;
      top: 8px;
      left: 10px;
      width: 100px;
      height: 100px;
      background-color: transparent;
    #adtitletest {
      height: 200px;
      width: 800px;
      margin-top: -120px;
      margin-left: 275px;
      position: relative;
    #wilsontextgeneric {
      margin-top: 40px;
      margin-right: 40px;
      margin-left: 150px;
      margin-bottom: 0px;
      height: 80px;
      width: 325px;
      line-height: 10px;
    #cdcovergeneric {
      margin-top: 35px;
      margin-left: 150px;
      height: 500px;
      width: 500px;
    #facebookicon {
      margin-left: 220px;
      vertical-align: top;
      top: -20px;
    #linkedicon {
      left: 250px;
      margin-left: 236px;
      margin-bottom: 22px;
      width: 60px;
    #twittericon {
      margin-top: 5px;
      margin-left: 232px;
      width: 60px;
      height: 0px;
      top: -5px;
    #businesslinkport {
      height: 100px;
      width: 100px;
      margin-top: 10px;
      margin-left: 0px;
      position: relative;
      left: 350px;
      border-radius: 75%;
      -webkit-border-radius: 75% 75%;
      background: rgb(202,177,136);
      justify-content: center;
      align-content: center;
      text-align: center;
      text-indent: 5px;
      line-height: 100px;
    #classicallinkport {
      height: 100px;
      width: 100px;
      margin-top: 150px;
      margin-left: 50px;
      position: relative;
      left: 100px;
      border-radius: 75%;
      -webkit-border-radius: 75% 75%;
      background: rgb(215,170,38);
      justify-content: center;
      align-content: center;
      text-align: center;
      text-indent: 5px;
      line-height: 100px;
      top: -150px;
    #hiphoplinkport {
      height: 100px;
      width: 100px;
      margin-top: 0px;
      margin-left: -300px;
      position: relative;
      left: 450px;
      border-radius: 75%;
      -webkit-border-radius: 75% 75%;
      background: rgb(213,164,97);
      justify-content: center;
      align-content: center;
      text-align: center;
      text-indent: 5px;
      line-height: 100px;
    #rocklinkport {
      height: 100px;
      width: 100px;
      margin-top: 200px;
      margin-left: 100px;
      position: relative;
      left: 50px;
      border-radius: 75%;
      -webkit-border-radius: 75% 75%;
      background: rgb(119, 87, 35);
      justify-content: center;
      align-content: center;
      text-align: center;
      text-indent: 5px;
      line-height: 100px;
      top: -200px;
    #businesslinkclear {
      position: absolute;
      top: 245px;
      left: 350px;
      width: 100px;
      height: 100px;
      background-color: transparent;
    #classicallinkclear {
      position: absolute;
      top: 245px;
      left: 510px;
      width: 100px;
      height: 100px;
      background-color: transparent;
    #hiphoplinkclear {
      position: absolute;
      top: 245px;
      left: 660px;
      width: 100px;
      height: 100px;
      background-color: transparent;
    #rocklinkclear {
      position: absolute;
      top: 245px;
      left: 810px;
      width: 100px;
      height: 100px;
      background-color: transparent;
    #test1 {
      width: 800px;
      height: 600px;
      position: relative;
      margin-left: -25px;
      margin-top: -550px;
    #test1 img {
      width: 800px;
      height: 600px;
      position: absolute;
      left: 347px;
      top: 390px;
      -webkit-transition: opacity 1s ease-in-out;
      -moz-transition: opacity 1s ease-in-out;
      -o-transition: opacity 1s ease-in-out;
      transition: opacity 1s ease-in-out;
      margin-left: -80px;
    .top1 {
      width: 800px;
      height: 600px
      position: relative;
      margin-left: 252px;
      margin-top: -0px;
    .top1: hover {
      width: 800px;
      height: 600px
      position: relative;
      margin-left: 252px;
      margin-top: -10px;
      background-image: treeinovalonlyforpossiblefade4.png;
    #clientchecklistnew {
      margin-left: 300px;
      left: 150px;
      margin-right: 60px;
      padding-left: 70px;
      margin-top: -150px;
      text-decoration: none;
    #clientchecklistnew a {
      text-decoration: none;
    #crossfade {
        position:relative;
        height:800px;
        width:600px;
    #crossfade img {
        position:absolute;
        left:230px;
      top: -150px;
        opacity: 1;
        -webkit-transition: opacity 1s ease-in-out;
        -moz-transition: opacity 1s ease-in-out;
        -o-transition: opacity 1s ease-in-out;
        -ms-transition: opacity 1s ease-in-out;   
        transition: opacity 1s ease-in-out;
    #crossfade img.top:hover {
        opacity:0;

    Nancy,
    You are God!
    It worked!
    Thanks.
    I have a dumb basic question which is sort of related to your shambles comment, which I don't deny is true.
    I am confused about whether style.css files get affiliated with each separate HTML page or whether there is just one style.css file that is affiliated with all my HTML pages. If they are separate CSS files, how do I separate each style.css file?
    Best, P.

Maybe you are looking for