Page with hover button properties ?

[hashend94]

Hey peeps !

So while I was browsing this site I found something that caught my attention. There was these buttons (With links to certain pages in the site) with hover properties. So I was wondering If I could actually make something like in a page in smf leading to sub forums in the site. If anyone of you know if it's possible and how please do tell me.

Also the hover button items could be found here - http://vi-scans.com/wp/projects/

Thanks and Best Regards,
hashend94

[Kindred]

you have to be more clear...

subforums?

what buttons? used where? Outside the forum? inside the forum?


If you mean: Can I link buttons directly to boards - the answer is yes.
See the mid-screen menu here...
http://www.40konline.com/index.php

[hashend94]

My bad ! I'm really sorry forgot to add the link. Edited the post please read again c:

[hashend94]

What I exactly mean here is if I could make a page that could also appear on the menu. With these sort of buttons (which I provided in the link) to direct them into certain categories in my forum.

[Kindred]

I'm sorry. Maybe I am being dense, but I still don't understand what you mean.

That page looks like a wordpress installation.

1- to what "menu" are you trying to add buttons?
2- what (Specifially) do you want the button to load when clicked?

When you say "direct them to certain categories..." again, you are either using incorrect terminology or the basic answer is no.
SMF does not (by default) display catgeories as a separate page (although there is a mod to do that, I believe.)
If you ACTUALLY mean "I want to add a menu item to load a specific BOARD." then the answer is a simple - yes... that can be done quite easily, as I demonstrated in my 40KOnline link

but then you talk about making a page... and that confuses me again...  why do you have to make a page to display a the contents of a board?

[hashend94]

Lol, okay let me explain again. You saw the link I mentioned yeah ? can you see a bunch of pics ? and when you hover over them they get their original color? those are what I meant by buttons. And I wanted them to simply direct  to a forum board in the forum when clicked. ( just like how when click an image it takes you to a certain link). And I want all this to be on certain individual page on the site. Like for example in the 'comic' page in the menu. Just like that in the site I mentioned.

Hope you get it this time

[ARG01]

That is a simple css effect with the image hovers. Google css image effects and I am sure that you will find plenty of options. 

[Kindred]

ah. then fine... but that actually has nothing at all to do with SMF.

You are not using any SMF code on that page...  you're just using HTML with CSS effects and linking to individual boards...

I understand what you want to do now... but, I guess I don't understand what your question is now.
create the html page with the images.
make the images into links to the board(s) that you want linked.
use CSS styling to create the hover effect.

What does that have to do with SMF?

[hashend94]

I think the hover property in the site also uses jquery. So how exactly do I do this in a page in the forums. I'm sorry for my lack of knowledge I must sound like an idiot, but i'm quite new to this and is still in the process of learning. I just can't understand how I can just make a page in smf either. Like for example a page with no relation to the forums (As is not a forum post ) and get this effect to work.

[Antechinus]

You don't need jQuery to get that hover effect. CSS will do it.

What they have done is to set a bunch of floated divs inside one wrapper div, then stick images and links in the floated divs (class="item").

Code Select Expand

<div class="item"><a href="http://vi-scans.com/wp/projects/shinmai-maou-no-keiyakusha/"><img style="opacity: 0.7;" src="http://vi-scans.com/wp/wp-content/plugins/wpmanga/cache/145x300__Shinmai-LN-Cover-220x300.jpg" id="81" title="" alt="" height="300" width="145"></a></div>

Then they wrote a bit of CSS to style it all:

Code Select Expand

/* Projects Page */
#projects-wrapper { width: 100%; }
#projects-wrapper .item {
float: left;
margin: 0 0 5px 5px;
position: relative;
}
#projects-wrapper .item img {
opacity: 0.7;
border: 1px solid #CED2D7;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

Looks like they used the jQuery instead of using this, which would work just as well:

Code Select Expand


#projects-wrapper .item img:hover {
opacity: 1;
}

If you want the smooth transition to fully opaque, you'd just add a suitable CSS3 transition.

Now, my guess is that this made absolutely no sense to you at all. You did ask how to do it though, so this is how you do it. You'll have to learn a few tricks if you want to do stuff like this for yourself.

The basics aren't that terrifying, but you do have to know them.

[Antechinus]

Actually, this mod I wrote ages ago uses a similar structure: bunch of block thingies with stuff inside them, that stack according to screen width.

http://custom.simplemachines.org/mods/index.php?mod=1718

EtA: Oh and to put something similar in your own page, check this: http://idesign360.com/community/index.php?topic=36.0

[hashend94]

You don't need jQuery to get that hover effect. CSS will do it.

What they have done is to set a bunch of floated divs inside one wrapper div, then stick images and links in the floated divs (class="item").

Code Select Expand

<div class="item"><a href="http://vi-scans.com/wp/projects/shinmai-maou-no-keiyakusha/"><img style="opacity: 0.7;" src="http://vi-scans.com/wp/wp-content/plugins/wpmanga/cache/145x300__Shinmai-LN-Cover-220x300.jpg" id="81" title="" alt="" height="300" width="145"></a></div>

Then they wrote a bit of CSS to style it all:

Code Select Expand

/* Projects Page */
#projects-wrapper { width: 100%; }
#projects-wrapper .item {
float: left;
margin: 0 0 5px 5px;
position: relative;
}
#projects-wrapper .item img {
opacity: 0.7;
border: 1px solid #CED2D7;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

Looks like they used the jQuery instead of using this, which would work just as well:

Code Select Expand


#projects-wrapper .item img:hover {
opacity: 1;
}

If you want the smooth transition to fully opaque, you'd just add a suitable CSS3 transition.

Now, my guess is that this made absolutely no sense to you at all. You did ask how to do it though, so this is how you do it. You'll have to learn a few tricks if you want to do stuff like this for yourself.

The basics aren't that terrifying, but you do have to know them.

Indeed much of it didn't make any sense and how and where would you suggest I learn these tricks ?

[Antechinus]

This site is pretty good for basic info:

http://www.w3schools.com/html/default.asp

http://www.w3schools.com/cssref/default.asp

If it was me, I'd mark it up like this:

Code Select Expand

<ul id="hey_lotsa_pix">
<li class="pix_go_here">
<a class="teh_linky_bit">
<img src="whatever_the_source_is" alt="basic_description_of_link_target" title="optional_can_leave _it_out" />
</a>
</li>

Repeat stuff between (and including) the <li> and </li> tags as often as you need to, to house all your links/images.

When you've got them all, add a closing tag for the unordered list.

</ul>


That's the HTML. CSS would go like this:

Code Select Expand

#hey_lotsa_pix {
margin: 0;
padding: 0;
overflow: auto;
}

.pix_go_here {
float: left;
margin: 0;
padding: 4px;
width: 60px;
height: 120px;
}

.teh_linky_bits {
display: block;
opacity: 0.7;
}

.teh_linky_bits:hover {
opacity: 1;
}


This would be if your images were 60px wide and 120px high. Change numbers to suit.

The 4px padding on the <li>'s will give a visual gap between the images. Again, adjust to suit.

If you want slinky hover transitions, read up on CSS3 transitions.