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.

Spoiler/dropbox customize help

View previous topic View next topic Go down

Spoiler/dropbox customize help

Post by IdaTR on July 1st 2017, 3:58 pm

Hallo!

I once saw a really cool customized spoiler/dropbox, but i can't really remember where i saw it, however.. Out from my memeroy i asked someone to help me recreate it, however i've exprienced some problems with it, and want to hear if there is a way to make something a like that to forum motion?

link: http://keno14.wi5.sde.dk/ownprojects/Surdej/dropdown/dropdown.php

The dropbox / spoiler should only be used in certain places, so it doesn't affect the original spoiler on the website.

thanks! (:
avatar
IdaTR
Forumember

Female Posts : 391
Reputation : 1
Language : Danish, english
Location : Denmark

http://nionevrien.forumq.net/

Back to top Go down

Re: Spoiler/dropbox customize help

Post by Wolfuryo on July 2nd 2017, 2:14 pm

Hello,

Post the source code of that file here.
avatar
Wolfuryo
Forumember

Posts : 346
Reputation : 92
Language : Romanian and English

http://board.realmsn.com

Back to top Go down

Re: Spoiler/dropbox customize help

Post by IdaTR on July 2nd 2017, 3:24 pm

CSS
Code:
body {
    font-family: sans-serif;
}

h2 {
    font-size: 50px;
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.center_box {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    width: 50%;
    border: 2px solid #70ad47;
    background: #A7CD95; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#b3d4a5, #9dca88); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#b3d4a5, #9dca88); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#b3d4a5, #9dca88); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#b3d4a5, #9dca88); /* Standard syntax */
   
}

.flex {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.label {
    width: 20%;
    height: 10vh;
    background-image: url('arrow_down.svg');
    background-size: 50%;
    background-position: center;
    background-repeat: no-repeat;
}

#menu_trigger {
    display: none;
}

#menu_trigger:checked + div {
    height: auto;
    padding: 20px;
    background-color: #7fd159;
}

.center_box > div {
    transition: all .2s;
    width: 100%;
    height: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

HTML
Code:

<body>
        <div class="center">
            <div class="center_box">
                <h2>A</h2>
                <label for="menu_trigger" class="label"></label>
                <input type="checkbox" id="menu_trigger">
                <div>
                    <p>
                        Dette er noget text
                    </p>
                </div>
            </div>
        </div>
   
</body>
avatar
IdaTR
Forumember

Female Posts : 391
Reputation : 1
Language : Danish, english
Location : Denmark

http://nionevrien.forumq.net/

Back to top Go down

Re: Spoiler/dropbox customize help

Post by Wolfuryo on July 3rd 2017, 9:33 am

Add the CSS code to your forum's css. Then add this code where you want the spoiler to appear:
Code:

 <div class="center">
            <div class="center_box">
                <h2>A</h2>
                <label for="menu_trigger" class="label"></label>
                <input type="checkbox" id="menu_trigger">
                <div>
                    <p>
                        Dette er noget text
                    </p>
                </div>
            </div>
        </div>
avatar
Wolfuryo
Forumember

Posts : 346
Reputation : 92
Language : Romanian and English

http://board.realmsn.com

Back to top Go down

Re: Spoiler/dropbox customize help

Post by IdaTR on July 3rd 2017, 12:26 pm

just a big green box is appearing
avatar
IdaTR
Forumember

Female Posts : 391
Reputation : 1
Language : Danish, english
Location : Denmark

http://nionevrien.forumq.net/

Back to top Go down

Re: Spoiler/dropbox customize help

Post by Draxion on July 3rd 2017, 12:51 pm

Click the right side of the 'A'.


NEVER provide your founder's account or email
Please provide forum's URL when dealing with design and appearance issues
Don't forget to mark the topic as when the issue is resolved. This helps the staff greatly.
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself

avatar
Draxion
Support Moderator
Support Moderator

Male Posts : 1347
Reputation : 186
Language : English
Location : USA

http://www.draxionsgameden.com/

Back to top Go down

Re: Spoiler/dropbox customize help

Post by IdaTR on July 3rd 2017, 3:25 pm

I have still nothing
avatar
IdaTR
Forumember

Female Posts : 391
Reputation : 1
Language : Danish, english
Location : Denmark

http://nionevrien.forumq.net/

Back to top Go down

Re: Spoiler/dropbox customize help

Post by Draxion on July 3rd 2017, 3:28 pm

Are you sure you are clicking on the right area?
Image:


NEVER provide your founder's account or email
Please provide forum's URL when dealing with design and appearance issues
Don't forget to mark the topic as when the issue is resolved. This helps the staff greatly.
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself

avatar
Draxion
Support Moderator
Support Moderator

Male Posts : 1347
Reputation : 186
Language : English
Location : USA

http://www.draxionsgameden.com/

Back to top Go down

Re: Spoiler/dropbox customize help

Post by IdaTR on July 3rd 2017, 3:58 pm

Got it ! (:
avatar
IdaTR
Forumember

Female Posts : 391
Reputation : 1
Language : Danish, english
Location : Denmark

http://nionevrien.forumq.net/

Back to top Go down

Re: Spoiler/dropbox customize help

Post by Draxion on July 3rd 2017, 4:01 pm

May I mark this as solved then? Smile


NEVER provide your founder's account or email
Please provide forum's URL when dealing with design and appearance issues
Don't forget to mark the topic as when the issue is resolved. This helps the staff greatly.
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself

avatar
Draxion
Support Moderator
Support Moderator

Male Posts : 1347
Reputation : 186
Language : English
Location : USA

http://www.draxionsgameden.com/

Back to top Go down

Re: Spoiler/dropbox customize help

Post by IdaTR on July 3rd 2017, 4:09 pm

yup! (:
avatar
IdaTR
Forumember

Female Posts : 391
Reputation : 1
Language : Danish, english
Location : Denmark

http://nionevrien.forumq.net/

Back to top Go down

Re: Spoiler/dropbox customize help

Post by Draxion on July 3rd 2017, 4:12 pm

Thanks.
Problem solved & topic archived.
Please read our forum rules: ESF General Rules


NEVER provide your founder's account or email
Please provide forum's URL when dealing with design and appearance issues
Don't forget to mark the topic as when the issue is resolved. This helps the staff greatly.
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself

avatar
Draxion
Support Moderator
Support Moderator

Male Posts : 1347
Reputation : 186
Language : English
Location : USA

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