QUICK NEWS

{NEW} - A new css video is up.

{OLD} - New video courtesy of Skhilled, Thanks for posting it up.

Video of the moment:


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 3 Guests are viewing this topic.

LandyVlad

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?
Please do not PM me with questions on astrophysics or theology.  You will get better and faster responses by asking homeless people in the street. Thank you.

Bigguy

You mean in the top bar...the one I have stuck to the top. ???
"It's the American dream....cause ya have to be asleep to believe it." - George Carlin

LandyVlad

Please do not PM me with questions on astrophysics or theology.  You will get better and faster responses by asking homeless people in the street. Thank you.

Bigguy

I'm sure it's possible. Let me get another coffee and I may play around a bit and see in a bit. :)
"It's the American dream....cause ya have to be asleep to believe it." - George Carlin

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.
"It's the American dream....cause ya have to be asleep to believe it." - George Carlin

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;
}
"It's the American dream....cause ya have to be asleep to believe it." - George Carlin

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?

Please do not PM me with questions on astrophysics or theology.  You will get better and faster responses by asking homeless people in the street. Thank you.

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

"It's the American dream....cause ya have to be asleep to believe it." - George Carlin

LandyVlad

I've yet to try it, but I will :)
Please do not PM me with questions on astrophysics or theology.  You will get better and faster responses by asking homeless people in the street. Thank you.