Feb 19, 2019, 06:53 pm

News:

Have you backed up YOUR database today


NEWS

{NEW} -Theme is about 90% done. A bit more to do

{OLD} -More touches are needed. Will do this today.

Web building Videos
These will be posted in the Video Tuts board, check it out.

Internal Links

SMF Sites

Quick Info

Adding text to top of forum.

Started by LandyVlad, Feb 11, 2019, 01:23 am

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

LandyVlad

Feb 11, 2019, 01:23 am Last Edit: Feb 12, 2019, 03:59 am 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:

Code Select
echo '

 <div id="top_section">

Below it add:

Code Select
<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:

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


Than in the css you could do this:

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

SychO

Flexbox is the answer !

look for
Code Select
// 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
Code Select
echo '
 <div class="forumname">SMFHelper</div>
 <div class="top_forms">';
look for
Code Select
</div><!-- .inner_wrap -->replace with
Code Select
</div>
 </div><!-- .inner_wrap -->

Add the following css code (in index.css)
Code Select
.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
Code Select
@media screen and (max-width: 720px) {Add after
Code Select
.forumname {
 display:none;
 }

LandyVlad

@SychO

flexbox ?

What file are the first changes you suggest in please?

Oh and this code
Code Select
</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.