Solved

Joomla article will not go full width of screen

Posted on 2013-11-26
15
539 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
 

Author Comment

by:pcpitstop_au
Comment Utility
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
Comment Utility
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
Comment Utility
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
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 
LVL 17

Expert Comment

by:nanharbison
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

744 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now