Welcome to the support forum of forumotion thing

Go down

Solved Welcome to the support forum of forumotion thing

Post by Kirbs on September 7th 2015, 3:59 pm

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!


Last edited by Kirbs on September 8th 2015, 9:29 pm; edited 1 time in total
avatar
Kirbs
Forumember

Posts : 628
Reputation : 18
Language : English

Back to top Go down

Solved Re: Welcome to the support forum of forumotion thing

Post by Ange Tuteur on September 7th 2015, 4:12 pm

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"


Last edited by Ange Tuteur on September 8th 2015, 4:18 pm; edited 1 time in total
avatar
Ange Tuteur
Forumaster

Male Posts : 13201
Reputation : 2917
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Solved Re: Welcome to the support forum of forumotion thing

Post by Kirbs on September 7th 2015, 7:53 pm

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

Posts : 628
Reputation : 18
Language : English

Back to top Go down

Solved Re: Welcome to the support forum of forumotion thing

Post by Ange Tuteur on September 8th 2015, 4:18 pm

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;
}
avatar
Ange Tuteur
Forumaster

Male Posts : 13201
Reputation : 2917
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Solved Re: Welcome to the support forum of forumotion thing

Post by Kirbs on September 8th 2015, 6:42 pm

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?
avatar
Kirbs
Forumember

Posts : 628
Reputation : 18
Language : English

Back to top Go down

Solved Re: Welcome to the support forum of forumotion thing

Post by Ange Tuteur on September 8th 2015, 7:01 pm

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
avatar
Ange Tuteur
Forumaster

Male Posts : 13201
Reputation : 2917
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Solved Re: Welcome to the support forum of forumotion thing

Post by Kirbs on September 8th 2015, 7:11 pm

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

avatar
Kirbs
Forumember

Posts : 628
Reputation : 18
Language : English

Back to top Go down

Solved Re: Welcome to the support forum of forumotion thing

Post by Ange Tuteur on September 8th 2015, 7:26 pm

Add the color property to #faInfo and #faInfoNav a :
Code:
color:#000;
avatar
Ange Tuteur
Forumaster

Male Posts : 13201
Reputation : 2917
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Solved Re: Welcome to the support forum of forumotion thing

Post by Ace 1 on September 8th 2015, 8:08 pm

How do you center the table text?
avatar
Ace 1
Helper
Helper

Male Posts : 842
Reputation : 63
Language : English - French?
Location : Druid Hill Park

https://help.forumotion.com

Back to top Go down

Solved Re: Welcome to the support forum of forumotion thing

Post by Klemen on September 8th 2015, 8:51 pm

@Ace 1 wrote: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
avatar
Klemen
Forumember

Male Posts : 292
Reputation : 32
Language : English, German, Slovene

http://www.bannedbrotherhood.com

Back to top Go down

Solved Re: Welcome to the support forum of forumotion thing

Post by Kirbs on September 8th 2015, 9:29 pm

Thanks ange
avatar
Kirbs
Forumember

Posts : 628
Reputation : 18
Language : English

Back to top Go down

Solved Re: Welcome to the support forum of forumotion thing

Post by Ange Tuteur on September 8th 2015, 11:07 pm

You're welcome ^^

Topic archived

Have a nice day. Smile
avatar
Ange Tuteur
Forumaster

Male Posts : 13201
Reputation : 2917
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum