Solved

Joomla article will not go full width of screen

Posted on 2013-11-26
15
565 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
 

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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Error in page 3 46
Remove greater than sign 3 46
form button worked now it doesnt anymore 9 41
Message not shown 5 33
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
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…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

895 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

11 Experts available now in Live!

Get 1:1 Help Now