The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Welcome to the support forum of forumotion thing

4 posters

Go down

Solved Welcome to the support forum of forumotion thing

Post by Kirbs September 7th 2015, 4: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, 10:29 pm; edited 1 time in total
Kirbs
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 September 7th 2015, 5: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, 5:18 pm; edited 1 time in total
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Welcome to the support forum of forumotion thing

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

I added it to the homepage message and all i got is this? http://prntscr.com/8dpe49
Kirbs
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 September 8th 2015, 5: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;
}
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Welcome to the support forum of forumotion thing

Post by Kirbs September 8th 2015, 7:42 pm

Is there a way to make the box bigger than what it currently is? 
Welcome to the support forum of forumotion thing J5lIRSs
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?
Kirbs
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 September 8th 2015, 8: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
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Welcome to the support forum of forumotion thing

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

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

Welcome to the support forum of forumotion thing 3upVEFh
Kirbs
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 September 8th 2015, 8:26 pm

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

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Welcome to the support forum of forumotion thing

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

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

Male Posts : 843
Reputation : 64
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 September 8th 2015, 9: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
Klemen
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 September 8th 2015, 10:29 pm

Thanks ange
Kirbs
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 September 9th 2015, 12:07 am

You're welcome ^^

Topic archived

Have a nice day. Smile
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Back to top

- Similar topics

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