Purpose:
Integrate a guestbook on a website making it appear to be a part of the website and not hosted at UltraGuest.
Summary:
Use a transparent iframe using the transparent tag and use custom CSS to make the body of the guestbook transparent:
Moderate/Advanced. You should have a fairly good understanding of HTML and CSS.
Implementation:
We start out by modifying the content on your website. Instead of using the standard HTML provided in the Control Panel we use the <iframe> tag. The iframe element creates an inline frame that contains another document, in this case the guestbook. The link may look like this:
<iframe src="http://www.ultraguest.com/view/1041779607" name="myGuestbook" width="500" height="300" frameborder="0" allowtransparency="true"></iframe>
Since the guestbook messages have a width of 468 we want to make sure that our iframe is a litle bigger so that we avoid the vertical scrollbar at the bottom of the web browser. We make sure to include the allowtransparency="true" tag so that the iframe becomes transparent.
So far so good, but if you look at your webpage you will most likely notice that the iframe is not yet transparent. That is because we need to make the content of the iframe transparent, not only the iframe itself. To do this we login to the Control Panel (http://www.ultraguest.com/cp) and select from the menu:
Guestbook -> Settings -> Custom CSS
But before we create the custom CSS, let hold on for one minutte and talk about the Custom CSS feature. Custom CSS is a somewhat advanced feature that requires that you know CSS. It furthermore overwrites the other setting style settings (color, background, border colors etc.) so you need to enter all of these settings manually yourself. But to save us some work we take a look at the sourcecode of our live guestbook. Here we can find all the CSS needed located near the top of the page inside the <style> tag. If you take a close look you will notice that there are actually two sets of <style> tags, but we only need to look at the first one. The second <style> tag contain some default CSS used by UltraGuest for errors and for displaying the footer. These tags are inserted after your CSS and can not be modified (unless you have upgraded your guestbook, in which case all of that code disappears).
We copy all the content between the first set of <style> tags, making sure not to copy the <style> tags since they are automatically created for us. We go back go the Control Panel and paste the CSS into the text box. If we click Save our guestbook should look just as it did before. We are now ready to make the body of our guestbook transparent. This is actually quite simple, we just need to make sure that the body tag has its background set to transparent. It can look like this:
body { background: transparent; }
However, our body tag probably contains some other CSS so the final result could look like this (remember to remove any background colors):
body {
background: transparent;
color: #000000;
font-size: 11px;
font-family: Verdana;
}
If you want the message boxes to be transparent, you can edit the .tableborder class like this:
.tableborder {
background: transparent;
border: 1px solid #696969;
background: #ffffff;
padding: 4px;
}
If we have done everything right, you now have a transparent iframe displaying your guestbook. Of course, if you want the ultimate integration without advertisement and a powered by UltraGuest footer, you can upgrade your guestbook from the Control Panel:
My Account -> Upgrade
Integrate a guestbook on a website making it appear to be a part of the website and not hosted at UltraGuest.
Summary:
Use a transparent iframe using the transparent tag and use custom CSS to make the body of the guestbook transparent:
- create a transparent iframe on your website
- create custom CSS in the Control Panel
- set the body to have transparent background
- remove any background colors
Moderate/Advanced. You should have a fairly good understanding of HTML and CSS.
Implementation:
We start out by modifying the content on your website. Instead of using the standard HTML provided in the Control Panel we use the <iframe> tag. The iframe element creates an inline frame that contains another document, in this case the guestbook. The link may look like this:
<iframe src="http://www.ultraguest.com/view/1041779607" name="myGuestbook" width="500" height="300" frameborder="0" allowtransparency="true"></iframe>
Since the guestbook messages have a width of 468 we want to make sure that our iframe is a litle bigger so that we avoid the vertical scrollbar at the bottom of the web browser. We make sure to include the allowtransparency="true" tag so that the iframe becomes transparent.
So far so good, but if you look at your webpage you will most likely notice that the iframe is not yet transparent. That is because we need to make the content of the iframe transparent, not only the iframe itself. To do this we login to the Control Panel (http://www.ultraguest.com/cp) and select from the menu:
Guestbook -> Settings -> Custom CSS
But before we create the custom CSS, let hold on for one minutte and talk about the Custom CSS feature. Custom CSS is a somewhat advanced feature that requires that you know CSS. It furthermore overwrites the other setting style settings (color, background, border colors etc.) so you need to enter all of these settings manually yourself. But to save us some work we take a look at the sourcecode of our live guestbook. Here we can find all the CSS needed located near the top of the page inside the <style> tag. If you take a close look you will notice that there are actually two sets of <style> tags, but we only need to look at the first one. The second <style> tag contain some default CSS used by UltraGuest for errors and for displaying the footer. These tags are inserted after your CSS and can not be modified (unless you have upgraded your guestbook, in which case all of that code disappears).
We copy all the content between the first set of <style> tags, making sure not to copy the <style> tags since they are automatically created for us. We go back go the Control Panel and paste the CSS into the text box. If we click Save our guestbook should look just as it did before. We are now ready to make the body of our guestbook transparent. This is actually quite simple, we just need to make sure that the body tag has its background set to transparent. It can look like this:
body { background: transparent; }
However, our body tag probably contains some other CSS so the final result could look like this (remember to remove any background colors):
body {
background: transparent;
color: #000000;
font-size: 11px;
font-family: Verdana;
}
If you want the message boxes to be transparent, you can edit the .tableborder class like this:
.tableborder {
background: transparent;
border: 1px solid #696969;
background: #ffffff;
padding: 4px;
}
If we have done everything right, you now have a transparent iframe displaying your guestbook. Of course, if you want the ultimate integration without advertisement and a powered by UltraGuest footer, you can upgrade your guestbook from the Control Panel:
My Account -> Upgrade
© 2009 UltraGuest
