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

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.


SLGray
Administrator
Administrator

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

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

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

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. :|

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>

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

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

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
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