Best way to create an Advanced HTML Page?

First topic message reminder :

Hello everyone,

Lately I have been brainstorming ideas on possible updates and new features for my forum and site. One of my ideas is very cool but will require a seperate very advanced HTML Page. I have never attempted such a big project on my before so I figured I could get some tips and advice here.

My questions are:

• Is there an easy way to go about creating an HTML Page (on forumotion)
  
• Is there a way to include off site Embed codes in HTML Page?
  
• Is there a way for the HTML page to be my home page but the forum still appears as the homepage as well?
  
• Is there a way to insert my navigation bar on the HTML Page?

Any assistance will be greatly appericated, again this is my 1st ever big project that I will doing solely. More information can given out upon request. A test forum is avalible so I can work on it before totally bringing it online on my real forum.
This is a big project, I am excited and scared at the same time, this has to go just right to be successful.

Regards,
-Brandon

Add this to the top of your HTML page :

Code:

<script type="text/javascript">//<![CDATA[
$(function() {
  var ud = _userdata;
  $('.fa_username').text(ud.username);
  $('.fa_userlink').attr('href','/u' + ud.user_id);
  $('.fa_avatar').html(ud.avatar);
  $('.fa_posts').text(ud.user_posts);
  $('.fa_pm').text(ud.user_nb_privmsg);
  $('.fa_rep').text(ud.point_reputation);
  $('.fa_rank').html(lang.rank_title);
}); 
//]]></script>

And it'll allow you to place the username and other data of the member by adding a classname. For example :

Code:

<span class="fa_username"></span>

Will display as Guest when the page is loaded. Note that you need to be using your forum header for this method, which you are. Without the header you need to use an iframe. Here's an example page that I wrote up :

Code:

<script type="text/javascript">//<![CDATA[
$(function() {
  var ud = _userdata;
  $('.fa_username').text(ud.username);
  $('.fa_userlink').attr('href','/u' + ud.user_id);
  $('.fa_avatar').html(ud.avatar);
  $('.fa_posts').text(ud.user_posts);
  $('.fa_pm').text(ud.user_nb_privmsg);
  $('.fa_rep').text(ud.point_reputation);
  $('.fa_rank').html(lang.rank_title);
}); 
//]]></script>

<style type="text/css">
.data-profil {
  text-align:center;
  background:#EEE;
  border:1px solid #CCC;
  border-radius:3px;
  width:150px;
  padding:3px;
  margin:3px;
}
</style>

<div>  Hello <a class="fa_username fa_userlink" href="#"></a>, this is an example of using HTML classes to apply JavaScript values.</div>
<div class="data-profil">
  <div><strong class="fa_username"></strong></div>
  <div class="fa_avatar"></div>
  <div class="fa_rank"></div>
  <div>Posts : <span class="fa_posts"></span></div>
  <div>PMs : <span class="fa_pm"></span></div>
  <div>Reputation : <span class="fa_rep"></span></div>
  <div><a class="fa_userlink" href="#">View profile</a></div>
</div>

You'll see the different classes put to use to display data of the user. If you have any questions, let me know.

Thanks Ange!

Hello,

So Ange I tried that code you provided me, it appears to make the user who is viewing the page's profile info appear. Is that there a way to make only a specific username appear?

here is how I have the code you provided inserted:

Code:

           Twilight FM! 
  <div class="data-profil">
  <div><strong class="fa_username">twilight fm</strong></div>
  <div class="fa_avatar">http://r19.imgfast.net/users/1913/11/07/96/avatars/8-38.jpg</div>
  <div class="fa_rank">[img]http://i38.servimg.com/u/f38/16/03/72/60/vip_ra10.jpg[/img]</div>
  <div>Posts : <span class="fa_posts"></span></div>
  <div>PMs : <span class="fa_pm"></span></div>
  <div>Reputation : <span class="fa_rep"></span></div>
  <div><a class="fa_userlink" href="http://broadcastingduo.forumotion.com/u8">View profile</a></div>
</div>

Also here is who I have the other code at the top of the html page:

Code:

<script type="text/javascript">//<![CDATA[
$(function() {
  var ud = _userdata;
  $('.fa_username').text(ud.username);
  $('.fa_userlink').attr('href','/u' + ud.user_id);
  $('.fa_avatar').html(ud.avatar);
  $('.fa_posts').text(ud.user_posts);
  $('.fa_pm').text(ud.user_nb_privmsg);
  $('.fa_rep').text(ud.point_reputation);
  $('.fa_rank').html(lang.rank_title);
}); 
//]]></script>
<span id="sceditor-end-marker" style="line-height: 0; display: none;" class="sceditor-selection sceditor-ignore"></span><span id="sceditor-start-marker" style="line-height: 0; display: none;" class="sceditor-selection sceditor-ignore"></span><style>
.subTitle {
color: #000
font-size: 18px;
border-bottom: 1px solid;
padding-bottom: 6px;
margin-bottom: 6px;
}
.subWrapper {
  background:#EEE;
  border:2px solid #CCC;
  border-radius:6px;
  padding:6px;
  margin:6px;
}

I have included the code around each so that if I messed up in modifing/adding the code you will have enough of it to fix it.

Screenshots available on request.

Thanks again for all the help Ange!

-Brandon

The script I provided when applied, will display the information of the user reading it. So, if you want a specific user, you'll have to write that information by hand.

Well as I said.... it is optional anyway... so what do think? How does it look? I added your wrapper code.

Hello,

So yesterday I finished the HTML page on my test forum, everything worked a okay right? Today I decided to publish the page on my forum. It is published, but the problem I am experiencing is that the html page should be on: http://broadcastingduo.forumotion.com however, whenever you type that in or the click the link automatically redirects you to http://broadcastingduo.forumotion.com/forum which is what I do not want it to do, I have tried clearing the cache, browsing history, forum cookies and everything. I still get this annoying redirect. Is there any known reason why it might be doing this and if so how do I fix it.

Thanks for all your assistance so far,
-Brandon

EDIT: I will just create a topic on the support forum. Thanks for all your assistance Ange.

I think you fixed it ?

It looks good

Yes I have fixed it. Is there anytning else you think I could add to it you think or no? I apologize btw, i meant to mention you in the page credits at the bottom but forgot to add it to the code. I will try to do this tommorow if I can.

It looks alright

I personally think a container would help make the content stand out more. The basic layout for that on phpbb2 is this :

Code:

<table class="forumline" border="0" cellpadding="0" cellspacing="1" width="100%">
  <tbody>
    <tr>
      <td class="catLeft" height="25">
        <span class="genmed"><b><center>Title</center></b></span>
      </td>
    </tr>
   
    <tr>
      <td class="row1">
        Content
      </td>
    </tr>
  </tbody>
</table>

Other than that, it's nice.

Thanks Ange I will give that a try on my test forum when I get a chance. Would never believe how busy I am on a 4 day weekend, good time to catch up on the forum chores .

Thanks again Ange,
-Brandon

So today I did a little bit more work on the html page on my test forum and managed to add a hyperlink to each station's topic with their full chatroom and cast on it (which we call their 'Channel' or 'view channel').

This is only the 1st improvement to the page I have planned, I am also working on finding a way to make the page look a little more prettier.

http://testingduo.forumotion.com/

Anchors, now you're getting somewhere. Have you considered adding a frame ?

A frame? I just know the page is to say it bluntly... ugly. The css is minor but it never intended to be pretty, I just wanted to get it out there, now that I have I can focus on giving the page a pretty make over. Any ideas you have on how to do this? I have been watching youtube videos on writing basic css and I think I am starting to get it, the problem with html page right now is that the css is built into the html itself and not a seperate css stylesheet. So I have to find a way to build off of this and make the page prettier without screwing the html in anyway as well. This is going to be a long road. But I a begining to understand css now.

Ange Tuteur wrote:It looks alright

I personally think a container would help make the content stand out more. The basic layout for that on phpbb2 is this :

Code:

<table class="forumline" border="0" cellpadding="0" cellspacing="1" width="100%">
  <tbody>
    <tr>
      <td class="catLeft" height="25">
        <span class="genmed"><b><center>Title</center></b></span>
      </td>
    </tr>
   
    <tr>
      <td class="row1">
        Content
      </td>
    </tr>
  </tbody>
</table>

Other than that, it's nice.

Also, CSS can be inserted into an HTML page with either the <link> or <style> element. Since you're using it inside the HTML page you should use the style element. This should be placed inside your <head> element :

Code:

<style type="text/css">

</style>

Between the tag above you can write all your style rules. It has the same rules has the stylesheet in the admin panel, the only difference is that it's in an HTML page.

example :

Code:

<style type="text/css">
.red { color:red }
.blue { color:blue }
.green { color:green }

.block-element {
  display:block;
  margin:3px;
  padding:3px;
}
</style>

These types of stylesheets are commonly referred to as inline stylesheets.

Thanks Ange for the advice and tips as always.

I have that 1st code (Container) installed at the html page already though. At the top of html page.

What did you mean by a border?

The border I mentioned is similar to what the container does; having something to frame your content.

But is the container added correctly? I mean you did not think it was added.

I didn't see it

It's the basic table used for the widgets and a majority of other content on phpbb2. The content you want to be inside that module should go where Content is.

Well the code is at the top of the page, maybe I can dig the code out for you.

Edit: Here is how the code is added in the html page:

Code:

 <style>
.subTitle {
color: #000
font-size: 18px;
border-bottom: 1px solid;
padding-bottom: 6px;
margin-bottom: 6px;
}
.subWrapper {
  background:#EEE;
  border:2px solid #CCC;
  border-radius:6px;
  padding:6px;
  margin:6px;
}
</style>  <br />
<center>
                                     <strong><span style="color: rgb(204, 0, 51);"><span style="text-decoration: underline;">Featured Stations:</span></span></strong><br />
</center><br /><br />

Also I have put the 'View Channel' Links online on my main forum.

It looks like it's cutoff. What is that that you're trying to do ?

Yeah I only included part of the code, enough to show where its placed.

OK, so here is a little more of the HTML page with that container you wanted.

I also have been experimenting with trying to add a background image behind the anchors, so may see that in there as well.

Is this enough of the code?

Code:

<style>
.subTitle {
color: #000
font-size: 18px;
border-bottom: 1px solid;
padding-bottom: 6px;
margin-bottom: 6px;
}
.subWrapper {
  background:#EEE;
  border:2px solid #CCC;
  border-radius:6px;
  padding:6px;
  margin:6px;
}
</style>  <br />
<center>
                                       <strong><span style="color: rgb(204, 0, 51);"><span style="text-decoration: underline;">Featured Stations:</span></span></strong><br />
</center><br /><br />
<p>
                 The following stations are currently being featured on Broadcasting Duo:             
</p>
<div class="subTitle">
                           Twilight FM! <strong><span style="color: rgb(253, 208, 23);">(VIP)</span></strong>
</div><br /><span style="background: height:=  390px; width:=112px http://www.rayashop.com/Images/Site/Graybtn.png"> <a href="http://broadcastingduo.forumotion.com/t368-twilight-fm">View Channel</a></span><br />  <embed /> <iframe src="http://vaughnlive.tv/embed/video/twilightfm?viewers=true&autoplay=true" frameborder="0" framespacing="0" style="width: 640px; height: 400px;"></iframe> <br /><br />
<div class="subTitle">
                         Praise FM! <strong><span style="color: rgb(253, 208, 23);">(VIP)</span></strong>
</div><br /><a href="http://broadcastingduo.forumotion.com/t377-praise-fm ">View Channel</a><br /><embed /> <iframe src="http://vaughnlive.tv/embed/video/djjosh?viewers=true&autoplay=true" frameborder="0" framespacing="0" style="width: 640px; height: 400px;"></iframe><br /><span>

The reason I do not want to give you the entire code is because I do not want you to do it for me. I just want tips, advice and suggestions so I can do it myself .

Thanks for everything so far Ange,
-Brandon

P.s On a side note I did put it through that validator you suggested on the 1st page. This was the result:

_________________________

Hello Ange,

Take a look now, it seems I did not add the container afterall.... I have added it now.
http://testingduo.forumotion.com/
What do you think?

I apologize for the lack of work... life just keeps getting busier and busier... but I hopefully will resume permanent work soon.

-Brandon

That looks a lot better.

Thanks... Anything else you think I could add to make it prettier?

Thanks for everything so far.

-Brandon