Constructive Criticism for my forum design

[l3ta]

Do you think I should turn off logo masking? I think that may be contributing to that

Use the code provided in the link below to make your logo bigger on mobile

XF 2.1 - Our logo shrinks really tiny in mobile viewports. How do we make it bigger?

How can I control the size of our logo when someone visits our site from a phone? Currently our logo shrinks to a really tiny size. Ideally, we would like our logo larger in a phone viewport. How do we do this? Thanks,

xenforo.com

 

[RG70Hz]

Use the code provided in the link below to make your logo bigger on mobile

XF 2.1 - Our logo shrinks really tiny in mobile viewports. How do we make it bigger?

How can I control the size of our logo when someone visits our site from a phone? Currently our logo shrinks to a really tiny size. Ideally, we would like our logo larger in a phone viewport. How do we do this? Thanks,

xenforo.com

That is just absolutely beautiful. I cannot thank you enough.

 

[RG70Hz]

Use the code provided in the link below to make your logo bigger on mobile

XF 2.1 - Our logo shrinks really tiny in mobile viewports. How do we make it bigger?

How can I control the size of our logo when someone visits our site from a phone? Currently our logo shrinks to a really tiny size. Ideally, we would like our logo larger in a phone viewport. How do we do this? Thanks,

xenforo.com

Looks so much better

 

[briansol]

my one bit of feedback is that the header is too tall. takes up too much viewport.

 

[RG70Hz]

my one bit of feedback is that the header is too tall. takes up too much viewport.

Noted! Would you mind including a screenshot so I can see what you’re talking about? I appreciate the feedback!

 

[briansol]

it's 50% of the viewport on the landing page.

also, your site is throwing a virus scanner alert.

 

[BassMan]

I’m wondering if I could adjust it so when the user scrolls up, the icons for profile, alerts, etc will expands over to the left and when you scroll down it collapses as it already is. Does that make sense?

Haven't tried it, but I wouldn't recommend it.

 

[MQK8]

I would put your 1st Category - as your last category where it's at the bottom of your forum.

Bayman Banter
Announcements
Suggestions & Bug Reports
Introduction

 

[Alvin63]

Use the code provided in the link below to make your logo bigger on mobile

XF 2.1 - Our logo shrinks really tiny in mobile viewports. How do we make it bigger?

How can I control the size of our logo when someone visits our site from a phone? Currently our logo shrinks to a really tiny size. Ideally, we would like our logo larger in a phone viewport. How do we do this? Thanks,

xenforo.com

That worked for me I have the logo smaller on the desktop view and bigger on mobile with that.

 

[Alvin63]

Just had a look. I'd play around with colours in settings a bit more. I have the background, the tabs and the node tabs varying shades and the background colour slightly different. It can be a lot of playing around but you can really make it a bit more individual that way. And it look less corporate.

I'd also work on the logo sizing and placement. I spent a ridiculous amount of time fiddling around with that.

I'd have a different home page. I use Bob's Article Management System as a home page - with photos and articles on. But there are other options for making a home page.

 

[Alvin63]

What I did with my logo was - crop it in paint.net top and bottom before uploading it (so it has less height). Then when you upload it you could set the header background to the same colour as the logo background - so it doesn't look so cropped. To adjust the size/height of the logo then, on the page you can do this in Settings - Appearance - Style Properties - Header and Navigation. Scroll down to "Header/logo row" and under Extra "CSS Less" you can type in different sizes in code and try them out. I have

height: 85px;

You can change that number to 100 or 70 or whatever and see the difference.

 

[Alvin63]

So basically you could shrink the entire logo - including the white lines, before uploading it, set the background colour to the same as the logo and then fiddle about with the size/height settings as above until the header bar is the right size and the logo is the right size.

Changing the colours really made a big but subtle difference to mine. It was quite time consuming and fiddly though. I ended up with a green theme with salmon accents and some darker accents.

 

[RG70Hz]

Haven't tried it, but I wouldn't recommend it.

I managed to fix the issue with this code:

//Logo Mobile Size
// ########################### FULL SIZE LOGO ON MOBILE ########################
.p-nav-smallLogo {
    display: none !important;
}
.p-header-logo {
    max-width: none !important;
}
.has-js .p-header {
    display: block;
}

Works perfect.

 

[RG70Hz]

Just had a look. I'd play around with colours in settings a bit more. I have the background, the tabs and the node tabs varying shades and the background colour slightly different. It can be a lot of playing around but you can really make it a bit more individual that way. And it look less corporate.

I'd also work on the logo sizing and placement. I spent a ridiculous amount of time fiddling around with that.

I'd have a different home page. I use Bob's Article Management System as a home page - with photos and articles on. But there are other options for making a home page.

Can you send a link to this add-on? I can't seem to find it!

Thank for your input! I appreciate you taking the time.

 

[RG70Hz]

So basically you could shrink the entire logo - including the white lines, before uploading it, set the background colour to the same as the logo and then fiddle about with the size/height settings as above until the header bar is the right size and the logo is the right size.

Changing the colours really made a big but subtle difference to mine. It was quite time consuming and fiddly though. I ended up with a green theme with salmon accents and some darker accents.

Thanks! I tried creating the logo through "logo.com" and went with the color scheme. I still need to fiddle with it and change things around as it is very basic right now.

Do you have a link to yours so I can check it out?

 

[RG70Hz]

I would put your 1st Category - as your last category where it's at the bottom of your forum.

Bayman Banter
Announcements
Suggestions & Bug Reports
Introduction

So have the Bayman Banter category as the last?

 

[RG70Hz]

Haven't tried it, but I wouldn't recommend it.

Also, do you know what I could add in extra.less to fix this issue? I will provide two screenshots to show what I mean. If you notice on the "fix" screenshot, the date and pin portion doesn't have its own little block. In the "reference" screenshot, it does. It looks a little tacky like it is right now.

[edit] I fixed it by inspecting the element and adding this:

.porta-article-item .porta-article-date .porta-date-block {
    background: #fefefe;
    border: 1px solid #f3f3f3;
    width: 50px;
    padding: 10px;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

.porta-article-item .porta-article-date .porta-date-block b {
    display: block;
    font-size:1.5em
}

See FIXED screenshot.

 

[BassMan]

Also, do you know what I could add in extra.less to fix this issue? I will provide two screenshots to show what I mean. If you notice on the "fix" screenshot, the date and pin portion doesn't have its own little block. In the "reference" screenshot, it does. It looks a little tacky like it is right now.

[edit] I fixed it by inspecting the element and adding this:

.porta-article-item .porta-article-date .porta-date-block {
    background: #fefefe;
    border: 1px solid #f3f3f3;
    width: 50px;
    padding: 10px;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

.porta-article-item .porta-article-date .porta-date-block b {
    display: block;
    font-size:1.5em
}

See FIXED screenshot.

try with this:

.porta-article-item .porta-article-date .porta-date-block {
    border-width: 1px !important;
    border-color: #e0e0e0;
    background: #ffffff;
}

 

[BassMan]

I managed to fix the issue with this code:

//Logo Mobile Size
// ########################### FULL SIZE LOGO ON MOBILE ########################
.p-nav-smallLogo {
    display: none !important;
}
.p-header-logo {
    max-width: none !important;
}
.has-js .p-header {
    display: block;
}

Works perfect.

I must have misunderstood what you wanted.

 

[RG70Hz]

I must have misunderstood what you wanted.

No I think you were correct but this solution works just as good imo