HTML CMS Code using Layout Grids
Forum rules
IMPORTANT NOTE!!
DO YOU HAVE A QUESTION OR PROBLEM AND WANT QUICK HELP?
THEN PLEASE SHARE A "DEMO" PROJECT.
PLEASE READ THE FORUM RULES BEFORE YOU POST:
http://www.wysiwygwebbuilder.com/forum/viewtopic.php?f=12&t=1901
MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
IMPORTANT NOTE!!
DO YOU HAVE A QUESTION OR PROBLEM AND WANT QUICK HELP?
THEN PLEASE SHARE A "DEMO" PROJECT.
PLEASE READ THE FORUM RULES BEFORE YOU POST:
http://www.wysiwygwebbuilder.com/forum/viewtopic.php?f=12&t=1901
MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
HTML CMS Code using Layout Grids
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
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
Well for one, you are missing an ending </script> tag in your code.
Re: HTML CMS Code using Layout Grids
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
What exactly is the code you are posting? Is this a phpjabbers code by chance?
Re: HTML CMS Code using Layout Grids
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
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
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>
<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
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.
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
Hi, Yes i had already did that setting in the options. still doesnt work properly.
- BaconFries
-
- Posts: 5364
- Joined: Thu Aug 16, 2007 7:32 pm
Re: HTML CMS Code using Layout Grids
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
Changing the option in Tools worked for me.Hi, Yes i had already did that setting in the options. still doesnt work properly.
Here is the result I get:
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:
Here is the layout grid options. Very plain jane....
Here is what it looks like in the workspace:
Here are the options under Tools --> HTML
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
Thank you everyone. I am most grateful....it seems to be working good now
Re: HTML CMS Code using Layout Grids
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.
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
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:
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.
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>
Re: HTML CMS Code using Layout Grids
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
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
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.