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.

Category style.

View previous topic View next topic Go down

Solved Category style.

Post by Zuke on November 8th 2014, 7:06 pm

Hi there! I was wonderting how to get my category's looking the same style as this.

Here is my friend's category's style what it looks like and what I want mine to look like. http://prntscr.com/54bn69


Please help, if you know know how to, make sure the category style looks exactly like that!


Thanks! Very Happy

-Luke

Zuke
Forumember

Male Posts : 379
Reputation : 20
Language : English
Location : United Kingdom

http://ocean.forums.fm

Back to top Go down

Solved Re: Category style.

Post by SLGray on November 8th 2014, 7:09 pm

Is your friend's forum hosted by Forumotion?


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36697
Reputation : 2445
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: Category style.

Post by Zuke on November 8th 2014, 7:11 pm

No, he has coded all of his himself but I want the same styled categories as him, it might be easy to add because it might be CSS. Not sure...

Zuke
Forumember

Male Posts : 379
Reputation : 20
Language : English
Location : United Kingdom

http://ocean.forums.fm

Back to top Go down

Solved Re: Category style.

Post by SLGray on November 8th 2014, 7:12 pm

Well, have you ask him for the codes?


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36697
Reputation : 2445
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: Category style.

Post by Zuke on November 8th 2014, 7:15 pm

Nope. I can't seem to find him because he is my friend online, not ion real life, can you try find them though, here is his forum link.

forums.damenspike.com

Zuke
Forumember

Male Posts : 379
Reputation : 20
Language : English
Location : United Kingdom

http://ocean.forums.fm

Back to top Go down

Solved Re: Category style.

Post by Ramdaman on November 8th 2014, 7:27 pm

I think you'll need to have a span class for each category and then style them with CSS. I can try it if you'd like on your forum.

Ramdaman
Active Poster

Male Posts : 1614
Reputation : 97
Language : English, Albanian, Macedonian, Russian | HTML, CSS
Location : New York City

http://ndihme.forumotion.com/forum

Back to top Go down

Solved Re: Category style.

Post by Zuke on November 8th 2014, 7:43 pm

Yeah, I checked and he told me a hint, he said span class, so please do try make it look like the. Thanks! Smile

Zuke
Forumember

Male Posts : 379
Reputation : 20
Language : English
Location : United Kingdom

http://ocean.forums.fm

Back to top Go down

Solved Re: Category style.

Post by Ramdaman on November 8th 2014, 7:45 pm

EDIT: This needs to be done somehow with the templates. Each category has the class of .main-head. Therefor, it will change all categories. I tried placing a span name at the category (labeled #cat-general), but that only changed the background of the "General" category text, and not the whole category box.

Ramdaman
Active Poster

Male Posts : 1614
Reputation : 97
Language : English, Albanian, Macedonian, Russian | HTML, CSS
Location : New York City

http://ndihme.forumotion.com/forum

Back to top Go down

Solved Re: Category style.

Post by Zuke on November 8th 2014, 7:58 pm

Announcement row color: #CCCCCC

DSGHQ row color: #FF33FF

The Lounge row color: #0099FF

Cool Stuff row color: #FFCC33

Help & Support row color: #33FF33

Bugs row color: #FF3333

Reports row color:#E01F1F

Suggestions row color: #2AD4AC

Ban Appeals row color: #85603C

Forum Games row color #D14B9E

Shows row color: #4BD14B

Applications row color: #E8CF61

News row color: #26BF2B

Wisdom row color: #D1A762


Thanks! Smile

Zuke
Forumember

Male Posts : 379
Reputation : 20
Language : English
Location : United Kingdom

http://ocean.forums.fm

Back to top Go down

Solved Re: Category style.

Post by Ramdaman on November 8th 2014, 7:59 pm

I edited my above post.

Ramdaman
Active Poster

Male Posts : 1614
Reputation : 97
Language : English, Albanian, Macedonian, Russian | HTML, CSS
Location : New York City

http://ndihme.forumotion.com/forum

Back to top Go down

Solved Re: Category style.

Post by Zuke on November 8th 2014, 8:01 pm

Also can you make the row color TEXT all #000000


Also can you still try do it, I shall probably delete them categories like General etc.

Then just leave the other things.

Zuke
Forumember

Male Posts : 379
Reputation : 20
Language : English
Location : United Kingdom

http://ocean.forums.fm

Back to top Go down

Solved Re: Category style.

Post by Ramdaman on November 8th 2014, 8:16 pm

Either way, forumotion has added div classes and ID's for categories by default. I cannot get those, especially since I'm not the forum founder. I've tried searching up if I could find a way to edit the DIV's by name but found nothing.

Ramdaman
Active Poster

Male Posts : 1614
Reputation : 97
Language : English, Albanian, Macedonian, Russian | HTML, CSS
Location : New York City

http://ndihme.forumotion.com/forum

Back to top Go down

Solved Re: Category style.

Post by Zuke on November 8th 2014, 8:20 pm

Will it work if I let you login to my account and you do it?

Zuke
Forumember

Male Posts : 379
Reputation : 20
Language : English
Location : United Kingdom

http://ocean.forums.fm

Back to top Go down

Solved Re: Category style.

Post by Ramdaman on November 8th 2014, 8:41 pm

No I don't think so. I've tried it on my test forum but I believe only the technicians have access to edit those things.

Maybe Ange Tuteur will be able to find a way though.

Ramdaman
Active Poster

Male Posts : 1614
Reputation : 97
Language : English, Albanian, Macedonian, Russian | HTML, CSS
Location : New York City

http://ndihme.forumotion.com/forum

Back to top Go down

Solved Re: Category style.

Post by Zuke on November 8th 2014, 8:43 pm

Oh, and I hope so, may you let him know about this post and my forum so he can maybe one day add it? Thanks. Smile

Zuke
Forumember

Male Posts : 379
Reputation : 20
Language : English
Location : United Kingdom

http://ocean.forums.fm

Back to top Go down

Solved Re: Category style.

Post by Ramdaman on November 8th 2014, 8:56 pm

He'll check it, I must not pester anyone as all staff check every topic anyways.

Ramdaman
Active Poster

Male Posts : 1614
Reputation : 97
Language : English, Albanian, Macedonian, Russian | HTML, CSS
Location : New York City

http://ndihme.forumotion.com/forum

Back to top Go down

Solved Re: Category style.

Post by Ange Tuteur on November 8th 2014, 11:13 pm

Hello Luke Spike,

This is the closest I can give you :
Administration Panel > Display > Templates > General > index_box

Replace you current template by the one below :
Code:
<style type="text/css">
.forum-inlock {
 display:inline-block;
 margin:3px;
 width:30%;
 background:#EEE;
 border:1px solid #CCC;
 border-radius:3px;
}
 
.forum-inlock .lastpost { padding:3px; }
.author-last br { display:none }
.author-last a { text-decoration:none }
.author-last > strong:before {
 content:", by ";
 font-weight:normal;
}
 
.forum-inlock .forum-head a {
 color:#000;
 font-weight:bold;
 text-decoration:none;
}
.forum-inlock .forum-head {
 background:#DDD;
 padding:3px;
}
</style>

<div class="pun-crumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
 <p class="crumbs"><a href="{U_INDEX}" itemprop="url"><span itemprop="title">{L_INDEX}</span></a><strong>{NAV_CAT_DESC}</strong></p>
</div>

<div class="forum-row">
<!-- BEGIN catrow -->
 <!-- BEGIN tablehead -->
 <div class="forum-inlock">
 <!-- END tablehead -->

 <!-- BEGIN forumrow -->
  <div class="forum-head">
  <a href="{catrow.forumrow.U_VIEWFORUM}">
  {catrow.forumrow.FORUM_NAME}
  </a>
  </div>

 <div class="lastpost">
  <!-- BEGIN avatar -->
  <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
  <!-- END avatar -->

 <span>
 <!-- BEGIN switch_topic_title -->
 <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">
  {catrow.forumrow.LATEST_TOPIC_NAME}
  </a><br/>
  <!-- END switch_topic_title -->
 <span class="author-last">{catrow.forumrow.USER_LAST_POST}</span>
 </span>
  </div>
 <!-- END forumrow -->

 <!-- BEGIN tablefoot -->
 </div>
 <!-- END tablefoot -->
<!-- END catrow -->
</div>

<!-- BEGIN switch_on_index -->
<div class="main-box clearfix">
 <ul>
 <li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a></li>
 <li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a></li>
 <li><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
 </ul>
 <!-- BEGIN switch_delete_cookies -->
 <p class="right">
 <a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
 </p>
 <!-- END switch_delete_cookies -->
</div>
<!-- END switch_on_index -->

Save and publish Add

All style for the categories is at the top of the template, but it can be placed in CSS if you want.

This is the result :
It may vary on forum width, or screen resolution.

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Category style.

Post by Zuke on November 8th 2014, 11:35 pm

Is there a way to change the colors of them, also is there a way to make them bigger there tiny on my forum

spike.forums.fm

Zuke
Forumember

Male Posts : 379
Reputation : 20
Language : English
Location : United Kingdom

http://ocean.forums.fm

Back to top Go down

Solved Re: Category style.

Post by Ange Tuteur on November 8th 2014, 11:58 pm

This is the CSS that you can modify :
( colors and sizes )
Code:
.forum-inlock {
 display:inline-block;
 margin:3px;
 width:30%;
 background:#EEE;
 border:1px solid #CCC;
 border-radius:3px;
}
 
.forum-inlock .lastpost { padding:3px; }
.author-last br { display:none }
.author-last a { text-decoration:none }
.author-last > strong:before {
 content:", by ";
 font-weight:normal;
}
 
.forum-inlock .forum-head a {
 color:#000;
 font-weight:bold;
 text-decoration:none;
}
.forum-inlock .forum-head {
 background:#DDD;
 padding:3px;
}

It is in the template also, so if you place it in CSS you may need to use the !important keyword for some properties.

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Category style.

Post by Ramdaman on November 9th 2014, 12:05 am

Luke, did you want each category to have a different color or just one color?

Ramdaman
Active Poster

Male Posts : 1614
Reputation : 97
Language : English, Albanian, Macedonian, Russian | HTML, CSS
Location : New York City

http://ndihme.forumotion.com/forum

Back to top Go down

Solved Re: Category style.

Post by Zuke on November 9th 2014, 12:13 am

Each a different color, the ones I told you to add if you could now add them please Ramdaman.


ALSO Can you make them bigger as well, there way to small.

Zuke
Forumember

Male Posts : 379
Reputation : 20
Language : English
Location : United Kingdom

http://ocean.forums.fm

Back to top Go down

Solved Re: Category style.

Post by Ange Tuteur on November 9th 2014, 12:50 am

I forgot this, if you want it like the example go to Administration Panel > Display > Structure et Hierarchy

Choose Split categories on index : Full

then save.

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Category style.

Post by Zuke on November 9th 2014, 1:12 am

Ange check PM, I send you something important about this.

Zuke
Forumember

Male Posts : 379
Reputation : 20
Language : English
Location : United Kingdom

http://ocean.forums.fm

Back to top Go down

Solved Re: Category style.

Post by Ange Tuteur on November 9th 2014, 1:40 am

For different colors you need to use some javascript. Go to administration panel > Modules > JavaScript codes management > Create a new script

Title : Your choice
Placement : In the homepage
Code:
$(function() {
 // header colors START

 headColor('announcements','red');
 headColor('the lounge','green');
 headColor('bugs','yellow');
 headColor('DSGHQ','blue');
 headColor('help &amp; support','#F0F');
 headColor('suggestions','#0FF');

 // header colors END
 
 function headColor(title, color) {
  var h = document.getElementsByTagName('DIV'), reg = new RegExp(title,'i'), i;
  for (i=0; i<h.length; i++) if (reg.test(h[i].innerHTML) && /forum-head/.test(h[i].className)) h[i].style.background = color;
 }
});

To change the color of a header write headColor(title,color); between these comments :
( there's already examples for you )
Code:
// header colors START

 // header colors END

title : is the title of the category you want to modify e.g. Announcements, Suggestions..
color : is the color you want that header to be

altogether :
Code:
headColor('announcements','red');


To make the categories "bigger" ?

Add one of the two rules to your stylesheet :
Display > Colors > CSS stylesheet

Padding :
Code:
.forum-inlock .lastpost { padding:12px !important } /* last post */
.forum-inlock .forum-head { padding:8px 3px !important } /* header */

Dimensions :
Code:
.forum-inlock {
 width:32% !important;
 height:100px;
}

Adjust the values as you wish.

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Category style.

Post by Zuke on November 9th 2014, 2:12 am

Thank you! SmileI have done it, look at mine and my friends, they look so similar! Very HappyTHANKS!

Mine:http://prntscr.com/54gouk His: http://prntscr.com/54gp1m

Zuke
Forumember

Male Posts : 379
Reputation : 20
Language : English
Location : United Kingdom

http://ocean.forums.fm

Back to top Go down

Solved Re: Category style.

Post by Ange Tuteur on November 9th 2014, 3:13 am

You're welcome

Topic archived

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