e107help.org Q&A
0 like 0 dislike
Theme: Bootstrap 3

 

Question: I Notice in theme.php jumbotron-menu-1,2,3 - Went and added a 4th. Then in admin added a 4th can called it jumbotron-menu-4 - Does not show. Renamed to jumbotron-menu-3 and still no change - Delete the first jumbotron-menu-1 and changed the jumbotron-menu-3 (was 4) to 1 and can see it. How can I make it so all 4 (or even 5) show up on the site?
e107 version e107 version 2.0.x
closed
in Themes by (459 points) 17 37 50

3 Answers

0 like 0 dislike
Best answer
Do not get 'tricked' by theme php. Although it 'seems' like being menu area's > they are not > they are kind of styled shortcodes.

Look in menu manager and choose Jumbotron home, scroll down and see how the 3 menus are placed.

You will see what i mean...
by (3.4k points) 8 9 11
selected by
So in the theme.php - jumbotron_home template

 

    <div class="container">
      <!-- Example row of columns -->
      <div class="row">
      {SETSTYLE=col-md-4}
      {MENU=2}
      {MENU=3}
      {MENU=4}
      </div>

 

Added 5 to it and removed it from below - went into Menu Manager and 5 is no where to been seen. I want to add it so four of them are in a row instead of three.
Had to also make a new css style and change the width from 33.3333% to 25%
But now I am having an issue with the style sheets

 

Since  

.col-md-4 {
    width: 33.33333333%;
  }

Is used alot, I went and made   .col-md-411

End up getting this: http://life.defiantz.org/

 

Any ideas?
Now I got it
Hello,

Can you explane how you did it? Even by changing the style sheet, I can get four menus.

Thanks a lot.

Olivier
sadly I no longer have the theme files that had this.

Thanks for the reply!

I have found a solution for Boostrap 3 theme with col-md-3 which is already at 25%.

Then, I just had to modify the theme.php file as:

    if($style == 'col-md-4' || $style == 'col-md-6' || $style == 'col-md-8' || $style == 'col-md-3')
    {
        echo ' <div class="col-xs-12 '.$style.'">';
        
        if(!empty($caption))
        {
            echo '<h2>'.$caption.'</h2>';
        }

        echo '
          '.$text.'
        </div>';
        return;    
        
    }

Thanks again!

Olivier

0 like 0 dislike

I was wondering why you had to adjust the css styling (do not forget it is bootstrap where col md 4 sets the width.. (when not all 3 areas are occupied it keeps adjusting the width ( # untill 12..)

Just adding :

        <div class="row">
      {SETSTYLE=col-md-4}
      {MENU=20}
      {MENU=21}
      {MENU=22}
      </div>

  below the first piece would be sufficient (numbers used to differ from general)

result :

areas

edit : maybe elaborate.... the styled SC is for modern business (hard coded if you like)

by (3.4k points) 8 9 11
edited by
Thing is, jumbotron_home already have such a thing (modern businness does not)

 

What I wanted was to get 4 in one section as I got it now on the site http://life.defiantz.org
0 like 0 dislike

I'll share it in bootstrap style : partial as above (if it is nice or 'clean'? it works....

      {MENU=2}
      {MENU=3}
      {MENU=4}
      </div>

<div class="row ">
{SETSTYLE=col-md-12}
  <div class="col-xs-6 col-sm-3">{MENU=20}</div>
  <div class="col-xs-6 col-sm-3">{MENU=21}</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">{MENU=22}</div>
  <div class="col-xs-6 col-sm-3">{MENU=23}</div>
</div>

       <div class="row">
      {SETSTYLE=col-md-4}
      {MENU=5}
      {MENU=6}
      {MENU=7}
      </div>

by (3.4k points) 8 9 11
996 questions
1,389 answers
2,527 comments
2,512 users