moving headers with some info inside

Hi all!

http://paladins.foro-activo.es/ This is an old web my friend designed some years ago, I would like to know how is it possible to make this moving headers like it has on the top of the page?



The process of that web building was not finished, what I want to achieve is kinda similar to that moving headers, when I click on one and it opens, inside I would like to have some picture and when some user clicks that picture, that section would open in a popup window (I would design the picture by myself, right now as you can see if you click some name, for example Silexer, it opens and inside is nothing, just black space).

Could somebody provide me a solution please? Thank you very much!

Please read this tutorial - http://help.forumotion.com/t105962-index-in-accordion

SUPERB!!!

Thanks A LOT! I did it with no problems =P

Now the next question, please: is there a possibility of removing the numbers in the slides or at least change their appearance? They don't look very nice:



Also, how can I make a link? I mean, when the slides open, it just shows an image that is non-clickable, I would like the users to click on this image and go to the section that the image would represent, is that possible?

Add this to your CSS:

Code:

.dark li > h2 b {
display: none;
}


mmmmmmm, I added that into my css but still nothing changed, the numbers appear the same, this is how my css looks like:

.accordion li > h2 {
color: black;
font-weight: normal;
margin: 0;
z-index: 2;
position: absolute;
top: 0;
left: 0;
-webkit-transform: translateX(-100%) rotate(-90deg);
-webkit-transform-origin: right top;
-moz-transform: translateX(-100%) rotate(-90deg);
-moz-transform-origin: right top;
-o-transform: translateX(-100%) rotate(-90deg);
-o-transform-origin: right top;
-ms-transform: translateX(-100%) rotate(-90deg);
-ms-transform-origin: right top;
transform: translateX(-100%) rotate(-90deg);
transform-origin: right top;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.accordion li > h2 span { display: block; padding-right: 8%; text-align: right; height: 90%; margin-top: 5px; }
.accordion li > h2 b { display: inline-block; position: absolute; top: 10%; top: 42%9; left: 10%; left: 5%9; text-align: center; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); }
.accordion li > h2:hover { cursor: pointer; }
.accordion li > div { height: 100%; position: absolute; top: 0; z-index: 1; overflow: hidden; background: white; }
.accordion noscript p { padding: 10px; margin: 0; background: white; }

/****************************************** Basic */
.basic li > h2 { background: #333; color: white; line-height: 1.8em; }
.basic li > div h3 { margin: 15px 10px; }
.basic li > div p { margin: 10px; font-size: 14px; }

/****************************************** Dark */
.dark { border: 9px solid #353535; border-bottom-width: 8px; padding: 5px 5px 6px 0; background: #030303; -webkit-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); -o-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); }
.dark li > h2 { background: #030303; font-size: 16px; line-height: 2.7em; text-shadow: 0 -1px 0 #030303; }
.dark li > h2 span { background: #353535; color: white; }
.dark li > h2 b { background: #353535; color: #030303; font-size: 20px; text-shadow: -1px 1px 0 #5b5b5b; }
.dark h2.selected span, .dark h2.selected span:hover { background: #434343; background: -webkit-gradient(linear, left top, right top, color-stop(0, #353535), color-stop(1, #555555)); background: -moz-linear-gradient(top left, #353535 0%, #555555 100%); }
.dark h2.selected b { background: #434343; }
.dark li > div { background: #030303; margin-left: 5px; }

/*************************************** Rounded */
.rounded { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
.rounded li > h2 span { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }

/***************************************** Light */
/**************************************** Stitch */

#s1 {
background:url("http://url de l'image.jpg") no-repeat #030303;
}
#s2 {
background:url("http://url de l'image.jpg") no-repeat #030303;
}
#s3 {
background:url("http://url de l'image.jpg") no-repeat #030303;
}

#s4 {
background:url("http://url de l'image.jpg") no-repeat #030303;
}

#s5 {
background:url("http://url de l'image.jpg") no-repeat #030303;
}
.dark li > h2 b {
display: none;
}

Am I doing something wrong?

Try this one:

Code:

.dark li > h2 b {
display: none !important;
}


If still not working, find this in your CSS, then remove, then add the code i gave:

Code:

.dark li > h2 b { background: #353535; color: #030303; font-size: 20px; text-shadow: -1px 1px 0 #5b5b5b; }

or add this:

Code:


.dark h2.selected b {
    display: none !important;
}
.dark li > h2 b {
    display: none !important;
}

@E-Mark wrote:Try this one:

Code:

.dark li > h2 b {
display: none !important;
}


If still not working, find this in your CSS, then remove, then add the code i gave:

Code:

.dark li > h2 b { background: #353535; color: #030303; font-size: 20px; text-shadow: -1px 1px 0 #5b5b5b; }

Thanks a lot, this helped!!!

Now the last question, lol, sorry for bothering so much, really =/

How can I make the images as a direct link, so when the user opens let's suppose Slide 1 and he sees an image, he clicks on it and is being redirected to another subforum? For example, let's suppose Slide 1 is an image with spider-man, he opens slide one, sees the image, clicks on spider-man image and is being redirected to my forum section that provides information about spider-man? is it possible to do that?

Try this one, add a <a> tag outside the <div> tag.

Example:

Code:

<a href="#"><div id="s1"></div></a>

Now change the # to the link you want to the image to redirect with.

where exactly to do this, also in css stylesheet?

Nope, on the HTML. This part:

Code:

<div id="one" class="accordion">
    <ol>
        <li>
            <h2><span>Slide One</span></h2>
            <div id="s1"></div>
        </li>
        <li>
            <h2><span>Slide Two</span></h2>
            <div id="s2"></div>
        </li>
        <li>
            <h2><span>Slide Three</span></h2>
            <div id="s3"></div>
        </li>
        <li>
            <h2><span>Slide Four</span></h2>
            <div id="s4"></div>
        </li>
        <li>
            <h2><span>Slide Five</span></h2>
            <div id="s5"></div>
        </li>
    </ol>
    <noscript>
        <p>Please enable JavaScript to get the full experience.</p>
    </noscript>
</div>

modules -> html -> create new html?

No. Remember the code in this tutorial, the html part.
http://help.forumotion.com/t105962-index-in-accordion

Now go to the place where you put the html.
Then find all the <div id="s#"></div> (s1, s2, s3, etc.). Then place a href tag outside. So it will become like this:

<a href="#"><div id="s1"></div></a>

(Here's a full sample code of the HTML part with the image link)

Code:

<div id="one" class="accordion">
    <ol>
        <li>
            <h2><span>Slide One</span></h2>
            <a href="#"><div id="s1"></div></a>
        </li>
        <li>
            <h2><span>Slide Two</span></h2>
            <a href="#"><div id="s2"></div></a>
        </li>
        <li>
            <h2><span>Slide Three</span></h2>
            <a href="#"><div id="s3"></div></a>
        </li>
        <li>
            <h2><span>Slide Four</span></h2>
            <a href="#"><div id="s4"></div></a>
        </li>
        <li>
            <h2><span>Slide Five</span></h2>
            <a href="#"><div id="s5"></div></a>
        </li>
    </ol>
    <noscript>
        <p>Please enable JavaScript to get the full experience.</p>
    </noscript>
</div>

Note: Change the # to the link you want to the image to redirect with.

<div id="one" class="accordion">
<ol>
<li>
<h2><span>Interview of the Month</span></h2>
<a href="http://testforfuture.motionforum.net/f7-the-fire-heroes"><div id="s1"></div></a>
</li>

This is what I entered (the link is random to one of the subforums of my forum) and now the image that was in Slide 1 as a sample just dissapeared, this is all that changed =/

Am I doing something wrong?


Edited: And now I removed that link source and the image got back there =/

OK. Remove it for a while.
Give me a minute .

ok, waiting, thanks ^^

Try this one: (Change the <div id="s1"></div> with this one)

Code:

<div onClick="window.open( 'LINKHERE','_top' ); return false;" style="cursor: pointer;" id="s1"></div>

It works, perfect!

Thank you very much, I love you my friend! =P

Welcome .
Just change the 'LINKHERE'.

Then if you want to add links to the other slides, just change the id="s1" to id="s2" or id="s3" and so on.

Since this thread appears to be solved...

Topic Solved & Locked