How to embed google form?

Discuss, ask and suggest about Usability and Accessability with CMS Made Simple
stegngas
New Member
New Member
Posts: 8
Joined: Wed Mar 16, 2011 2:19 pm

How to embed google form?

Post by stegngas »

Hello everybody,

as the Subject says, I have a problem how to embed a google form into my CMS webpage.

Google form gives you a code that you just simply copy into html, and it worked fine when i worked in Wordpress or Joomla (with additional plugins installed)... until now. iframe line does not work, I cannot find any additional iframe plugin or command line for CMS.

Please help!
uniqu3

Re: How to embed google form?

Post by uniqu3 »

create new Global Content Block, deactivate wysiwyg and copy/paste your code, if you have a complete iframe code.
Then call that Global Content Block anywhere on the page you need it.
Or use {embed} tag, you can find help description in "extensions -> tags -> embed" how to use it.
stegngas
New Member
New Member
Posts: 8
Joined: Wed Mar 16, 2011 2:19 pm

Re: How to embed google form?

Post by stegngas »

Thank you very much. It works.

Do you perhaps know - if I use on one page 3 GCB and they are all hidden behind expand/collapse command... If I click on the third link to open 3rd GCB it always opens the first... is there a limit GCB per page?
uniqu3

Re: How to embed google form?

Post by uniqu3 »

No, it will most possible be wrong ID of each expand/collapse area.
Without example/live page we can only guest what your real problem is.
stegngas
New Member
New Member
Posts: 8
Joined: Wed Mar 16, 2011 2:19 pm

Re: How to embed google form?

Post by stegngas »

Do you (or anyone else who is reading) perhaps know, how to get rid of the border around images?

The only solution I found was from the year 2001, so its no use....
uniqu3

Re: How to embed google form?

Post by uniqu3 »

in your stylesheet:

img, img a {
border: none;
}

Or provide a link to see exact problem.
stegngas
New Member
New Member
Posts: 8
Joined: Wed Mar 16, 2011 2:19 pm

Re: How to embed google form?

Post by stegngas »

I tried to define it in html, but it didn't work.

And I can't find it in my stylesheet

this is the link
http://www.enforce-een.eu/slo/index.php ... 1&hl=sl_SL
stegngas
New Member
New Member
Posts: 8
Joined: Wed Mar 16, 2011 2:19 pm

Re: How to embed google form?

Post by stegngas »

Code: Select all

/*  
@Nuno Costa [criacaoweb.net]
@Since [cmsms 1.6]
@Contributors: Mark and Dev-Team
*/
body {
/* default text for entire site */
	font: normal 0.8em Tahoma, Verdana, Arial, Helvetica, sans-serif;
/* default text color for entire site */
	color: #3A3A36;
/* you can set your own image and background color here */
	background: #fff url(uploads/NCleanBlue/bg__full.png) repeat-x scroll left top;
}
/* Mask helper  for browsers ZOOM, Rezise and Decrease */
#ncleanblue {
/* set to width of viewport */
	width: auto;
/* you can set your own image and background color here */
	background: #fff url(uploads/NCleanBlue/bg__full.png) repeat-x scroll left top;
}
/* wiki style external links */
/* external links will have "(external link)" text added, lets hide it */
a.external span {
	position: absolute;
	left: -5000px;
	width: 4000px;
}
a.external {
/* make some room for the image, css shorthand rules, read: first top padding 0 then right padding 12px then bottom then right */
	padding: 0 12px 0 0;
}
/* colors for external links */
a.external:link {
	color: #679EBC;
/* background image for the link to show wiki style arrow */
	background: url(images/cms/external.gif) no-repeat 100% -100px;
}
a.external:visited {
	color: #18507C;
/* a different color can be used for visited external links */
/* Set the last 0 to -100px to use that part of the external.gif image for different color for active links external.gif is actually 300px tall, we can use different positions of the image to simulate rollover image changes.*/
	background: url(images/cms/external.gif) no-repeat 100% -100px;
}
a.external:hover {
	color: #18507C;
/* Set the last 0 to -200px to use that part of the external.gif image for different color on hover */
	background: url(images/cms/external.gif) no-repeat 100% 0;
	background-color: inherit;
}
/* end wiki style external links */
/* hr and anything with the class of accessibility is hidden with CSS from visual browsers */
.accessibility, hr {
/* absolute lets us put it outside the viewport with the indents, the rest is to clear all defaults */
	position: absolute;
	top: -9999em;
	left: -9999em;
	background: none;
	border: 0;
	clear: both;
	display: block;
	float: none;
	font-size: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
	border: none;
}
/* ------------ Standard  HTML elements and their default settings ------------ */
b, strong{font-weight: bold;}i, em{	font-style: italic;}
p {
	padding: 0;
	margin-top: 0.5em;
    margin-bottom: 1em;
   text-align:left;
}
h1, h2, h3, h4, h5 {
	line-height: 1.6em;
	font-weight: normal;
	width: auto;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
/*default link styles*/
a {
	color: #679EBC;
	text-decoration: none;
	text-align: left;
}
a:hover {
	color: #3A6B85;
}
a:active {
	color: #3A6B85;
}
a:visited {
	color: #679EBC;
}
input, textarea, select {
	font-size: 0.95em;
}
/* ------------ Wrapper ------------ */
div#pagewrapper {
	font-size: 95%;
	position: relative;
	z-index: 1;
}
/* ------------ Header ------------ */
#header {
	height: 111px;
	width: 960px;
}
#logo a {
/* adjust according your image size */
	height: 75px;
	width: 215px;
/* forces full link size */
	display: block;
/* this hides the text */
	text-indent: -9999em;
	margin-top: 0;
	margin-left: 0;
/* you can set your own image here, note size adjustments */
	background: url(uploads/NCleanBlue/logo.png) no-repeat left top;
}

/* ------------ Header - Search ------------ */
div#search {
	width: 190px;
	height: 28px;
	margin-top: 31px;
	margin-right: 20px;
}
div#search label {
	text-indent: -9999em;
	height: 0pt;
	width: 0pt;
	display: none;
}
div#search input.search-input {
/* specific size for image, your image may need these adjusted */
	width: 143px;
	height: 17px;
/* removes default borders, allows use of image */
	border-style: none;
/* text color */
	color: #999;
/* padding of text */
	padding: 7px 0px 4px 10px;
	float: left;
/* set all font properties at once, weight, size, family */
	font: bold 0.9em Arial, Helvetica, sans-serif;
/* left input image, set your own here */
	background: url(uploads/NCleanBlue/search.png) no-repeat left top;
}
div#search input.search-button {
/* specific size for image, your image may need these adjusted */
	width: 37px;
	height: 28px;
/* removes default borders, allows use of image */
	border-style: none;
        image border-style: none;
/* hides text, image has text */
	text-indent: -9999em;
	float: left;
	margin: 0;
/* provides positive hover effect */
	cursor: pointer;
/* removes default size/height */
	font-size: 0px;
	line-height: 0px;
/* submit button image, set your own here */
	background: transparent url(uploads/NCleanBlue/search.png) no-repeat right top;
}
/* ------------ Content ------------ */
#content {
	width: auto;
/* all text in #content will default align left, changed in other calls */
	text-align: left;
}
#bar {
	width: auto;
	height: 40px;
	padding-right: 1em;
	padding-left: 1em;
}
.print {
	margin-right: 75px;
	margin-top: 10px;
}
#version {
	width: 50px;
	height: 31px;
	position: absolute;
	z-index: 5;
	top: 130px;
	right: -16px;
	font-size: 1.6em;
	font-weight: bold;
	padding: 28px 15px;
	color: #FFF;
	text-align: center;
	vertical-align: middle;
	background:  url(uploads/NCleanBlue/version.png) no-repeat left top;
}
/* IE6 fixes */
* html div#version {
	top: 150px;
}
/* End IE6 fixes */
/* Site Title */
h1.title {
	font-size: 1.8em;
	color: #666666;
	margin-bottom: 0.5em;
}
/* Breadcrumbs */
div.breadcrumbs {
	padding: 0.5em 0;
	font-size: 80%;
	margin: 0 1em;
}
div.breadcrumbs span.lastitem {
	font-weight: bold;

under that is more code, but I think it's unimportant... somewhere here need to be changed something
uniqu3

Re: How to embed google form?

Post by uniqu3 »

Search for:

Code: Select all

#textbox img {
  border-bottom-color:black;
  border-bottom-style:solid;
  border-bottom-width:1px;
  border-left-color:black;
  border-left-style:solid;
  border-left-width:1px;
  border-right-color:black;
  border-right-style:solid;
  border-right-width:1px;
  border-top-color:black;
  border-top-style:solid;
  border-top-width:1px;
  float:left;
  margin-bottom:10px;
  margin-right:10px;
}
Now remove:

Code: Select all

border-bottom-color:black;
  border-bottom-style:solid;
  border-bottom-width:1px;
  border-left-color:black;
  border-left-style:solid;
  border-left-width:1px;
  border-right-color:black;
  border-right-style:solid;
  border-right-width:1px;
  border-top-color:black;
  border-top-style:solid;
  border-top-width:1px;
stegngas
New Member
New Member
Posts: 8
Joined: Wed Mar 16, 2011 2:19 pm

Re: How to embed google form?

Post by stegngas »

Sorry. I understand what you mean, but the problem is that i cannot find any #textbox img code in my stylesheet (named Layout: NCleanBlue).
uniqu3

Re: How to embed google form?

Post by uniqu3 »

You can find it here: <link rel="stylesheet" type="text/css" href="style.css" />

And in this file you will find

Code: Select all

#textbox img {
 border: 1px solid black;
 float: left;
 margin-right: 10px;
 margin-bottom: 10px;
}
Seems like style is hardcoded in your Template and no other styles are attached to it.
stegngas
New Member
New Member
Posts: 8
Joined: Wed Mar 16, 2011 2:19 pm

Re: How to embed google form?

Post by stegngas »

Ok, this is getting a little bit embarassing for me. I don't know where to find
<link rel="stylesheet" type="text/css" href="style.css" />

Sorry. I think i should be quite from now on... Is very obvious I'm very fresh as far CMS concerns....
User avatar
M@rtijn
Power Poster
Power Poster
Posts: 706
Joined: Sat Nov 14, 2009 4:54 pm
Location: the Netherlands

Re: How to embed google form?

Post by M@rtijn »

Ok, I'll try to pull you through the process:

In your admin panel go to 'Layout' -> 'Templates'
You'll find this line in between the <head> tags.

Code: Select all

<link rel="stylesheet" type="text/css" href="style.css" />
It's actually the only line.
Replace it with

Code: Select all

 {cms_stylesheet}
The css file itself is in the root. Go to 'Content' -> 'File Manager' in your admin panel look for the file named style.css.
Copy the content of this file and go to 'Layout' -> 'Stylesheets'.
Create a new file, give a name, paste the css code and save it.
Now go back to templates, click on the css icon of your page template and link the stylesheet you've just created.

From now on, you are making use of the benefits of a CMS ;D

Now open the stylesheet again. Press CTRL + F (browser search function) and type '#textbox img'.
Delete the line 'border: 1px solid black;', press save.

Done! ;D
Make your community a better place!
stegngas
New Member
New Member
Posts: 8
Joined: Wed Mar 16, 2011 2:19 pm

Re: How to embed google form?

Post by stegngas »

Almost. There is no style.css file. This is ridicolous..

In my File manager I have next files:
- File
- Images
- Lang
- NCleanBlue
- ngrey
- index.html

within that there is no style.css file. Only jpg, png, gif, pdf etc. files. No css files...
User avatar
M@rtijn
Power Poster
Power Poster
Posts: 706
Joined: Sat Nov 14, 2009 4:54 pm
Location: the Netherlands

Re: How to embed google form?

Post by M@rtijn »

I guess you landed in the subfolder 'uploads', click on the folder with only two little dots, it'll take you back one level.
Make your community a better place!
Locked

Return to “[locked] Accessability and Usability”