Question About Title Bars & Containers

[Shaliza]

Hi there... 

I was working on a new, flamingo theme tonight and accidentally changed something so that the welcome container is now sitting right on top of the first category as shown in the image below:




I can't seem to put some space between the two like there is elsewhere on the board.  

Also, I can't seem to left justify the text on the Title Bars and even the shout box which is show below:



I want the text on the title bars on the left and the menu in the shout box reply box on the left as well, which is the default setting. If I don't choose any justification at all, the titles end up centered. But if I try to left justify the title moves slightly to the left, but not all the way. 

This is the only theme that I'm having these issues with and the others seem fine for now. I appreciate any and all help. 

Thank you!  

[Nscalerr 🐺]

Sounds as if you may have accidently deleted a closing div, but as I can't view the theme, I can't confirm if this is the case.

[Shaliza]

Aug 16, 2020 3:02:25 GMT -8 Nscalerr 🐺 said:

Sounds as if you may have accidently deleted a closing div, but as I can't view the theme, I can't confirm if this is the case.

Thank you so much for this tip, Nscalerr. I added another closing </div> to my Home Layout Template and that seems to have taken care of the issue.

Any idea why I can't left justify the Title Bar headings though? If I don't pick an option it centers. But if I do pick Left, then the text moves partially to the left but not all the way like in the screen shot I posted. 

Thanks again for the help. I really appreciate it.  

[Nscalerr 🐺]

That bit I am not sure of the cause, but maybe something in the stylesheet could be doing it.

[Shaliza]

Aug 16, 2020 22:59:47 GMT -8 Nscalerr 🐺 said:

That bit I am not sure of the cause, but maybe something in the stylesheet could be doing it.

Yeah, you're probably right. The funny thing is it only happens on the home page. When you click any of the boards/threads the titles are left justified and so is the should box menu, so I'm not sure what is going on.  

[Retread]

Hi Shaliza

Providing screenshots is a great way to display the problem you're having with the results. But they do little to guide us to the source of the problem.

Would it be possible to make the theme you're working on, the default on a test forum that is viewable by guests?

And/or could you export the forum to your computer, then attach the .pbt file to a post in this thread?

[Shaliza]

Aug 17, 2020 7:37:00 GMT -8 Retread said:

Hi Shaliza

Providing screenshots is a great way to display the problem you're having with the results. But they do little to guide us to the source of the problem.

Would it be possible to make the theme you're working on, the default on a test forum that is viewable by guests?

And/or could you export the forum to your computer, then attach the .pbt file to a post in this thread?

Thanks for taking the time to reply, Retread. I appreciate it.  

I did set the Flamingo theme as the default so that everyone can view it. I have not set the justification for the Title Bar Font so it's defaulting to the center position although it should be left (by PB default). Trying to justify the font left on the Visual Editor makes it move only slightly to the left but not all the way as in the screenshot I posted above. 

The Shoutbox menu is also centered (I'm not sure why) but only on the home page.

I also saved the theme as a pbt file and have attached it to this post. Hope I did this right.

Flamingo Paradise.pbt (636.04 KB)


Thanks again for the help.  

[Retread]

Hey Shaliza , the attached .pbt file worked just fine. I installed in on my test forum and started investigating.

The <h2> heading contained in the title bar is being defined as less than the full wrapper width, so even when the text is aligned right within the heading, it doesn't move all the way to the right of the title bar.

On line 456 of your Style Sheet, you'll find this line:

.container > .title-bar.bbcode h2 { width: (@wrapper_width - 10); line-height: inherit !important; padding: 0px; display: block; }
That's what's limiting how far to the left or right the title bar text can be aligned. We can work around that by aligning the entire contents of the title bar, as well as the heading. We can also address the shoutbox title bar at the same time and have it follow whatever alignment you select in the Visual Editor for the Category title bars.

Add this to the bottom of your Style Sheet:

/* Correct alignment of Category and Shoutbox title bars */
.container.boards .title-bar.bbcode,
.container.shoutbox  .title-bar {text-align: @title_text_align;}
Then when you align the text for the title bars in the Visual Editor, they should align properly.

Body (Content)

Containers

Title Bars

Text

Text Align (select left from the dropdown)

Please let me know if that gets you where you want to go.

[Shaliza]

Hello Retread ,

Thanks so much for the help. I added the coding you suggested to the bottom of the Style Sheet and that worked great to left justify the text on the Title Bars.

The title for the Info. Centers however remains center justified even after I changed the justification to Left in the Visual Editor. Also, the menu on the Reply Box of the Shoutbox (reply button and smileys) remains centered, so am not sure how to fix these.

It's baffling because this theme is the only one having this problem and I use the same, basic, default template to create all my themes.

Thanks again for the help. I really appreciate it.

[Nscalerr 🐺]

Shaliza at the top of your home template you have the following!

<center><div class="container">
   <div class="title-bar"><center><h2>Welcome To The AKOE Forums</h2></center></div>
   <div class="content">
<br><center> <font color="#3eaaa6"> <b>We Warmly Welcome Our Newest Member To The Forum: $[newest_user]</b></font></center><br />
<div class="classnamehere"><img src="https://village.photos/images/user/8b71678b-f386-41ca-b2a6-41bd3ed56de3/76b39363-7474-46f2-948c-b105331ccec0.png"></div>

</div>
</div><center>

Note that the closing <center> tag is missing it's /, which means that everything below it is also centered, by changing it to </center>, the problem goes away!

A far better version of the coding is below. You won't need the css fix by Retread once this is done, (if you still do, then something else is happening in the code).

<div class="container" style="text-align: center;">
   <div class="title-bar" style="text-align: center;"><h2>Welcome To The AKOE Forums</h2></div>
   <div class="content" style="text-align: center;"><br />
       <font color="#3eaaa6"><b>We Warmly Welcome Our Newest Member To The Forum: $[newest_user]</b></font><br />
       <div class="classnamehere"><img src="https://village.photos/images/user/8b71678b-f386-41ca-b2a6-41bd3ed56de3/76b39363-7474-46f2-948c-b105331ccec0.png"></div>
   </div>
</div>

[Retread]

Nicely done, Nscalerr 🐺

[Shaliza]

Thank you so much Nscalerr 🐺. That little pearl of wisdom worked like a charm!

I really appreciate the help. *hugs*

[Nscalerr 🐺]

*hugs* Good to hear it is working.