Topic: Want to increase Font Size and show Full Width without Sidebars, in Hueman Theme

Want to increase Font Size and show Full Width without Sidebars, in Hueman Theme

fpradmin
Participant

@fpradmin

8 years, 5 months ago

I’ve been lurking for a week now, and have tried multiple things, to force the Forums to show in Full Width, within the Hueman theme page template.

I have created a bbpress.php page, and this allowed me to get rid of the sidebars, and shows the First Page of the Forums at full width(the way I want it), but when you click one of the Topics, it goes back to the default page template, and the space where the sidebars were, still exists, so the Forums are squished between two blank sidebars. How can I make the Forums/Topics pages spread across the full width of the page? I don’t want to see the sidebars while using the Forums.

Also, I would like to increase the Font size in the Forums to make it more legible to Readers.

I realize all of this is harder to do within the Hueman Theme because the Forums are injected into the default site template, with exception of the First Page(I created), and it may take some css to make it work. I’ve tried a few snippets of css I found in other posts, to no avail. I need some css help specifically with this Hueman theme. I’m not a developer, nor do I really understand child themes, and I’m currently not using any. I would prefer to edit custom css only, rather than my style.css, to avoid breaking things.

Thanks for any help you can offer. FrustratedPaulRevere.com (Link to Forums is at the Top of the Page)

Viewing 9 replies - 1 through 9 (of 9 total)

Robin W
Moderator

@robin-w

8 years, 5 months ago

ok, how did you fix the first page?

fpradmin
Participant

@fpradmin

8 years, 5 months ago

I didn’t fix it, it’s just the page I created(using the short code), that I thought would hold the Forums. But apparently it just holds the first page, then once you click something it redirects to the injected instance of the Forums inside of the default Page, with the standard sidebar formatting. This is indicative of the way Hueman theme allows the bbpress forums to work. It works within the Global framework only, and won’t let me keep it on a Page I create. At least that’s the way it appears to be working, and I have seen other posts with the exact same issue, but it seemed everybody eventually had a different way to resolve it. I can’t seem to get anything to work.

Robin W
Moderator

@robin-w

8 years, 5 months ago

ok, thanks for that.

I did a quick google, and yes there are lots of threads for this, but none seems to have a solution that is simple to understand, and sorry but I don’t have the time to work through them to get you to a solution.

I would suggest you post a thread to their support forum asking for a simple solution.
Robkk
Moderator

@robkk

8 years, 5 months ago
This is the bbpress.php file that you would need and its required code.

https://gist.github.com/robkk/a89e6cff104f70556f52c6df3f6b69b0

This is the custom CSS you will need.
```
.bbpress .main-inner,
.bbpress .main {
  background: none !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}
```
This will not work for pages with bbPress shortcodes though.

But you can work around that since most shortcodes are supposed to be placed in pages, you can create another template just for full width layouts in your theme. You can use this whenever you create a new page and select the template to use for your page.

To create a full-width template, you can literally just copy the bbpress.php file I created for you, rename it to full-width.php, put it in your child theme, now you need to edit the file and place
```
<?php
/*
Template Name: Full-Width
*/
?>
```
right above

<?php get_header(); ?>

You will need more custom css for any page using this template in your theme and it should be
```
.page-template-full-width .main-inner,
.page-template-full-width .main  {
  background: none !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}
```
If you plan to use both, just combine the two custom CSS statements, and now you should be good to go.
fpradmin
Participant

@fpradmin

8 years, 5 months ago

Well, I definitely appreciate the help, but most likely I’m doing something wrong or not placing the code in the right location. I replaced my bbpress.php with yours(although there wasn’t a lot of difference). Then I tried placing the .css code in my custom css file, at the top, then in the middle, then at the bottom.. none of which had any effect. I then tried to edit my styles.css, which is actually my Main.css(because of the way the Hueman Theme moves and hides it for minification). I put the css code there, at the bottom, and it still had no effect, so eventually I took it back out and returned things to the way I had them. If it shouldn’t be just placed at the bottom, where should it go? Again, I’m not a developer so I’m a bit nervous playing around with the code too much.

Any idea how to increase the Font Size? If I could increase the Font size, I might even consider leaving the sidebars in place, just for the sake of leaving things well enough alone, before I break something.

Robkk
Moderator

@robkk

8 years, 5 months ago

These are all the files and code I had in my custom child theme I created from Hueman. I also added some font-size CSS styles too.

https://gist.github.com/robkk/8b323aa0994e87a476054a4f115d1141
fpradmin
Participant

@fpradmin

8 years, 5 months ago
Thank you both for the help. I installed the “Simple Custom CSS” Plugin and fixed both issues by adding the following code there, after removing the code to “get sidebars” in bbpress.php
```
/* Change Post Font Color to Black */
.post-inner .entry{ color: #000; }

/* Increase Forums to Full-Width of Page - after removing get sidebar code from bbpressphp */
.bbpress .main-inner,
.bbpress .main,
.page-template-full-width .main-inner,
.page-template-full-width .main  {
  background: none !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

/* Increase Font Size on various items in bbPress */
#bbpress-forums,
#bbpress-forums ul.bbp-lead-topic,
#bbpress-forums ul.bbp-topics,
#bbpress-forums ul.bbp-forums,
#bbpress-forums ul.bbp-replies,
#bbpress-forums ul.bbp-search-results,
#bbpress-forums .bbp-forum-info .bbp-forum-content,
#bbpress-forums p.bbp-topic-meta,
div.bbp-breadcrumb,
div.bbp-topic-tags,
span.bbp-admin-links a,
#bbpress-forums div.bbp-forum-author .bbp-author-role,
#bbpress-forums div.bbp-topic-author .bbp-author-role,
#bbpress-forums div.bbp-reply-author .bbp-author-role,
span.bbp-author-ip,
div.bbp-template-notice p,
#bbpress-forums #bbp-your-profile fieldset span.description  {
	font-size: 16px !important;
}

#bbpress-forums .bbp-forums-list a {
  font-size: 18px;
}

li.bbp-forum-info a.bbp-forum-title,
li.bbp-topic-title a.bbp-topic-permalink,
#bbpress-forums div.bbp-topic-content p,
#bbpress-forums div.bbp-topic-content p,
#bbpress-forums div.bbp-reply-content p {
  font-size: 20px;
}
```
hanifascraps
Participant

@hanifascraps

8 years ago

I just want to thank @fpradmin because parte of his code, just help me a lot.
I has able to change the size font on my bbpress forum.

Kind Regards,

ddlange
Participant

@ddlange

7 years, 11 months ago

I’d like to add my thanks to @fpradmin also. The code increases the font size of all parts of the forum page. Thanks!