0

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

1 Answer 1

0

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?

2
  • I am using Bootstrap, correct. I think that I am using it as a starting point, as in I am using the bootstrap_subtheme folder. Is there something else I ought to do to use it as a starting point?
    – Matt Beal
    Jul 7, 2015 at 17:51
  • Have you followed the sub-theming guide at drupal.org/node/1978010 Jul 8, 2015 at 7:42

Your Answer

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

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