Jump to content

[Solved] Giving the banner its own level

Gota

By Gota,
in Coding Help & Requests

 Share

Recommended Posts

Gota    45

Gota
Posted

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.

2055148134_EOHbanner.png.530f7a6856f7b2fd0b4861da17014318.png

Link to comment
Share on other sites
  • Replies 9
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Kit the Human
Kit the Human

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" pa

Kit the Human
Kit the Human

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 t

Gota
Gota

@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?

Arceus    1,082

Arceus
Posted

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.

nusignature.png nusignature.png

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

Gota    45

Gota
  • Author
Posted
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}}

 

2055148134_EOHbanner.png.530f7a6856f7b2fd0b4861da17014318.png

Link to comment
Share on other sites

Arceus    1,082

Arceus
Posted

Find your header.

I'm going to assume it'll be in globalTemplate somewhere. Never used that theme, I don't know for sure.

nusignature.png nusignature.png

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

Kit the Human    758

Kit the Human
Posted

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!

  • Fuck Yeah! 1
  • Thank you 2

 

sig.png.30b42565d04d922988370bf14e1447bc.png

PSI: an Occult Investigations RP

Roleplay Architects: Grab a friend (or many friends!) and just write.

You can also find me at:

static-historicalrp.jpg  B8CB4x.png rpabutton.png

Link to comment
Share on other sites

Gota    45

Gota
  • Author
Posted

@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?

  • You're Welcome 1

2055148134_EOHbanner.png.530f7a6856f7b2fd0b4861da17014318.png

Link to comment
Share on other sites

Kit the Human    758

Kit the Human
Posted

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.

  • Thank you 1

 

sig.png.30b42565d04d922988370bf14e1447bc.png

PSI: an Occult Investigations RP

Roleplay Architects: Grab a friend (or many friends!) and just write.

You can also find me at:

static-historicalrp.jpg  B8CB4x.png rpabutton.png

Link to comment
Share on other sites
  • 3 weeks later...

Gota    45

Gota
  • Author
Posted (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 by Gota

2055148134_EOHbanner.png.530f7a6856f7b2fd0b4861da17014318.png

Link to comment
Share on other sites

Kit the Human    758

Kit the Human
Posted

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.

  • Fuck Yeah! 1
  • Thank you 1

 

sig.png.30b42565d04d922988370bf14e1447bc.png

PSI: an Occult Investigations RP

Roleplay Architects: Grab a friend (or many friends!) and just write.

You can also find me at:

static-historicalrp.jpg  B8CB4x.png rpabutton.png

Link to comment
Share on other sites

Gota    45

Gota
  • Author
Posted

That worked, thanks again!

  • You're Welcome 1

2055148134_EOHbanner.png.530f7a6856f7b2fd0b4861da17014318.png

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.

  I accept