The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Welcome to the support forum of forumotion thing

View previous topic View next topic 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 http://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

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

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

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

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;
}

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

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?

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

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

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


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;

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

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?

Ace 1
Helper
Helper

Male Posts : 767
Reputation : 51
Language : English - French?
Location : Druid Hill Park

http://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

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

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

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


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