Widen the Page?

  • 1
  • Question
  • Updated 7 years ago
  • Answered
I can't find a style that quiet fits my needs!

Found one close, but...

1. How do I increase the width of the page layout? If you can tell me where this is in CSS, or HTML I could just change pixel size?!

2. Need Page to be transparent so can use png images and be able to see background underneath? If you could show me where to find this in CSS or HTML please?

3. How can I add an active link that's invisible? Not a text, or picture that is linked,but just an invisible rectangle that can be linked to another Page? Should have mouse over pop up too?!
Photo of Richard Page

Richard Page

  • 7 Posts
  • 0 Reply Likes

Posted 7 years ago

  • 1
Photo of Gop


  • 7473 Posts
  • 2115 Reply Likes
Hi Richard,

The page width is embedded in the base code, the page width defaults to 100% so it will always fill the users screen. The content and its formatting may be varied. Insert widths can be modified generally by the addition of CSS. You can also adjust the settings of the left and right margins within various widgets such as text widgets, image widgets and the panel widgets for example.

The transparency of png images is a property of the image and not the background. If there is a secondary background within the style it is possible to render this transparent by manipulating the z level and once again this is associated with HTML or CSS. Also style dependent.

An invisible rectangle can be used as a link by creating and using an invisible image (png or gif generally), inserting this with a link onto your page. There are other ways of doing this as well using CSS or bitmap imaging.

Mouse over pop-ups are generally scripted with something like a javascript code. You can find these on various code sites.
Photo of Crystal

Crystal, Champion

  • 250 Posts
  • 79 Reply Likes
Hello Richard,

Depending on which template you are using this may be different. On the test site I was just using, the background width is controlled by both css and the background image used. In which case, a different background image could be loaded that has a wider page space and adding the following to the css overrides worked:

body {
background-image: url(resources/IMAGENAME.jpg);

#wrap {
width : 900px;

#container {
width : 900px;

The #wrap is the width of the header. The #container is the width of the page contents with the IMAGENAME.jog being the background image for the page contents.

If this code doesn't work for the template you are using, could you post the template name so I could take a look at it?