YAFLogo

brewhaus
  • brewhaus
  • 68.6% (Friendly)
  • YAF Lover Topic Starter
10 years ago
I have been trying to make our new YAF forum more 'responsive', and also have it match the design of our primary website (www.brewhaus.com) more. The first issue that I am having is getting the forum to center on the screen. The forum is at dev.brewhausforum.com. I have followed the instructions found online, and by support from YAF. However, the forum has remained left-justified. Can anyone help me with this issue?

The second thing that I would like to do is to get the wooden background in the extra space to the sides of the body, but it doesn't seem like the forum body is in a frame. Can anyone point me in the right direction on this?

Sponsor
Zero2Cool
  • Zero2Cool
  • 100% (Exalted)
  • YAF Leader YAF Version: YAF 3.1.16
10 years ago

I have been trying to make our new YAF forum more 'responsive', and also have it match the design of our primary website (www.brewhaus.com) more. The first issue that I am having is getting the forum to center on the screen. The forum is at dev.brewhausforum.com. I have followed the instructions found online, and by support from YAF. However, the forum has remained left-justified. Can anyone help me with this issue?

The second thing that I would like to do is to get the wooden background in the extra space to the sides of the body, but it doesn't seem like the forum body is in a frame. Can anyone point me in the right direction on this?

Originally Posted by: brewhaus 

The v3.0 of YAF will be using Bootstrap and thus will be responsive. Woohoo! In the meantime, try creating an CSS element to center the contents and wrap your YAF forum inside it.

I've used this with success.

.center {
    float: none;
    margin: 0 auto;
    text-align: center;
}[/code] 


And then in the markup 
[code=markup]<div class="center">
stuff here to be placed in center of window
</div>
brewhaus
  • brewhaus
  • 68.6% (Friendly)
  • YAF Lover Topic Starter
10 years ago
Do you have a time frame for YAF 3.0? I just wonder if it is worth the time to mess with the CSS if we will be able to upgrade in the very near future.
Zero2Cool
  • Zero2Cool
  • 100% (Exalted)
  • YAF Leader YAF Version: YAF 3.1.16
10 years ago

Do you have a time frame for YAF 3.0? I just wonder if it is worth the time to mess with the CSS if we will be able to upgrade in the very near future.

Originally Posted by: brewhaus 

Below is a link to the milestones with tentative dates.

https://github.com/YAFNET/YAFNET/milestones 

I redesigned my site over last summer knowing Bootstrap was probably at least a year out.

brewhaus
  • brewhaus
  • 68.6% (Friendly)
  • YAF Lover Topic Starter
10 years ago
Given that it is only estimated to be two months out, I don't think that it is worth a ton of extra work to mess with the layout of the existing forum- at least not for me. There is enough to handle migrating from a completely different system, and the only difference would be centering the body instead of it being left justified. Minor. 🙂
Zero2Cool
  • Zero2Cool
  • 100% (Exalted)
  • YAF Leader YAF Version: YAF 3.1.16
10 years ago

Given that it is only estimated to be two months out, I don't think that it is worth a ton of extra work to mess with the layout of the existing forum- at least not for me. There is enough to handle migrating from a completely different system, and the only difference would be centering the body instead of it being left justified. Minor. :-)

Originally Posted by: brewhaus 

The date is late Feb, but I'm thinking more like March close to April. My site is a football fan site, so I'm just hoping it is ready by June so I can theme it up and release it just before Training Camp starts in late July. 🙂

If you're using bootstrap for responsive design, centering the forums is a snap. Or you can use the method I posted a bit earlier as that should do the trick as well.

brewhaus
  • brewhaus
  • 68.6% (Friendly)
  • YAF Lover Topic Starter
10 years ago
Updating the theme.css file is pretty simple. My question is regarding the second part of the code- which file(s) need to be changed? We are trying to center the entire body, which I assume is made up of several parts (header, topcs, etc.), or am I off base?
Zero2Cool
  • Zero2Cool
  • 100% (Exalted)
  • YAF Leader YAF Version: YAF 3.1.16
10 years ago

Updating the theme.css file is pretty simple. My question is regarding the second part of the code- which file(s) need to be changed? We are trying to center the entire body, which I assume is made up of several parts (header, topcs, etc.), or am I off base?

Originally Posted by: brewhaus 

If you are using YAF alone, then I think it would be the /default page. You just have to wrap the div=center markup around the (could be off but hope you get the idea) tags.

brewhaus
  • brewhaus
  • 68.6% (Friendly)
  • YAF Lover Topic Starter
10 years ago
Yes, YAF is a standalone application. I tried the code, and it centered the text, but the main body of the forum is still left-justified. I would like the text to remain left-justified, but center the forum on the screen. Again, this is not nearly the issue that migrating our forum is overall, and is something that I can play with as time goes on.
Zero2Cool
  • Zero2Cool
  • 100% (Exalted)
  • YAF Leader YAF Version: YAF 3.1.16
10 years ago

Yes, YAF is a standalone application. I tried the code, and it centered the text, but the main body of the forum is still left-justified. I would like the text to remain left-justified, but center the forum on the screen. Again, this is not nearly the issue that migrating our forum is overall, and is something that I can play with as time goes on.

Originally Posted by: brewhaus 

Looked at your site and seen that you added "style" to your body. Do this and it'll center it for you.

<body style="margin: 0 auto">

brewhaus
  • brewhaus
  • 68.6% (Friendly)
  • YAF Lover Topic Starter
10 years ago
That worked! Thank you very much. Is there a simple way to add the same background as we have on our regular site (Brewhaus.com), while keeping the main panel background white? When I tried adding the background image before it filled in all blank areas of the body, as well. It would be nice, but not a major concern, to keep a similar feel between the two sites.
Zero2Cool
  • Zero2Cool
  • 100% (Exalted)
  • YAF Leader YAF Version: YAF 3.1.16
10 years ago

That worked! Thank you very much. Is there a simple way to add the same background as we have on our regular site (Brewhaus.com), while keeping the main panel background white? When I tried adding the background image before it filled in all blank areas of the body, as well. It would be nice, but not a major concern, to keep a similar feel between the two sites.

Originally Posted by: brewhaus 

Yep, just replicate what you're doing on the Site.css of your main site within the body tags.

body {
background-image: url(/assets/woodenbackground.jpg);
font-size: 11px;
font-family: verdana, helvetica, sans-serif;
margin: 0;
padding: 0;
}
brewhaus
  • brewhaus
  • 68.6% (Friendly)
  • YAF Lover Topic Starter
10 years ago
I had tried that before, but gave it another shot, and here is what I get:

I assume that it is because on our primary site the information is housed within a panel, which is displayed on top of the background. With YAF it does not seem like the content is held within a panel in this manner- at least I have not been able to see that it is. My thought was to make the background color for that panel white so that the background would not show through, but, obviously, I have not been successful.

Zero2Cool
  • Zero2Cool
  • 100% (Exalted)
  • YAF Leader YAF Version: YAF 3.1.16
10 years ago

I had tried that before, but gave it another shot, and here is what I get:

I assume that it is because on our primary site the information is housed within a panel, which is displayed on top of the background. With YAF it does not seem like the content is held within a panel in this manner- at least I have not been able to see that it is. My thought was to make the background color for that panel white so that the background would not show through, but, obviously, I have not been successful.

Originally Posted by: brewhaus 

in your theme.css add the background-color: element to blend it in with the rest of the forum.

brewhaus
  • brewhaus
  • 68.6% (Friendly)
  • YAF Lover Topic Starter
10 years ago
Adding the element in theme.css is not a problem. My problem is where to place the code that calls the element to have it cover only the panel in the center. Everything that I try shows through or covers the background image.

Not to worry- I'll wait until the new version before messing with this, as I am sure that the work would need to be done again at that point. 🙂