OK, so I am brand new to Joomla, figuring it out as I go along. I mean, that is what Joomla is for, being able to do it yourself.

So I have been sitting for two days at an end, trying to get that irritating waste of space in my Protostar template gone. to be exact, there is an empty space of about 1 inch above the Position-1 module in the Template.

Attached is an image, indicating the red highlighted area I want gone. I looked up forums, posts and all, but none of the info there help me

Empty Space at top of page

  • send us a link to the website – FFrewin Aug 17 '17 at 11:12
  • My guess would be a top margin on the header or some padding on the body. Either way, without a link to the site, we won't be able to tell you for sure – Lodder Aug 17 '17 at 11:14
  • link @Lodder this is the link to my site. I checked all where padding can be, and it states top padding is 0 – Barend Aug 17 '17 at 14:25
  • @ffrewin [link](http//:cybersec.group) I guess you know the problem? – Barend Aug 17 '17 at 14:44
up vote 2 down vote accepted

1. Looking at your CSS

To fully remove the space that is above your menu:

.body .container has a border of 1px

.header has a margin-bottom of 10px

.navigation has a padding of 5px for top/bottom.

.navbar has a margin-bottom of 18px;

These need to be changed/overwritten. So something like this, in your Custom Css file could work:

.body .container {border: 0;}
.header {margin-bottom: 0;}
.navigation {padding-top: 0;}
.navbar {margin-bottom: 0;}

Note:
If you want to give more specificity therefore even higher priority for your custom rules, you can add the .site selector before the others. For example the above rules would end up like so:

.site .body .container {border: 0;}
.site .header {margin-bottom: 0;}
/*.... and so on....*/

Answer Updates

Modifying Protostar Template - Best Practices

I forgot to mention that it looks like you are modifying directly the core Protostar template. Do note that any changes you do on its core files are under the potential risk of getting overwritten (lost) after a future update of Joomla.

There are two main options on how to do this, depending on the level of customization needed:

1. Adding Custom CSS

The Protostar template CSS can be modified directly in the Template Manager. But the issue with modifying core files is that they may be overwritten by an update. So to avoid to add to CSS customisations again and again, the solution is to add a custom css file. (This is implemented since Joomla 3.5. All it takes is to create a new file named user.css and placed inside the css folder of the protostar template. There we can add our own custom css rules. Here is a more detailed guide on how to do this through Joomla backend:

2: Cloning Protostar

If you want to go a step further and customize deeper the Protostar template, changing it's layout and html, you can copy/clone it and build your own template upon it.

This can be done easily through Joomla Template Manager interface. Following the links below you can find on how to do this:

  • As @FFrewin points out, it is better to override the CSS via a custom CSS file than editing the Joomla core so your changes survive any Joomla or template updates in future. – Neil Robertson Aug 17 '17 at 23:11
  • Nothing has worked so far. The PHP IF command just crashes the site. Expecting T_ELSEIF/ T_ELSE/ T_ENDIF commands. I think I will just leave it as is. – Barend Aug 18 '17 at 8:10
  • in what file is the lines I am to overwrite for .body/ .header/ .navigation and .navbar? is it the Template.css or index.php? – Barend Aug 18 '17 at 8:13
  • @Barend: You will need to create your own css file. You can find the answer to your question by reading my answer and following the links. – FFrewin Aug 18 '17 at 9:43

Ok, you don't load any module to the position-0, right?

This is the header part in the index.php:

<header class="header" role="banner">
        <div class="header-inner clearfix">
            <a class="brand pull-left" href="<?php echo $this->baseurl; ?>/">
                <?php echo $logo; ?>
                <?php if ($this->params->get('sitedescription')) : ?>
                    <?php echo '<div class="site-description">' . htmlspecialchars($this->params->get('sitedescription'), ENT_COMPAT, 'UTF-8') . '</div>'; ?>
                <?php endif; ?>
            </a>
            <div class="header-search pull-right">
                <jdoc:include type="modules" name="position-0" style="none" />
            </div>
        </div>
</header>

It's possible that one of the elements has a height, padding or margin. You can check that very easy by using dev tools (F12 or right click -> check element).

If you don't need the header section here, you can excluded it with following changes:

<?php if ($this->countModules('position-0')) : ?>   
<header class="header" role="banner">
            <div class="header-inner clearfix">
                <a class="brand pull-left" href="<?php echo $this->baseurl; ?>/">
                    <?php echo $logo; ?>
                    <?php if ($this->params->get('sitedescription')) : ?>
                        <?php echo '<div class="site-description">' . htmlspecialchars($this->params->get('sitedescription'), ENT_COMPAT, 'UTF-8') . '</div>'; ?>
                    <?php endif; ?>
                </a>
                <div class="header-search pull-right">
                    <jdoc:include type="modules" name="position-0" style="none" />
                </div>
            </div>
    </header>
<?php endif; ?>

This with check if there is a module activated for position-0, if not skip this part otherwise it will output the header with the module position.

  • no module in pos-0. what file exactly is this? is this the template.css? and also pinpoint to the line I should look at. If I go to the website itself, right click and inspect, I do get a padding of 10px, although throughout my entire docs, I nowhere have a 10px top padding. I dont know how to insert an image to a comment – Barend Aug 17 '17 at 14:32
  • templates/protostar/index.php – Dennis Heiden Aug 17 '17 at 15:30

So there are 3 problems:

  1. As @Dennis Heiden mentioned, you need to add a PHP if statement around you <header> as it's still displaying in the DOM. So follow the instructions on his answer first.
  2. Your navbar (.navigation) has a 5px top padding which is adding a little more space at the top
  3. The last issue is coming from the following code:

```

ul.maximenuck {
    clear: both;
}

```

which as you can imagine, is coming from the maximenu extension you're using which I would whole heartedly never recommend using.

  • adding PHP if statement where Dennis Showed, crashes site. I am really new, and seriously dumb with this, so half the stuff I have no idea where to look for them. I don't know if line numbers are relevant... but any precision pinpointing well help loads... if possible.... – Barend Aug 17 '17 at 15:22
  • @Barend - could you re-add the PHP if statement again, then copy and paste the entire contents of that file on pastebin.com. The send the link back so I can see the code and see where you've gone wrong. – Lodder Aug 17 '17 at 15:25
  • a colluege of mine removed the entire Position-0 from the template script while I was away, so that might have caused the downed site. We will fix it soon and I will report back – Barend Aug 18 '17 at 7:10
  • link @Lodder please find my link to the pastebin.com I posted. I hope it helps. I still was not able to solve my problem – Barend Aug 21 '17 at 8:48
  • @Barend - you were missing an endif. Try this: pastebin.com/HQQxtg1h – Lodder Aug 21 '17 at 9:05

There is a free plugin that significantly improves Protostar display and functions without editing the core files or losing the changes when Joomla updates. In fact a user can create many custom css themes and display templates and select them from an auto detect list.

It is also developer friendly so installable themes can be distributed. Additional form fields can be added to the template parameters as desired, just by adding a custom file with unique name as theme_name.xml and output the values via a custom file named theme_name.php. The package is then installed normally via Joomla's extension installer. It's great for creativity and expand-ability. It makes possible to do with Protostar, all that the commercial templates do. http://protostar.websitedons.net/

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.