#1
Great job on making Core responsive.

There's just a few little things that could be fixed (I don't know if these are part of Core or part of XF though). I can post screenshots tonight to explain better.

1) When going to a small browser window the sidebar drops below the node list but it doesn't expand to the same width (it's slightly less) until you go to an even smaller browser window when it then actually expands to match the width of the node list.

2) The Advanced footer doesn't go responsive very elegantly with some parts pushed below and then no longer aligned. I'd suggest as soon as the page is too narrow for the 3 panel footer, to push it so it's only 1 panel wide and all 3 are below each other.

3) When using the User Bar, below a certain width the account options all disappear (they actually drop to a new line and are hidden). I imagine a longer username makes this worse. I think you need at least a dropdown icon to remain in the top right whatever the resolution is. i.e. Inbox and Alerts can both go if it gets really narrow but turning the username into an icon and having it link to index.php?account is fairly vital.
 

Russ

Pixel Exit Staff
#2
1.) It's actually as designed, it functions the same way as the default XenForo install. While it would be easy enough to expand the sidebar with a media query such as....

Code:
<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveNarrowWidth)
{
    .sidebbar
    {
        width: 100%;
    }
}
</xen:if>
The download with that you'll need to expand the sidebarbg manually or else it'll turn out like this:

sidebar.png


2.) I'll need to mess with it, the downside is there's many resolutions out there and honestly the best might be to have the expand footer link on the mediumwidth as well(which is the tablet size that knocks 1 or two blocks down)

3.) Browse to Appearance -> Style Properties -> [XB] Header & Navigation -> User Bar CSS,

Remove the "height" completely it's set at 32px right now. That will actually drop the username/inbox/alerts down to the next line like a normal behavior. Of course only admins/mods will have it dropped down like that.
 
#3
3.) Browse to Appearance -> Style Properties -> [XB] Header & Navigation -> User Bar CSS,

Remove the "height" completely it's set at 32px right now. That will actually drop the username/inbox/alerts down to the next line like a normal behavior. Of course only admins/mods will have it dropped down like that.
Perfect, thanks.

To explain #1 a little better


Here the sidebar is fixed/narrow while the forum is wider:
Screen Shot 2013-07-10 at 19.15.55.png


Here you see the sidebar width is 100% but the forum blocks aren't ("Hidden" is a forum category)
Screen Shot 2013-07-10 at 19.16.09.png

I think it might just be a padding issue...?
 
#4
Another question

For my notices I currently have this as the template/CSS:

Code:
<img src="/images/notices/sc.png" style="display:block; width:990px; height:150px;overflow: hidden;" title="Welcome" />
 
<div class="signup_Intro" style="position:absolute; top:0; left:0; height:100%; width:290px;">
<div style="padding: 10px;">
<h4>Welcome</h4>
<p>Please <a href="index.php?login/">Register</a> to access the whole of the site and to post on the forums.</p>
<div class="noticeButtonContainer">
<label for="LoginControl" id="SignupButton"><a href="index.php?login/" class="inner"><b>Sign Up Now!</b></a></label>
<br />
<div class="signup_Member">Already a member? <a href="login/">Login Now!</a></div>
</div>
</div>
</div>
[code]
 
The notice container is already responsive so that's all fine. The only thing I'd like is to either change the background image width:
 
[code]
<img src="/images/notices/sc.png" style="display:block; width:990px; height:150px;overflow: hidden;" title="Welcome" />
depending on the responsive layout or alternatively remove the image completely and replace it with a solid bg colour.

Do you think that's possible?
 

Russ

Pixel Exit Staff
#5
First padding one I got you now, you can try this in the extra.css:

Code:
<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveNarrowWidth)
{
    .forum_list .sectionMain
    {
        padding: 10px 0px;
    }
}
</xen:if>
Could you give me a screenshot of your notice setup by chance?
 
#6
This is at desktop width

Screen Shot 2013-07-10 at 19.37.59.png

This is when the browser is shrunk a bit. You can see as the container is responsive it just displays less of the image. When the image is just a background that's fine but if the image has text/logo on it then it's not perfect to cut half of it off (but not sure if we can come up with a solution to that).

Screen Shot 2013-07-10 at 19.38.12.png

This is at mobile resolution. At this res I don't see the point in having the image load any more as it's not really visible and is just behind the text. Changing the background image to a solid colour here would be useful.

Screen Shot 2013-07-10 at 19.38.28.png
 

Steve

Pixel Exit Staff
#8
You can assign a class to your image and then use a display: none; when in responsive view.

HTML:
<img src="/images/notices/sc.png" class="noticeImage" style="display:block; width:990px; height:150px;overflow: hidden;" title="Welcome" />
 
<div class="signup_Intro" style="position:absolute; top:0; left:0; height:100%; width:290px;">
<div style="padding: 10px;">
<h4>Welcome</h4>
<p>Please <a href="index.php?login/">Register</a> to access the whole of the site and to post on the forums.</p>
<div class="noticeButtonContainer">
<label for="LoginControl" id="SignupButton"><a href="index.php?login/" class="inner"><b>Sign Up Now!</b></a></label>
<br />
<div class="signup_Member">Already a member? <a href="login/">Login Now!</a></div>
</div>
</div>
</div>
[code]
 
The notice container is already responsive so that's all fine. The only thing I'd like is to either change the background image width:
 
[code]
<img src="/images/notices/sc.png" style="display:block; width:990px; height:150px;overflow: hidden;" title="Welcome" />
Notice the class I added to the <img>

And add this to your extra.css

Code:
<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveNarrowWidth)
{
    .noticeImage
    {
        display: none;
    }
}
</xen:if>
Edit: Also that notice setup looks like my resource that I submitted a while back but is now deleted. I am going to redo that to be more user friendly and less in-line styling.
 
#9
First padding one I got you now, you can try this in the extra.css:

Code:
<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveNarrowWidth)
{
    .forum_list .sectionMain
    {
        padding: 10px 0px;
    }
}
</xen:if>
What's the easiest way to remove the padding and make the responsive view 100%?
 
#10
In firebug, setting these values to 0px (as opposed to clearing them) does what i want but I can't seem to find the correct style property option.

Screen Shot 2013-07-11 at 18.51.37.png

I thought it was here:

Screen Shot 2013-07-11 at 18.53.04.png

but that doesn't seem to affect anything...
 

Russ

Pixel Exit Staff
#11
In firebug, setting these values to 0px (as opposed to clearing them) does what i want but I can't seem to find the correct style property option.

View attachment 236

I thought it was here:

View attachment 237

but that doesn't seem to affect anything...
You need to add it in a media query:

Code:
<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveNarrowWidth)
{
    #content .pageContent
    {
        padding: 0px !important;
    }
}
</xen:if>
 
#14
Is this correct or is there a better way?

Code:
<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveNarrowWidth)
{
    #content .pageContent
    {
        padding: 0px !important;
    }
    
        .forum_list .sectionMain
    {
        padding: 10px 0px;
    }
    
    .sidebar .section .primaryContent h3, .sidebar .section .secondaryContent h3, .profilePage .mast .section.infoBlock h3 {
    background-size: 320px;
    }
    
}
</xen:if>
 

Russ

Pixel Exit Staff
#15
Ah is that because the sidebar image is only 316px wide?
This would be why, I suppose I need to extend it a bit, I've mentioned it before I could of taken a different approach to it and I may of actually just thought of one that will make it so the icon next to the title will be different image than the black gradient.

But for now you could extend that image on the right side.
 
#16
So this is ok?

.sidebar .section .primaryContent h3, .sidebar .section .secondaryContent h3, .profilePage .mast .section.infoBlock h3 {
background-size: 320px;
 

Russ

Pixel Exit Staff
#17
So this is ok?

.sidebar .section .primaryContent h3, .sidebar .section .secondaryContent h3, .profilePage .mast .section.infoBlock h3 {
background-size: 320px;
I meant stretch the image using like photoshop, extend the right side out using photoshop.
 

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.