The following is just a document of my process and the solutions that worked for me for a style I use called Milk. This is mainly a document, as inevitably I'll have to do it again at some point as style/phpbb updates overwrite these changes.
The modified files:
...in styles/myInstalledStyle/template/
common.css
view_topic.html
viewforum_body.html
...in styles/prosilver/template/
jumpbox.html, unmodified but used to generate
a new file I created called,
jumpboxREVISED.html
From
jumpboxREVISED.html, I removed several of the if/else statements (that are in jumpbox.html) and omitted the link that normally accompanies the dropdown menu, positioned at the bottom of
view_topic.html and
viewforum_body.html. I also contained the markup/code in a new <div> so I could control the positioning of the jumpbox button and the dropdown menu (dropdown-container) together. In this file I also modified this line:
Code: Select all
<div class="jumpbox dropdown-container dropdown-container-right<!-- IF not S_IN_MCP --> dropdown-up<!-- ENDIF --> dropdown-{S_CONTENT_FLOW_BEGIN} dropdown-button-control" id="jumpbox">
to...
Code: Select all
<div class="jumpbox dropdown-container dropdown-container-right<!-- IF not S_IN_MCP --> dropdown-down<!-- ENDIF --> dropdown-{S_CONTENT_FLOW_BEGIN} dropdown-button-control" id="jumpbox">
Because the jumpbox menu was initially styled to be positioned above the "Jump to" button when it opens, this line needed to be changed, changing "dropdown-up" to "dropdown-down." This is what I ended up with.
Code: Select all
/* Added "newMenu" div. The declaration for it is located in common.css */
<div class="newMenu">
<!-- IF S_DISPLAY_JUMPBOX -->
<div class="jumpbox dropdown-container dropdown-container-right<!-- IF not S_IN_MCP --> dropdown-down<!-- ENDIF --> dropdown-{S_CONTENT_FLOW_BEGIN} dropdown-button-control" id="jumpbox">
<span title="<!-- IF S_IN_MCP and S_MERGE_SELECT -->{L_SELECT_TOPICS_FROM}<!-- ELSEIF S_IN_MCP -->{L_MODERATE_FORUM}<!-- ELSE -->{L_JUMP_TO}<!-- ENDIF -->" class="button button-secondary dropdown-trigger dropdown-select">
<span><!-- IF S_IN_MCP and S_MERGE_SELECT -->{L_SELECT_TOPICS_FROM}<!-- ELSEIF S_IN_MCP -->{L_MODERATE_FORUM}<!-- ELSE -->{L_JUMP_TO}<!-- ENDIF --></span>
<span class="caret"><i class="icon fa-sort-down fa-fw" aria-hidden="true"></i></span>
</span>
<div class="dropdown">
<div class="pointer"><div class="pointer-inner"></div></div>
<ul class="dropdown-contents">
<!-- BEGIN jumpbox_forums -->
<!-- IF jumpbox_forums.FORUM_ID neq -1 -->
<li><a href="{jumpbox_forums.LINK}" class="<!-- IF jumpbox_forums.level -->jumpbox-sub-link<!-- ELSEIF jumpbox_forums.S_IS_CAT -->jumpbox-cat-link<!-- ELSE -->jumpbox-forum-link<!-- ENDIF -->"><!-- BEGIN level --><span class="spacer"></span><!-- END level --> <span><!-- IF jumpbox_forums.level --><!-- IF S_CONTENT_DIRECTION eq 'rtl' -->↲<!-- ELSE -->↳<!-- ENDIF --> <!-- ENDIF --> {jumpbox_forums.FORUM_NAME}</span></a></li>
<!-- ENDIF -->
<!-- END jumpbox_forums -->
</ul>
</div>
</div>
<!-- ELSE -->
<br /><br />
<!-- ENDIF -->
</div>
I added the new include to
view_topic.html and
viewforum_body.html, here:
view_topic.html
Code: Select all
<!-- IF (S_NUM_POSTS > 1 or .pagination) and not S_IS_BOT -->
<form method="post" action="{S_TOPIC_ACTION}">
<!-- INCLUDE display_options.html -->
</form>
<!-- ENDIF -->
<!-- INCLUDE jumpboxREVISED.html -->
viewforum_body.html
NOTE: For
viewforum_body.html I added the include following the <div class="search-box"></div>.
Code: Select all
<!-- IF S_DISPLAY_SEARCHBOX -->
<div class="search-box" role="search">
<form method="get" id="forum-search" action="{S_SEARCHBOX_ACTION}">
<fieldset>
<input class="inputbox search tiny" type="search" name="keywords" id="search_keywords" size="20" placeholder="{L_SEARCH_FORUM}" />
<button class="button button-search" type="submit" title="{L_SEARCH}">
<i class="icon fa-search fa-fw" aria-hidden="true"></i><span class="sr-only">{L_SEARCH}</span>
</button>
<a href="{{ U_SEARCH_FORUM }}" class="button button-search-end" title="{L_SEARCH_ADV}">
<i class="icon fa-cog fa-fw" aria-hidden="true"></i><span class="sr-only">{L_SEARCH_ADV}</span>
</a>
{S_SEARCH_LOCAL_HIDDEN_FIELDS}
</fieldset>
</form>
</div>
<!-- ENDIF -->
<!-- INCLUDE jumpboxREVISED.html -->
On
common.css, in the Milk style folder "theme," I added the following declaration:
Code: Select all
.newMenu {
display:relative;
float:left;
vertical-align: top;
}
With this solution, I'm not 100% that the code referenced in a prior post, i.e. {% if SCRIPT_NAME != 'viewforum' %} the code {% endif %}, is absolutely necessary given the include is not referencing
jumpbox.html but I may be overlooking its specific purpose.
The final result:
Thank you for the hints and help!
Using phpBB extensively to teach online courses. Always looking for extensions geared towards helping students.