Gota 45 Share Posted February 12, 2019 I'd like to have the banner and the buttons of our page at the top on different levels since the banner is squeezing the buttons to the right which forces the Off-site dropdown to become More. Plus, if we ever get a new banner it would probably be a wider one and that would ruin the buttons completely. So is there a way to have the banner in a level above the buttons? Like, if you have more buttons that reach to the left, the banner is above them and the buttons should be above the news ticker. https://soulowls.rpginit.com/ If you first need to see some specific code you would need to tell me where since I have absolutely no idea about this kinda stuff. Link to comment Share on other sites More sharing options...
Arceus 1,082 Share Posted February 12, 2019 At a very quick glance, and I have no idea what your back-end coding looks like so you'll have to figure this out yourself: your banner is in the ipsLayout_container.flex.flex-jB div. This causes it to flex to the left of the navigation bar. You have two options. Move it outside of that div but still in header, or take the .flex.flex-jB classes out of the header ipsLayout_container div. I don't know which one is easier, but that's how you do it. I am the darkness, always watching, always listening, ALWAYS THERE. (If you're interested in Plain of Ice, message me, it's private. Bleach site, non-canon.) Link to comment Share on other sites More sharing options...
Gota 45 Author Share Posted February 12, 2019 8 minutes ago, Arceus said: At a very quick glance, and I have no idea what your back-end coding looks like so you'll have to figure this out yourself: your banner is in the ipsLayout_container.flex.flex-jB div. This causes it to flex to the left of the navigation bar. You have two options. Move it outside of that div but still in header, or take the .flex.flex-jB classes out of the header ipsLayout_container div. I don't know which one is easier, but that's how you do it. Er, I can't find most of these with searching when in the coding section, really sorry. This is what navBar looks like: {{if !in_array('ipsLayout_minimal', \IPS\Output::i()->bodyClasses )}} <nav> <div class='ipsNavBar_primary focus-nav-loading'> {template="quickSearch" group="global" app="core" params="$preview"} <ul data-role="primaryNavBar"> {template="navBarItems" app="core" group="global" location="front" params="\IPS\core\FrontNavigation::i()->roots( $preview ), \IPS\core\FrontNavigation::i()->subBars( $preview ), 0, $preview"} <li class="focus-nav-more focus-nav-hidden"> <a href="#"> {lang="more"} <i class="fa fa-caret-down"></i></a> <ul class='ipsNavBar_secondary'></ul> </li> </ul> </div> </nav> {{elseif member.group['g_view_board']}} <nav> <div> <div class='ipsNavBar_primary'> <a id='elBackHome' href='{setting="base_url"}' title='{lang="go_community_home"}'><i class='fa fa-angle-left'></i> {lang="community_home"}</a> </div> </div> </nav> {{endif}} Link to comment Share on other sites More sharing options...
Arceus 1,082 Share Posted February 12, 2019 Find your header. I'm going to assume it'll be in globalTemplate somewhere. Never used that theme, I don't know for sure. I am the darkness, always watching, always listening, ALWAYS THERE. (If you're interested in Plain of Ice, message me, it's private. Bleach site, non-canon.) Link to comment Share on other sites More sharing options...
Kit the Human 759 Share Posted February 13, 2019 Hey @Gota If you need more guidance on this, you should go to the templates list > core > front > global > globalTemplate Look for {template="logo" app="core" group="global" params=""} Cut it and move it above <div class="ipsLayout_container flex flex-jB"> Save and refresh. You'll probably want to center the banner next. Add the following to your custom.css a.logo { text-align: center; display: block; } You can add a margin-bottom if you want to give the banner some breathing space. The menu is aligned to the right, if you want to change that you need to add the following to your custom.css .focus-nav-right .ipsNavBar_primary { text-align: /* you can have center left justify or right here */; } Hope that helps! 1 2 PSI: an Occult Investigations RP Roleplay Architects: Grab a friend (or many friends!) and just write. You can also find me at: Link to comment Share on other sites More sharing options...
Gota 45 Author Share Posted February 13, 2019 @Kit the HumanThis worked great, thanks so much! How exactly do you do margin-bottom and what does it do? Does it create a gap between the two? 1 Link to comment Share on other sites More sharing options...
Kit the Human 759 Share Posted February 13, 2019 That's right! Just add the following to your custom.css .flex01.flex11-t { margin-bottom: 5px; } You can increase 5px if you want a greater gap. 1 PSI: an Occult Investigations RP Roleplay Architects: Grab a friend (or many friends!) and just write. You can also find me at: Link to comment Share on other sites More sharing options...
Gota 45 Author Share Posted March 6, 2019 (edited) @Kit the HumanI had to update the theme for 4.4 but now it's back to the way it was before and I can't replicate this method here anymore. globaltemplate is like this now <!DOCTYPE html> <html id='ipsfocus' lang="{expression="\IPS\Member::loggedIn()->language()->bcp47()"}" dir="{{if member.language()->isrtl}}rtl{{else}}ltr{{endif}}" class='focus-g{expression="member.member_group_id"} {{if !member.member_id}}focus-guest focus-guest-alert{{else}}focus-member{{endif}} focus-topic-compact focus-post-bar focus-post-buttons'> <head> <title>{expression="output.getTitle( $title )"}</title> {{if settings.ipbseo_ga_enabled}}{setting="ipseo_ga"}{{endif}} <!--[if lt IE 9]> {{foreach \IPS\Theme::i()->css( 'extra/ie8.css', 'core' ) as $css}}<link rel="stylesheet" type="text/css" href="{$css}">{{endforeach}} <script src="{url="applications/core/interface/html5shiv/html5shiv.js" base="none" protocol="\IPS\Http\Url::PROTOCOL_RELATIVE"}"></script> <![endif]--> {template="includeMeta" app="core" group="global" location="global" params=""} {template="includeCSS" app="core" group="global" location="global" params=""} {template="js_head" app="core" group="global" location="global" params=""} {template="includeJS" if="theme.js_include != 'footer'" app="core" group="global" location="global" params=""} {template="js_backgroundPicker" if="(theme.js_include != 'footer') && (theme.focus_picker)" app="core" group="global" location="global" params=""} {template="js_general" if="theme.js_include != 'footer'" app="core" group="global" location="global" params=""} {template="js_globalMessage" if="(theme.js_include != 'footer') && (theme.global_close)" app="core" group="global" location="global" params=""} {template="js_countdown" if="(theme.js_include != 'footer') && (theme.countdown_enable)" app="core" group="global" location="global" params=""} {template="js_theme" if="theme.js_include != 'footer'" app="core" group="global" location="global" params=""} {template="favico" app="core" group="global" location="front" params=""} </head> <body class='ipsApp ipsApp_front {{if isset( \IPS\Request::i()->cookie['hasJS'] )}}ipsJS_has{{else}}ipsJS_none{{endif}} ipsClearfix{{foreach output.bodyClasses as $class}} {$class}{{endforeach}}' {{if output.globalControllers}}data-controller='{expression="implode( ',', output.globalControllers )"}'{{endif}} {{if isset( output.inlineMessage )}}data-message="{expression="output.inlineMessage"}"{{endif}} data-pageApp='{$location['app']}' data-pageLocation='front' data-pageModule='{$location['module']}' data-pageController='{$location['controller']}' {{if isset( \IPS\Request::i()->id )}}data-pageID='{expression="(int) \IPS\Request::i()->id"}'{{endif}}> <a href='#elContent' class='ipsHide' title='{lang="jump_to_content_desc"}' accesskey='m'>{lang="jump_to_content"}</a> {template="mobileNavBar" app="core" group="global" params=""} <div class='ipsLayout_container'> <div id='ipsLayout_header'> <div class='nav-bar hide-minimal'> <div class='ipsLayout_container secondary-header-align'> <div class='user-links user-links-b'>{template="userBar" app="core" group="global" params=""}</div> <div class='ipsfocus-search'></div> </div> </div> <header id='header'> <div class='ipsLayout_container header-align'> <div class='logo-wrap'>{template="logo" app="core" group="global" params=""}</div> <div class='focus-nav focus-nav-right'>{template="navBar" app="core" group="global" params=""}</div> </div> </header> </div> <main id='ipsLayout_body' class='ipsLayout_container'> <div class='content-wrap'> <div class='content-padding'> logo <div class='precontent-blocks'> <div class='ipsfocus-breadcrumb'> {template="breadcrumb" app="core" group="global" params="'top'"} {template="ipsfocus_socialButtons" if="theme.focus_social" app="core" group="global" params=""} </div> {template="ipsfocus_backgroundPicker" if="theme.focus_picker" app="core" group="global" params=""} {template="updateWarning" app="core" group="global" params=""} {template="ipsfocus_countdown" if="theme.countdown_enable" app="core" group="global" params=""} {template="ipsfocus_globalMessage" if="theme.global_enable" app="core" group="global" params=""} {template="ipsfocus_guestMessage" if="(theme.guest_enable) && !\in_array('ipsLayout_minimal', \IPS\Output::i()->bodyClasses ) && !member.member_id" app="core" group="global" params=""} </div> <div id='ipsLayout_contentArea'> <div id='ipsLayout_contentWrapper'> {template="sidebar" if="theme.sidebar_position == 'left'" app="core" group="global" params="'left'"} <div id='ipsLayout_mainArea'> <a id='elContent'></a> {advertisement="ad_global_header"} {template="acknowledgeWarning" if="\IPS\Member::loggedIn()->members_bitoptions['unacknowledged_warnings']" params="\IPS\Member::loggedIn()->warnings( 1, FALSE )" group="global" app="core"} {{if !\in_array('ipsLayout_minimal', \IPS\Output::i()->bodyClasses ) and !member.members_bitoptions['profile_completion_dismissed'] and $nextStep = member.nextProfileStep()}} {template="profileNextStep" group="global" app="core" params="$nextStep, true"} {{endif}} {template="widgetContainer" group="global" app="core" params="'header', 'horizontal'"} {$html|raw} {template="widgetContainer" group="global" app="core" params="'footer', 'horizontal'"} </div> {template="sidebar" if="theme.sidebar_position == 'right'" app="core" group="global" params="'right'"} </div> </div> </div> {template="ipsfocus_megaFooter" if="theme.footer_enable" app="core" group="global" params=""} {template="breadcrumb" app="core" group="global" params="'bottom'"} {template="inlineMessage" if="member.msg_show_notification and $message = \IPS\core\Messenger\Conversation::latestUnreadMessage()" app="core" group="global" params="$message"} </div> </main> <footer id='ipsLayout_footer'> {advertisement="ad_global_footer"} <div class='ipsLayout_container'> {template="footer" app="core" group="global" params=""} </div> </footer> </div> {template="mobileNavigation" if="theme.responsive" app="core" group="global" params=""} {template="guestTermsBar" if="!\IPS\Member::loggedIn()->member_id and \IPS\Settings::i()->guest_terms_bar" app="core" group="global" params="base64_encode( \IPS\Settings::i()->base_url )"} {template="includeJS" if="theme.js_include == 'footer'" app="core" group="global" location="global" params=""} {template="js_backgroundPicker" if="(theme.js_include == 'footer') && (theme.focus_picker)" app="core" group="global" location="global" params=""} {template="js_general" if="theme.js_include == 'footer'" app="core" group="global" location="global" params=""} {template="js_countdown" if="(theme.js_include == 'footer') && (theme.countdown_enable)" app="core" group="global" location="global" params=""} {template="js_globalMessage" if="(theme.js_include == 'footer') && (theme.global_close)" app="core" group="global" location="global" params=""} {template="js_theme" if="theme.js_include == 'footer'" app="core" group="global" location="global" params=""} {template="viglink" if="settings.viglink_enabled" app="core" group="global" params=""} {template="metaTagEditor" if="isset( $_SESSION['live_meta_tags'] ) and $_SESSION['live_meta_tags'] and member.isAdmin()" app="core" group="global" params=""} <!--ipsQueryLog--> <!--ipsCachingLog--> {expression="output.endBodyCode" raw="true"} {{if settings.fb_pixel_enabled and settings.fb_pixel_id and $noscript = \IPS\core\Facebook\Pixel::i()->noscript()}} <noscript> {$noscript|raw} </noscript> {{endif}} </body> </html> Edited March 6, 2019 by Gota Link to comment Share on other sites More sharing options...
Kit the Human 759 Share Posted March 7, 2019 Give this a shot: Add the following to your custom.css .ipsLayout_container.header-align { display: block } .logo-wrap { margin-bottom: 5px } Adjust the margin-bottom value to whatever you want the gap between the header and the menu to be. 1 1 PSI: an Occult Investigations RP Roleplay Architects: Grab a friend (or many friends!) and just write. You can also find me at: Link to comment Share on other sites More sharing options...
Gota 45 Author Share Posted March 7, 2019 That worked, thanks again! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now