Codes


CSS
​


<p>
    &nbsp;
</p>
<link href="https://fonts.googleapis.com/css?family=Niconne" rel="stylesheet">
<style type="text/css">
/*REMOVES AWKWARD NEW FORUM ID PART AT BOTTOM OF POST*/
.awki + .ipsHr, .ipsDataList:last-of-type .ipsDataList_reducedSpacing, .ipsDataItem:last-of-type {
   display:none;
}
/*LINKS*/
.awki a {
   text-decoration:none;
   color:inherit;
   cursor:pointer;
   text-shadow: 1px 1px 1px grey;
}
.awki .drop a {
   display:inline-block;
   margin-bottom:2.5px 0px;
}
.awki .drop a:hover {
   background:white;
   color:#0c343d;
   border-radius:5px;
   padding:5px;
}
/*HEADERS AND LEGENDS*/
.awki h1, 
.awki h2,
.awki h3,
.awki h4 {
   font-family:Niconne;
   font-weight:normal;
   color:#0c343d;
}
.awki h1,
.awki h2 {
   margin:0em 0em -.5em 0em;
}
.awki h3,
.awki h4 {
   margin:1em 0em -.5em 0em;
}
.awki h1, .awki .h1 {
   font-size:6em;
   text-align:center;
}
.awki h2 {
   font-size:5em;
   text-align:center;
}
.awki .h1 + h2 {
   margin-top:-1em;
}
.awki .tagsbox h3 {
   text-align:center;
   margin-top:-.25em;
   margin-bottom:.15em;
}
.awki h3, .awki .h3 {
   font-size:4em;
}
.awki h4 {
   font-size:2em;
   text-indent:20px;
}
.awki .h1, .awki .h3 {
   font-family:Niconne;
   font-weight:normal;
   padding:0px 10px;
   color:#0c343d;
}
/*CONTAINERS*/
.awki {
   position:static;
}
.awki .wrap {
   clear:both;
   position:relative;
}
.awki .content {
   position:relative;
   top:100px;
   text-align:justify;
   clear:both;
}
.awki .firstpost {
   margin-bottom:110px;
}
.awki fieldset {
   border:1px solid #0c343d;
   border-radius:10px;
   padding:-10px 10px 10px;
   margin:10px 0px;
   text-align:justify;
   clear:both;
}
/*ASIDES*/
.awki .tagsbox {
   float:right;
   background:#45818e;
   border-radius:10px;
   margin:0px 0px 25px 25px;
   padding:10px;
}
.awki .tags {
   background:white;
   border-radius:10px;
   padding:10px;
}
.awki .circle {
   float:left;
   border-radius:50%;
}
/*NAVBAR*/
.awki .navbar {
   position:absolute;
   z-index:1;
   top:0px;
   width:100%;
   height:40px;
   background:#0c343d;
   padding:20px;
   border-radius:10px;
   overflow:visible;
   clear:both;
}
.awki .navbar .title {
   display:none;
}
.awki .navbar .menu {
   float:left;
   margin-right:2%;
   width:14.6%;
   background:white;
   padding:10px;
   border-bottom:4px double #0c343d;
   border-radius:10px;
}
.awki .navbar .menu:hover {
   background:#0c343d;
   color:white;
   border:0px;
}
.awki .navbar .menu > p {
   font-weight:bold;
   text-align:center;
}
.awki .navbar .drop {
   max-height:0em;
   overflow:hidden;
   transition:max-height 1.25s ease;
}
.awki .navbar .menu:hover .drop {
   max-height:300px;
   transition:max-height 2s ease;
}
/*MOBILE ADAPTATION*/
@media (max-width:500px) {
.awki .navbar {
   position:relative;
   z-index:auto;
   top:auto;
   height:auto;
   background:transparent;
   padding:0px;
   border-radius:0px;
   overflow:visible;
   clear:both;
}
.awki .navbar .title {
   display:block;
   font-weight:bold;
   text-align:center;
   padding:15px;
}
.awki .navbar .menu {
   width:100%;
   background:#0c343d;
   padding:10px;
   color:white;
   border-radius:10px;
   border-color:white;
   margin-bottom:5px;
}
.awki .navbar .menu:hover {
   background:transparent;
   color:black;
   border:0px;
   width:100%;
}
.awki .navbar .drop {
   max-height:0em;
   width:100%;
   overflow:hidden;
   background:#0c343d;
   color:white;
   border-radius:10px;
   padding:10px;
}
.awki .navbar .menu:hover .drop {
   display:block;
   max-height:300px;
   transition:max-height 1.25s ease;
}
.awki .content {
   position:static;
   top:auto;
}
.awki .firstpost {
   margin-bottom:0px;
}
.awki .tagsbox {
   display:none;
}
@keyframes fade {
   0% {opacity:0;}
   100% {opacity:1;}
}
}</style>
 
Last edited by a moderator:

Nav Bar
​


        <div class="navbar">
            <div class="title">
                Directory
            </div>


            <div class="menu">
                <p>
                    Roleplay
                </p>


                <div class="drop">
                    <p>
                        <a href="https://www.rpnation.com/topic/267643-dust-to-dawn-episode-1/" rel="">Dust to Dawn</a>
                    </p>


                    <p>
                        <a href="https://www.rpnation.com/topic/267759-green-brass-garrison-episode-1/" rel="">Green Brass Garrison</a>
                    </p>


                    <p>
                        <a href="https://www.rpnation.com/topic/267760-power-recumbent-episode-1/" rel="">Power Recumbent</a>
                    </p>
                </div>
            </div>


            <div class="menu">
                <p>
                    Characters
                </p>


                <div class="drop">
                    <p>
                        <a href="https://www.rpnation.com/forum/5252-dust-to-dawn/" rel="">Dust to Dawn</a>
                    </p>


                    <p>
                        <a href="https://www.rpnation.com/forum/5253-green-brass-garrison/" rel="">Green Brass Garrison</a>
                    </p>


                    <p>
                        <a href="https://www.rpnation.com/forum/5254-power-recumbent/" rel="">Power Recumbent</a>
                    </p>


                    <p>
                        <a href="https://www.rpnation.com/topic/269836-creating-your-character/" rel="">Creating Your Character</a>
                    </p>
                </div>
            </div>


            <div class="menu">
                <p>
                    Discussion
                </p>


                <div class="drop">
                    <p>
                        <a href="https://www.rpnation.com/topic/268139-connerick-gazette/" rel="">Announcements</a>
                    </p>


                    <p>
                        <a href="https://www.rpnation.com/topic/267985-letters-home/" rel="">OOC</a>
                    </p>


                    <p>
                        <a href="https://www.rpnation.com/forum/5275-discussion/?do=add&amp;topic_prefix=ideas" rel="">Share an Idea</a>
                    </p>


                    <p>
                        <a href="https://www.rpnation.com/forum/5275-discussion/?do=add&amp;topic_prefix=opinion" rel="">Give Feedback</a><br>
                        <a href="https://www.rpnation.com/forum/5275-discussion/?do=add&amp;topic_prefix=help" rel="">Ask for Help</a>
                    </p>
                </div>
            </div>


            <div class="menu">
                <p>
                    Meta Info
                </p>


                <div class="drop">
                    <p>
                        <a href="https://www.rpnation.com/topic/268134-meta-expectations-of-players/" rel="">Expectations of Players</a>
                    </p>


                    <p>
                        <a href="https://www.rpnation.com/topic/268008-meta-how-to-join/" rel="">How to Join</a>
                    </p>
                </div>
            </div>


            <div class="menu">
                <p>
                    Setting Info
                </p>


                <div class="drop">
                    <p>
                        <a href="https://www.rpnation.com/topic/267997-world-notable-locations/" rel="">Notable Locations</a>
                    </p>


                    <p>
                        <a href="https://www.rpnation.com/topic/267997-world-notable-locations/" rel="">&nbsp;&nbsp; The Kingdom of Findal</a>
                    </p>


                    <p>
                        <a href="https://www.rpnation.com/topic/267999-world-notable-organizations/" rel="">Notable Organizations</a>
                    </p>


                    <p>
                        &nbsp;&nbsp; <a href="https://www.rpnation.com/topic/267954-world-noble-houses/" rel="">Noble Houses</a>
                    </p>


                    <p>
                        <a href="https://www.rpnation.com/topic/268000-world-time-period-technology-fashion-etc/" rel="">Time Period</a>
                    </p>
                </div>
            </div>


            <div class="menu">
                <p>
                    Synopses
                </p>


                <div class="drop">
                    <p>
                        <a href="https://www.rpnation.com/topic/268005-as-we-knew-it/" rel="">As We Knew It</a>
                    </p>


                    <p>
                        <a href="https://www.rpnation.com/topic/267993-synopsis-dust-to-dawn/" rel="">Dust to Dawn</a>
                    </p>


                    <p>
                        <a href="https://www.rpnation.com/topic/267995-synopsis-green-brass-garrison/" rel="">Green Brass Garrison</a>
                    </p>


                    <p>
                        <a href="https://www.rpnation.com/topic/267996-synopsis-power-recumbent/" rel="">Power Recumbent</a>
                    </p>
                </div>
            </div>
        </div>
 
Last edited by a moderator:
You must log in or register to reply here.

Users who are viewing this thread

Total: 2 (members: 0, guests: 2)
Back
Top