|
2014/12/20 11:12:45
|
|---|
|
Help with bootstrap theme - navbarI've been working on a new theme for a site based on icmsbootstrap3 and have the following tweak to make - the position of the search field changes after logging in and I'd like it to be the same as the logged out position.
Looking at theme.html, the button & dropdown are constructed differently. Logged out (just uses a li and a b element):
<{if !$icms_isuser}>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><{$smarty.const.THEME_PSEUDO}><b class="caret"></b></a>
<ul class="dropdown-menu">
<form style="margin-left: 10px;margin-right: 10px;padding-bottom: 8px;padding-top: 8px;" action="<{$icms_url}>/user.php" method="post" class="form-signin navbar-left">
<input type="text" placeholder="<{$smarty.const.THEME_DESC_PSEUDO}>" class="form-control" name="uname" />
<input type="password" placeholder="<{$smarty.const.THEME_DESC_PASSWORD}>" class="form-control" name="pass" />
<{if $rememberme}>
<input type="checkbox" name="rememberme" value="On" /><{$lang_rememberme}>
<{/if}>
<input type="hidden" name="icms_redirect" value="<{$icms_requesturi}>" />
<input type="hidden" name="op" value="login" />
<button class="btn btn-primary btn-block" type="submit"><{$smarty.const.THEME_PSEUDO}></button>
</form>
<li class="divider"></li>
<li><a href="<{$icms_url}>/user.php#lost" title=""><span class="glyphicon glyphicon-warning-sign" style="padding-right:5px;"></span> Forgot your password?</a></li>
<li><a href="<{$icms_url}>/register.php" title="<{$smarty.const.THEME_REGISTER}>"><span class="glyphicon glyphicon-user" style="padding-right:5px;"></span> <{$smarty.const.THEME_REGISTER}></a></li>
</ul>
</li>
<{/if}>
Logged in (uses a div and a button element) :
<{if $icms_isuser}>
<div class="btn-group" style="margin-left: 10px;margin-right: 10px;padding-bottom: 8px;padding-top: 8px;">
<a href="<{$icms_url}>/user.php" role="button" class="btn btn-default"><span class="glyphicon glyphicon-user" style="padding-right:5px;"></span> <{$icms_uname}></a>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="<{$icms_url}>/edituser.php"><span class="glyphicon glyphicon-pencil" style="padding-right:5px;"></span> Edit Profile</a></li>
<li><a href="<{$icms_url}>/edituser.php?op=avatarform"><span class="glyphicon glyphicon-camera" style="padding-right:5px;"></span> My Avatar</a></li>
<li><a href="<{$icms_url}>/notifications.php"><span class="glyphicon glyphicon-envelope" style="padding-right:5px;"></span> <{$smarty.const.THEME_NOTIFICATION}></a></li>
<li><{xoInboxCount assign=pmcount}><{if $pmcount}><a href="<{xoAppUrl viewpmsg.php}>" title="<{$smarty.const.THEME_INBOX}> <{$pmcount}> <{$smarty.const.THEME_NOTREAD}>"><span class="glyphicon glyphicon-comment" style="padding-right:5px;"></span> <{$smarty.const.THEME_INBOX}> <span class="badge badge-info"><{$pmcount}></span></a><{else}><a href="<{xoAppUrl viewpmsg.php}>" title="<{$smarty.const.THEME_INBOX}>"><span class="glyphicon glyphicon-comment" style="padding-right:5px;"></span> <{$smarty.const.THEME_INBOX}></a><{/if}></li>
<li class="divider"></li>
<li><a href="<{$icms_url}>/admin.php"><span class="glyphicon glyphicon-wrench" style="padding-right:5px;"></span> <{$smarty.const.THEME_ADMIN}></a></li>
<li><a href="<{$icms_url}>/user.php?op=logout"><span class="glyphicon glyphicon-off" style="padding-right:5px;"></span> <{$smarty.const.THEME_LOGOUT}></a></li>
</ul>
</div>
<{/if}>
<form style="margin-left: 10px;margin-right: 10px;padding-bottom: 8px;padding-top: 8px;" action="<{$icms_url}>/search.php" class="navbar-left">
<input type="text" placeholder="<{$smarty.const.THEME_SEARCH}>" class="form-control" name="query" />
<input type="hidden" name="action" value="results" />
</form>
</ul>
</div>
I'm sure I could figure it out, but there are others who would be able to do this much quicker than me. Thanks! Attach file:  icms-bootstrap3-nav-login.png (166.54 KB) icms-bootstrap3-nav-logged-in.png (167.94 KB) |
  
|
|
2014/12/20 13:57:09
|
|---|
|
Re: Help with bootstrap theme - navbarHi Steve,
the first code doesn't seem to include the search field declaration, so I'm not sure. My guess would be that the search field is declared first in the logged out portion of the site, and last in the logged-in portion of the theme. |
|
_________________
|
|
|
|
2014/12/20 19:24:04
|
|---|
|
|
Re: Help with bootstrap theme - navbarThe search form is after all the attached code, starting immediately after the last IF closure. It's common for both instances, so something is shifting it or the login/user dropdown (most likely, since this is where the differences are.
<form style="margin-left: 10px;margin-right: 10px;padding-bottom: 8px;padding-top: 8px;" action="<{$icms_url}>/search.php" class="navbar-left">
<input type="text" placeholder="<{$smarty.const.THEME_SEARCH}>" class="form-control" name="query" />
<input type="hidden" name="action" value="results" />
</form>
I'll attach the entire theme.html file ... and some details from Firebug Attach file:  icms-bootstrap-theme-html.zip Size: 3.27 KB; Hits: 230 icms-bootstrap3-nav-login-full.png (369.94 KB) icms-bootstrap3-nav-logged-in-full.png (374.21 KB) |
|
|
|
2014/12/21 16:53:53
|
|---|
|
|
Re: Help with bootstrap theme - navbarGot it!
I had moved the form from its original location (just left of the menu items) to the right side. Changed the class to navbar-right and it is doing as I want it to. I'm still wondering about the different uses of elements for the dropdown - a list item for the login and a div for the user menu. Any thoughts? |
|
|
Previous Topic
Next TopicYou can view topic.
You can start a new topic.
You can reply to posts.
You cannot edit your posts.
You cannot delete your posts.
You cannot add new polls.
You cannot vote in polls.
You cannot attach files to posts.
You can post without approval.
ImpressCMS is a multi-language content management system for the web. It is community-built, an open source project and based on the common web technologies of PHP and MySQL.
More information
