How to edit the index.html files of Protostar Joomla 3.4 [closed]

Question

Hi the only way I can see the html file is if I right click on any page of my Joomla 3.4 site and select "inspect element" tool from my Windows PC. Then I can see the index.html of that page...

There are a few things I would like to change there so I am testing things around.

How can I access these files? .... They are not in my host server control panel file manager, and I can't see them in Joomla admin either.

I have grabbed the home page index.html using HTML editors like CoffeCup via FTP and then pasted the file back into my cp, but the changes I created in the html file did not take effect, it didn't override the live site one. I have a Linux hosting service, I use Webmatrix as well connected via ftp.

---

My follow up question to your initial comments without all the images and links I sent which took so long to put together.

Hi FFrewin and moomoochoo I am adding more info to my initial question above. Just one of the many things I need to edit in my site I will give you 3 examples why I need to figure out how to access the html files and if you can let me know how would be GREAT !!! Zoom in the images so you can see the code:

1) The phrase, "Slogan", under the logo. I want to center that. For now I had to put a line under for spacing. If I go the usual admin way template manager/styles/protostar/advanced centering it in Joomla admin is not an option and it's not there in any php file either.

basically now the html file div is <div class="site-description">_The Luxury only Tube</div>

but it needs to be <div class="site-description">&nbsp;&nbsp;&nbsp;The Luxury only Tube</div>

2) The heading in the forms cannot have a link in it. Meaning if I go to Joomla admin I can't edit the heading there to have a url that links

So heading (phrase above the forms) is now

<div class="page-header">
        <h1>You must Sign-up at www.mysite.com before you can register here.</h1>
    </div>

But it should be

<div class="page-header">
        <h1>You must Sign-up at <a href="http://www.mysiteb.com/">www.mysiteb.com </a>before you can register here.</h1>
    </div>

3) Also on the same form www.mysite.com/basic I need to change only one of the text boxes padding width size in the form in item "store type".

If I change that on the css file it will affect all the other boxes in the form too. I tried changing it in the plugin xml file too but it won't work either.

and the modified

So again I need to change the index.html.

it is now <select id="jform_profile_storetype" name="jform[profile][storetype]" class="required" required="required" aria-required="true" aria-invalid="false">

But needs to be <select id="jform_profile_storetype" name="jform[profile][storetype]" class="required" required="required" aria-required="true" aria-invalid="false" style=" width: 144.22222137451172px; ">

Therefore on one of my code editors I plugged in the home page index.HTML file but once I paste it back to my hosting cp it does not plug in the changes. I really need someone to kindly let me know how to make these changes in the Joomla html files. Thank you in advance

Answer 1

The reason you can't edit the HTML files is that they don't exist. The whole point with a CMS is that each page is generated dynamically, based on your template, articles, modules, components etc. The source code you see in your code inspector is not stored anywhere, it's generated on the fly by Joomla when someone requests that page.

I’ll try to give you a very brief idea of where to look, but it's much more complicated than what I’ve outlined below because there are many different parts that can be used to make the page you are looking at. Joomla is made up of articles, plugins, modules, components and templates which all work together to produce the pages on your website. It is a steep learning curve.

At it's simplest, you'd probably want to edit the article and template.To edit the article go to the administrative backend. To do that enter www.yourwebsitename.com/administrator in your browser then enter the admin username and password for your website. Then goto Content -> Article Manager

You should see an article or list of articles. Choose the one relevant to you and open it. Generally speaking this will mostly contain the textual information that is on the page, but you will have to look at it to know if this is the case.

The styling of the page is usually done from the template. To determine which template to edit go to the administrative backend again. Then choose Extension -> Template Manager then select the template that is being used for the page you are trying to edit. In the simplest of cases there will be two templates assigned to your website- the one you want to edit is assigned to SITE. The other one that you do not want to edit is assigned to ADMINISTRATOR. A yellow star will be next to any template that is used as default.

In the example below, the Protostar template is the one that you would want to edit as it is the default template and is assigned to the site.

To actually edit that file go to Joomlaroot/templates/protostar/index.php you should be able to do this using your FTP program. If there is an index.html file ignore it as it is not used.

You will also want to edit the Joomlaroot/templates/protostar/css/template.css file. This is an over simplification of how to edit your Joomla page. I hope it sets you in the right direction.

---

Your 3 examples

As for the changes you want to make, you have to think a little different when using a CMS. If you need to heavily customize the way your content (HTML) is generated, you should use template overrides. In many cases, CSS can save the day:

1. Never use spaces ( ) for layout purposes. A single line of CSS can fix this issue:

   .site-description { text-align: center; }
   

2. <h1>-tags should be used for the main heading, not for information. Instead of using the Page Heading parameter, see if your form has an option to add text. If not, create a Custom HTML module with your content (use HTML as much as you want), hide the header in the module settings if needed, and publish it to a position above the form.

3. Again, CSS saves the day. If your CSS changes too many elements, you have to be more specific:

   select#jform_profile_storetype { width: 144.22222137451172px; }