Apr 22, 2019, 08:08 pm

News:

Keep an eye on your notifications page. It can get huge.


QUICK NEWS

{NEW} -Lot's of changes to the site. From the front page to the theme.

{OLD} -We are open. Stop on in and say hi.

Video of the week


Internal Links

SMF Sites

Quick Info

Adding text to top of forum.

Started by LandyVlad, Feb 10, 2019, 08:23 pm

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

LandyVlad

Feb 10, 2019, 08:23 pm Last Edit: Feb 11, 2019, 10:59 pm by Bigguy Reason: corrected topic title
And by top I mean where, once logged in, you see your avatar, name, my messages and alerts (on LHS) and search (on RHS)


Is it possible to add some text, centred in the gap between the two - for example the Forum name?

And if so, how please?

Bigguy

You mean in the top bar...the one I have stuck to the top. ???

LandyVlad


Bigguy

I'm sure it's possible. Let me get another coffee and I may play around a bit and see in a bit. :)

Bigguy

You can add text up there and with a bit of styling it would look ok. In your index.template.php file find this:

echo '

 <div id="top_section">

Below it add:

<div style="text-align:center;border:1px solid red">
This is some text in a div element!
</div>


Shows fine. It just needs some style. ;)

This is just an example mind you.

Bigguy

If you gave the div an id, like this:

<div id="topcdiv">
This is some text in a div element!
</div>


Than in the css you could do this:

.topcdiv{
color:white;
text-align:center;
}

SychO

Flexbox is the answer !

look for
// In maintenance mode, only login is allowed and don't show OverlayDiv
 echo '
 <ul class="floatleft welcome">
 <li>', sprintf($txt['welcome_guest'], $txt['guest_title'], '', $scripturl . '?action=login', 'return true;'), '</li>
 </ul>';
add after
echo '
 <div class="forumname">SMFHelper</div>
 <div class="top_forms">';
look for
</div><!-- .inner_wrap -->replace with
</div>
 </div><!-- .inner_wrap -->

Add the following css code (in index.css)
.forumname {
 text-align: center;
 line-height: 34px;
}
#top_section .inner_wrap {
 display: flex;
}
#top_section .inner_wrap>* {
 flex: 1 1 auto;
}

last but not least to keep things pretty on mobile, in responsive.css look for
@media screen and (max-width: 720px) {Add after
.forumname {
 display:none;
 }

LandyVlad

@SychO

flexbox ?

What file are the first changes you suggest in please?

Oh and this code
</div>
 </div><!-- .inner_wrap -->

seems to have two /div s - are there nested ones here or is that a typo?

I'm not sure what that particular change does?


SychO

index.template.php

and no the additional closing div is no mistake, because I added a new div element in the first edit, I'm basically wrapping the search form and the language form together to make sure things display correctly.

Bigguy


LandyVlad

I've yet to try it, but I will :)