Solved

Joomla article will not go full width of screen

Posted on 2013-11-26
15
651 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 51

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
Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

 

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 51

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 51

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 51

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 51

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

WordPress Tutorial 4: Recommended Plugins

Now that you have WordPress installed, understand the interface, and know how to install new parts, let’s take a look at our recommended plugins.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
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 …

623 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