1 Replies - 603 Views - Last Post: 27 September 2014 - 12:59 PM

#1 hazel1919   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 11-September 14

Custom HTML advanced formatting: help!

Posted 12 September 2014 - 07:27 AM

Hi everyone,

I want to ask a few questions regarding advanced HTML formatting - of my home page in this case.

Some background to my problem:

I am using a content manager called "Joomla!" to manage my site.

Here is a link to my site under construction... Smart-Drones.

I so up until this point I have designed exactly how I want the website to look by basically "drawing it" using paint.net. I have all of the graphics on different layers so that I can save them and insert them into the web page as PNGs.

Basically this is how I want my website landing page to look:

Attached Image

The way the Joomla! Content Management System works is by splitting the website into modules which are in specific positions.

Inside each "position" is a space that can be formatted using HTML and my home page is one big HTML module so it's basically a bog standard HTML page.

You can see from the images attached that the landing page requires a large background image (which provides framing for the page). The background image is a PNG and has the Fibonacci patterns as well as a large picture in the center of the page.

I want to overlay more elements, such as images, buttons and text over that background image. I also want to be able to precisely position the HTML elements.

The image below should give an idea of how I need to position the elements:

Attached Image

I have been trying to formulate the page using a WYSIWYG editor called JCE (Joomla Content Editor) but have been having no luck. It just refuses to work and is so fickle to work with!

I tried to insert a div and then add the background image and to position the elements over that image using 'absolute positioning' but the farthest that I have managed to get is what you can see on the home page, a mess: Smart-Drones

The WYSIWYG editor has generated this code:

<div style="background-image: url('images/Backgrounds/Smart-Drone-Golden-Background-With-Drone.png'); background-repeat: no-repeat; background-position: center center; width: 799px; height: 906px; position: relative;"> <img style="position: absolute;" src="images/logo/Smart-Drone-4-logo.png" alt="Smart-Drone-4-logo" /><span class="h3" style="position: absolute;"><span class="h4" style="color: #ffffff; position: absolute;">INTRODUCING THE ALL <span style="color: #ffcc00;">NEW</span></span><span style="color: #ffab00;"><span class="h4"></span> </span> </span>

Not pretty, so I ask the community...

...How do you normally go about this process? It should be fairly standard procedure but my searches have turned up no practical advice.

Any advice or links to tutorials that may be of help will be greatly appreciated.

Best regards,


Is This A Good Question/Topic? 0
  • +

Replies To: Custom HTML advanced formatting: help!

#2 mixahlos   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 11
  • Joined: 27-September 14

Re: Custom HTML advanced formatting: help!

Posted 27 September 2014 - 12:59 PM

I cannot see your attached images so I don't know exactrly what you want to do.
In joomla you can add class suffix to your modules so you can design each module the way you like.
in-line styling in your WYSIWYG editor is a realy bad idea.
You should use your css to customize it.
I visited your site but I could not find any module.

Finaly check your template's documentation.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1