moving headers with some info inside
The forum of the forums :: Support forum :: Forum Design & Appearance Help :: Design & Appearance Problems Archives
Page 1 of 1 • Share •
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!
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!

moi_lolito- Forumember
- Posts : 92
Reputation : 1
Language : English
Re: moving headers with some info inside
Please read this tutorial - http://help.forumotion.com/t105962-index-in-accordion

Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

Re: moving headers with some info inside
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?
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?
moi_lolito- Forumember
- Posts : 92
Reputation : 1
Language : English
Re: moving headers with some info inside
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?
.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?
moi_lolito- Forumember
- Posts : 92
Reputation : 1
Language : English
Re: moving headers with some info inside
Try this one:
If still not working, find this in your CSS, then remove, then add the code i gave:
- 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; }
Re: moving headers with some info inside
or add this:
- Code:
.dark h2.selected b {
display: none !important;
}
.dark li > h2 b {
display: none !important;
}
Re: moving headers with some info inside
@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?
moi_lolito- Forumember
- Posts : 92
Reputation : 1
Language : English
Re: moving headers with some info inside
Try this one, add a <a> tag outside the <div> tag.
Example:
Now change the # to the link you want to the image to redirect with.
Example:
- Code:
<a href="#"><div id="s1"></div></a>
Now change the # to the link you want to the image to redirect with.
Re: moving headers with some info inside
where exactly to do this, also in css stylesheet?
moi_lolito- Forumember
- Posts : 92
Reputation : 1
Language : English
Re: moving headers with some info inside
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>
Re: moving headers with some info inside
modules -> html -> create new html?
moi_lolito- Forumember
- Posts : 92
Reputation : 1
Language : English
Re: moving headers with some info inside
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)
Note: Change the # to the link you want to the image to redirect with.
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.
Re: moving headers with some info inside
<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 =/
<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 =/
moi_lolito- Forumember
- Posts : 92
Reputation : 1
Language : English
Re: moving headers with some info inside
ok, waiting, thanks ^^
moi_lolito- Forumember
- Posts : 92
Reputation : 1
Language : English
Re: moving headers with some info inside
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>
Re: moving headers with some info inside
It works, perfect!
Thank you very much, I love you my friend! =P
Thank you very much, I love you my friend! =P
moi_lolito- Forumember
- Posts : 92
Reputation : 1
Language : English
Re: moving headers with some info inside
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.

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.

Re: moving headers with some info inside
Since this thread appears to be solved...
Topic Solved & Locked |
Jophy- ForumGuru
-
Posts : 17924
Reputation : 835
Language : English
Location : Somewhere
The forum of the forums :: Support forum :: Forum Design & Appearance Help :: Design & Appearance Problems Archives
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum