How to change the width of the articles/main content column

[Scottc20]

How can I increase the width of the articles in the main column? At the moment articles come up quite narrow on the page

[ooffick]

Hi,

you can do that with the help of CSS. The overall width of the page is defined by default to max-width of 1000px.

Olaf

[Scottc20]

Hi Olaf. I don't want to change the overall width of the page, just the width of the wrapper that contains the written text in the main column on the individual article pages. Can you help with that at all?

Thanks anyway though.

[ooffick]

The main area is set to 64% if you have modules in the right and left module position.
If you don't have any modules in right or top, your main area will use 100% of the area.

Do you have a URL?

Olaf

[Scottc20]

Hi mate, have a look here http://www.bushcraftliving.com/skills/29-fire/89-scott

The article has significant white space to the right which could be used up if the article column witdth was greater

[ooffick]

try to find this line:

Code: Select all

$showRightColumn = $this->countModules('user1 or user2 or right or top');

and change it to this:

Code: Select all

$showRightColumn = $this->countModules('user1 or user2 or right');

Olaf

[Scottc20]

What file mate? Cheers

[Scottc20]

Ah, found it in the HTML, worked a treat, cheers bud

[thylow]

I can't seem to find that code for some reason. I did find something similar but I tried a few things and it doesn't seem to work.

http://nodmd.com/index.php

The code below is the closest thing I can find to rightColumn

Thanks for the help

Hien

Code: Select all

    <?php if($this->countModules('left')) : ?>
	<div id="leftcolumn">
        <jdoc:include type="modules" name="left" style="rounded" />
    </div>
    <?php endif; ?>
    <?php if($this->countModules('left') xor $this->countModules('right')) $maincol_sufix = '_middle';
		  elseif(!$this->countModules('left') and !$this->countModules('right'))$maincol_sufix = '_big';
		  else $maincol_sufix = ''; ?>
	<div id="maincolumn<?php echo $maincol_sufix; ?>">
    	<div class="path"><jdoc:include type="modules" name="breadcrumb" /></div><jdoc:include type="message" />
    	<div class="nopad"><jdoc:include type="component" /></div>
    </div>
    <?php if($this->countModules('right') and JRequest::getCmd('layout') != 'form') : ?>
	<div id="rightcolumn">
    	<?php if($this->countModules('user4')) : ?><div class="moduletable_menu"><div><div><div><h3>Search</h3><jdoc:include type="modules" name="user4" /></div></div></div></div><?php endif; ?>
        <jdoc:include type="modules" name="right" style="xhtml"/>
        <br />
    	<div align="center"><jdoc:include type="modules" name="syndicate" /></div>
    </div>

[ooffick]

What are you trying to?

Olaf

[thylow]

I figured it out.
I had use

Code: Select all

{iframe}http://mylink.com{/iframe}

in a article

The size was limited and I wanted the article width to be larger. I looked all over in the html and css of the template and couldn't find what I was looking for when I randomly adjusted width lengths.

I finally fixed it when I did this.

Code: Select all

{iframe width="980"}http://mylink.com{/iframe}

to change the width of the frame page I wanted to display in my article on the front page.

[Dougalcfc]

Offlick, could you help me please ( you sound like you know the answer to my problem)

I'm trying to use get width in my articles.

As you can see from this page i wrote for you : )

http://www.1026.tv/index.php?option=com ... d=50:page2

And also noticed in google chrome it looks very different to using IE ???? MMmmmmm

Could you help please ?

Many thanks.

[ooffick]

Which IE version are you using?
you want to change? Do you want to use the full width of the page for your articles?

Your Template consist of a table which has a main column and a right column.
You will need to remove the right column to make the main column wider.

Olaf

[Dougalcfc]

HI there, many thanks for your answer,

I'm using Chrome now. But also using IE8.0
Yes i would like to use the rest of the width of the page.

I've looked into CSS, index.php, and template and know where can i see the words right column Mmmmmm

I see alot of words saying table in my index.php folder. But can't see or find the word RIGHT anywhere.

Any oher clues please.

Many thanks.

[ooffick]

Look for something like this:

Code: Select all

<td style="width: 250px; vertical-align: top;"> ......  </td>

Olaf

[Dougalcfc]

Hi there.

This is close i have found. Only because it has the word WIDTH in it, other nothing else in my index.php has the word WIDTH in it

<table class="brNewsLine" cellpadding=0 cellspacing=0>
<tr>
<td width="240px" height="28px">BREAKING NEWS> </td>
<td style="color: #000000; font-size: 13px;"><jdoc:include type="modules" name="head1" style="none"/></td>
<td><div class="brNewsPane">

AND... this is what i found at the top of my CSS folder. With the word WIDTH and STYLE near each other.

{
font-family: Arial;
font-size: 11pt;
}
li {list-style-type: none;}
.main{

width: 979px;
margin: auto;
}
.titleCaption{
text-align: right;
font-size: 9pt;

Thank you for helping.

[Dougalcfc]

UPDATE !
Yes i changed it to 1000 instead of 979.... GREAT SUPER.
Your a star !!! Can you have 6 stars ! :-))) I'll give you one :-)

Only one problem now ))))
In Google chrome the writing is a mess.
Mmmmmm
http://www.1026.tv/index.php?option=com ... 0:drinking

Is the page i tested it on.... Its 100% PERFECT in IE. But in google chrome. its all the way over to the right and nearly off the screen... OH ...

Cheers. Your help has been super (bow)

[Dougalcfc]

Mmmmm
So i thought it was perfect in IE.

My breaking news titles in yellow bar, doesn't now, go all the way across as it did before.
www.1026.tv

Grrrr slove one challange and its bought up another one Grrr.

Mmmmm

[simakweb]

I had no problem changing the width of the wrapper menu to 900 (100% value I think leaves it at 64% overall width). The change looked fine in IE7 and FireFox 3.6

[JimmyStocks]

Im having a problem with my site too.. All the text that is displayed is being cut off on the right hand side. The site is www.sendabbietoamerica.co.uk

I ahve looked through the css, html and i cant see what part is causing this, i have tried changing parts, (taking a back up of course) but cant find the one that is causing this.

Can anyone offer any more advice, or anyone with greater knowledge guide me to find this issue..

Thanks guys
Jimmy

[komusica]

Hi
I found these width options in the file 'position.css' present in the folder /templates/beez_20/css.
I had applied this particular template and changing values for width in this file , increased the width of my website. Hope it helps others ..

[steveki]

Hi there,

I too need help with this issue. I would like to make one (only one) article full width and have tried the advice provided on other posts and the code is different on my template (beez5) but it didn't work.

I am using joomla 2.5 with beez5 template.
I tried removing css and also setting to 100%

#wrapper2 .item-page {/* max-width:660px */}
#wrapper2 .item-page {max-width:100%}

modifying 72% to 100% in this code eliminated all modules completely throughout site which isn't what i want.

#wrapper2
{ width:72%;
float:left;
position:relative;
padding-bottom:20px
}

see page at ---> http://www.peppermintridgefarm.com.au/accommodation

[SimonAllen]

Here's hoping that a Joomla guru will be along in a minute and point us in the way, unless it is not doable. If so sad face.

[WebProducer2014]

I have a similar question...

I am trying to change the set up on this page to add a fourth image:

It looks great like this:
http://innovation.engineering.cf.ac.uk/

When I add the fourth, there is a lot of space. Wondering best approach to this...if I could centralise images and text, that would work - rather than all the white space on the right.

Here's work in progress:

http://innovation.engineering.cf.ac.uk/ ... 172-home-2

Cheers!

[dpacadmin]

Your page is centered and the width set to 770px;

Code: Select all

#main {
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    width: 770px;
}

You would need to shrink your image's width to fit four across, your images are 247px wide.

[WebProducer2014]

Thanks dpcadmin,

That's helpful.

I was thinking of having 2 images on each line, rather than 4 across. Then get that who area along with the intro paragraph above centred...just for this home page:

http://innovation.engineering.cf.ac.uk/ ... 172-home-2

Wondering if you have any suggestions.

[dpacadmin]

This would work but I don't know if the CSS would affect the rest of your site;
Line 395 of templates/cardiffgeneric/css/schooltemplate.css
change the width to auto;

Code: Select all

div#body0 {
    float: left;
    margin: 15px;
    width: auto;
}

For the info text below the header you need to remove the float left on the header;
Line 12 of templates/cardiffgeneric/css/schooltemplate.css

Code: Select all

h1 {
    color: #026d6d;
    /*float: left;*/
    font-size: 20px;
    font-weight: bold;
    line-height: 22px;
    margin: 0;
    padding: 0;
    width: 84%;
}

[WebProducer2014]

Thanks dpacadmin!

It does affect the rest of the site...BUT

I think I might be able to use that with a custom css module. Found this one:
http://www.hyde-design.co.uk/free-jooml ... custom-css

I will let you know. Thank you again for your help and support.

[catapolt]

figured it out