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 : 457
Reputation : 1
Language : Danish, english
Location : Denmark

http://www.vielamort.net

Back to top Go down

Re: Spoiler/dropbox customize help

Post by Justice™ on July 2nd 2017, 2:14 pm

Hello,

Post the source code of that file here.
avatar
Justice™
Forumember

Posts : 521
Reputation : 121
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 : 457
Reputation : 1
Language : Danish, english
Location : Denmark

http://www.vielamort.net

Back to top Go down

Re: Spoiler/dropbox customize help

Post by Justice™ 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
Justice™
Forumember

Posts : 521
Reputation : 121
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 : 457
Reputation : 1
Language : Danish, english
Location : Denmark

http://www.vielamort.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 : 1840
Reputation : 230
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 : 457
Reputation : 1
Language : Danish, english
Location : Denmark

http://www.vielamort.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 : 1840
Reputation : 230
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 : 457
Reputation : 1
Language : Danish, english
Location : Denmark

http://www.vielamort.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 : 1840
Reputation : 230
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 : 457
Reputation : 1
Language : Danish, english
Location : Denmark

http://www.vielamort.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 : 1840
Reputation : 230
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