Users running a non-download version of Vanilla (pulled from github), on branch release/2019.016 or master from the last 2 weeks should upgrade to release/2019.017 or latest master for security reasons. Downloaded official open sources releases are not affected.
Please upgrade here. These earlier versions are no longer being updated and have security issues.

Bootstrap theme full width

This discussion is related to the Bootstrap addon.

I have been staring at the css for days but cant seem to figure out this easy task
can anyone help me make the forum full width ?
mmo4teen.com/vanilla

Comments

  • jackmaessenjackmaessen ✭✭✭
    edited January 2015

    in themes/bootstrap/design/style.css add this:

    section.container {
    width: 100%;
    }
    

    Is that what you want to achieve?

    hgtonight
  • @jackmaessen said:
    in themes/bootstrap/design/style.css add this:

    section.container {
    width: 100%;
    }
    

    Is that what you want to achieve?

    Sadly, it didn't work. thanks anyway

  • You'll also have to modify the default.master.tpl in the theme's "views" folder. What I did was make it so it's full width within discussions (hiding that sidebar), but split (like it is by default) for all of the other pages so you still see the sidebar. This is what I have in mine right under the

    <div class="row">
    

    line:

    {if $BodyID !='vanilla_discussion_index' && $BodyID !='vanilla_post_discussion'}
        <aside class="page-sidebar" role="complementary">
          {asset name="Panel"}
        </aside>
    {/if}
    
    {if $BodyID =='vanilla_discussion_index'}
        <main class="page-content" role="main" style="width: 100%;">
    {else}
        <main class="page-content" role="main">
    {/if}
    

    Lines 2, 3, 4, 8, and 10 were already there; I just added the Smarty logic. You may need to make some other changes (I forget what other ones I made, if any) but that should get you most of the way there.

  • ShmizzleShmizzle New
    edited January 2015

    @Shmizzle said:
    Lines 2, 3, 4, 8, and 10 were already there

    Scratch that, line 8 wasn't there, I added that one as well.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    You should not use a minifier... specially when editing. You have Consolidate plugin ... it may not be as bad as Minify but you should not run it when editing a theme....

  • @Shmizzle said:

    @vrijvlinder said:
    You should not use a minifier... specially when editing. You have Consolidate plugin ... it may not be as bad as Minify but you should not run it when editing a theme....

    Thanks a lot both of you. Anyway to keep the sidebar in discussion?

  • KasperKasper Scholar of the Bits Copenhagen Vanilla Staff

    Bootstrap has out-of-the-box support for fluid grids; simply replace all instances of container with container-fluid in default.master.tpl.

    Kasper Kronborg Isager (kasperisager) | Freelance Developer @Vanilla | Hit me up: Google Mail or Vanilla Mail | Find me on GitHub

    whu606hgtonightvrijvlinderR_J
  • @Kasper said:
    Bootstrap has out-of-the-box support for fluid grids; simply replace all instances of container with container-fluid in default.master.tpl.

    Thanks a lot for this. By the way, will the next update fix the issue with embed comment formatting ? can't wait for it, would looks superb.

  • It worked perfectly. Thanks a gain @Kasper

  • @Kasper said:
    Bootstrap has out-of-the-box support for fluid grids; simply replace all instances of container with container-fluid in default.master.tpl.

    I don't really think this should be in a new topic ( but if it does, let me know ).
    I manage to change the sidebar to a fix width like 300px or so and want the content to fit to any available space left.
    I've tried changing the content width percentage like 75% or auto but still not working, anyone ?

  • It's looking like this

    Any way tomove the content to the left, close to the panel like normal ?

  • What would be the css needed for this ? I tried float left but it switch their position.

  • hgtonighthgtonight ∞ · New Moderator

    Most grids use floats and margins to create a grid system.

    You probably need to adjust the margin on the content container to be fixed width.

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

  • I've learned a bit of css but still I can't understand

    @hgtonight said:
    Most grids use floats and margins to create a grid system.

    You probably need to adjust the margin on the content container to be fixed width.

    Can you be more specific at which code I need to play around with ?

  • hgtonighthgtonight ∞ · New Moderator

    @Gogito said:
    I've learned a bit of css but still I can't understand
    Can you be more specific at which code I need to play around with ?

    That was more general advice. Bootstrap is a pretty popular CSS framework. There is a good tag over on stackoverflow where you can get advice on what to do: http://stackoverflow.com/questions/tagged/twitter-bootstrap-3

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

  • @hgtonight said:
    That was more general advice. Bootstrap is a pretty popular CSS framework. There is a good tag over on stackoverflow where you can get advice on what to do: http://stackoverflow.com/questions/tagged/twitter-bootstrap-3

    Thanks a lot, I'll check em out

  • @Kasper Can you provide me some tips and a starting point ? Would really appreciate it. :)

  • I just can't seem to make it work, can someone kindly figure out the code ? Really appreciated. :)

Sign In or Register to comment.