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
avatar
Zuke
Forumember

Male Posts : 385
Reputation : 21
Language : English
Location : United Kingdom

http://droplet.your-talk.com

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.

avatar
SLGray
Administrator
Administrator

Male Posts : 39578
Reputation : 2655
Language : English
Location : United States

https://fmthemes.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...
avatar
Zuke
Forumember

Male Posts : 385
Reputation : 21
Language : English
Location : United Kingdom

http://droplet.your-talk.com

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.

avatar
SLGray
Administrator
Administrator

Male Posts : 39578
Reputation : 2655
Language : English
Location : United States

https://fmthemes.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
avatar
Zuke
Forumember

Male Posts : 385
Reputation : 21
Language : English
Location : United Kingdom

http://droplet.your-talk.com

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.
avatar
Ramdaman
Active Poster

Male Posts : 1614
Reputation : 98
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
avatar
Zuke
Forumember

Male Posts : 385
Reputation : 21
Language : English
Location : United Kingdom

http://droplet.your-talk.com

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.
avatar
Ramdaman
Active Poster

Male Posts : 1614
Reputation : 98
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
avatar
Zuke
Forumember

Male Posts : 385
Reputation : 21
Language : English
Location : United Kingdom

http://droplet.your-talk.com

Back to top Go down

Solved Re: Category style.

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

I edited my above post.
avatar
Ramdaman
Active Poster

Male Posts : 1614
Reputation : 98
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.
avatar
Zuke
Forumember

Male Posts : 385
Reputation : 21
Language : English
Location : United Kingdom

http://droplet.your-talk.com

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.
avatar
Ramdaman
Active Poster

Male Posts : 1614
Reputation : 98
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?
avatar
Zuke
Forumember

Male Posts : 385
Reputation : 21
Language : English
Location : United Kingdom

http://droplet.your-talk.com

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.
avatar
Ramdaman
Active Poster

Male Posts : 1614
Reputation : 98
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
avatar
Zuke
Forumember

Male Posts : 385
Reputation : 21
Language : English
Location : United Kingdom

http://droplet.your-talk.com

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.
avatar
Ramdaman
Active Poster

Male Posts : 1614
Reputation : 98
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.
avatar
Ange Tuteur
Forumaster

Male Posts : 13174
Reputation : 2872
Language : EN10, FR5
Location : Macungie, PA

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
avatar
Zuke
Forumember

Male Posts : 385
Reputation : 21
Language : English
Location : United Kingdom

http://droplet.your-talk.com

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

Male Posts : 13174
Reputation : 2872
Language : EN10, FR5
Location : Macungie, PA

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?
avatar
Ramdaman
Active Poster

Male Posts : 1614
Reputation : 98
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.
avatar
Zuke
Forumember

Male Posts : 385
Reputation : 21
Language : English
Location : United Kingdom

http://droplet.your-talk.com

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

Male Posts : 13174
Reputation : 2872
Language : EN10, FR5
Location : Macungie, PA

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.
avatar
Zuke
Forumember

Male Posts : 385
Reputation : 21
Language : English
Location : United Kingdom

http://droplet.your-talk.com

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

Male Posts : 13174
Reputation : 2872
Language : EN10, FR5
Location : Macungie, PA

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
avatar
Zuke
Forumember

Male Posts : 385
Reputation : 21
Language : English
Location : United Kingdom

http://droplet.your-talk.com

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

Male Posts : 13174
Reputation : 2872
Language : EN10, FR5
Location : Macungie, PA

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