Page 1 of 1

HTML CMS Code using Layout Grids

Posted: Thu Feb 25, 2021 11:43 pm
by cfardon
Hi,

I have an external CMS editor that i prefer to use. To use it generates a javascript code to enter so that is displays the editing from the cms. (See code pasted below). When i insert an html box in my site it works perfectly. But i use layout grids and when i drag the html box into a layout grid it disappear when previewing the page.

What i am needing to do, is paste the code and have it appear in order on my page and at the same width (1024) as the rest of my page.
I have tried the following.

1. I place a html box on my page and paste the code into the box - it works perfectly.
2. If i place the html box in a layout box - it doesn't work at all, there is not text from the CMS displays on my page.
3. I i right click on the layout grid and attach the html and place it "inside the tags" the text from the cms then display s on my page, but it appears on the left hand edge of the browser window instead of being aligned with the rest of my page. if i set the layout grid to maximum width 1024, it makes no difference.

After I upload the site and check the page source it is like this: (The code is not between the grid 16 tags...

<div id="wb_indexLayoutGrid16">

<div id="indexLayoutGrid16">

<div class="row">

<div class="col-1">

<div id="indexHtml1" style="display:inline-block;width:982px;height:229px;z-index:18">

<link href="https://www.fardonwebhosting.com/cms/in ... ionLoadCss" rel="stylesheet"/>

<script src="https://www.fardonwebhosting.com/cms/in ... "></script>
</div>

</div>

If i manually change this to look like:


<div id="wb_indexLayoutGrid16">
<div class="row">

<div class="col-1">

<div id="indexHtml1" style="display:inline-block;width:982px;height:229px;z-index:18">

<link href="https://www.fardonwebhosting.com/cms/in ... ionLoadCss" rel="stylesheet"/>

<script src="https://www.fardonwebhosting.com/cms/in ... "></script>
</div>

</div>

<div id="indexLayoutGrid16">

Then everything works fine, but is a pain to keep having to manually do the edit every time i upload something.

Anyone have any ideas how i could fix this?

Thanks in advance

Re: HTML CMS Code using Layout Grids

Posted: Thu Feb 25, 2021 11:52 pm
by crispy68
Well for one, you are missing an ending </script> tag in your code.

Re: HTML CMS Code using Layout Grids

Posted: Thu Feb 25, 2021 11:57 pm
by cfardon
I probable havent pasted all the code in........but my main probem is that if i paste the code and then put the html box in a layout grid......when it uploads it seems to put the code out side the layout grid tags.

Re: HTML CMS Code using Layout Grids

Posted: Thu Feb 25, 2021 11:59 pm
by crispy68
What exactly is the code you are posting? Is this a phpjabbers code by chance?

Re: HTML CMS Code using Layout Grids

Posted: Fri Feb 26, 2021 12:02 am
by cfardon
Hi Yes,

you can view it on this page here what the outlook looks like. it is just under the 2 videos near the top saying.
We are changing the way the world seals concrete.


https://www.sitetest.fardonweb.com

Re: HTML CMS Code using Layout Grids

Posted: Fri Feb 26, 2021 12:02 am
by cfardon
oh the code is:

<link href="https://www.fardonwebhosting.com/cms/in ... ionLoadCss" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="https://www.fardonwebhosting.com/cms/in ... "></script>

Re: HTML CMS Code using Layout Grids

Posted: Fri Feb 26, 2021 12:12 am
by crispy68
I seem to have got it working. Make sure:

1. Your html box is set to: Do Not use <div>
2. Go to Tools --> Options --> HTML and make sure in the Javascript section that "Move Javascripts to end of the page" is unchecked.

Re: HTML CMS Code using Layout Grids

Posted: Fri Feb 26, 2021 3:34 am
by cfardon
Hi, Yes i had already did that setting in the options. still doesnt work properly.

Re: HTML CMS Code using Layout Grids

Posted: Fri Feb 26, 2021 3:41 am
by BaconFries
Viewing the source code, I can see that you may have enabled HTML beautifier, can you please go to Tools > Options > HTML and disable this feature along with inline styles and try again.

Re: HTML CMS Code using Layout Grids

Posted: Fri Feb 26, 2021 4:22 am
by crispy68
Hi, Yes i had already did that setting in the options. still doesnt work properly.
Changing the option in Tools worked for me.

Here is the result I get:

Image
Note: I added a blue background just so it would be easy to see the results. See grid setup below.


Here is the html box with your code:

Image


Here is the layout grid options. Very plain jane....

Image


Here is what it looks like in the workspace:

Image


Here are the options under Tools --> HTML

Image

As you can see, with everything I have checked it works. The main thing is you do not want to move javascripts to the end of the page. If this box is checked then WB is going to remove the <script> from the layout grid and place it at the bottom which means the layout grid no longer controls the layout of your script.

If it still doesnt work for you then there has to be something else on your page causing an issue. Do you have any other code you've added to the page yourself? When you preview the page on Chrome and use the inspector tool are there any errors?

Re: HTML CMS Code using Layout Grids

Posted: Sat Feb 27, 2021 12:22 am
by cfardon
Thank you everyone. I am most grateful....it seems to be working good now :)

Re: HTML CMS Code using Layout Grids

Posted: Wed Mar 03, 2021 12:34 am
by cfardon
Hi, I still seem to be having some problems:

To view the pages Please use:
username: stoned
Password: Stoned2021

Its working where it says "Changing the way we seal concrete"
https://www.sitetest.fardonweb.com/index.html

on
https://www.sitetest.fardonweb.com/locations.html
It is working where i put a html box and no layout grid. But straight under where i have typed "here is the script in a layout grid" it is not working.

I have looked at the source code for both pages yet the script seems to be the same layout.

Re: HTML CMS Code using Layout Grids

Posted: Wed Mar 03, 2021 5:02 am
by crispy68
The issue is this... in a layout grid, the font size is initially set to zero to not add any height to the grid. Since it is zero, you don't see your text.

In the regular html box, this is not the case which is why you see it.

So, if you want it to work in the grid you will need to override the font size. Go to Page --> Page HTML --> between <head> tags and put this code:

Code: Select all

<style>
#LayoutGrid1 > .row > .col-1{font-size:initial;}
</style>
You will need to change LayoutGrid1 to the name(ID) of your layout grid and change the column # to whatever column you put the code into.

Re: HTML CMS Code using Layout Grids

Posted: Wed Mar 03, 2021 11:19 am
by cfardon
Hey, Thank you....i have been looking for a solution for over 12 months now.....this is the first that has fixed the problem completely and works.

I have just one question if I may.

If i wanted a specific font and colour to automatically be used from the CMS can i edit this code you gave me?
Eg: Font: Roboto Size: 14 Colour: White

<style>
#LayoutGrid1 > .row > .col-1{font-size:initial;}
</style>

Thank you once again for your help

Re: HTML CMS Code using Layout Grids

Posted: Wed Mar 03, 2021 4:28 pm
by crispy68
You probably could; however, the font color and size should be able to be chosen in the editor for the CMS script. This is where you would ultimately want to be able to change it. I believe the # of fonts is limited within the script; however, you may be able to add a font. There may be a folder with the script that contains all the fonts. I would have to look to confirm.