Solved

Joomla article will not go full width of screen

Posted on 2013-11-26
15
582 Views
Last Modified: 2015-02-15
Hello,

I cannot work out how to make a Joomla article go the full width of a page. I have turned off all the module assignments, and now am left with a vertical border.

http://www.pcpitstop.com.au/index.php/en/contact/survey

How do I get the whole usable space?
0
Comment
Question by:pcpitstop_au
  • 5
  • 4
  • 3
15 Comments
 
LVL 17

Expert Comment

by:nanharbison
ID: 39681415
Have you already been making changes to the CSS? If you look at this screen shot when I am highlighting the content on the page, it is the width of the content area but pushed way to the right.screen shot of the content area
0
 
LVL 50

Assisted Solution

by:Steve Bink
Steve Bink earned 215 total points
ID: 39681427
Even though you've turned off all modules, your template is still presenting the #sidebar div, which has {float:left;width:280px;margin-right:20px}.  You need to adjust your template so the #sidebar rendering is conditional on content actually being present:
<?php
$has_sidebar=$this->countModules('sidebar');
$content_class = $has_sidebar ? 'with-' : 'no-';
if ($has_sidebar) {
?>
<div id="sidebar"><jdoc:include type="modules" name="sidebar" /></div>
<?php } ?>
<div id="content" class="<?php echo $content_class; ?>sidebar">
<jdoc:include type="component" />
</div>

Open in new window

With that approach, the #sidebar div is only rendered if modules are present for it.  You can use the dynamic class assigned to #content to target width and other properties:
.with-sidebar { width:600px; }
.no-sidebar { width:800px; }

Open in new window

0
 
LVL 17

Expert Comment

by:nanharbison
ID: 39681437
Oh wait, when I inspect the left side, the left sidebar is there but empty. I know Drupal better, and when you don't put a sidebar on the left, it doesn't take up any space. Are you sure you don't have an empty block in the left sidebar on this page?inspecting the content area
I am attaching this image as well, so you can see it better.

Oh sorry, I didn't see your response until I submitted this!
screenshot2.gif
0
Complete VMware vSphere® ESX(i) & Hyper-V Backup

Capture your entire system, including the host, with patented disk imaging integrated with VMware VADP / Microsoft VSS and RCT. RTOs is as low as 15 seconds with Acronis Active Restore™. You can enjoy unlimited P2V/V2V migrations from any source (even from a different hypervisor)

 

Author Comment

by:pcpitstop_au
ID: 39681906
Hi thanks for the very quick reply guys!

I am good with Joomla and articles and placing modules but have next  to no idea with php and css. ID love to get into it more, but never find the time to learn all that is to know, so I really appreciate the assistance.

If I make changes to the CSS, will this effect the rest of the site which uses that sort of sidebar area? In most other pages on the site I have modules in that area. To answer one of your questions, I think I turned all the modules off for that position. Is there any way to triple check?

I am really new to code, so what code changes do you suggest I make to get this to work?

Which fie do I edit, at what point and what do code do I replace it with?

Thanks in advance. Appreciate it!

B
0
 

Author Comment

by:pcpitstop_au
ID: 39681972
I looked in the personal.css with notepad++ and found the following reference to sidebar
personal-css-sidebar.jpg
0
 
LVL 50

Accepted Solution

by:
Steve Bink earned 215 total points
ID: 39682359
Then now's a great time to learn some PHP.  You'll need to edit your template to resolve this issue.

Turning off all the modules is fine, but the template is still rendering the containing #sidebar div.  As long as that div is being rendered, and you have that style assigned to it, your content area will continue to be limited to the area outside the float.

In my previous response, I outlined the code you'll need to use.  Here it is again, with some comments to help you along:
<?php
/*
    your template file should be /templates/<template_name>/index.php
    check the template manager for the name of your site template
*/
// this first section should go at the top of your template, before any HTML
// this gets the number of modules to be rendered for the position 'sidebar'
$has_sidebar=$this->countModules('sidebar');
// this is a reference variable based on whether or not #sidebar has any modules
// we'll use this to give the #content element a dynamic class name
$content_class = $has_sidebar ? 'with-' : 'no-';
?>
[ ... ]
<?php
// once inside the HTML, make the #sidebar element render only if it has modules
if ($has_sidebar) {
?>
<div id="sidebar"><jdoc:include type="modules" name="sidebar" /></div>
<?php } ?>
<?php
// when rendering the #content element, set the dynamic class we prepared before
?>
<div id="content" class="<?php echo $content_class; ?>sidebar">
<jdoc:include type="component" />
</div>

Open in new window

0
 
LVL 17

Expert Comment

by:nanharbison
ID: 39683705
Can you try to put this CSS at the top of the content on this page? It worked in Firebug.

<style type="text/css">
.all #sidebar {
    float: left;
    width: 0;
}
</style>
0
 

Author Comment

by:pcpitstop_au
ID: 39684276
Hello routinet & nanharbison.

nanharbison - What css file is this referring to? So I would just put it on the top of that page?

 routinet - THanks for the code hints - I tried them all and it thew errors, debugged these, then it threw off my template layout. Any suggestions?
0
 
LVL 50

Expert Comment

by:Steve Bink
ID: 39684714
Can you be more specific regarding the errors/behavior you encountered, and what changes you made to the template file?  The code snippets I posted were not meant to be drop-in - you will need to place it properly and edit it according to your need.
0
 
LVL 17

Expert Comment

by:nanharbison
ID: 39685184
Yes, when you are putting content on the page, at the very top, try this, in the source view, or html view. I am sure Joomla lets you edit pages in the html view, but I am not sure what Joomla calls it. Wordpress calls it source and Drupal calls it plain text editor.
0
 
LVL 50

Expert Comment

by:Steve Bink
ID: 39686246
nanharbison's solution will work for an individual page, as long you have access to the component content.  For example, if this page is an article, you can insert the style at the top of the HTML source.  If this is generated content, you may have to include the style as a customHTML module, in a separate position.

While that solution will work, it is not really extensible, and you will find yourself redoing the same work with other pages having the same issues.  Editing the template is a more permanent resolution which will dynamically respond to other similar pages.
0
 
LVL 50

Assisted Solution

by:Steve Bink
Steve Bink earned 215 total points
ID: 39686556
Here's the best of both suggestions:

AddCSS Extension Quick Start Guide
AddCSS Download Page

This extension allows you to add custom style to a specific menu item.  Follow the instructions in the quick start guide to install and configure it.  Use nanharbison's style rules, and assign the module to any menu items that will have no sidebar.
0

Featured Post

Complete VMware vSphere® ESX(i) & Hyper-V Backup

Capture your entire system, including the host, with patented disk imaging integrated with VMware VADP / Microsoft VSS and RCT. RTOs is as low as 15 seconds with Acronis Active Restore™. You can enjoy unlimited P2V/V2V migrations from any source (even from a different hypervisor)

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question