Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Joomla article will not go full width of screen

Posted on 2013-11-26
15
Medium Priority
?
732 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 51

Assisted Solution

by:Steve Bink
Steve Bink earned 860 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

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 860 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 860 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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

916 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