Welcome to the support forum of forumotion thing

[Kirbs]

Hi, I was wondering if any staff member or a member could help me out and give me the same exact code of this  https://imgur.com/9EdmPaS.png if possible


Thanks in advance!

[Ange Tuteur]

It's the homepage message, but with an additional box of helpful information ordered into tabs. I can't give you an exact duplicate, but I can provide you with the base logic for the tabs.

HTML & JS :

Code:

<div id="faInfoNav"><a id="_faInfoAnn" class="infoActif" href="#">Announcements</a><a id="_faInfoSearch" href="#">Perform a Search</a><a id="_faInfoExplain" href="#">Explain Your Problem</a><a id="_faInfoSuggestion" href="#">Propose a Suggestion</a><a style="border:none" id="_faInfoStaff" href="#">Forumotion Staff</a></div>
<div id="faInfo">
  <div id="faInfoAnn" class="infoBlock">
    Box 1
  </div>

  <div id="faInfoSearch" class="infoBlock" style="display:none;">
    Box 2
  </div>
 
  <div id="faInfoExplain" class="infoBlock" style="display:none;">
    Box 3
  </div>
 
  <div id="faInfoSuggestion" class="infoBlock" style="display:none;">
    Box 4
  </div>
 
  <div id="faInfoStaff" class="infoBlock" style="display:none;">
    Box 5
  </div>
</div>

<script type="text/javascript">// <![CDATA[
(function(J) {
  var main = document.getElementById('main-content'), // main container
     
      homepage = J('.introduction', main)[0], // homepage message
     
      // info box
      infoLinks = document.getElementById('faInfoNav').getElementsByTagName('A');

 
  // apply general logic to info box tabs
  for (var i = 0, j = infoLinks.length; i < j; i++) {
    infoLinks[i].onclick = function() {
      var a = document.getElementById('faInfoNav').getElementsByTagName('A'), b = document.getElementById('faInfo').getElementsByTagName('DIV'), i, j;
     
      for (i = 0, j = b.length; i < j; i++) if (/infoBlock/.test(b[i].className)) b[i].style.display = 'none';
      document.getElementById(this.id.slice(1)).style.display = 'block';
     
      for (i = 0, j = a.length; i < j; i++) if (/infoActif/.test(a[i].className)) a[i].className = '';
      this.className = 'infoActif';
     
      return false;
    }
  }
 
  // par ange tuteur
})(jQuery);
//]]></script>

It goes into the homepage message by the way, or an HTML page if you want.

You'll have to add your own styles + content to the tabs.

To make a custom tab you need to put a new anchor in the nav. The anchor should have the id like this : id="_newTab" make sure to put an underscore in front of the name.

Then create a new div element in the content container with the same id, but without the underscore : id="newTab"

[Kirbs]

I added it to the homepage message and all i got is this? http://prntscr.com/8dpe49

[Ange Tuteur]

You need to define your own styles. For example, add this to your stylesheet :

Code:

#faInfoNav {
  background:#EEE;
  border:1px solid #CCC;
}

#faInfoNav a {
  border-right:1px solid #CCC;
  display:inline-block;
  padding:6px 12px;
}

#faInfo {
  background:#EEE;
  border:1px solid #CCC;
  border-top:none;
  padding:6px;
}

[Kirbs]

Is there a way to make the box bigger than what it currently is? 

also a way to change the text font in the tabs that says "Box 1", etc into black?
EDIT: and a way to change the whole box color from white to something else?

[Ange Tuteur]

For the color, simply change the hexadecimal color values to whatever you want. To set a minimum height for the box you can use the min-height property. Add the following to the #faInfo rule :

Code:

min-height:200px;

If you need any help with CSS, this site can explain the basics : http://www.w3schools.com/css/

Plus a list of the CSS properties you can use : http://www.w3schools.com/cssref/default.asp

[Kirbs]

I changed the box color but what about the font color? i want it in black

[Ange Tuteur]

Add the color property to #faInfo and #faInfoNav a :

Code:

color:#000;

[Ace 1]

How do you center the table text?

[Klemen]

How do you center the table text?

Vertically or horizontally?

Use the following css codes

Horizontal align:

Code:

text-align: center

Vertical align:

Code:

vertical-align: middle;

PS: you should probably open your own topic for that

[Kirbs]

Thanks ange

[Ange Tuteur]

You're welcome ^^

Topic archived

Have a nice day.