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.

Forum Description like this...

View previous topic View next topic Go down

Solved Forum Description like this...

Post by JAN2XONLINE on January 24th 2013, 2:44 am

CLICK HERE TO SEE

How to make a forum description like that? That's so cool!


Last edited by JAN2XONLINE on January 25th 2013, 6:26 am; edited 1 time in total
avatar
JAN2XONLINE
Forumember

Male Posts : 943
Reputation : 32
Language : Tagalog, English
Location : Alberta, Canada

http://animeph.4umer.com/

Back to top Go down

Solved Re: Forum Description like this...

Post by SLGray on January 24th 2013, 2:59 am

Do this:
Code:
.::FORUM TITLE::.
Example:
.::Zoo Tycoon Wildlife::.
. = period
: = colon


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

avatar
SLGray
Administrator
Administrator

Male Posts : 39670
Reputation : 2678
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Solved Re: Forum Description like this...

Post by JAN2XONLINE on January 24th 2013, 3:14 am

@SLGray wrote:Do this:
Code:
.::FORUM TITLE::.
Example:
.::Zoo Tycoon Wildlife::.
. = period
: = colon

Oh no, I mean this:
.

When I hover the image, it shows the description.
avatar
JAN2XONLINE
Forumember

Male Posts : 943
Reputation : 32
Language : Tagalog, English
Location : Alberta, Canada

http://animeph.4umer.com/

Back to top Go down

Solved Re: Forum Description like this...

Post by Aconitin on January 24th 2013, 3:45 am

Go to your Forum or Category description..
Add this :
Code:
<img src="YOUR IMAGE URL"title="YOUR DESCRIPTION"/>
Hope this works.. Wink
avatar
Aconitin
Forumember

Male Posts : 246
Reputation : 7
Language : Indonesian
Location : Indonesia

Back to top Go down

Solved Re: Forum Description like this...

Post by JAN2XONLINE on January 24th 2013, 4:06 am

@Aconitin wrote:Go to your Forum or Category description..
Add this :
Code:
<img src="YOUR IMAGE URL"title="YOUR DESCRIPTION"/>
Hope this works.. Wink

It doesn't hover. :|
avatar
JAN2XONLINE
Forumember

Male Posts : 943
Reputation : 32
Language : Tagalog, English
Location : Alberta, Canada

http://animeph.4umer.com/

Back to top Go down

Solved Re: Forum Description like this...

Post by Akkii on January 24th 2013, 4:55 pm

Add this to your CSS.
Code:
.cate
{
  width: 400px;
  height: 120px;
  overflow: hidden;
  border: 2px solid #000000;
  background-color: #ffffff;
}
.cate_img
{
  position: relative;
  z-index: 2;
  width: 400px;
  height: 120px;
  margin-left: 0px;
    transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.cate:hover .cate_img
{
margin-left: 400px;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.cate_description
{
  position: relative;
  z-index: 1;
  width: 400px;
  height: 120px;
  margin-top: -120px;
  text-align: justify;
  font-size: 11px;
  color: #8c8c8c;
  padding: 2px;
overflow: auto;
}

And this is what you add in your desc.
Code:
<div class="cate"><div class="cate_img"><img src="Url of image here."></div><div class="cate_description">Text here.</div></div>
avatar
Akkii
Forumember

Male Posts : 710
Reputation : 107
Language : English,HTML, CSS,Photoshop,Javascript!
Location : Here on Forumotion!

http://www.csshelp.net

Back to top Go down

Solved Re: Forum Description like this...

Post by JAN2XONLINE on January 25th 2013, 6:25 am

@Akkii wrote:Add this to your CSS.
Code:
.cate
{
  width: 400px;
  height: 120px;
  overflow: hidden;
  border: 2px solid #000000;
  background-color: #ffffff;
}
.cate_img
{
  position: relative;
  z-index: 2;
  width: 400px;
  height: 120px;
  margin-left: 0px;
    transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.cate:hover .cate_img
{
margin-left: 400px;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.cate_description
{
  position: relative;
  z-index: 1;
  width: 400px;
  height: 120px;
  margin-top: -120px;
  text-align: justify;
  font-size: 11px;
  color: #8c8c8c;
  padding: 2px;
overflow: auto;
}

And this is what you add in your desc.
Code:
<div class="cate"><div class="cate_img"><img src="Url of image here."></div><div class="cate_description">Text here.</div></div>

Awesome! It really works! Thank you!b Very Happy groar
avatar
JAN2XONLINE
Forumember

Male Posts : 943
Reputation : 32
Language : Tagalog, English
Location : Alberta, Canada

http://animeph.4umer.com/

Back to top Go down

Solved Re: Forum Description like this...

Post by fatmanjumprope on January 25th 2013, 8:27 am

@Akkii wrote:Add this to your CSS.
Code:
.cate
{
  width: 400px;
  height: 120px;
  overflow: hidden;
  border: 2px solid #000000;
  background-color: #ffffff;
}
.cate_img
{
  position: relative;
  z-index: 2;
  width: 400px;
  height: 120px;
  margin-left: 0px;
    transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.cate:hover .cate_img
{
margin-left: 400px;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.cate_description
{
  position: relative;
  z-index: 1;
  width: 400px;
  height: 120px;
  margin-top: -120px;
  text-align: justify;
  font-size: 11px;
  color: #8c8c8c;
  padding: 2px;
overflow: auto;
}

And this is what you add in your desc.
Code:
<div class="cate"><div class="cate_img"><img src="Url of image here."></div><div class="cate_description">Text here.</div></div>

Really found this interesting and useful. I noticed you could edit the "text here" into html code of an image and reduce the padding to 0px to make the image open into another image Very Happy

fatmanjumprope
New Member

Posts : 13
Reputation : 1
Language : English

Back to top Go down

Solved Re: Forum Description like this...

Post by Sanket on January 25th 2013, 8:44 am

Topic Solved & Locked
avatar
Sanket
ForumGuru

Male Posts : 48766
Reputation : 2827
Language : English
Location : Mumbai

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