Use any html code on a page

By Helmut_pdorf

Description

It is possible to use almost any HTML code on your Wikidot site - for security reasons it will be rendered inside an iframe though.

Example (aNobii embeded code)

You might be given some code that looks like this (in this case, it is a "book shelf" badge from aNobii):

<!-- 1 This is the HTML section of the badge -->
<div id="badge">
 <script type="text/javascript" src="http://www.anobii.com/anobi/badge_generator.php?p=012d64e5c2a5327d15&language=2,4&tag=0,11,9,1,8,5,6,4,10,3&count=5&recent=1&progress=3&title=title&subtitle=0&author=0&img=small&link_to=1&az_site=&a_id="></script>
</div>
<!-- Badge ends -->

Simply surround this with the HTML block syntax ([[html]] ... [[/html]]) and add it to your wikidot site's page, like this:

[[html]]
<!-- 1 This is the HTML section of the badge -->
<div id="badge">
 <script type="text/javascript" src="http://www.anobii.com/anobi/badge_generator.php?p=012d64e5c2a5327d15&language=2,4&tag=0,11,9,1,8,5,6,4,10,3&count=5&recent=1&progress=3&title=title&subtitle=0&author=0&img=small&link_to=1&az_site=&a_id="></script>
</div>
<!-- Badge ends -->
[[/html]]

In action

Using the above code should put something like this on your page:

---

Thanks to tsangk for this great snippet: conditional-blocks

---

text above inserted with:

[[include :snippets:if START |unique=1|type=equal|var1=%%name%%|var2=conditional-blocks]]
**##red|Thanks to tsangk for this great snippet:##** [[[code:conditional-blocks]]]
[[include :snippets:if END]]

---

---

Other snippets posted by Helmut_pdorf

Sorted-ListPages-List - 06 Jun 2021 03:46
Todo List with Data Forms - 30 Apr 2015 14:59
Html(embed) code opening in new window/tab - 29 Oct 2014 09:05
Facebook Button - 27 Dec 2013 15:03
Advanced Search - 25 Feb 2012 12:29
Top Nav Menu with ListPages - 16 Feb 2012 01:48
Schedules - 16 Feb 2012 01:40
Find untagged pages - 15 Feb 2012 00:52

---

Rate this solution

If you think this solution is useful — rate it up!

page 1 of 3123next »

Any reason this is not workong for me?

HobStarCS 16 Jan 2010 02:57

I've embedded html fine. But this bit if Java script does not like me. I've no Java experience.

Can be viewed here original source here

▼ Show code

[[code type="html"]]

<script language='JavaScript'>
    width = '180';        // How wide would you like it to be?
    bwidth = '1';         // How thick would you like the border to be?
    bcolour = 'CCCCCC';   // What Colour would you like the border to be?
    bground = 'F8F8F8';   // What Colour would you like the background to be?
    hcolour = '156456';   // What Colour would you like the headlines to be?
    hsize = '11';         // What size would you like the headlines to be?
    tcolour = '000000';   // What Colour would you like the text to be?
    tsize = '11'          // What size would you like the text to be?
</script>
<script language='JavaScript' 
        src='http://www.virusbtn.com/library/feeds/js_news.xml'/>

---

Last edited on 16 Jan 2010 02:59 by HobStarCS Show more

Custom CSS per page

HobStarCS 15 Nov 2009 02:12

Is it possible to use this technique to apply CSS to a particular page

I'm hoping to acheive the following:
a) My whole site has the default CSS
b) selected pages (or templates) use a different CSS to give those pages individual themes.

Why?
You might think that that would make for an awful looking site, but this is for my 'testing site' and would be very useful.

Any advise on this matter would be greatly appreciated.

---

Re: Custom CSS per page

leiger 15 Nov 2009 14:32

This embeds HTML, not wikidot code. What you are looking for is the CSS Module, which has not been implemented yet.

---

~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server | NEW: Wikiroo, backup tool (in development)

Thanks Wikic

Pwisdom 08 Sep 2009 15:31

Thanks wikic, for your concern. I did as you suggested. But I'm still having the same problem. please could you or anyone give an alternative way.

Is there another way I can add the ad code to my page, without framing. Any suggestion is most welcome.
' Love you all.

Re: Thanks Wikic

Helmut_pdorf 10 Sep 2009 07:50

You cannot add a "foreign code" to a wiki page without "using it in an iframe" - there is no other way.. sorry..

---

Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

background colour via css

wikic 07 Sep 2009 21:17

I would use css, for example as below, works in opera and therefore probably all other standard compliant web browsers.

[[iframe http://subdomain.wikidot.com/page/code/1]]
@!
code type="HTML"
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body{background-color:gray}
</style>
<title></title>
</head>
<body>
<h1>Introduction</h1>
<p>
A paragraph of text…
</p>
<h2>Section 1</h2>
<p>
Another paragraph of text…
</p>
<h3>Sub-section 2</h3>
<p>
A third paragraph of text…
</p>
</body>
</html>
[[/code]]
@

Back ground color for framed page.

Pwisdom 07 Sep 2009 15:13

I framed a page according to the instructions here. I mean I was able to put some html codes on my pages, but the problem I'm haven is the back ground. The back ground of the pages framed, remain white. how do I change the back ground, to blend with my page bgcolor. This is what i did,

---

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Business Ideas Ad2</title>
</head>

<body bgcolor="gray">

<script type="text/javascript" language="javascript" src="http://www.jdoqocy.com/placeholder-4002685?target=_top&mouseover=N"></script>

[[/code]]

</body>
</html>

---

many can be found at:
http://businessideas.wikidot.com/

As you can see, I tried defining the back ground color, but I can't see any effect in IE. Google Crome has never showed the back ground of this ad. It appears as if there is no background in Google Crome, which is what I want it to be like in IE. I need a solution. Please help.

wikic 04 Aug 2009 09:08

Thanks, finally achieved what was requested. I have created (what I think is) a new snippet page with better explanation.

@ wikic

meagain 03 Aug 2009 18:22

oI!, Listen up.

Is this what you rae trying to do?
http://psc.wikidot.com/test:wikic
If it is
look at it!
read it
look at the source code.
copy and adjust to suit.
the page is fully open so you can even edit it if if you so wish.

!!!IT DOES WORK!!!!!

If not then explain EXACTLY what the hell you want in a language that non techy geeks will understand.

Not here, because there are only a few helpers that monitor the snippets. go to the community help site,
http://community.wikidot.com/

wikic 03 Aug 2009 16:23

So the behaviour is that the html code used to generate the format of a wikipage is shown in a verbatim text box immediately below!

I tried to remove the text box which produces the image as shown at the previous internet address, using code below:

[[iframe …wikidot.com/myhtmlpage/code/1]]

 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>title</title>
</head>
<body>
<h1>Introduction</h1>
<p>
Another try …
</p>
</body>
</html>

The html format disappears and the text box becomes a dash (-)! This is also wrong

I think there is a missunderstanding !

Helmut_pdorf 03 Aug 2009 16:47

1. "Code block" was implemented to show the visitors of a wikpage the used code on such a wikidot page
2. "Code block" got a type="…" attribute for a better visuality -
3. After detecting that the "code blocks" had internally UNIQUE identifier on their wikidot.page and could be referenced in an iframe sentence like any other http:\..source in the web this was used by some people to insert ther html pages on a wikidot page.
4. With the iframe syntax you can insert every readable html code in the web on a page. - if this page holds ( like in yours) the underlaying "code block" too than this is your decision to show this codes.. adding it before or after the place ehere the rendered ( and replacing ) "iframe output" is shown.

If you dop not wnat this behaviour - than put your code block into a comment:
[!--
code block
--]
- this is the brutal way .
Normally I would put the code block into a "collapsible block" hiding it behind an unvisible character -

---

Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

Re: ? ?

Helmut_pdorf 03 Aug 2009 16:52

So the behaviour is that the html code used to generate the format of a wikipage is shown in a verbatim text box immediately below!

I think there is a great misunderstanding with the wikidot syntax:

Most users of wikidot do not write in html code- and the gerenated html code is only visible in firebug or in the html-page output ( "show source") - but this is senseless because you cannot change it.

Like in this forum posts the syntax is super-macro like with some predefined wikidot-"tags" creating a xhtml code for the rendered pages. Rendering of a single page is done by reading the stored "code" and translöating it into html language and not in the moment of storing your pages.

I hope this makes something clear?

---

Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

Re: Why not use wikidot syntax?

Helmut_pdorf 04 Aug 2009 07:46

1. the written source code

+++ INTRODUCTION
Another try

2. gives you :

INTRODUCTION

Another try

3. Why do you want to write all in html ?

---

Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

wikic 03 Aug 2009 15:58

See image at previous internet address. The code below was used. Only the frame with the html:

INTRODUCTION

Another try

should appear. This is wrong

[[iframe ….wikidot.com/myhtmlpage/code/1 frameborder="1" scrolling="yes" width="340px" height="140px"]]

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>title</title>
</head>
<body>
<h1>Introduction</h1>
<p>
Another try …
</p>
</body>
</html>

Re: What is wrong here?

Helmut_pdorf 03 Aug 2009 16:08

I do not understand - what is wriong on this output.

This is exact what the documentatin says..

Could be this is not what you want…

if you want to hide the code block ( this is "wikidot.com terminology" ) than you should hide it with a simple syntax line.

Wikidot was not designed to host the html pages of a wiki.

This is possible , but was never the target at the beginning,

---

Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

So, I see, this is working :)

Helmut_pdorf 03 Aug 2009 15:52

What you now need is to "hide" all the html coding block - staff behind a "collapsible block" or insert it into a "comment" - start and comment- end .line..

Than you will see only the html-output…

---

Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

page 1 of 3123next »