Hello,
I’m very new to CM1 and need help with creating a template. I’d like to create a page with an html widget and a rich text widget side-by-side that line up under my navigation bar (AKA, centered). I can only seem to get regions to stack on top of each other. How can I build regions/widgets next to each other?
Joseph,
Here’s what I would to do accomplish that:
In your template layout region - create one big region underneath your navigation bar, then create 2 additional regions inside of that newly created region. When dragging in the 2nd region - drag to the right margin between the inner and outer region; this will create 2 side by side regions.
You can then drag an html widget into the left region and a rich text widget into the right region.
Regions can be a bit tricky - read up on some of the finer points at our help site (http://help.percussion.com/design/cre…)
Hope that helps.
Joseph,
Here is a quick video demonstrating adding regions and widgets side-by-side on a template:
http://www.screencast.com/t/Oy1lYKOaq
Also, here is a link to more comprehensive video on adding regions to templates:
Mark and Jon,
I appreciate the help but I’m afraid it isn’t working. I created the template I wanted but the html widget and rich text won’t stay in place. I enter the html for an email capture form in the html box on the left, and then the rich text box moves without explanation to cover the form. When I type in that rich text box overlaying the form, the text appears in my footer below the form! I am going crazy trying to put a form that will email me next to some contact information. I’ll attach a few screenshots below
Joseph,
The first thing you could try is reducing the width on the regions. Oftentimes, when the width of a region(s) exceeds that of its outer container, a situation called “float drop” occurs where the adjacent content will drop down below its adjacent region rather than wrapping alongside it.
Good Morning Joseph,
The first thing come to mind here is CSS. IT seems like, without content, the Widgets are able to stay side-by-side and the moment you drop the “Form HTML” in it seems to not line up. This may happen due to CSS that styles your form. If your form css is overriding your layout, it may cause things to move around.
Items to check:
Make sure the css atteched to the form has no position:absolute property
Make sure you are not floating your form to the left (which may be overriding your layout css)
Make sure you are not using (left:, right, top or bottom) css properties.
I’ll show you the desired result (all originally written in html). Even with a singular html widget on the page, I couldn’t copy and paste the code without having the formatting destroyed
Guys,
All sound like good pieces of advice. Unfortunately, I do not actually know how to code and thus editing css and html is trial and error for me. This was an attempted website migration (neither old nor new designed by me). I did take a float off the form but I still have the rich text box ending up below as opposed to along side. I believe that both widgets fit their containers but I could be wrong. I’ll throw on some screen shots in hopes you’ll notice something. Thanks for your continued assistance
Top of page
Bottom of Page (problem area)
Here’s the form code if it’d help. I’d send you our current css, but I just found out it’s 62 pages…
Contact Us
well then… it copied as the form. Sorry about that
Hi Joseph,
In order for us to view your HTML, you can use the code tag in conjunction with the pre tag. Look here and scroll down until you see the box titled “Code” for more detail: https://getsatisfaction.com/some.html.
# Contact Us
<form method="post" action="https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" style="display:block; width:310px;" id="contact-form"> <br>
<input type="hidden" value="00DA0000000Kga2" name="oid"> <br>
<input type="hidden" value="http://bostontechnologies.com/contact-us.html&complete=1" name="retURL"> <br>
<input type="hidden" value="BT Website" name="lead_source"> <br><br>
<input type="text" style="width: 200px;" size="20" name="first_name" maxlength="40" id="first_name" placeholder="First Name" class="mail placeholder example"> <br><br>
<input type="text" style="width: 200px;" size="20" name="last_name" maxlength="80" id="last_name" placeholder="Last Name" class="mail placeholder example"> <br><br>
<input type="text" style="width: 200px;" size="20" name="company" maxlength="40" id="company" placeholder="Company" class="mail placeholder example"> <br><br>
<input type="text" style="width: 200px;" size="20" name="email" maxlength="80" id="email" placeholder="Email" class="mail placeholder email required example"> <br><br>
<input type="text" style="width: 200px;" size="20" name="phone" maxlength="40" id="phone" placeholder="Phone" class="mail placeholder required example"> <br><br>
<input type="hidden" name="00NA0000002eDcG" id="00NA0000002eDcG"> <br>
<input type="hidden" name="00NA0000002eDcL" id="00NA0000002eDcL"> <br>
<input type="hidden" name="00NA0000002eDcQ" id="00NA0000002eDcQ"> <br>
<input type="hidden" name="country" id="country"> <br><br>
<textarea style="width: 300px; max-width:300px; margin-top:15px; height: 100px;" name="description" cols="" rows="" placeholder="Description" value="Description" class="message placeholder required example"></textarea> <br><br>
<input type="submit" value="Submit" name="submit" class="submit"> <br> </form>
Email us at:
[info@bostontechnologies.com](mailto:info@bostontechnologies.com)
For support and customer care:
[support@bostontechnologies.com](mailto:support@bostontechnologies.com)
For business development and investors:
[ceo@bostontechnologies.com](mailto:ceo@bostontechnologies.com)
For sales and questions:
[sales@bostontechnologies.com](mailto:sales@bostontechnologies.com)
For employment and internship opportunities:
[hr@bostontechnologies.com](mailto:hr@BostonTechnologies.com)
By phone:
+1 617.314.6800
By fax:
+1 888.835.4711
[](http://twitter.com/bt_tweets) [](http://www.facebook.com/bostontechnologies) [](http://www.linkedin.com/company/boston-technologies-inc/products) [](http://www.youtube.com/user/BostonTechnologies)
I’m just trying to recreate this with reasonable spacing (side by side) on a page with a nav bar. Also, the image files are incorrect. Not quite sure on how to get the images from the old page back into this object
Joseph,
Do you intend for the rich text widget to contain your contact information (email, phone, fax)? Because that information is also contained within the html you posted above. If that is your intention, you might try inputting just the form code into the html widget and nothing else. This might resolve the “float drop” issue Jon mentioned. Here is the form code with none of the contact information code:
# Contact Us
<form method="post" action="https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" style="display:block; width:310px;" id="contact-form"> <br>
<input type="hidden" value="00DA0000000Kga2" name="oid"> <br>
<input type="hidden" value="http://bostontechnologies.com/contact-us.html&complete=1" name="retURL"> <br>
<input type="hidden" value="BT Website" name="lead_source"> <br>
<input type="text" style="width: 200px;" size="20" name="first_name" maxlength="40" id="first_name" placeholder="First Name" class="mail placeholder example"> <br>
<input type="text" style="width: 200px;" size="20" name="last_name" maxlength="80" id="last_name" placeholder="Last Name" class="mail placeholder example"> <br>
<input type="text" style="width: 200px;" size="20" name="company" maxlength="40" id="company" placeholder="Company" class="mail placeholder example"> <br>
<input type="text" style="width: 200px;" size="20" name="email" maxlength="80" id="email" placeholder="Email" class="mail placeholder email required example"> <br>
<input type="text" style="width: 200px;" size="20" name="phone" maxlength="40" id="phone" placeholder="Phone" class="mail placeholder required example"> <br>
<input type="hidden" name="00NA0000002eDcG" id="00NA0000002eDcG"> <br>
<input type="hidden" name="00NA0000002eDcL" id="00NA0000002eDcL"> <br>
<input type="hidden" name="00NA0000002eDcQ" id="00NA0000002eDcQ"> <br>
<input type="hidden" name="country" id="country"> <br>
<textarea style="width: 300px; max-width:300px; margin-top:15px; height: 100px;" name="description" cols="" rows="" placeholder="Description" value="Description" class="message placeholder required example"></textarea> <br>
<input type="submit" value="Submit" name="submit" class="submit"> <br>
</form>
Of course, this might not help if the layout issue is originating from your stylesheet. Let me know if any of this helps at all.
Nathaniel
Your analysis is spot on, but the problem has persisted. I tried to use just the form in html and the contact info in rich text but the gap between them was awkwardly large. When I paste the whole script, the formatting is ruined. I’m starting to believe I have CMS issues. Can the form widget email or link to salesforce.com? These are the functions that have me so dedicated to my html form. You guys are awesome, thanks so much for the continued assistance
Have you tried entering some basic html [not the form] (some text with a link, for example) in the html widget and your contact info in the rich text widget?
If that functions as expected (side by side) then we can narrow the focus to the saleforce form html and the CSS acting on that.
Gentlemen, I’m happy to announce that this problem has been resolved. After learning a bit about html, I was able to insert some breaks and non-breakable spaces to maintain the formatting that I wanted. I used a single code for both the form and the information. Thanks for your efforts
Sorry to revive an old Topic, but is there a way to place side by side widgets without completely changing the template for every other page or creating basically a copy of the existing template with nested regions for 5 pages?
If we could designate the width’s of the widgets, this would be sooo simple to handle without the need to change a template. In the image below if I could access the css or properties to this widget I could set it to float right and width of 30%, set another to float left with a width of 69% and it would serve my purpose awesomely.
Any ideas?
