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 1 Guest 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?
I reject your reality, and substitute my own.

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

I reject your reality, and substitute my own.

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?

I reject your reality, and substitute my own.

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 :)
I reject your reality, and substitute my own.