Variable Issues & Other

[Teg]

Forum URL: (private)

Alright, I'm making this a private link as it's not open yet to people. I'm working with a pre-made theme and I've reached out to the user who created it and have heard nothing back, so I'm bringing my questions here.


I've not changed any css code for the header (at all), but the banner image (for whatever reason) doesn't stretch across the entire top on mobile devices. The rest of the theme seems to look pretty good on mobile.





The other thing I'd like to do (which I can't seem to make work no matter what I do) is have the site information toggle display (at the top) have different links and different information there on different boards or custom pages. I know there's a way to do it, just everything I've tried has failed. I tried doing if/else statements with forum id, name, and title. Those didn't seem to work.

As I said, I did go to the original creator first, now I'm coming to support. Not even sure if I've posted this in the right place. Any help would be appreciated.


Thanks for your time

[Brian]

The header isn't meeting the width of the device due to the wrapper exceeding that width. Since the header is at 100% width it can only reach the device width, but the wrapper is at 1200px so it goes beyond the 100% boundary and the fully zoomed out view of the page is the browser accommodating it. The easiest fix for this is to change width to max-width on the line that controls your wrapper width in your style sheet.

#wrapper { max-width: @wrapper_width; margin: 0 auto; overflow-x: hidden; }

To target specific custom pages by ID you can use $[route.params.page_id] in an if statement.

$[route.params.board_id] works for boards until you open a thread, at which point it's replaced by $[route.params.thread_id]. The only alternative I can suggest to get around this limitation is to use JavaScript since you can check against the values of the hash returned by pb.data('page').

[Teg]

Oct 10, 2018 8:19:18 GMT -8 Brian said:

The header isn't meeting the width of the device due to the wrapper exceeding that width. Since the header is at 100% width it can only reach the device width, but the wrapper is at 1200px so it goes beyond the 100% boundary and the fully zoomed out view of the page is the browser accommodating it. The easiest fix for this is to change width to max-width on the line that controls your wrapper width in your style sheet.

#wrapper { max-width: @wrapper_width; margin: 0 auto; overflow-x: hidden; }

To target specific custom pages by ID you can use $[route.params.page_id] in an if statement.

$[route.params.board_id] works for boards until you open a thread, at which point it's replaced by $[route.params.thread_id]. The only alternative I can suggest to get around this limitation is to use JavaScript since you can check against the values of the hash returned by pb.data('page').

Thanks Brian, I will try that with the wrapper. In regards to getting around the limitation, I know nothing about javascript (I've tried to learn it but I failed lol). Is there a simple javascript code for that?

EDIT:// I added the #wrapper the bottom of the css as you suggested. However, that didn't work. However, when I changed the max-width for that code to 100%, that fixed the issue except that that header shows a large blank space still above the actual banner area.

[Brian]

It depends on how you go about it. Usually the easiest way is to always have all of the elements that are capable of showing included on the page, but hidden by default with display: none; CSS. Then you could use JavaScript to show them based on the result of an if statement or other logic.

CSS (to hide the elements by default):

.board-specific-content {
    display: none;
}

HTML (repeatable):

<div class="default-content">
    This is the default content that shows when none of the conditions have been met
</div>

<div class="board-specific-content" data-board-id="1">
    This is content meant for board ID 1
</div>

<div class="board-specific-content" data-board-id="5">
    This is content meant for board ID 5
</div>

JS (can be placed within <script> tags before the HTML):

$(function(){
    var boards = [1, 2, 4, 8, 16];
    var inBoard= pb.data('page').board
        ? boards.indexOf(pb.data('page').board.id) != -1
        : false;
    if(inBoard) {
        $('.default-content, .board-specific-content[data-board-id="' + pb.data('page').board.id +'"]').toggle();
    }
});

[Teg]

Thanks again Brian , I will try that out.

Just in case you missed my edit "I added the #wrapper the bottom of the css as you suggested. However, that didn't work. However, when I changed the max-width for that code to 100%, that fixed the issue except that that header shows a large blank space still above the actual banner area."


I'm usually really good with CSS, LOL idk what is wrong with me lately.

[Brian]

Oct 10, 2018 15:13:41 GMT -8 Teg said:

Just in case you missed my edit "I added the #wrapper the bottom of the css as you suggested.

Huh?

I didn't say anything about adding new CSS. Only changing the existing CSS on line 158 to reflect the changes colored red in my post.

Oct 10, 2018 15:13:41 GMT -8 Teg said:

However, when I changed the max-width for that code to 100%, that fixed the issue except that that header shows a large blank space still above the actual banner area."

I'm not seeing any space above the banner on my own device (Android, Google Chrome).

[Teg]

Brian sorry, I misread what you said initially. See, told you I’m not all here. 

Anyway, this is what I’m seeing on iPhone safari browser

[Brian]

I think that's due to the fact that the background image is centered and Safari on iPhone doesn't support background-attachment: fixed (at least not on our iPhone at the office last I checked).

Assuming it still supports background-size fixing the invalid value on line 1627 will probably make it adjust to cover the space. The 700px bit doesn't belong there.

background-size: cover!important 700px;

[Teg]

Oct 10, 2018 16:02:32 GMT -8 Brian said:

I think that's due to the fact that the background image is centered and Safari on iPhone doesn't support background-attachment: fixed (at least not on our iPhone at the office last I checked).

Assuming it still supports background-size fixing the invalid value on line 1627 will probably make it adjust to cover the space. The 700px bit doesn't belong there.

background-size: cover!important 700px;

Thank you for continuing to look into this. That worked and got rid of the the space at the top. Except, now, You can't see the banner, like the image is there but only the colored part towards the top. Can't see the castle or anything.

EDIT:// Also, in regards to the javascript bit for the different information box on different boards and pages, the information box that's currently there needs to display as is unless we're on those specific boards/pages. So, would that be done with an if else statement? And, if so, how?

[Brian]

The only other suggestion I can make in regards to the banner is getting rid of the background-size property and changing the background alignment to the top.

For the homepage stuff you can just use the layout templates as you would normally.

{if $[route.name] == "home"}
Homepage-only stuff here
{/if}

[Teg]

I'll try that and see what it does. Wanted to give you an update and let you know that, obviously, the javascript thing for the different information did work! Thanks so much.

[Teg]

Sorry for the double post... In regards to the Box at the top where the javascript changes the information, what's shown on the homepage needs to show on all pages where there isn't custom information in that box. I've recently noticed that those boxes only show up on the home page and in the specific boards I've set to have custom changes. The main box on the homepage needs to be everywhere, but it will change within certain areas. Is there a fix for this? Brian

[Brian]

I've edited the code in my earlier post with the necessary changes.

The if statement in my post before this one will no longer be applicable.

[Teg]

Oct 11, 2018 16:04:24 GMT -8 Brian said:

I've edited the code in my earlier post with the necessary changes.

The if statement in my post before this one will no longer be applicable.

Okay, I removed the if statement from before and wrapped that block of text in the div as per the edit. I also copy and pasted the javascript again just to make sure. That said, it still only displays the box on the home page, no other board or page unless I had the board specific stuff. For example, if you go inside the News/Announcements board, the top where that info area should be is blank with just the header background.

[Brian]

I didn't notice the if statement always validates as true if you're in a board. My bad.

I added a board list array to the new version of the code. Any board IDs you list will have the code take effect within them, while others will be unaffected.