Forum design

[jkh]

jkh

jkh

Posts : 21
Reputation : 7
Join date : 2016-10-13

• Post n°1

Forum design

 by jkh Thu Oct 13, 2016 7:25 pm

I'm having a good look round the Admin Panel, Troy, and at the moment I'm particularly interested in the buttons etc - would it be ok to use your ringing bell thingy aswell as the other buttons? I realise that's personal to your own forum though.

<--------------------- Also, how do you get the avatars/members info to look like that?

I'm loving the forum header too - can you do one where the images are straight so I can see if I prefer that to the angled version? It looks really good!

Also, how did you get these columns to be so neat and tidy?



Hmmm...I tried uploading the new forum header but it came out all blurred....it's too wide so I tried resizing it.

LikeDislike

[Admin]

Admin

•  
•   

Admin

Posts : 102
Reputation : 8
Join date : 2016-10-12
Age : 52
Location : Brisbane

• Post n°2

Re: Forum design

 by Admin Sat Oct 15, 2016 6:09 pm

This is better than email!

I had a think about what was missing aside from what was discussed and it hit me...a logo!
So I designed one.

Right, I've changed the header. It's a LOT thinner than yours so that'll leave a bit more space for forums (plus hopefully people with smaller screens will see there's something under the header).

The bell icon: I'm happy for you to use it but I think the new one with your new logo (that I did without even asking you) suits better. When there's a new post, you SHOULD see the icon rattle to get your attention. Click on that to go to the last post you've seen. Viewed topic will show the same icon but with the colour drained out of it.

Thoughts?

The POST, REPLY, EDIT, DELETE buttons I'll have to edit to match the blue.

As for the avatars, when someone goes into their PROFILE and adds their profile pic, location, date of birth, email address, website, etc, they'll appear in the members box that you've pointed to. If they don't add the detail, it doesn't show (you'll see mine says Brisbane, yours says nothing). I need to do an icon for email to match the others.

As for the icons lining up, that's all in the CSS. The basic template that forumotion give you is pretty awful. It's taken me a LOT of work to get mine looking decent. Lucky for you, it's mostly a copy-and-paste job.

LikeDislike

[jkh]

jkh

jkh

Posts : 21
Reputation : 7
Join date : 2016-10-13

• Post n°3

Re: Forum design

 by jkh Sat Oct 15, 2016 6:17 pm

I tried uploading the ringing bell thingy but it just pushed the whole forum out of whack as it was too big. So I ended up changing it to the small green dot which brought it all back into alignment.

The Forum is called Complete Mystery of Madeleine McCann rather than Complete Madeleine McCann Mystery.

But I really do like that forum header!

And I love the blue.

How do you the avatars in that oblong box?

Also Sharonl has registered here - she's my co-Admin.

LikeDislike

[Admin]

Admin

•  
•   

Admin

Posts : 102
Reputation : 8
Join date : 2016-10-12
Age : 52
Location : Brisbane

• Post n°4

Re: Forum design

 by Admin Sat Oct 15, 2016 6:23 pm

The "mention" feature:

If you start start typing @ the system will pop up with suggestions for names. Keep typing and it'll narrow down those name options. Once I've mentioned you, you should see a notification near the TOP RIGHT of the page under "Your Notifications". That'll also tell you if you have a PM.

So... @jkh

LikeDislike

[Admin]

Admin

•  
•   

Admin

Posts : 102
Reputation : 8
Join date : 2016-10-12
Age : 52
Location : Brisbane

• Post n°5

Re: Forum design

 by Admin Sat Oct 15, 2016 6:24 pm

Ah! I'll change the name. Sorry.

LikeDislike

[Admin]

Admin

•  
•   

Admin

Posts : 102
Reputation : 8
Join date : 2016-10-12
Age : 52
Location : Brisbane

• Post n°6

Re: Forum design

 by Admin Sat Oct 15, 2016 6:26 pm

The box is CSS-driven. See below.

Code:

/*Profile Box*/
.postprofile {
  text-align:center;
  background:#;
  border:1px solid #CCC;
  border-radius:3px;
  margin: 10px 0px 0px;
  padding: 10px 3px 3px;
  box-shadow: 01px 1px 5px rgba(0, 0, 0, 0.1), 0px 1px 1px rgba(0, 0, 0, 0);
  min-height: 80px;
position: relative;
max-width: 277px;
word-wrap: break-word;
}
 
.postprofile dd, .postprofile dt { margin-left:0 }
 
blockquote blockquote {
  background-color: #ECECEC;
  font-size: 1.0em;
  margin: 0.5em 1px 0pt 15px;}
 
.postprofile dd, .postprofile dt { margin-left:0 }
 
/* offline image */
.post .postprofile {
  background-image:url('http://i86.servimg.com/u/f86/18/45/72/48/tbar_n33.png');
  background-repeat:no-repeat;
  background-position:center 0px;
 
 
}
 
/* online image */
.post.online .postprofile {
  background-image:url('http://i86.servimg.com/u/f86/18/45/72/48/tbar_n32.png');
  background-repeat:no-repeat;
  background-position:center 0px;
}
 
.postprofile .label {
    float: left;
    margin-left: -3px;
    margin-right: 3px;
 
    width: 50%;
    text-align: right;
}
.postprofile .label, .postprofile .label span {
    font-weight: 700;
    color: #39C !important;
}
* {
    margin: 0px;
    padding: 00px;}
 
.postprofile dd {
    color: #333;
    text-align: left;
}
.postprofile dd, .postprofile dt {
    line-height: 1.2em;}
 
.postprofile dd:last-child, .postprofile dt + dd {
    text-align: center;}
 
.postprofile { padding-top:70px }
 
#content-container div#right {
    float: right;
    overflow: hidden;
    width: 220px;
    padding-top: 46px;
}

LikeDislike

[jkh]

jkh

jkh

Posts : 21
Reputation : 7
Join date : 2016-10-13

• Post n°7

Re: Forum design

 by jkh Sat Oct 15, 2016 6:26 pm

The "mention" feature:

If you start start typing @ the system will pop up with suggestions for names. Keep typing and it'll narrow down those name options. Once I've mentioned you, you should see a notification near the TOP RIGHT of the page under "Your Notifications". That'll also tell you if you have a PM.

So... @jkh

Ah, very good, this is better than on my forum.

LikeDislike

[jkh]

jkh

jkh

Posts : 21
Reputation : 7
Join date : 2016-10-13

• Post n°8

Re: Forum design

 by jkh Sat Oct 15, 2016 6:28 pm

The box is CSS-driven. See below.

Code:

/*Profile Box*/
.postprofile {
  text-align:center;
  background:#;
  border:1px solid #CCC;
  border-radius:3px;
  margin: 10px 0px 0px;
  padding: 10px 3px 3px;
  box-shadow: 01px 1px 5px rgba(0, 0, 0, 0.1), 0px 1px 1px rgba(0, 0, 0, 0);
  min-height: 80px;
position: relative;
max-width: 277px;
word-wrap: break-word;
}
 
.postprofile dd, .postprofile dt { margin-left:0 }
 
blockquote blockquote {
   background-color: #ECECEC;
   font-size: 1.0em;
   margin: 0.5em 1px 0pt 15px;}
 
.postprofile dd, .postprofile dt { margin-left:0 }
 
/* offline image */
.post .postprofile {
  background-image:url('http://i86.servimg.com/u/f86/18/45/72/48/tbar_n33.png');
  background-repeat:no-repeat;
  background-position:center 0px;
 
 
}
 
/* online image */
.post.online .postprofile {
  background-image:url('http://i86.servimg.com/u/f86/18/45/72/48/tbar_n32.png');
  background-repeat:no-repeat;
  background-position:center 0px;
}
 
.postprofile .label {
    float: left;
    margin-left: -3px;
    margin-right: 3px;
 
    width: 50%;
    text-align: right;
}
.postprofile .label, .postprofile .label span {
    font-weight: 700;
    color: #39C !important;
}
* {
    margin: 0px;
    padding: 00px;}
 
.postprofile dd {
    color: #333;
    text-align: left;
}
.postprofile dd, .postprofile dt {
    line-height: 1.2em;}
 
.postprofile dd:last-child, .postprofile dt + dd {
    text-align: center;}
 
.postprofile { padding-top:70px }
 
#content-container div#right {
    float: right;
    overflow: hidden;
    width: 220px;
    padding-top: 46px;
}

So if I copied and pasted this CCS into my forum then all my forum avatars would be in a box like this?

LikeDislike

[Admin]

Admin

•  
•   

Admin

Posts : 102
Reputation : 8
Join date : 2016-10-12
Age : 52
Location : Brisbane

• Post n°9

Re: Forum design

 by Admin Sat Oct 15, 2016 6:49 pm

No. Well, yes but your profile boxes are in a different place on your forum and I don't know how wide you've set your columns to be.

You could give it a go when there's very few people on line. Copy the CSS is, save it, look at the page and if it breaks everything, delete the CSS. But I DO think it could knock the whole alignment of the page out so get ready for a quick edit job!

LikeDislike

[Admin]

Admin

•  
•   

Admin

Posts : 102
Reputation : 8
Join date : 2016-10-12
Age : 52
Location : Brisbane

• Post n°10

Re: Forum design

 by Admin Sat Oct 15, 2016 6:58 pm

Hello @Sharonl

LikeDislike

[Admin]

Admin

•  
•   

Admin

Posts : 102
Reputation : 8
Join date : 2016-10-12
Age : 52
Location : Brisbane

• Post n°11

Re: Forum design

 by Admin Sat Oct 15, 2016 7:22 pm

The LIKE system isn't working properly. Every time I hit the thumbs up, it refreshes the page. It shouldn't do that as it's Ajax based so should show that you've liked it and then add to the reputation when it refreshes.

Odd. I'll look into it.

LikeDislike

[Admin]

Admin

•  
•   

Admin

Posts : 102
Reputation : 8
Join date : 2016-10-12
Age : 52
Location : Brisbane

• Post n°12

Re: Forum design

 by Admin Sat Oct 15, 2016 9:43 pm

Hmmm...I tried uploading the new forum header but it came out all blurred....it's too wide so I tried resizing it.

Sorry Jill, I just noticed this.

The header size will depend on your overall forum width. Have a look under GENERAL > FORUM > CONFIGURATION. About 2/3rds the way down you'll see PAGES STRUCTURE. I think the default is 98% but I've set mine (and this one at 2400px).

I've found that seems to work well for a variety of screen sizes and gives you plenty of width for topics and side-bar widgets.

Also when you upload an image, the uploading app will default to scaling down the image. With pics you're using to upload to your topics, that's fine. But with forum images header, you need to create it to the width of your forum and then turn the resizing off.

LikeDislike

[jkh]

jkh

jkh

Posts : 21
Reputation : 7
Join date : 2016-10-13

• Post n°13

Re: Forum design

 by jkh Sat Oct 15, 2016 9:44 pm

Re: your new forum header...I don't know if you've noticed but on my forum the header always stays the same even if you adjust the width of the page (I remember doing something with the settings to get it to do that, although can't remember what it was now!). With the header on this forum it doesn't stay the same if you adjust the width of the page, so I'm wondering if I upload the new header into my forum will it be the same as my existing header because of the settings I've done to my own forum?

If you get me drift...?

And if it does do the same as my existing header that will mean the wording on your new header won't be readable. So what will happen when people view the forum on a mobile for instance?

Also, with the CSS code, can I post it at the end of the CSS page or does it have to go in a specific place?

LikeDislike

[Admin]

Admin

•  
•   

Admin

Posts : 102
Reputation : 8
Join date : 2016-10-12
Age : 52
Location : Brisbane

• Post n°14

Re: Forum design

 by Admin Sat Oct 15, 2016 10:06 pm

Also, I'd probably recommend AGAINST doing changes bit at a time.

I'd do this:


1. Check what style of forum you have. This is phpBB3 (you can check that in DISPLAY > SKINS > CHOOSE A THEME and then check under the VERSION tab. You can switch to any of these at any time.
2. Export your current site's skin. DISPLAY > SKIN > THEMES MANAGEMENT (it's always good to have a copy of this anyway but this will ensure that any changes that ruin the look can simply be undone by re-importing this backup - it will NOT affect any data you have, only the appearance).
3. Set your forum to phpBB3 (see point 1)
4. Export this skin (see point 2)
5. Only the FOUNDER (whoever created the site) can see and edit the base templates (DISPLAY > TEMPLATES). They might not be exported (you'll have to check). If not, copy these over.
6. See how it looks!!

Sounds nightmarish but it's only a few minutes work if you're quick.

If you do it this way, any CSS dependencies will all be copied over in bulk...you won't be trying to add a feature and then spend a week trying to work out why it doesn't look good or work properly.

---------

If you DO decide to change your forum and get this test version looking 100% how you want it, I'd advise your members of what you're going to do a few days in advance. Send them all a newsletter via the admin panel (I can help you design one if you like, it's easy), issue them all a PM and even create a sticky post.

That way, everyone will know what's about to happen.

(a) it'll create a bit of excitement.
(b) no one will come on to the site thinking they gone to the wrong place.
(c) you might find a lot of people who've not posted in weeks/months/years might stop by and have a look.

LikeDislike

[Admin]

Admin

•  
•   

Admin

Posts : 102
Reputation : 8
Join date : 2016-10-12
Age : 52
Location : Brisbane

• Post n°15

Re: Forum design

 by Admin Sat Oct 15, 2016 10:13 pm

Anothe suggestion that you'll probably hate - just my 2cents will make your forum look a lot sharper - is to go through every topic and rename it.

Example:

Richard D. Hall's films: 'Buried by Mainstream Media - The True Story of Madeleine McCann', 'The Phantoms' & 'When Madeleine Died?'

rename to ...

Richard D. Hall films.

Same things for the description. The massive topic titles and descriptions are throwing the uniformity of your site out. Keep 'me short and dynamic.

Again, don't hate me I'm just offering advice with my designer hat on.

LikeDislike

[jkh]

jkh

jkh

Posts : 21
Reputation : 7
Join date : 2016-10-13

• Post n°16

Re: Forum design

 by jkh Sat Oct 15, 2016 10:15 pm

I'm scared!!!!!!!!!!!!!

LikeDislike

[Admin]

Admin

•  
•   

Admin

Posts : 102
Reputation : 8
Join date : 2016-10-12
Age : 52
Location : Brisbane

• Post n°17

Re: Forum design

 by Admin Sat Oct 15, 2016 10:26 pm

Re: your new forum header...I don't know if you've noticed but on my forum the header always stays the same even if you adjust the width of the page (I remember doing something with the settings to get it to do that, although can't remember what it was now!). With the header on this forum it doesn't stay the same if you adjust the width of the page, so I'm wondering if I upload the new header into my forum will it be the same as my existing header because of the settings I've done to my own forum?

If you get me drift...?

And if it does do the same as my existing header that will mean the wording on your new header won't be readable. So what will happen when people view the forum on a mobile for instance?

Also, with the CSS code, can I post it at the end of the CSS page or does it have to go in a specific place?

CSS goes in DISPLAY > PICTURES & COLORS > COLOURS and then select the CSS Stylesheet tab. It'll probably be empty at the moment. If not, just add what you need to the end.

Again, I'd be tempted to do a job-lot conversion rather than doing it in bits.

The header should resize according or whatever you're viewing it on. It does for me.
It won't show on the mobile version (I'm wondering by your comment if you're aware there's a new mobile version that's just been released??). The link to it is down below the footer on the right corner (MOBILE VERSION).

It's not feature-rich like the full versions but for small screens it's great!

Last edited by Admin on Sat Oct 15, 2016 10:32 pm; edited 1 time in total

LikeDislike

[Admin]

Admin

•  
•   

Admin

Posts : 102
Reputation : 8
Join date : 2016-10-12
Age : 52
Location : Brisbane

• Post n°18

Re: Forum design

 by Admin Sat Oct 15, 2016 10:30 pm

I'm scared!!!!!!!!!!!!!

Hahahahahaha. Don't be. If you do go ahead, I'll talk you through every step. Honestly, it's easy.

After that, if you like, I can show you more about the admin panel so you don't get scared of it.
The basics are easy. The js, CSS and templates can be tricky and you really need to understand at least a little how code works but most of what I've done on here is just a C&P off my site.

I don't dabble much any more as it's got to the stage where I'm happy. But at the start, I was dreaming in code. Not good!!

LikeDislike

[jkh]

jkh

jkh

Posts : 21
Reputation : 7
Join date : 2016-10-13

• Post n°19

Re: Forum design

 by jkh Sat Oct 15, 2016 10:35 pm

I'm really scared about messing something up by transferring things in one go and not being able to change it back. I think I'd prefer to do things manually bit by bit - I'm just not techie enough to understand all this.

But I do take on board your suggestions about thread title/description etc. I'm off work on Monday so will start to make some appearance changes.

It's taken me years to get as far as I have with trying to understand the forum and I can see I've only just scratched the surface. It's fascinating though!

I think I'd like to change the colour of the forum to the lovely blue you've got here and I'd like to upload the new forum header.

Of course, when I change the colour etc then all the little images I've got on the individual topics will look most peculiar....I've never been really happy with them anyway as they're all different sizes.


I also like, on your own football forum, how you've got defined categories - not sure if it's too late now to do that to mine.

Maybe when I can see how the forum is transforming I might be brave to do something else.

LikeDislike

[Admin]

Admin

•  
•   

Admin

Posts : 102
Reputation : 8
Join date : 2016-10-12
Age : 52
Location : Brisbane

• Post n°20

Re: Forum design

 by Admin Sat Oct 15, 2016 10:39 pm

Slightly odd quirk I've seen on the mobile version...the QUOTE button is missing. Will get that sorted.
But I had a look on your site and you can't quote, edit or delete. ALL of the edit buttons are missing.!!!!!!

LikeDislike

[jkh]

jkh

jkh

Posts : 21
Reputation : 7
Join date : 2016-10-13

• Post n°21

Re: Forum design

 by jkh Sat Oct 15, 2016 10:41 pm

Slightly odd quirk I've seen on the mobile version...the QUOTE button is missing. Will get that sorted.
But I had a look on your site and you can't quote, edit or delete. ALL of the edit buttons are missing.!!!!!!

Really? I can see them.

Gotta go back to work now, see ya later.

LikeDislike

[Admin]

Admin

•  
•   

Admin

Posts : 102
Reputation : 8
Join date : 2016-10-12
Age : 52
Location : Brisbane

• Post n°22

Re: Forum design

 by Admin Sat Oct 15, 2016 10:47 pm

You're admin. You can maybe see everything.

I'm logged in and this us what I see on the mobile version...

LikeDislike

[Admin]

Admin

•  
•   

Admin

Posts : 102
Reputation : 8
Join date : 2016-10-12
Age : 52
Location : Brisbane

• Post n°23

Re: Forum design

 by Admin Sun Oct 16, 2016 12:32 am

If you're making changes, don't forget to export your current skin.

That's essentially a backup of how it looks now. Do of you mane some changes and everything gets bent out of shape and you're not sure how to undo things, you just re-import your saved skin.

And you can always export it again when you make a change that you're happy with (but I recommend using a different file name so you can roll back to any point).

And none of what we're doing affecta the content. If you want to change the structure later you can. That's easy to do once you've decided what topics go in what sections.

But you won't delete topics unless you into that part of the administration panel and actively delete the topics. Changes to the appearance, CSS, cool java script tricks etc, will not have any affect on the posts.

LikeDislike

[Admin]

Admin

•  
•   

Admin

Posts : 102
Reputation : 8
Join date : 2016-10-12
Age : 52
Location : Brisbane

• Post n°24

Re: Forum design

 by Admin Sun Oct 16, 2016 12:34 am

The footer is something only you will have access to. Even your admins won't be able to change this unless they have your password as it's working on the base template.

If you can tell me what text and links you want (name and URL) I'll design it so all you have to do is copy the code over.

LikeDislike

[Admin]

Admin

•  
•   

Admin

Posts : 102
Reputation : 8
Join date : 2016-10-12
Age : 52
Location : Brisbane

• Post n°25

Re: Forum design

 by Admin Sun Oct 16, 2016 12:44 am

I'm really scared about messing something up by transferring things in one go and not being able to change it back. I think I'd prefer to do things manually bit by bit - I'm just not techie enough to understand all this.

That's the reason I suggested saving everything here as a skin and then upload it to your site.

One click to save.
One click to transfer.

It'll save you hours and hours and massive headaches. If you want to see how things work later then do that.

But that's how I'd recommend you make changes. Do them in here first, get it as close to lefercet as you can then move it over.

Just make sure you've saved your current skin. You can go back to it at any time...even in 5 years! It won't affect any of your members posts.

LikeDislike

[Sponsored content]

Sponsored content

Sponsored content

• Post n°26

Re: Forum design

 by Sponsored content