Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML Why I am I Not Seeing My site code in the WYSIWYG Tab in BlueGriffon?

I realize this is probably super elementary for most of you all here.(I'm still learning the basics)

However, if anyone can help me it would be sincerely appreciated.

So,
I'm attempting to make some edits to an index.html file in BlueGriffon (3.1) on my Mac OSX 10.13.6 High Sierra

I'm Not Seeing My site in the WYSIWYG Viewer Tab

All of the contents of site( index.html, files, media, etc.) are all in the same folder 'HTML'

This is driving me nuts!

Anyone have any idea why I dont see anything in the WYSIWYG Tab, nor the Dual View tab?

Thanks!


Screen Shot 2021-01-10 at 2.47.19 PM.png


Screen Shot 2021-01-10 at 2.47.35 PM.png



Here's a screen shot of where the files are located on my computerScreen Shot 2021-01-10 at 2.25.21 PM.png
 

Attachments

  • Screen Shot 2021-01-10 at 2.34.05 PM.png
    Screen Shot 2021-01-10 at 2.34.05 PM.png
    86.2 KB · Views: 2
Last edited:
@Malcolm seems to be right. What if you add a <p> element with text in it?
You could also look if something is displayed when you open your page in a web browser. If so, the problem is not from BlueGriffon.
 
Last edited:
Hi @techtipz,

Do you by a chance having anything that would be displayed within the HTML document? I see only <div> tags, however there's nothing in them?
Hi Malcolm,

Here's the actual code and a screen shot of the page preview in the browser below:

Screen Shot 2021-01-15 at 10.48.29 AM.png

[CODE lang="html" title="index.html"]<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, shrink-to-fit=no">
<link href="images/favicon.png" rel="icon">
<title>DomainX - Domain for Sale Html Template</title>
<meta name="description" content="HTML Template for Domain for Sale">
<meta name="author" content="harnishdesign.net">
<!-- Web Fonts
======================== -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900"
type="text/css">
<!-- Stylesheet
======================== -->
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="vendor/font-awesome/css/all.min.css">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
</head>
<body>
<p>
<!-- Preloader --> </p>
<blockquote> <br>
</blockquote>

<div class="preloader">
<div class="lds-ellipsis">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<!-- Preloader End -->
<!-- Document Wrapper
=============================== -->
<div id="main-wrapper">
<!-- Hero Backgroung
========================= -->
<div class="hero-wrap">
<div class="hero-mask opacity-8 bg-dark"></div>
<div class="hero-bg hero-bg-scroll" style="background-image:url('./images/intro-bg.jpg');"></div>
<div class="hero-content fullscreen py-4 py-lg-0">
<div class="container fullscreen">
<div class="row fullscreen">
<!-- Domain Information
========================= -->
<div class="col-lg-8 align-items-center d-flex flex-column">
<div class="container py-5 my-auto">
<div class="row">
<div class="col-12 mx-auto">
<h1 class="text-14 text-white bg-danger d-inline-block font-weight-700 rounded px-4 mb-4">For
Sale!</h1>
<h2 class="text-13 font-weight-700 text-white mb-4">Evergreenwellsprings.com</h2>
<h3 class="text-white font-weight-400 mb-4">Asking price <span
class="badge badge-success text-7 font-weight-600">$1000</span></h3>
<p class="text-light mb-4">This 3 year old premium domain
name is available for instant purchase. Invest in a
premium brandable domain name and launch your brand
today.</p>
</div>
</div>
<div class="row text-white">
<div class="col-sm-6 col-md-4 d-flex align-items-center mt-2 mt-sm-0">
<span class="text-5 mr-2"><i class="fas fa-envelope"></i></span><a
class="text-white"
href="mailto:[email protected]">[email protected]</a>
</div>
<div class="col-md-4 d-flex align-items-center mt-2 mt-md-0">
<span class="text-5 mr-2"><i class="fas fa-globe"></i></span><a
class="text-white"
data-toggle="modal"
data-target="#more-domains"
href="#">More
Domains</a> </div>
</div>
</div>
</div>
<!-- Domain Information End -->
<!-- Make Your offer
========================= -->
<div class="col-lg-4 my-auto mx-4 mx-lg-0">
<div class="row bg-light rounded text-center py-4 mb-4 mb-lg-0">
<div class="col-11 mx-auto">
<h3 class="mb-3 mt-3 font-weight-600">Make An Offer</h3>
<p class="text-black-50 mb-4">Please complete the form below
and the seller will receive your message.</p>
<!-- Contact Form -->
<form id="contact-form" action="php/mail.php" method="post">
<div class="form-group icon-group position-relative"> <input
name="name"
class="form-control border-2"
required=""
placeholder="Enter Your Name"
type="text">
<span class="icon-inside"><i class="fas fa-user"></i></span>
</div>
<div class="form-group icon-group position-relative"> <input
name="email"
class="form-control border-2"
required=""
placeholder="Enter Your Email"
type="email">
<span class="icon-inside"><i class="fas fa-envelope"></i></span>
</div>
<div class="form-group icon-group position-relative"> <input
name="offer"
class="form-control border-2"
required=""
placeholder="Enter Your Offer"
type="text">
<span class="icon-inside"><i class="fas fa-dollar-sign"></i></span>
</div>
<div class="form-group mt-4"> <button id="submit-btn" class="btn btn-primary btn-block"
type="submit">Send
My Offer</button> </div>
</form>
</div>
</div>
</div>
<!-- Make Your offer End --> </div>
</div>
</div>
</div>
<!-- Hero Backgroung End --> </div>
<!-- Document Wrapper End -->
<!-- Modal Popup for More Domains
================================== -->
<div id="more-domains" class="modal fade" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"><span class="text-5 mr-1"><i class="fas fa-globe"></i></span>
More Domains For Sale</h5>
<button type="button" class="close font-weight-400" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span> </button> </div>
<div class="modal-body p-4">
<p>Below all Domains are available for sale. Please click on domain
link for further information.</p>
<div class="row">
<div class="col-sm-6 col-lg-4">
<ul class="list-style-2">
<li><a href="#">MyDomain.com</a></li>
<li><a href="#">YourExample.com</a></li>
<li><a href="#">WeDomainNew.com</a></li>
<li><a href="#">MyExample.com</a></li>
<li><a href="#">SaleMyDomain.com</a></li>
</ul>
</div>
<div class="col-sm-6 col-lg-4">
<ul class="list-style-2">
<li><a href="#">MyDomain.net</a></li>
<li><a href="#">YourExample.net</a></li>
<li><a href="#">WeDomainNew.net</a></li>
<li><a href="#">MyExample.net</a></li>
<li><a href="#">SaleMyDomain.net</a></li>
</ul>
</div>
<div class="col-sm-6 col-lg-4">
<ul class="list-style-2">
<li><a href="#">MyDomain.com</a></li>
<li><a href="#">YourExample.com</a></li>
<li><a href="#">WeDomainNew.com</a></li>
<li><a href="#">MyExample.com</a></li>
<li><a href="#">SaleMyDomain.com</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal Popup for More Domains End -->
<!-- Script -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="js/theme.js"></script>
</body>
</html>[/CODE]
 
Hi Malcolm,

Here's the actual code and a screen shot of the page preview in the browser below:

View attachment 686

[CODE lang="html" title="index.html"]<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, shrink-to-fit=no">
<link href="images/favicon.png" rel="icon">
<title>DomainX - Domain for Sale Html Template</title>
<meta name="description" content="HTML Template for Domain for Sale">
<meta name="author" content="harnishdesign.net">
<!-- Web Fonts
======================== -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900"
type="text/css">
<!-- Stylesheet
======================== -->
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="vendor/font-awesome/css/all.min.css">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
</head>
<body>
<p>
<!-- Preloader --> </p>
<blockquote> <br>
</blockquote>

<div class="preloader">
<div class="lds-ellipsis">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<!-- Preloader End -->
<!-- Document Wrapper
=============================== -->
<div id="main-wrapper">
<!-- Hero Backgroung
========================= -->
<div class="hero-wrap">
<div class="hero-mask opacity-8 bg-dark"></div>
<div class="hero-bg hero-bg-scroll" style="background-image:url('./images/intro-bg.jpg');"></div>
<div class="hero-content fullscreen py-4 py-lg-0">
<div class="container fullscreen">
<div class="row fullscreen">
<!-- Domain Information
========================= -->
<div class="col-lg-8 align-items-center d-flex flex-column">
<div class="container py-5 my-auto">
<div class="row">
<div class="col-12 mx-auto">
<h1 class="text-14 text-white bg-danger d-inline-block font-weight-700 rounded px-4 mb-4">For
Sale!</h1>
<h2 class="text-13 font-weight-700 text-white mb-4">Evergreenwellsprings.com</h2>
<h3 class="text-white font-weight-400 mb-4">Asking price <span
class="badge badge-success text-7 font-weight-600">$1000</span></h3>
<p class="text-light mb-4">This 3 year old premium domain
name is available for instant purchase. Invest in a
premium brandable domain name and launch your brand
today.</p>
</div>
</div>
<div class="row text-white">
<div class="col-sm-6 col-md-4 d-flex align-items-center mt-2 mt-sm-0">
<span class="text-5 mr-2"><i class="fas fa-envelope"></i></span><a
class="text-white"
href="mailto:[email protected]">[email protected]</a>
</div>
<div class="col-md-4 d-flex align-items-center mt-2 mt-md-0">
<span class="text-5 mr-2"><i class="fas fa-globe"></i></span><a
class="text-white"
data-toggle="modal"
data-target="#more-domains"
href="#">More
Domains</a> </div>
</div>
</div>
</div>
<!-- Domain Information End -->
<!-- Make Your offer
========================= -->
<div class="col-lg-4 my-auto mx-4 mx-lg-0">
<div class="row bg-light rounded text-center py-4 mb-4 mb-lg-0">
<div class="col-11 mx-auto">
<h3 class="mb-3 mt-3 font-weight-600">Make An Offer</h3>
<p class="text-black-50 mb-4">Please complete the form below
and the seller will receive your message.</p>
<!-- Contact Form -->
<form id="contact-form" action="php/mail.php" method="post">
<div class="form-group icon-group position-relative"> <input
name="name"
class="form-control border-2"
required=""
placeholder="Enter Your Name"
type="text">
<span class="icon-inside"><i class="fas fa-user"></i></span>
</div>
<div class="form-group icon-group position-relative"> <input
name="email"
class="form-control border-2"
required=""
placeholder="Enter Your Email"
type="email">
<span class="icon-inside"><i class="fas fa-envelope"></i></span>
</div>
<div class="form-group icon-group position-relative"> <input
name="offer"
class="form-control border-2"
required=""
placeholder="Enter Your Offer"
type="text">
<span class="icon-inside"><i class="fas fa-dollar-sign"></i></span>
</div>
<div class="form-group mt-4"> <button id="submit-btn" class="btn btn-primary btn-block"
type="submit">Send
My Offer</button> </div>
</form>
</div>
</div>
</div>
<!-- Make Your offer End --> </div>
</div>
</div>
</div>
<!-- Hero Backgroung End --> </div>
<!-- Document Wrapper End -->
<!-- Modal Popup for More Domains
================================== -->
<div id="more-domains" class="modal fade" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"><span class="text-5 mr-1"><i class="fas fa-globe"></i></span>
More Domains For Sale</h5>
<button type="button" class="close font-weight-400" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span> </button> </div>
<div class="modal-body p-4">
<p>Below all Domains are available for sale. Please click on domain
link for further information.</p>
<div class="row">
<div class="col-sm-6 col-lg-4">
<ul class="list-style-2">
<li><a href="#">MyDomain.com</a></li>
<li><a href="#">YourExample.com</a></li>
<li><a href="#">WeDomainNew.com</a></li>
<li><a href="#">MyExample.com</a></li>
<li><a href="#">SaleMyDomain.com</a></li>
</ul>
</div>
<div class="col-sm-6 col-lg-4">
<ul class="list-style-2">
<li><a href="#">MyDomain.net</a></li>
<li><a href="#">YourExample.net</a></li>
<li><a href="#">WeDomainNew.net</a></li>
<li><a href="#">MyExample.net</a></li>
<li><a href="#">SaleMyDomain.net</a></li>
</ul>
</div>
<div class="col-sm-6 col-lg-4">
<ul class="list-style-2">
<li><a href="#">MyDomain.com</a></li>
<li><a href="#">YourExample.com</a></li>
<li><a href="#">WeDomainNew.com</a></li>
<li><a href="#">MyExample.com</a></li>
<li><a href="#">SaleMyDomain.com</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal Popup for More Domains End -->
<!-- Script -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="js/theme.js"></script>
</body>
</html>[/CODE]
Thank you for this!

Are you still unable to see the preview?
 
@Malcolm seems to be right. What if you add a <p> element with text in it?
You could also look if something is displayed when you open your page in a web browser. If so, the problem is not from BlueGriffon.
Hi Tony,
Yes it actually shows the page in the web browser. (including my edits)

Because of my limited level of understanding of HTML and the fact that I process things I personally need to see the edits in real time as I make edits.
I used to use Kompozer years ago and I could easily modify simple one page sites on the fly.

Not sure why this is not showing the page in Dual View & WYSISYG mode.

Screen Shot 2021-01-15 at 10.48.29 AM.png
 
When you say "project files" meaning share/upload them?
I'm gonna try on 2 other computers of mine first. If I still have the same issue i'll forward you the files if thats what you mean.
Thanks
 
When you say "project files" meaning share/upload them?
I'm gonna try on 2 other computers of mine first. If I still have the same issue i'll forward you the files if thats what you mean.
Thanks
Yes, exactly. It's so I can see if I can reproduce the error, and as @LTomy mentioned did this work before?
 
I do not know why it does not work, I never used BlueGriffon... Could it be that some elements of the page are not supported? What if you try with a very basic html file?
 
If the problem persists you could use the Blisk browser which allows auto-refresh of pages.If you hid the Preview in BlueGriffin and have the two windows side by side maybe that could be a solution?
 
If the problem persists you could use the Blisk browser which allows auto-refresh of pages.If you hid the Preview in BlueGriffin and have the two windows side by side maybe that could be a solution?

Hi,
So I downloaded Blisk. Interesting, it looks like Chrome actually.However, I'm looking for a solution where I can actually see edits in real time in a WYSIWYG viewer and make changes from the viewer.


Question: How do I simply edit my index.html using Blisk from my laptop and actually see these changes as I edit the page?
 
The reason it looks like Chrome is because they are both based on Chromium. What I meant is if you have the site open in a tab in Blisk with auto-update, and keep editing in BlueGriffin, if it automatically updates the site then you can see the changes in real-time in Blisk, just like the preview pane.
 
The reason it looks like Chrome is because they are both based on Chromium. What I meant is if you have the site open in a tab in Blisk with auto-update, and keep editing in BlueGriffin, if it automatically updates the site then you can see the changes in real-time in Blisk, just like the preview pane.
Ok I see. Well I can already see the updates in Chrome. But that doesn't solve the issue of not being able to edit in the WYSIWYG viewer, where guys like me who aren't that good in html yet can see and make edits from a more visual way. Versus code.

Thanks for the input though👍
 
I took a look at BlueGriffon, how can you work with it? The interface is terrible and the handling infinitely cumbersome.
I think you would be 100 times faster if you read into the html syntax.
 
Back
Top Bottom