Pre-Built Theme, how to transfer header to blocks

Question

I am moving at a glacial pace at theming, even following guides, because I think I am having trouble understanding the relationship between all parts of drupal theming. If someone can help me with the following issue, it should make me better understand how I am to configure everything else

Basically, I want to know the ideal way to theme this header which is static html to transfer into a block or a region so that I can theme it. I initially just included it using php include statements, but realize this is not good practice in drupal, and am looking for the proper way to do it.

        <div class="dropdown animated fadeInDown animation-delay-11">
            <a href="user" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> Login</a>
            <div class="dropdown-menu dropdown-menu-right dropdown-login-box animated fadeInUp">
                <form role="form">
                    <h4>Login Form</h4>

                    <div class="form-group">
                        <div class="input-group login-input">
                            <span class="input-group-addon"><i class="fa fa-user"></i></span>
                            <input type="text" class="form-control" placeholder="Username">
                        </div>
                        <br>
                        <div class="input-group login-input">
                            <span class="input-group-addon"><i class="fa fa-lock"></i></span>
                            <input type="password" class="form-control" placeholder="Password">
                        </div>
                        <div class="checkbox pull-left">
                            <label>
                                <input type="checkbox"> Remember me
                            </label>
                        </div>
                        <button type="submit" class="btn btn-ar btn-primary pull-right">Login</button>
                        <div class="clearfix"></div>
                    </div>
                </form>
            </div>
        </div> <!-- dropdown -->

        <div class="dropdown animated fadeInDown animation-delay-13">
            <a href="/search/node" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-search"></i></a>
            <div class="dropdown-menu dropdown-menu-right dropdown-search-box animated fadeInUp">
                <form role="form">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Search...">
                        <span class="input-group-btn">
                            <button class="btn btn-ar btn-primary" type="button">Go!</button>
                        </span>
                    </div><!-- /input-group -->
                </form>
            </div>
        </div> <!-- dropdown -->
    </nav>
</div> <!-- container -->

Thanks for the help,

Matthew Beal

Answer 1

Essentially you have the User Login & Search Form blocks so you could add the following to your themes' .info file:

regions[login] = Login
regions[search] = Search

Clear the site cache and visit your Blocks page (admin/structure/block) and you should see 2 additional regions. Place the User Login block in the Login region and the Search Form block in the Search region.

In page.tpl.php in your theme, use the following code:

<?php if (!empty($page['login'])): ?>
<div class="dropdown animated fadeInDown animation-delay-11">
  <a href="user" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> Login</a>
  <div class="dropdown-menu dropdown-menu-right dropdown-login-box animated fadeInUp">
    <?php print render($page['login']); ?>
  </div>
</div> <!-- dropdown -->
<?php endif; ?>

<?php if (!empty($page['search'])): ?>
<div class="dropdown animated fadeInDown animation-delay-13">
  <a href="/search/node" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-search"></i></a>
  <div class="dropdown-menu dropdown-menu-right dropdown-search-box animated fadeInUp">
    <?php print render($page['search']); ?>
  </div>
</div> <!-- dropdown -->
<?php endif; ?>

This will give you a starting point and you can start overriding output in your theme by using functions and templates. It should be possible to achieve almost the exact code you're looking for.

You're obviously using Bootstrap, have you tried using the Drupal Bootstrap theme as a starting point?