5

I am running an internship at a small company, and I am supposed to create their new website. I have coded on my computer, in HTML5/CSS 3 and some JavaScript code, a website that pleases all of us.

There is an issue though, which is that none of us have ever uploaded a website. Furthermore, three weeks in, when I was practically finished, my boss told me that she could edit the former website, and that she wanted to be able to continue to be able to. She showed me that it was hosted using a Joomla! application, and I see that it looks practical at first (being able to edit the pages so easily).

However, after researching a little, I haven't found a way to simply take my page and its CSS and put it in there. I think the application is limited to the premade templates regarding CSS. My questions are therefore many:

  1. Is there a way to upload HTML/CSS pages to Joomla?

  2. If not, is there a tool that can be used to upload my finished site AND be editable by someone who knows nothing of code?

  3. If not, how difficult is it to create a Joomla template which would basically apply my CSS file to the site?

Improve this question

4 Answers 4

Reset to default
4

First, your boss did you a huge disservice by not properly bullet pointing what they expected, though most rarely even know what Joomla or a CMS are.

Basically writing a template is not very difficult at all, if you already have a bunch of HTML and CSS this pretty much acts as your "mockup". Next I would suggest grabbing a copy of the "blank" template. What that is is exactly what it sounds like; it sets up and lays out everything that will be required to make a Joomla-recognizable template, but without any of the HTML or CSS markup of it.

You will have to tweak the XML a bit to include your meta information as well as the module positions you intend to use (there are tons of tutorials for this so I won't detail).

The next step will be to do a quick readup on how to implement module positions and content positions into a template; it's really very easy; you put <jdoc:include type="component" /> where you want your Joomla-defined content to show, and you put <jdoc:include type="modules" name="left-column" style="well" /> where you want a module position to be (note the names will be different for your implementation).

Remember, content does NOT get hardcoded into Joomla templates; that completely defeats the purpose of Joomla. Instead the template should just pretty much be a bunch of divs that layout where content will go. The actual content is done by writing or using existing modules and components.

A Joomla template consists of several files that house the JavaScript, CSS, HTML, logic PHP, and template data separately, but the template itself where the markup is, is fairly easy to design and work with. An example from my site:

<?php defined( '_JEXEC' ) or die;

include_once JPATH_THEMES.'/'.$this->template.'/logic.php';

?><!doctype html>

<html lang="<?php echo $this->language; ?>">
<head>
    <jdoc:include type="head" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <link rel="apple-touch-icon-precomposed" href="<?php echo $tpath; ?>/images/apple-touch-icon-57x57-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="<?php echo $tpath; ?>/images/apple-touch-icon-72x72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="<?php echo $tpath; ?>/images/apple-touch-icon-114x114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="<?php echo $tpath; ?>/images/apple-touch-icon-144x144-precomposed.png">
    <!-- Le HTML5 shim and media query for IE8 support -->
    <!--[if lt IE 9]>
    <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <script type="text/javascript" src="<?php echo $tpath; ?>/js/respond.min.js"></script>
    <![endif]-->
</head>

<body class="<?php echo (($menu->getActive() == $menu->getDefault()) ? ('front') : ('site')).' '.$active->alias.' '.$pageclass; ?>">
    <div class="page_wrapper">
        <div class="page_header_wrapper hidden-xs">
            <div class="page_header fixed_width">
                <div class="headerbar_left">
                    <jdoc:include type="modules" name="headerbar-left" style="blank"/>
                </div>
                <div class="headerbar_right">
                    <jdoc:include type="modules" name="headerbar-right" style="blank"/>
                </div>
            </div>
        </div>
        <div class="main_menu_wrapper navbar">
            <nav class="navbar navbar-inverse affix-top" data-spy="affix" data-offset-top="120">
                <jdoc:include type="modules" name="main-menu" />
            </nav>
        </div>
        <div class="page_top_wrapper">
            <div class="page_top fixed_width">
                <jdoc:include type="modules" name="top" />
                <jdoc:include type="message" />
            </div>
        </div>
        <div class="column_wrapper fixed_width">
            <?php if ($this->countModules( 'left-column' )) : ?>
                <div class="left_column">
                    <jdoc:include type="modules" name="left-column" style="well" />
                </div>
            <?php endif; ?>
            <div class="main_column">
                <jdoc:include type="modules" name="main-column-top" />
                <jdoc:include type="component" />
                <jdoc:include type="modules" name="main-column-bottom" />
            </div>
            <?php if ($this->countModules( 'right-column' )) : ?>
                <div class="right_column">
                    <jdoc:include type="modules" name="right-column" style="well" />
                </div>
            <?php endif; ?>
        </div>
        <div class="page_bottom">
            <jdoc:include type="modules" name="bottom" />
        </div>
        <footer class="page_footer">
            <jdoc:include type="modules" name="footer" />
        </footer>
    </div>

    <jdoc:include type="modules" name="debug" />
</body>
</html>

You will see that laying out the HTML is quite simple.

Improve this answer
5
  • So the content of an html <div> would be a joomla article, and its css would be in the template if I understand correctly ? So I have to give a different ID to every one of my divs ?
    – Saryk
    Jul 5, 2016 at 16:08
  • Well you dont need to, but for primary areas of your template it is good that they have unique id's, for example I as standard practice ID my header, sidebar, content area, and footer uniquely. But you should already have this if your mockup site is done in html and css, you can keep the classes and id's you already have.
    – wobbles
    Jul 5, 2016 at 16:14
  • And for javascript ? :S (sorry to keep bothering)
    – Saryk
    Jul 5, 2016 at 16:18
  • the blank template will have default empty .js file that you put your code into, as well as .less (your CSS).
    – wobbles
    Jul 5, 2016 at 16:20
  • As an aside, I couldn't help but think of a couple things as I read your question. 1) Are you sure your boss didn't just want you to update content, articles, text of the site opposed to a re-design? 2) Asking an intern to redesign your business website is a super d!ck move 3) A business large enough to have interns should probibly be on Drupal.
    – wobbles
    Jul 5, 2016 at 17:15
1

You can't just upload HTML file to Joomla.

Joomla is a CMS (Content Manage System), which is powered by an MCV framework and extensions, such as com_content (Content Management).

The template itself is only the base structure for a Joomla site. Each extensions has a view containing HTML markup. The markup for all extensions and then pushed into the template.

Your best bet would be to duplicate the default Joomla template (Protostar if using Joomla 3.x) and then start implementing your HTML and CSS section by section.

Improve this answer
1

  1. Extra to the above information, if you want to create your own template check this links:

  2. After you create your template with the method you've chosen, you'll need to upload your content via modules or via component.

  3. The complexity will depend on the decision you have taken to build your template, developed by yourself, by duplicating an existing template or using a framework like t3, helix3 or similar.

Improve this answer
0

Joomla is what I'd use in this case because that's what I'm familiar with but there may be simpler solutions to CMS enable your static website by using CouchCMS or similar:

From their home page:

Simple Open-Source CMS for designers

No knowledge of PHP required at all.

Take any HTML/CSS template and make it CMS enabled in minutes. Just drop in a few special XHTML tags into your code and watch your static web pages come to life!

CouchCMS is open source.

Improve this answer
1
  • Looks interesting, I'll look into it :)
    – Saryk
    Jul 6, 2016 at 1:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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