Any Limitations Around Custom HTML?

Anvil Q&A
1

I have a few different pretty basic HTML templates that I was going to setup for my main site for my new app I’m launching but even after uploading the css and changing my paths to _/theme/x.css it doesn’t seem to load my page correctly and for example my navbar I have setup in the html appears and disappears.

Just trying to find out if there are any limitations here? I had issues a year ago trying to do this and it appears I’m still having issues with the custom HTML stuff.

For example here is some basic html that isn’t working:

<center style="font-style:italic; color:#888; margin: 3em;">
  <head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<meta name="author" content="" />

  <!-- Facebook and Twitter integration -->
	<meta property="og:title" content=""/>
	<meta property="og:image" content=""/>
	<meta property="og:url" content=""/>
	<meta property="og:site_name" content=""/>
	<meta property="og:description" content=""/>
	<meta name="twitter:title" content="" />
	<meta name="twitter:image" content="" />
	<meta name="twitter:url" content="" />
	<meta name="twitter:card" content="" />

	<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400" rel="stylesheet">
	
	<!-- Animate.css -->
	<link rel="stylesheet" href="_/theme/animate.css">
	<!-- Icomoon Icon Fonts-->
	<link rel="stylesheet" href="_/theme/icomoon.css">
	<!-- Bootstrap  -->
	<link rel="stylesheet" href="_/theme/bootstrap.css">

	<!-- Magnific Popup -->
	<link rel="stylesheet" href="_/theme/magnific-popup.css">

	<!-- Owl Carousel -->
	<link rel="stylesheet" href="_/theme/owl.carousel.min.css">
	<link rel="stylesheet" href="_/theme/owl.theme.default.min.css">

	<!-- Theme style  -->
	<link rel="stylesheet" href="_/theme/style.css">

	<!-- Modernizr JS -->
	<script src="_/theme/modernizr-2.6.2.min.js"></script>
	<!-- FOR IE9 below -->
	<!--[if lt IE 9]>
	<script src="_/theme/respond.min.js"></script>
	<![endif]-->
	</head>
  
  <body>
    <div class="colorlib-loader"></div>
    
    <div id="page">
      <nav class="colorlib-nav" role="navigation">
        <div class="top-menu">
          <div class="container">
            <div class="row">
            	<div class="col-md-2">
		   <div id="colorlib-logo"><a href="">Serpent Tracker</a></div>
		</div>
            </div>
          </div>
        </div>
          <div class="col-md-10 text-right menu-1">
          <ul>
            <li class="active"><a href="index.html">Home</a></li>
            <li class="has-dropdown">
              <a href="work.html">Works</a>
              <ul class="dropdown">
                <li><a href="work-grid.html">Works grid with text</a></li>
                <li><a href="work-grid-without-text.html">Works grid w/o text</a></li>
              </ul>
            </li>
            <li><a href="services.html">Services</a></li>
            <li><a href="blog.html">Blog</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="shop.html">Shop</a></li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
	</div>
      </nav>
    </div>
  </body>
  
</center>

If I edit or modify the code I briefly see part of my html show up then it disappears again.

Thanks

2

For what its worth my MDB Bootstrap Pro basic setup works ok:

Screen Shot 2020-04-09 at 6.37.44 AM
Screen Shot 2020-04-09 at 6.37.44 AM1281×794 52.3 KB

3

Do you have a clone link you could share?

One thing that I can point out is that… you should move all the things in <head> tags into the native libraries… anything in native libraries will be inserted into the <head> tags of the site.

Anvil Docs | Using JavaScript

And if it’s custom html - you should put all the things in the body inside the html rather than including the body tags. use the standard-page.html as a template - there’s no body tags there…

1 Like
4

Ok the docs don’t really explain this well, wondering if at this point if its just easier if I just host this on s3

5

it looks like you’re trying to weave in loading html pages on link clicks…?

Are you basically trying to create your own standard template here?

linked docs about standard navigation page structure:

Anvil Docs | Navigation

1 Like
6

No I literally have MDB Bootstrap Pro resources that I was hoping to use for my homepage and maybe even my dashboard so I’m not stuck using the default built in material UI stuff but this is getting kinda confusing to the point it might just be easier for me to run this on my own outside this anvil ecosystem unfortunately.

I can build this pretty fast with React, the anvil part gives me the login and stuff faster so maybe I’ll just host this myself and connect parts back to anvil that I don’t want to have to build.

1 Like