Navigation issue and element alignment

General questions relating to Joomla! 3.x.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting.
Forum Post Assistant - If you are serious about wanting help, you should use this tool to help you post.
Post Reply
Pytrsn
Joomla! Fledgling
Joomla! Fledgling
Posts: 4
Joined: Fri May 24, 2019 4:26 pm

Navigation issue and element alignment

Post by Pytrsn » Fri May 24, 2019 6:35 pm

Hi, I have a few wishes for my custom Joomla! template and I can't make it work (note that I am total beginner in Joomla!). First of all, here is my index.php:

Code: Select all

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <jdoc:include type="head" />

    <link href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/css/custom.css" rel="stylesheet">
    <link href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/css/bootstrap.css" rel="stylesheet">
    <script src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/js/jquery.js"></script>
    <script src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/js/bootstrap.js"></script>
    <script src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/js/custom.js" type="text/javascript"></script>
    <?php
    $config = JFactory::getConfig();
    ?>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12 px-0">
                <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
                    <a class="navbar-brand font-weight-bold" href="index.php">
                        <img src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/favicon.ico" width="30px" height="30px">
                        <?php echo $config->get('sitename'); ?>
                    </a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" 
                            data-target="#navbarResponsive" aria-controls="navbarResponsive" 
                            aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarResponsive">
                        <ul class="navbar-nav ml-auto">
                            <jdoc:include type="modules" name="navigation"/>
                        </ul>
                    </div>
                </nav>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-12 px-0">
                <div class="jumbotron text-center mb-0 py-5">
                    <p class="font-weight-bold display-1"><?php echo $config->get('sitename'); ?></p>
                </div>

                <div class="breadcrumb my-0 text-center py-0 px-0">
                    <jdoc:include type="modules" name="breadcrumbs" style="none" />
                </div>
            </div>
        </div>

        <div class="row mt-5" style="margin-bottom: 100px">
            <div class="col-xl-3"></div>
            <div class="col-12 col-xl-6">
                <jdoc:include type="component"/>
            </div>
            <div class="col-xl-3">
                <div class="row">
                    <div class="col-3 col-lg-4 col-xl-1"></div>
                    <div class="col-6 col-lg-4 col-xl-10">
                        <aside>
                            <h3>Přihlášení</h3>
                            <jdoc:include type="modules" name="aside"/>
                        </aside>
                    </div>
                    <div class="col-3 col-lg-4 col-xl-1"></div>
                </div>
            </div>
        </div>

        <div class="row ">
            <div class="col-12 px-0">
                <img id="scrollButton" 
                     onclick="if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
                                 window.scrollTo(0, -document.body.scrollHeight);
                             } else {
                                 window.scrollTo(0, document.body.scrollHeight);
                             }"
                     src ="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/images/arrows.png" 
                     width="50px" height="50px">
                <footer class="footer bg-dark">
                    <p class="text-center text-white font-weight-normal">Řemeslo v kostce &COPY; <script>document.write(currentYear);</script></p>
                    <p class="text-center text-muted font-weight-light">by Petr Boháč</p>
                </footer>  
            </div>
        </div>
    </div>
</body>
</html>
And here is my site: http://prntscr.com/nsxzld
I need the login form the be aligned to the center.(It is now more the the left than to the right as you can see) I tried aligning like everything i could, but that god damn form won't move. Then the navbar. I don't know how to make the items to be styled as they would be if I would hard code them in it.(They should look like this: http://prntscr.com/nsy0iv
I would really appreciate any help. You do not have to spoon feed me with the code. I just wan't explanation how and why if that is possible.

Post Reply

Return to “General Questions/New to Joomla! 3.x”