HTML and CSS used to design Home Page

[abhi kanojia]

I have made a home page using HTML and CSS. This is a static home and its not any website as such. How can i include this page as my home page in confluence with the same look and feel.

I have the HTML add on from atlassian.

Please Help

[Shannon S]

Abhi,

You can either put the HTML and CSS you used on a page using the HTML macro as you mentioned, or you can include it in an iFrame.

• How to put an iFrame into Confluence

You can only set a Confluence page to be a homepage so you will want to use one of those two options.

Shannon

[abhi kanojia]

Firstly @Shannon S Thank you for the quick reply.

I have 2 separate files :  one is abc.HTML and other is abc.CSS. How do i import these files in confluence and use them to set up my home page?

[Shannon S]

Abhi,

You cannot import them. You need to add the code directly into the HTML macro.

Have a look at this article for guidance:

• HTML Macro

You may be able to reference the CSS hosted externally in your HTML but I haven't personally tested that myself.

Let us know if you have any questions.

Regards,

Shannon

[abhi kanojia]

@Shannon S It worked!!! Thanks a Lot.

Just One thing, The images i have added are not visible in confluence, what can i do for viewing images

[Shannon S]

Abhi,

How are you referencing those broken images in HTML? Are you using a full path? If you're using a local path and Confluence isn't in the same location as you are referencing, then it won't work.

In addition, if you're referring to an image on another server, you want to make sure Confluence has permission to access that image.

Shannon

[abhi kanojia]

@Shannon SThanks!!! I added the images sharepoint and used them it worked for me...

But now it created one more issue. The image i am using i also getting set at the top of the page, i dont know the reason behind this. 

I have attached an image for reference

[Shannon S]

Abhi,

That's probably an issue with your code. 

I would recommend making a new question and include the code your using and the community could help determine the reason it's looking like that.

Regards,

Shannon