Remove white space on to top of protostar template

Protostar is the current default template that comes with Joomla. There are Joomla users who would rather stick with it because it is one template that has been tried and tested over the years. Moreover, it is free and responsive and common seriously, it doesn’t look that bad either. So lets move on with the tutorial and remove the white space, which is the padding in this case, from the Template header.

So are we on the same page? This is what we’re talking about
remove white space on top of protostar template

To remove the white space on top please follow these steps

  1. Login to your Cpanel or whichever control panel that you’re using.
  2. On the Joomla root directory, navigate to templates > protostar > css.
  3. Make a backup of your template.css file and open or download it for editing.
  4. Find the lines
    [codesyntax lang=”php” lines=”no” capitalize=”no” strict=”yes”] {
    border-top: 3px solid #0088cc;
    padding: 20px;
    background-color: #f4f6f7;


  5. Replace it with
    [codesyntax lang=”php”] {
    border-top: 3px solid #0088cc;
    /* padding: 20px; */
    background-color: #f4f6f7;

    You can also remove the blue line one top of the page by commenting out the border-top line as you did for padding.

  6. Save and close the editor or upload the edited file.
  7. Clear both the Joomla cache (if it is enabled) and your browser cache to see the changes.
How to remove white space padding on top of Protostar Template
5 (100%) 19 votes
A simple guy and a Joomla! enthusiast - author at Joomguide.