The new home for the IMVU Community is help.imvu.com. For more information, check out this article.

Complete iFrame/DIV Layout Tutorial
Goto page 1, 2, 3 ... 14, 15, 16  Next
 
Post new topic   Reply to topic    IMVU Forum Index -> Homepage Building and Design
View previous topic :: View next topic  
Author Message
Qwerty VIP Club Member 18+ Age Verified
Moderator
Qwerty <a href='/vip_club/'><img src='/catalog/web_images/vip_35x18.gif' width='35' height='18' alt='VIP Club Member' /></a><!-- VIP Club Member Icon --> <a href='/age_verify/index/'><img src='/common/img/icons/age_verified_35x18.gif' width='35' height='18' alt='18+ Age Verified'/></a> 's page


Joined: 13 Aug 2007
Posts: 15264
Location: United Kingdom

PostPosted: Fri Mar 19, 2010 5:40 pm    Post subject: Complete iFrame/DIV Layout Tutorial Reply with quote



Warnings:

1: This could be the longest post EVER.

2: I have never opened up GIMP before in my life - so please stop asking me to do the tutorial in GIMP. I'm a Photoshop girl and if you have questions about Photoshop, then I'll gladly help Smile But all GIMP questions should be posted here in the thread for other people to help answer (like the awesome SilentProtest who is a GIMP wiz).

3: I will NOT go into the client to chat with you to help. It is harder and less helpful.

This was intended as a prequel to this tutorial, but ended up replacing it O_o

This tutorial walks through step-by-step on not only how to design a layout, but also how to code it and get it working on your page.

Although you see step-by-step how I make my layouts, I would strongly recommend that you have a basic understanding of HTML and are confident in it.

If you do not know what the difference is between a DIV and an iFrame, here is an explanation by Roxie Rockette:

Roxie Rockette's wrote:
An iFrame layout is like a mini website, it has pages that you can go between. For example, there might be a button you click on to see information about a person or their friends. As it is a mini website, you need somewhere for the pages to go on the internet, that is why you must set up hosting from places like webs.com and that is where you also go to edit the text on the pages.

A DIV layout doesn’t have any pages, not even one. It is simply a ‘text box’ that you type into directly from your IMVU page, it require no hosting or going off IMVU.


Although, to be fair, Dynamic DIVs like found here are an exception Razz

I would also like to note that this is just my way of coding layouts, people have different ways and they may be better. This is just mine and it works for me Smile This may be no help whatsoever, but it may help someone! If there are any errors in any of the tutorials, please point them out!

I use three programs in this tutorial:
Photoshop CS4
Notepad
Firefox

The use of Photoshop CS4 is only for designing the layout image. Although I have not used GIMP before, if you are already confident in the program I'm sure you can work out what the alternatives actions are. I do not think there is anything Photoshop only in this tutorial, so GIMP users should be able to work with it. Please remember that I cannot do this tutorial in GIMP. It would be like asking you to do a tutorial in a program you have never used before and do not understand. But I will have comments for GIMP users in red so look out for those Smile

Notepad is a free program that comes preloaded on every Windows PC. To find it, go to: Start>All Programs>Accessories>Notepad (In Windows 7, other Windows may vary in process).

On a Mac, you may initially want to use TextEdit which comes already installed, but for some reason it is not good for coding and can cause issues. Instead, I found that TextWrangler, a free app, to be a good replacement.

Firefox is only used as it is my browser of choice, this tutorial will work in any browser.

The steps I take in this tutorial are to make an iFrame layout. However, I will point out what to ignore or when to stop if you're just doing a DIV layout.

As the images for this tutorial are quite big and exceed the forum rules of image sizes, every image will be posted in a text link which will open up and show the bigger image. Under each text link will have text related to the image above.

I'll break this tutorial up into two parts, the image making and the coding. I suggest skimming through the tutorial first so you can get a jist of what is going on and then read it again more closely.

The top notch SilentProtest has made a post with videos for GIMP users about the basics of the image making side of this tutorial. I personally would suggest watching his first, making your layout and then read my steps afterwards just to make sure you haven't missed anything. Here it is Smile

So, shall we get started?

Image Making:
Step 1
First you need to create a blank image. You MUST have it at 900px wide. Not any bigger and not any smaller. If it is bigger, it won't centre and if it is smaller, it gets SO much harder to code - you have no idea. Height can be whatever Smile

Step 2
Before you do anything, you need to turn the grid on. This may sound silly, but it is ESSENTIAL for coding later on. The above shows how to find it in Photoshop.

Note: GIMP users can use the grid if they want or they can ignore it because you guys don't really need it (I'll explain later).

WatersReflection made a great guide here for using the grid in GIMP <3

WatersReflection wrote:
How to view Grid in GIMP
This is very, very simple, my loves. :3

1. Open up GIMP and create the size of the layout that you want. Remember width must be 900px and make sure you click the "Advanced Options" and go down to "Fill With:" and click the drop down menu and make sure "Transparency" is selected. (Side Note: I've circled where Advanced Options is and I've circled where you need to go to change the picture to be transparent.)

Click here. (Step 1)

2. Now go to Image>Configure Grid.

Click here. (Step 2)

3. Do EXACTLY as what is displayed in the box below.

Click here. (Step 3)
IMPORTANT: REMEMBER TO CHANGE THE PIXEL AND HEIGHT UNDER "SPACING" TO 25 PIXELS x 25 PIXELS. I CAN'T STRESS IT ENOUGH.

4. After you've made sure everything is exactly like I told you to have it, click okay.

5. Now, the grid & guide isn't going to show yet.. Go to View>Show Guides and click it. If it is checked it should have a little check mark right beside it, like so:

Click here. (Step 5)

6. Now this is exactly like step 5, but we are going to show the grids. So go to View>Show Guides and click it, making sure that the little check is to the left of it, like so:

Click here. (Step 6)
End result!

Quote:
Bonus: Now, to make it SO much easier when you are trying to get the squares or circles perfect you can go to View>Snap Guides and make sure it's checked and then go to View>Snap Grids and it'll make your selects snap to that guide and grid, making it precise and perfect. :]


IF YOU HAVE ANY QUESTIONS ABOUT THIS TIDBIT THEN MESSAGE ME THROUGH THE FORUMS OR JUST POST YOUR QUESTION IN THIS THREAD AND I'LL RESPOND ASAP.


Step 3
You can set the grid to whatever size you want, but as a personal preference I like it 25px as it is easy to work with (25>50>75>100) and I use the 25px way of coding later on, so for now I would suggest you use 25px too.

Step 4
Now we've told it how we want our grid, time to turn it on!

Step 5
The image now looks like this with the grid turned on.

Step 6
The way I like to lay out my boxes is by putting them in different bold colours and on different layers. Here you can see where I plan them out and they all fit inside the grid nicely with the expectation of the white box where I plan the avatar image to go. As the avatar image is 160x220, it doesn't fit and so we'll just have to solve that problem a bit later Smile

Step 7
These are my layers in case you're interested, the bold colours also helps at looking at them in a glance to work out which box is which Razz

Step 8
I've right clicked on the 'main box' layer and going to click on "Blending Options..."

Note: GIMP users, this step is just to fancy the boxes. If you have your own way, do that now Smile

Step 9
After fiddling with the styling a bit, I've decided on a purple layout theme. I would always recommend using 'Stroke' on a layout as it helps with coding later on, but the stroke must always be on the outside - if inside, it will muck up coding XD

Step 10
I usually save my styles as it is easier to apply them to the other boxes. Press "New Style..." and then "OK".

Step 11
Here in the "Styles" window we see the style. One at a time, click on a layer and press the style we created. One by one the layout boxes will turn from those bold colours to the style...

Step 12
...like seen here!

Step 13
Now, as I said before, I am making an iFrame layout so I need buttons! If you're just making a DIV layout, ignore all text related steps XD

Note: GIMP users making an iFrame need to read this step and onwards!

Step 14
Just like before, I right clicked on the text layer and pressed "Blending Options..." and fiddled around with the settings to make the text all nice and fancy.

Step 15
I think I'm done with the layout image! Time to save! I like to save my images via the "Save for Web & Devices..." mode, but whatever is best for you Smile

Note: Pay attention to this step and on wards GIMP users!

Step 16
Whatever you do though, make sure you save it as a .png if your image is using transparency (like this one is) a .jpg will be best if there is no transparency involved Smile

Step 17
Now, go back to your image and type over every box where a DIV will be. So I have five: main, bottom left box, bottom right box, scrollbox and avatar (yes, that counts). Then save it as something like: mylayoutimage-GUIDE

This step is to help with us remembering what box is called what.

Coding:
Step 18
Here is the base code we shall start with, copy and paste the following into a Notepad file and save as: base_code.txt

Code:
<center>

<font face="verdana" size="1" color="black">

<img src="http://layout image url here" width="000" height="000" border="0">

<div id="main_box" style="width:000px; height:000px; position:absolute; left:000px; top:000px; z-index:1; overflow:auto;">
<iframe src="http://home url here" name="inlineframe" width="000" height="000" border="0" marginwidth=0 marginheight=0 frameborder=0 allowtransparency="true"></iframe>
</div>



<style type="text/css">
   #aboutme_panel, #contact_panel, #dev_panel, #wishlist_panel, #visitors_panel,
   #messages_panel, #tagcloud_panel, #stickers_panel, #collect_panel,
   #room_panel, #rankings_panel, #cool_panel, #gallery_panel, #friends_panel,
   #streetteam_panel, #blog_panel, #video_panel_header, #music_panel, #rss_panel, #url_panel,
   #special_panel,#outfits_panel {
      width:900px !important;
   }
   #rightColumn {
      display:none !important;
   }
</style>

<style type="text/css">
#url_panel_colRow, .imvucodes_net { display:none !important; }
</style>

<style type="text/css">
.paneltitle, .panelmenu, .imvucodes_net { display:none !important; }
</style>
</font>
</center>


The code is in two parts, the part that is to do with creating the DIVs, iFrames and the layout image. The second is to do with making the URL Panel adjust to contain the layout.

As you can see, I have one DIV already set up for the iFrame. Let's use this to create our first box, the main one.

(If you're doing DIVs and not iFrames, please DON'T delete this yet, I will tell you when)

Step 19
Now, back in your image program, turn the grid back on for your guide. You have to work out the co-ordinates for your first box. In the code above, you see all those 000s? Let's start with left and top. In the image, see the red arrow and the 0x0. That is where the layout begins. So, if we set our DIV to 0px and 0px left and top it will be there.

As the grid is in sections of 25px we can count how far left and how for off the top the boxes are. For example, the main box is 100px off the top and 250px from the left. So, we would say in the code: left:250px; top:100px;

The same is with the width and height. Just add up the 25px per grid-box to get the correct number. So the main box is 200 high and 600 wide, that means the code becomes: width:600px; height:200px;

This process works with every box in how far it is from the left and top and how wide/high it is. This step is the most important in this tutorial. Please take your time on this step fully understanding what is going on.

Note: GIMP users! Remember how I was saying you don't need the grid? Because you have your own way of working out co-ordinates written by SilentProtest (thank you <3):

Step 1
Right click the layer of the box you want to know the coordinates of and click 'Alpha to Selection'.

Step 2
Double click the selected box with your selection tool, you should get the wanted mouse symbol (example).

Step 3
Now look at the bottom left panel. You should see something like the example.
Number 1; left coordinate
Number 2; top coordinate
Number 3; width coordinate
Number 4; height coordinate

Step 4
Adjust the coordinates. Remember to have the right mouse symbol otherwise adjusting the coordinates will not work out.

You can of course also work the other way around by filling in all the coordinates first.

</GIMP user only co-ordinates end> Razz

Step 20
Here is the code for the main box fully done. Also remember to update the iFrame code inside with the same width and height. Yes, even you DIV users - trust me, you'll understand why later Smile

Step 21
We have more than one box in this layout, so we need more DIVs! Just copy and paste the main_box code below, change the name and delete the iFrame code. Just type what box it is instead. Repeat Step 19 to get the correct numbers and type them in like before. Keep repeating this step and step 19 until you get enough DIVs for your boxes.

NOTE: NEVER EVER PUT A DIV BOX WHERE YOUR BUTTONS ARE.
Almost all problems people have about their buttons not working are down to people covering their buttons with a DIV box. So don't do that Razz

Step 22
Here are all mine done! As we mentioned before, the avatar image doesn't fit correctly, so just get it to the nearest you can Smile Note that the avatar image doesn't have overflow:auto; in it as that bit of text that creates scrollbars. As we do not want scrollbars on our avatar image (well, I don't anyway Razz), remember to take overflow:auto; out for DIVs you do not want scrollbars for.

Step 23
Upload your layout image (the one without the guide) and replace the URL with yours like here (also remember to put in the width and height).

Step 24
Same with the avatar image, put yours in here too.

Step 25
Testing time! I've loaded our layout code into a test account in the URL panel (I suppose you can put it in the Sandbox Panel, but I like to keep it in the URL Panel - but whatever you, never put it in any other panels!) and this is how it came out. Hmm, well, aside from the avatar image, it's looking okay! Or is it...?

Step 26
Testing is vital and this is how I do it. First, close the </center> tag near the top, so everything will be aligned to left (you'll see why in a moment). Next, set the iFrame home URL to somewhere plain. I have chosen my search engine as it has a white background.

Step 27
Further down in the code, test any other boxes that should scroll. I type scroll a ton of times with a <p> in between them. This creates scrollbars and that tells me if they are aligned correctly or not.

Step 28
Put the testing code back in and we can see now what needs fixing. Well, the avatar image has moved again and is still not in place. The boxes with scrollbars seem out by just a bit - just a touch too high. Your code may be perfect or it may have a few errors like mine.

Step 29
To fix the errors, just go back into Notepad and edit the code to fix them. In my case, I need to push my DIVs down by 1px.

Step 30
Ah ha! Much better! But the avatar image is still out..

Step 31
Before we fix that though, delete all the testing parts, so no more </center> near the top, scroll,scroll,scroll and no more clusty.com Razz

Return it back to where it was before, but keep all your error fixing of course! So it will look something like this...

Step 32
Woo! Now, that annoying avatar image -_-

Step 33
We're just going to have to fiddle around with the numbers until we get it right. It took me a few times, going back and fourth pixel by pixel, but these are the correct numbers!

Step 34
Woo! Yeah! Party time! The layout is looking pretty damn good, almost finished now!

Step 35
Well, iFramers - hold off for a bit. It's time for the DIVers to party as they are now finished! Just delete that iFrame code you've been itching to get rid of and use the blank gap to type in what you want. You are done and have finished this tutorial Smile

Step 36
Us iFramers though have a little bit further to go. We have to sort out those buttons we created! To do that, we need to use something called an ImageMap. And we're going to use one found here. If you have problem with that website, try this image map generator instead Smile

To make this work, you need to tell the site what image you're going to use, so paste in your layout image URL then get started on 'drawing' out boxes like I have in the image above. Note that I have not given the URLs a target or an alt. I guess you should do the alt, but I don't do it Razz Do NOT give it a target no matter what though.

So, you're fine with linking up your HTML pages (home, about and so on), but what about those chat, add and message links?

Step 37
Gaf to the rescue!

Type your username here like I have with mine.

Step 38
Then BAM! Information overload! But just pick the links you need so, I first need my add link...

Step 39
Found it! Copy and...

Step 40
...paste into the correct Href box! Repeat steps 38, 39 and 40 until you fill up all the boxes. You can set the target to these type of URLs as "new window".

Step 41
When you're done, scroll down a bit and press "Code" then this will pop out. Copy and paste it into a NEW Notepad file, NOT the one your layout is in. Why?

Step 42
Because it is one super long line that is hard to work with -_-

Step 43
Go through the line and delete the highlighted parts for every one you meet (except the alt if you filled it in - you are a better person than I am XD)

Step 44
Then just give it a tidy up: Isn't that much better and easier to read? Your <map id="" name=""> line will look weird with a bunch of numbers. Delete that and replace with ImageMap1 (nice and easy to remember) like seen in the image.

Do you see all those: target="" ? They need targets!

Step 45
Go back to your layout code in the other Notepad file and look at the name of our iFrame - we called it inlineframe (random fact: that is what iFrame stands for!).

Step 46
So go back to the ImageMap code and tell all the targets to open up in our iFrame called inlineframe. It should look something like this.

Step 47
Now copy the ImageMap code and paste it in the layout code Notepad file like this!

Step 48
Scroll up to the layout image at the top of the layout and add this in like seen (yes, add the # before the ImageMap name).

Then you won't believe it... but you're done! Copy and paste your layout code into your testing account and it should all work! Woo-hoo!

Although, it is worth mentioning a few things:

1: The last part of the layout where all the IMVU related code is, is just code for IMVU to make our panels work better with iFrames. The first bit of code tells the panels to get really fat and size to 900px width, getting rid of the right panel. As a result, before you put this code in, you must move all panels over to the left.

The second bit gets rid of all the default text already inside the URL Panel, making it nice and clean for your code to go in. And the third code gets rid of the panels headers (So no more "My Url" or "My Messages" on top of your panels. If you wish to change this, take the code out and find one better suited for you)

2: Is that when you make your HTML iFrame pages (the home, about, friends and so on), they must have the following code in every page, this makes the background transparent so your layout image will show through:

Code:
<style type="text/css">
Body { Background: transparent; }
</style>


If your layout doesn't work or a step fails, please check each step thoroughly and please make sure you haven't made any errors. If you seriously cannot find the problem out on your own, feel free to post your problem here in this thread. I shall try to help Smile

Good luck with your layouts and hopefully this tutorial was helpful to you Smile


Last edited by Qwerty VIP Club Member 18+ Age Verified on Mon Sep 11, 2017 3:11 am; edited 41 times in total
Back to top
View user's profile Send private message  
Qwerty VIP Club Member 18+ Age Verified
Moderator
Qwerty <a href='/vip_club/'><img src='/catalog/web_images/vip_35x18.gif' width='35' height='18' alt='VIP Club Member' /></a><!-- VIP Club Member Icon --> <a href='/age_verify/index/'><img src='/common/img/icons/age_verified_35x18.gif' width='35' height='18' alt='18+ Age Verified'/></a> 's page


Joined: 13 Aug 2007
Posts: 15264
Location: United Kingdom

PostPosted: Fri Mar 19, 2010 5:41 pm    Post subject: Reply with quote

Updates:
23/02/16: Images fixed.

21/02/16: Imgur images no longer work with imvu.com, I will look for a new place to host the images.

10/08/15: Added a paragraph stating Mac users should not use TextEdit to code in.

17/07/13: Fixed broken image links.

15/09/10: Turns out I never said what panel to put the code in! I've now corrected that in step 25 by saying the URL Panel should be used.

04/08/10: Added SilentProtest's temporary video for the basics in image layout making for GIMP.

01/08/10: Fixed a small error in step 8.

06/04/10: Added a mini tutorial before as part of the "Questions & Answers" section to create and upload .html pages for the layouts.

20/03/10: Fixed typing errors, clarified parts and added some comments I forgot before. SilentProtest explained how the find co-ordinates in GIMP and without using a grid - his tutorial has been added in.


Questions & Answers:
Looking Notepad and the online editors like webs.com can get confusing, is there another way I can edit my HTML so I can preview it?

Yup! WatersReflection found a great site to help preview your HTML: http://htmlpreview.richiebrownlee.com/

I'm confused, what do I put where it says "http://home url here" and how do I get the text inside my tabs (like where it says "About" and so on)?

DIVs don't need pages or tabs, so I'm going to assume that you're referring to iFrames Smile

You need to make pages for the text to go into then you link them up by putting the URL in where it says. So, "http://home url here" would become something like "http://jessieimvu.webs.com/home.html".

SilentProtest has made an AWESOME tutorial with images to explain how to make pages for your layouts, so I would read that first.

Fragrance has made an AMAZING tutorial here in one big nice shiny image that explain how to edit pages made in webs.com Smile

If all that fails, you can try my way of explaining Smile

I suggest for hosting your pages at:
Imvustylez Filedrive - A free hosting site designed for hosting IMVU pages.

There are other sites across the internet that allow you to host your pages at, so I'll try not to be too specific with the following instructions as methods vary per site:

1: Make your pages. Open up Notepad and type some stuff in. If you know HTML, use that too for formatting.

2: Save your pages ending in .html NOT .txt. Save them as something memorable like home.html, about.html, friends.html, more.html and you get the idea Smile

3: Upload them to your hosting site. This method varies the most, try and find an FAQ of the site to see how you can upload your own files - I cannot help you with uploading them.

4: After uploading, you should be given a URL for each page. Use these URLs to fill in the links in the tutorial.

I'm not very HTML savvy, can you give me a .html page to get started with? So I can edit it and just change the text to say what I want?

Sure, copy and paste the following into Notepad and save as base_pages.html

Code:
<center>
This is a basic HTML page example.
<p>
Antonio82 doesn't like it when people use the paragraph break above without closing it.
<p>
But Qwerty is too lazy to close them.
<p>
<b><u>So, to recap:</u></b>
<br>Antonio82 knows best
<br>Qwerty knows lazy
<p>

<i>Did you hear that?</i><br>
<b>What?</b><br>
<i>I'm italic</i><br>
<b>So? I'm BOLD!</b><br>
<u>Hey! Don't ignore me! I'm underlined!</u><br>
<i><b><u>*ahem* I'm EVERYTHING!</i></b></u>
<p>

What about font colours, sizes and just fonts?!<br>
<font face="verdana" size="1" color="#6699CC">Woo! I'm pretty :) I'm nice blue, small at a size 1 and in Verdana</font>
<p>
Yes, but you're also using the font tag which people frown upon these days.
<p>

<img src="http://i44.tinypic.com/333elqb.jpg">
<p>
Gasp! An image! So, that is how you put them in eh? Niiiiiice.
<p>

<font face="Lucida Sans" size="2" color="Tomato">Nicer than me?</font><br>
I guess you are pretty nice, but how do I know what fonts and colours I can use?!
<p>
<b>Try these:</b><br>
<a href="http://en.wikipedia.org/wiki/Web_typography" target="_blank">A Wikipedia page on web safe fonts</a><br>
<a href="http://en.wikipedia.org/wiki/Web_colors" target="_blank">And colours!</a>
<p>

<i>Hang on there! Did you just use a link?!</i><br>
Yes, I did. And there are a few things people need to know when using a link:<br>
<li>When you set your target to "_blank" that means it will open up in a new tab/window</li>
<li> If you're using iFrames, you can set the target to the iFrame's name and it will open up inside that iFrame.</li>
<li>If there is no target at the end, then the link will open up inside the page you're currently in. This can be messy inside iFrames</li>
<p>

<p align="left">Can I just say I don't like things in the centre, I like them on the left...</p><br>
<p align="right">So? I like them on the right :P</p>
<p>

<i>Gasp! Did Qwerty just close those paragraph tags above?</i><br>
Yes, but only because they needed closing... they need closing, normal ones don't :P
<p>

<font face="Century Gothic" size="3" color="DarkSlateBlue">I think I'm set now for making this page much own, is there anything else I need to remember?</font><br>
<font face="verdana" size="1" color="black">Yeah, don't delete the code below, it's making the background transparent so your layout image shines through :)</font>
</center>

<!--DO NOT DELETE THE FOLLOWING--!>
<style type="text/css">
Body { Background: transparent; }
</style>


Yes, it is very long, but it is also a basic tutorial in HTML, plus:


Razz

Then just press "Save As" and rename to like home.html, about.html, friends.html, more.html and so on until you have created all your pages. Then just edit the content inside Smile


Last edited by Qwerty VIP Club Member 18+ Age Verified on Tue Feb 23, 2016 6:38 am; edited 20 times in total
Back to top
View user's profile Send private message  
Qwerty VIP Club Member 18+ Age Verified
Moderator
Qwerty <a href='/vip_club/'><img src='/catalog/web_images/vip_35x18.gif' width='35' height='18' alt='VIP Club Member' /></a><!-- VIP Club Member Icon --> <a href='/age_verify/index/'><img src='/common/img/icons/age_verified_35x18.gif' width='35' height='18' alt='18+ Age Verified'/></a> 's page


Joined: 13 Aug 2007
Posts: 15264
Location: United Kingdom

PostPosted: Mon Jul 16, 2012 7:35 am    Post subject: Reply with quote

Cleaned thread out Smile
_________________
New Forums and Help Centre announcement
Back to top
View user's profile Send private message  
Antonio82 18+ Age Verified

Antonio82 <a href='/age_verify/index/'><img src='/common/img/icons/age_verified_35x18.gif' width='35' height='18' alt='18+ Age Verified'/></a> 's page


Joined: 26 Jul 2006
Posts: 6381
Location: United Kingdom

PostPosted: Tue Jul 17, 2012 3:52 pm    Post subject: Reply with quote

It sucks, because this is no longer allowed, along with free layouts! I think I will leave IMVU now, it seems kinda empty now.
_________________
Back to top
View user's profile Send private message  
Qwerty VIP Club Member 18+ Age Verified
Moderator
Qwerty <a href='/vip_club/'><img src='/catalog/web_images/vip_35x18.gif' width='35' height='18' alt='VIP Club Member' /></a><!-- VIP Club Member Icon --> <a href='/age_verify/index/'><img src='/common/img/icons/age_verified_35x18.gif' width='35' height='18' alt='18+ Age Verified'/></a> 's page


Joined: 13 Aug 2007
Posts: 15264
Location: United Kingdom

PostPosted: Wed Jul 18, 2012 6:58 am    Post subject: Reply with quote

Free tips, guides, tutorials, help, advice and such are still allowed. It's just selling/buying of stuff and the sharing of free layouts. So this free tutorial is okay, thankfully Very Happy
_________________
New Forums and Help Centre announcement
Back to top
View user's profile Send private message  
Justmylittleme

Justmylittleme's page


Joined: 31 Oct 2007
Posts: 259
Location: Netherlands

PostPosted: Wed Jul 25, 2012 12:14 pm    Post subject: Reply with quote

I've done this iframe thing using another tutorial from a former girlfriend haha. It worked out pretty well. That was 2 years ago, now i'm back and my page is all f*cked up again. So i needed to fix it.. got it f*cked even more up. But i found the tutorial she once made for me back. And now it "looks alright".. lol. Anyone sharing that same thought about my page? or is there something i need to change or add, tips or help is requested (: Very Happy
_________________
Back to top
View user's profile Send private message  
SilentProtest_disabled_41

SilentProtest_disabled_41's page


Joined: 14 Sep 2009
Posts: 846
Location: Netherlands

PostPosted: Thu Jul 26, 2012 2:08 am    Post subject: Reply with quote

@Justmylittleme

This is not related to Qwerty's tutorial. I'd suggest you make your own thread and keep Qwerty's ontopic Wink.
Back to top
View user's profile Send private message  
Justmylittleme

Justmylittleme's page


Joined: 31 Oct 2007
Posts: 259
Location: Netherlands

PostPosted: Thu Jul 26, 2012 7:25 am    Post subject: Reply with quote

SilentProtest wrote:
@Justmylittleme

This is not related to Qwerty's tutorial. I'd suggest you make your own thread and keep Qwerty's ontopic Wink.
oh.. sorry. no that's fine, i just wanted to get some tips. Sorry i've posted it wrong Embarassed ciaoo
_________________
Back to top
View user's profile Send private message  
underworldlady7_99441632_

underworldlady7_99441632_'s page


Joined: 24 Jul 2012
Posts: 1
Location: USA - AL

PostPosted: Thu Jul 26, 2012 10:14 pm    Post subject: Reply with quote

So can I still ask questions ._. Becaause I used to code, and was great at it , but now that I'm picking up what I stopped doing, all hell has broken loose. -.- The iFrames wont work for me. The Buttons won't let me click on them and the iFrame homepage won't stay in the main box, it just adds on the layout at the bottom. Help ? D:
Code:
<center>

<font face="Calibri" size="1" color="black">

<img src="http://i50.tinypic.com/5uljmh.png" width="962" height="488" border="0" usemap=”#ImageMap1”>
<div=id”avatarbox” style=”width:220px; height:160px; position:absolute; left:745px; top:128px; z-index:1;”><img src=”http://www.imvu.com/catalog/web_av_pic.php?av=PrincessNinaCarter”></div>

<div id="main_box" style="width:603px; height:238px; position:absolute; left:61px; top:116px; z-index:1;">
<iframe src="http://www.google.com/" name="inlineframe" width="602" height="238" border="0" marginwidth=0 marginheight=0 frameborder=0 allowtransparency="true"></iframe>
</div>
<div id="shout_box" style="width:117px; height:15px; position:absolute; left:765px; top:72px; z-index:1; "><marquee>Scroooooooooooooooooooool</marquee> </div>

<map id="ImageMap1" name="ImageMap1">
<area shape="rect" coords="39,363,84,377" href=" http://www.google.com/ " target="inlineframe" />
<area shape="rect" coords="146,362,190,376" href=" http://www.facebook.com/ " target="inlineframe" />
<area shape="rect" coords="251,364,288,376" href=" http://www.bing.com/ " target="inlineframe" />
<area shape="rect" coords="351,362,410,376" href=" http://www.ask.com/ " target="inlineframe" />
<area shape="rect” coords="471,363,496,375" href=" http://www.yahoo.com/ " target="inlineframe" />
<area shape="rect" coords="556,364,597,378" href="http://www.hottopic.com" target="inlineframe" />
<area shape="rect" coords="657,363,691,378" href="http://www.imvu.com/" target="inlineframe" /></map>



<style type="text/css">
   #aboutme_panel, #contact_panel, #dev_panel, #wishlist_panel, #visitors_panel,
   #messages_panel, #tagcloud_panel, #stickers_panel, #collect_panel,
   #room_panel, #rankings_panel, #cool_panel, #gallery_panel, #friends_panel,
   #streetteam_panel, #blog_panel, #video_panel_header, #music_panel, #rss_panel, #url_panel,
   #special_panel,#outfits_panel {
      width:900px !important;
   }
   #rightColumn {
      display:none !important;
   }
</style>

<style type="text/css">
#url_panel_colRow, .imvucodes_net { display:none !important; }
</style>

<style type="text/css">
.paneltitle, .panelmenu, .imvucodes_net { display:none !important; }
</style>
</font>
</center>
Back to top
View user's profile Send private message  
Qwerty VIP Club Member 18+ Age Verified
Moderator
Qwerty <a href='/vip_club/'><img src='/catalog/web_images/vip_35x18.gif' width='35' height='18' alt='VIP Club Member' /></a><!-- VIP Club Member Icon --> <a href='/age_verify/index/'><img src='/common/img/icons/age_verified_35x18.gif' width='35' height='18' alt='18+ Age Verified'/></a> 's page


Joined: 13 Aug 2007
Posts: 15264
Location: United Kingdom

PostPosted: Sat Jul 28, 2012 6:21 am    Post subject: Reply with quote

Guest_underworldlady7 wrote:
So can I still ask questions ._. Becaause I used to code, and was great at it , but now that I'm picking up what I stopped doing, all hell has broken loose. -.- The iFrames wont work for me. The Buttons won't let me click on them and the iFrame homepage won't stay in the main box, it just adds on the layout at the bottom. Help ? D:


Some of your " were ”, which has strangely made some your code still work, but other parts of it (like the ImageMap) break, I have fixed a couple of the ” into " to make the layout work, but you may want to correct them all:

Good = "
Bad = ”

Code:
<center>

<font face="Calibri" size="1" color="black">

<img src="http://i50.tinypic.com/5uljmh.png" width="962" height="488" border="0" usemap="#ImageMap1">
<div>=id”avatarbox” style=”width:220px; height:160px; position:absolute; left:745px; top:128px; z-index:1;”&gt;<img src=”http://www.imvu.com/catalog/web_av_pic.php?av=PrincessNinaCarter”></div>

<div id="main_box" style="width:603px; height:238px; position:absolute; left:61px; top:116px; z-index:1;">
<iframe src="http://www.google.com/" name="inlineframe" width="602" height="238" border="0" marginwidth=0 marginheight=0 frameborder=0 allowtransparency="true"></iframe>
</div>
<div id="shout_box" style="width:117px; height:15px; position:absolute; left:765px; top:72px; z-index:1; "><marquee>Scroooooooooooooooooooool</marquee> </div>

<map id="ImageMap1" name="ImageMap1">
<area shape="rect" coords="39,363,84,377" href=" http://www.google.com/ " target="inlineframe" />
<area shape="rect" coords="146,362,190,376" href=" http://www.facebook.com/ " target="inlineframe" />
<area shape="rect" coords="251,364,288,376" href=" http://www.bing.com/ " target="inlineframe" />
<area shape="rect" coords="351,362,410,376" href=" http://www.ask.com/ " target="inlineframe" />
<area shape="rect" coords="471,363,496,375" href=" http://www.yahoo.com/ " target="inlineframe" />
<area shape="rect" coords="556,364,597,378" href="http://www.hottopic.com" target="inlineframe" />
<area shape="rect" coords="657,363,691,378" href="http://www.imvu.com/" target="inlineframe" /></map>



<style type="text/css">
   #aboutme_panel, #contact_panel, #dev_panel, #wishlist_panel, #visitors_panel,
   #messages_panel, #tagcloud_panel, #stickers_panel, #collect_panel,
   #room_panel, #rankings_panel, #cool_panel, #gallery_panel, #friends_panel,
   #streetteam_panel, #blog_panel, #video_panel_header, #music_panel, #rss_panel, #url_panel,
   #special_panel,#outfits_panel {
      width:900px !important;
   }
   #rightColumn {
      display:none !important;
   }
</style>

<style type="text/css">
#url_panel_colRow, .imvucodes_net { display:none !important; }
</style>

<style type="text/css">
.paneltitle, .panelmenu, .imvucodes_net { display:none !important; }
</style>
</font>
</center>

_________________
New Forums and Help Centre announcement
Back to top
View user's profile Send private message  
Antonio82 18+ Age Verified

Antonio82 <a href='/age_verify/index/'><img src='/common/img/icons/age_verified_35x18.gif' width='35' height='18' alt='18+ Age Verified'/></a> 's page


Joined: 26 Jul 2006
Posts: 6381
Location: United Kingdom

PostPosted: Fri Aug 03, 2012 4:08 pm    Post subject: Reply with quote

Oh, awesome! When I heard free stuff wasn't allowed I thought of this thread first, because it's helped so many.
It would be a big hit to the DIY Coding community if this thread went bye bye, I'd have to copy it all to my site if that did happen lol.

*STAMPS WITH SEAL OF APPROVAL*
_________________
Back to top
View user's profile Send private message  
YungSoo

YungSoo's page


Joined: 16 Jun 2008
Posts: 84
Location: United Kingdom

PostPosted: Sun Aug 05, 2012 9:24 pm    Post subject: Reply with quote

And now it wont go up XD I tried fiddling with the numbers but cant get ehm right :I Help ?
Code:
<center>

<font face="Gungsuh" size="1" color="#003cff">

<img src="http://i46.tinypic.com/24xm2jt.png" width="900" height="500" border="0">

<div id="main_box" style="width:503px; height:238px; position:absolute; left:51px; top116px; z-index:1; overflow:auto;">
<b><p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 <b>Bold</b> <i>Italic</i> <u>Underlined</u> <s>Striked</s> <span style="background-color: #c3b8f2">Highlighted</span> <a href="http://Google.com" target="_blank">Link</a>
 <font color="#FF0000">Red</font> <font color="#FAAFBE">Pink</font> <font color="#6C2DC7">Purple</font> <font color="#38ACEC">Blue</font>
<font color="#4CC417">Green</font> <font color="#FFFC17">Yellow</font> <font color="#FFA500">Orange</font>
</b></p>
</div>


<style type="text/css">
   #aboutme_panel, #contact_panel, #dev_panel, #wishlist_panel, #visitors_panel,
   #messages_panel, #tagcloud_panel, #stickers_panel, #collect_panel,
   #room_panel, #rankings_panel, #cool_panel, #gallery_panel, #friends_panel,
   #streetteam_panel, #blog_panel, #video_panel_header, #music_panel, #rss_panel, #url_panel,
   #special_panel,#outfits_panel {
      width:900px !important;
   }
   #rightColumn {
      display:none !important;
   }
</style>

<style type="text/css">
#url_panel_colRow, .imvucodes_net { display:none !important; }
</style>

<style type="text/css">
.paneltitle, .panelmenu, .imvucodes_net { display:none !important; }

<style type="text/css">
Body { Background: transparent; }
</style>

</style>
</font>
</center>


Last edited by YungSoo on Tue Aug 07, 2012 10:27 am; edited 2 times in total
Back to top
View user's profile Send private message  
SilentProtest_disabled_41

SilentProtest_disabled_41's page


Joined: 14 Sep 2009
Posts: 846
Location: Netherlands

PostPosted: Mon Aug 06, 2012 1:52 am    Post subject: Reply with quote

@EvilxBunneh

Could you tell us what you have already tried to do?
Have you pasted the code in your url panel?
Back to top
View user's profile Send private message  
Facepalm

Facepalm's page


Joined: 25 Feb 2011
Posts: 5
Location: Antarctica

PostPosted: Tue Aug 14, 2012 4:20 pm    Post subject: Reply with quote

Sorry for this post i posted that i needed help and in the meantime i have solved the issue so don't need help anymore Razz lol i fail XD
your tutorial helped me so much btw <3 i can now make iFrames easily c:
Back to top
View user's profile Send private message  
Ch3rryDumpling

Ch3rryDumpling's page


Joined: 23 Feb 2011
Posts: 587
Location: USA

PostPosted: Fri Aug 17, 2012 2:51 pm    Post subject: Reply with quote

QWERTY i pmed you a problem i am having
_________________
Catalog
Back to top
View user's profile Send private message  
Display posts from previous:   
Don't want to see these ads? Join the VIP Program!

Don't want to see these ads? Join the VIP Program!

Hide ads? Get VIP!
Post new topic   Reply to topic    IMVU Forum Index -> Homepage Building and Design All times are GMT - 8 Hours
Goto page 1, 2, 3 ... 14, 15, 16  Next
Page 1 of 16

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum


 FAQFAQ   UsergroupsUsergroups   RegisterRegister  ProfileProfile   Log in for private messagesLog in for private messages 

Search the forums:


Powered by phpBB