Jump to content
  • Get Your Groove On - Profile App

       (1 review)

    This application is designed with profile apps in mind. It's kind of scary looking from an end user perspective! Remember to replace hard coded information with the appropriate variable for your site!

     

    JCINK

    Custom Profile Field: <!-- |field_X| -->

    Other variables can be found here.

     

    MYBB

    The template you need to edit is Member Templates > member_profile

    Custom Profile Field: {$userfields['fidX']}

    Name: {$formattedname}

    All posts/threads links: {$findposts}/{$findthreads}

    Avatar: {$avatar}

     

    You are more than welcome to change things up! Check the code to see where you should put variables and other instructions.


    Actual Template Responsive

    Character's Name
    Edward James Drewett / Julian Bunetta / Wayne Anthony Hector / Liam James Payne / John Ryan / Louis William Tomlinson

    You've gotta help me, I'm losing my mind Keep getting the feeling you want to leave this all behind Thought we were going strong I thought we were holding on Aren't we? No, they don't teach you this in school Now my heart's breaking and I don't know what to do Thought we were going strong Thought we were holding on Aren't we? You and me got a whole lot of history We could be the greatest thing that the world has ever seen You and me got a whole lot of history So don't let it go, we can make some more, we can live forever All of the rumours, all of the fights But we always find a way to make it out alive Thought we were going strong Thought we were holding on Aren't we? You and me got a whole lot of history We could be the greatest thing that the world has ever seen You and me got a whole lot of history So don't let it go, we can make some more, we can live forever Minibars, expensive cars, hotel rooms And new tattoos, good champagne, and private planes But we don't need anything 'Cause the truth is out I realise that without you here like there's just a lie This is not the end This is not the end We can make it you know it, you know You and me got a whole lot of history We could be the greatest thing that the world has ever seen You and me got a whole lot of history So don't let it go, we can make some more, we can live forever You and me got a whole lot of history We could be the greatest thing that the world has ever seen You and me got a whole lot of history So don't let it go, we can make some more, we can live forever So don't let me go So don't let me go We can live forever Baby don't you know Baby don't you know We can live forever

    You've gotta help me, I'm losing my mind Keep getting the feeling you want to leave this all behind Thought we were going strong I thought we were holding on Aren't we? No, they don't teach you this in school Now my heart's breaking and I don't know what to do Thought we were going strong Thought we were holding on Aren't we? You and me got a whole lot of history We could be the greatest thing that the world has ever seen You and me got a whole lot of history So don't let it go, we can make some more, we can live forever All of the rumours, all of the fights But we always find a way to make it out alive Thought we were going strong Thought we were holding on Aren't we? You and me got a whole lot of history We could be the greatest thing that the world has ever seen You and me got a whole lot of history So don't let it go, we can make some more, we can live forever Minibars, expensive cars, hotel rooms And new tattoos, good champagne, and private planes But we don't need anything 'Cause the truth is out I realise that without you here like there's just a lie This is not the end This is not the end We can make it you know it, you know You and me got a whole lot of history We could be the greatest thing that the world has ever seen You and me got a whole lot of history So don't let it go, we can make some more, we can live forever You and me got a whole lot of history We could be the greatest thing that the world has ever seen You and me got a whole lot of history So don't let it go, we can make some more, we can live forever So don't let me go So don't let me go We can live forever Baby don't you know Baby don't you know We can live forever

    You've gotta help me, I'm losing my mind Keep getting the feeling you want to leave this all behind Thought we were going strong I thought we were holding on Aren't we? No, they don't teach you this in school Now my heart's breaking and I don't know what to do Thought we were going strong Thought we were holding on Aren't we? You and me got a whole lot of history We could be the greatest thing that the world has ever seen You and me got a whole lot of history So don't let it go, we can make some more, we can live forever All of the rumours, all of the fights But we always find a way to make it out alive Thought we were going strong Thought we were holding on Aren't we? You and me got a whole lot of history We could be the greatest thing that the world has ever seen You and me got a whole lot of history So don't let it go, we can make some more, we can live forever Minibars, expensive cars, hotel rooms And new tattoos, good champagne, and private planes But we don't need anything 'Cause the truth is out I realise that without you here like there's just a lie This is not the end This is not the end We can make it you know it, you know You and me got a whole lot of history We could be the greatest thing that the world has ever seen You and me got a whole lot of history So don't let it go, we can make some more, we can live forever You and me got a whole lot of history We could be the greatest thing that the world has ever seen You and me got a whole lot of history So don't let it go, we can make some more, we can live forever So don't let me go So don't let me go We can live forever Baby don't you know Baby don't you know We can live forever

    Harold Logan / Loyd Price

    Over and over I tried to prove my love to you Over and over What more can I do Over and over My friends say I'm a fool But over and over I'll be a fool for you 'Cause you've got personality Walk, with personality Talk, with personality Smile, with personality Charm, personality Love, personality And plus you've got A great big heart So over (over and over) and over Oh, I'll be a fool for you Now over (over and over) and over What more can I do? 'Cause you've got personality Walk, with personality Talk, with personality Smile, with personality Charm, with personality Love, with personality And of course you've got A great big heart So over (over and over) and over Oh, I'll be a fool for you Now over (over and over) and over What more can I do? Over and over I said that I loved you Over and over Honey now it's the truth Over and over They still say I'm a fool But over and over I'll be a fool for you 'Cause you've got personality Walk, with personality Talk, with personality Smile, with personality Charm, with personality Love, with personality And of course you've got A great big heart So over (over and over) and over Oh, I'll be a fool for you Now over (over and over) and over What more can I do?

    Over and over I tried to prove my love to you Over and over What more can I do Over and over My friends say I'm a fool But over and over I'll be a fool for you 'Cause you've got personality Walk, with personality Talk, with personality Smile, with personality Charm, personality Love, personality And plus you've got A great big heart So over (over and over) and over Oh, I'll be a fool for you Now over (over and over) and over What more can I do? 'Cause you've got personality Walk, with personality Talk, with personality Smile, with personality Charm, with personality Love, with personality And of course you've got A great big heart So over (over and over) and over Oh, I'll be a fool for you Now over (over and over) and over What more can I do? Over and over I said that I loved you Over and over Honey now it's the truth Over and over They still say I'm a fool But over and over I'll be a fool for you 'Cause you've got personality Walk, with personality Talk, with personality Smile, with personality Charm, with personality Love, with personality And of course you've got A great big heart So over (over and over) and over Oh, I'll be a fool for you Now over (over and over) and over What more can I do?

    Over and over I tried to prove my love to you Over and over What more can I do Over and over My friends say I'm a fool But over and over I'll be a fool for you 'Cause you've got personality Walk, with personality Talk, with personality Smile, with personality Charm, personality Love, personality And plus you've got A great big heart So over (over and over) and over Oh, I'll be a fool for you Now over (over and over) and over What more can I do? 'Cause you've got personality Walk, with personality Talk, with personality Smile, with personality Charm, with personality Love, with personality And of course you've got A great big heart So over (over and over) and over Oh, I'll be a fool for you Now over (over and over) and over What more can I do? Over and over I said that I loved you Over and over Honey now it's the truth Over and over They still say I'm a fool But over and over I'll be a fool for you 'Cause you've got personality Walk, with personality Talk, with personality Smile, with personality Charm, with personality Love, with personality And of course you've got A great big heart So over (over and over) and over Oh, I'll be a fool for you Now over (over and over) and over What more can I do?

    ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪

    Template code

    <!-- NOTES-->
    <!--
    ------------------------------- HEADER ---------------------------
    FIND <header id="app-header" style="background: url(https://images.rpginitiative.com/uploads/monthly_2019_05/header_urban.jpg.b184ec067b49cbd27137ae00229ce862.jpg);">
    REPLACE image link with custom profile field
    
    ------------------- FOOTER ------------------------------
    FIND <a href="#"><i class="fas fa-link"></i> Plotter</a>
    REPLACE # with custom profile field
    
    ----------------------- YOUTUBE -----------------------
    FIND videoId: 'IOX30CHr4JY'
    REPLACE IOX30CHr4JY with custom profile field
    instruct users to go to youtube and get the ID on the end of the URL. 
    eg.
    https://www.youtube.com/watch?v=IOX30CHr4JY
    user is to put IOX30CHr4JY into the custom profile field
    
    -->
    
    <div id="app">
      <header id="app-header" style="background: url(https://images.rpginitiative.com/uploads/monthly_2019_05/header_urban.jpg.b184ec067b49cbd27137ae00229ce862.jpg); background-size: cover">
        Character's Name
      </header>
        <!-- the sidebar -->
        <aside id="app-sidebar">
          <h2>Quick Info</h2>
          <div>
            <h3>Age</h3>
            <p>50<!-- CUSTOM PROFILE FIELD HERE --></p>
          </div>
          <div>
            <h3>Height</h3>
            <p>5'5<!-- CUSTOM PROFILE FIELD HERE --></p>
          </div>
          <div>
            <h3>Header</h3>
            <p>Info<!-- CUSTOM PROFILE FIELD HERE --></p>
          </div>
          <div>
            <h3>Header</h3>
            <p>Info<!-- CUSTOM PROFILE FIELD HERE --></p>
          </div>
        </aside>
        <!-- end sidebar -->
        <!-- the main content -->
        <div id="main-content">
          <input type="radio" name="app-tabs" id="history" checked="checked" />
          <label for="history">History</label>
          <input type="radio" name="app-tabs" id="personality" />
          <label for="personality">Personality</label>
          <input type="radio" name="app-tabs" id="notes" />
          <label for="notes">Character Notes</label>
          <div class="tab-content history">
            <!-- CUSTOM PROFILE FIELD HERE -->
            <div style="font-style: italic">Edward James Drewett / Julian Bunetta / Wayne Anthony Hector / Liam James Payne / John Ryan / Louis William Tomlinson</div>
            <p>You've gotta help me, I'm losing my mind Keep getting the feeling you want to leave this all behind Thought we were going strong
    I thought we were holding on Aren't we? No, they don't teach you this in school Now my heart's breaking and I don't know what to do Thought we were going strong Thought we were holding on Aren't we? You and me got a whole lot of history We could be the greatest thing that the world has ever seen You and me got a whole lot of history So don't let it go, we can make some more, we can live forever All of the rumours, all of the fights But we always find a way to make it out alive Thought we were going strong Thought we were holding on Aren't we? You and me got a whole lot of history We could be the greatest thing that the world has ever seen You and me got a whole lot of history So don't let it go, we can make some more, we can live forever Minibars, expensive cars, hotel rooms
    And new tattoos, good champagne, and private planes But we don't need anything 'Cause the truth is out I realise that without you here like there's just a lie This is not the end This is not the end We can make it you know it, you know You and me got a whole lot of history We could be the greatest thing that the world has ever seen You and me got a whole lot of history So don't let it go, we can make some more, we can live forever You and me got a whole lot of history We could be the greatest thing that the world has ever seen You and me got a whole lot of history So don't let it go, we can make some more, we can live forever So don't let me go So don't let me go We can live forever Baby don't you know
    Baby don't you know We can live forever</p>
            <p>You've gotta help me, I'm losing my mind Keep getting the feeling you want to leave this all behind Thought we were going strong
    I thought we were holding on Aren't we? No, they don't teach you this in school Now my heart's breaking and I don't know what to do Thought we were going strong Thought we were holding on Aren't we? You and me got a whole lot of history We could be the greatest thing that the world has ever seen You and me got a whole lot of history So don't let it go, we can make some more, we can live forever All of the rumours, all of the fights But we always find a way to make it out alive Thought we were going strong Thought we were holding on Aren't we? You and me got a whole lot of history We could be the greatest thing that the world has ever seen You and me got a whole lot of history So don't let it go, we can make some more, we can live forever Minibars, expensive cars, hotel rooms
    And new tattoos, good champagne, and private planes But we don't need anything 'Cause the truth is out I realise that without you here like there's just a lie This is not the end This is not the end We can make it you know it, you know You and me got a whole lot of history We could be the greatest thing that the world has ever seen You and me got a whole lot of history So don't let it go, we can make some more, we can live forever You and me got a whole lot of history We could be the greatest thing that the world has ever seen You and me got a whole lot of history So don't let it go, we can make some more, we can live forever So don't let me go So don't let me go We can live forever Baby don't you know
    Baby don't you know We can live forever</p>
            <p>You've gotta help me, I'm losing my mind Keep getting the feeling you want to leave this all behind Thought we were going strong
    I thought we were holding on Aren't we? No, they don't teach you this in school Now my heart's breaking and I don't know what to do Thought we were going strong Thought we were holding on Aren't we? You and me got a whole lot of history We could be the greatest thing that the world has ever seen You and me got a whole lot of history So don't let it go, we can make some more, we can live forever All of the rumours, all of the fights But we always find a way to make it out alive Thought we were going strong Thought we were holding on Aren't we? You and me got a whole lot of history We could be the greatest thing that the world has ever seen You and me got a whole lot of history So don't let it go, we can make some more, we can live forever Minibars, expensive cars, hotel rooms
    And new tattoos, good champagne, and private planes But we don't need anything 'Cause the truth is out I realise that without you here like there's just a lie This is not the end This is not the end We can make it you know it, you know You and me got a whole lot of history We could be the greatest thing that the world has ever seen You and me got a whole lot of history So don't let it go, we can make some more, we can live forever You and me got a whole lot of history We could be the greatest thing that the world has ever seen You and me got a whole lot of history So don't let it go, we can make some more, we can live forever So don't let me go So don't let me go We can live forever Baby don't you know
    Baby don't you know We can live forever</p>
          </div>
          <div class="tab-content personality">
            <!-- CUSTOM PROFILE FIELD HERE -->
            <div style="font-style:italic">Harold Logan / Loyd Price</div>
            <p>Over and over I tried to prove my love to you Over and over
    What more can I do Over and over My friends say I'm a fool But over and over I'll be a fool for you 'Cause you've got personality Walk, with personality Talk, with personality Smile, with personality Charm, personality Love, personality And plus you've got A great big heart
    So over (over and over) and over Oh, I'll be a fool for you
    Now over (over and over) and over What more can I do? 'Cause you've got personality Walk, with personality Talk, with personality Smile, with personality Charm, with personality Love, with personality And of course you've got A great big heart So over (over and over) and over Oh, I'll be a fool for you Now over (over and over) and over What more can I do?
    Over and over I said that I loved you Over and over Honey now it's the truth Over and over They still say I'm a fool But over and over
    I'll be a fool for you 'Cause you've got personality Walk, with personality Talk, with personality Smile, with personality
    Charm, with personality Love, with personality And of course you've got A great big heart So over (over and over) and over Oh, I'll be a fool for you Now over (over and over) and over What more can I do?</p>
            <p>Over and over I tried to prove my love to you Over and over
    What more can I do Over and over My friends say I'm a fool But over and over I'll be a fool for you 'Cause you've got personality Walk, with personality Talk, with personality Smile, with personality Charm, personality Love, personality And plus you've got A great big heart
    So over (over and over) and over Oh, I'll be a fool for you
    Now over (over and over) and over What more can I do? 'Cause you've got personality Walk, with personality Talk, with personality Smile, with personality Charm, with personality Love, with personality And of course you've got A great big heart So over (over and over) and over Oh, I'll be a fool for you Now over (over and over) and over What more can I do?
    Over and over I said that I loved you Over and over Honey now it's the truth Over and over They still say I'm a fool But over and over
    I'll be a fool for you 'Cause you've got personality Walk, with personality Talk, with personality Smile, with personality
    Charm, with personality Love, with personality And of course you've got A great big heart So over (over and over) and over Oh, I'll be a fool for you Now over (over and over) and over What more can I do?</p>
            <p>Over and over I tried to prove my love to you Over and over
    What more can I do Over and over My friends say I'm a fool But over and over I'll be a fool for you 'Cause you've got personality Walk, with personality Talk, with personality Smile, with personality Charm, personality Love, personality And plus you've got A great big heart
    So over (over and over) and over Oh, I'll be a fool for you
    Now over (over and over) and over What more can I do? 'Cause you've got personality Walk, with personality Talk, with personality Smile, with personality Charm, with personality Love, with personality And of course you've got A great big heart So over (over and over) and over Oh, I'll be a fool for you Now over (over and over) and over What more can I do?
    Over and over I said that I loved you Over and over Honey now it's the truth Over and over They still say I'm a fool But over and over
    I'll be a fool for you 'Cause you've got personality Walk, with personality Talk, with personality Smile, with personality
    Charm, with personality Love, with personality And of course you've got A great big heart So over (over and over) and over Oh, I'll be a fool for you Now over (over and over) and over What more can I do?</p>
          </div>
          <div class="tab-content notes">
            <!-- CUSTOM PROFILE FIELD HERE -->
            ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪
          </div>
        </div>
        <!-- end main content -->
        <!-- the footer -->
        <footer id="app-footer">
          <div id="yt-container">
            <div id="ytplayer"></div>
          </div>
          <div id="app-footer-links">
            <a href="#"><i class="fas fa-link"></i> Plotter</a>
            <a href="#"><i class="fas fa-plus"></i> Wanted Ad</a>
            <a href="#"><i class="fas fa-map-marked"></i> Tracker</a>
            <a href="#"><i class="fas fa-check-square"></i> And another thing</a>
          </div>
          <!-- delete this if you don't need so many links in the footer -->
          <div id="app-footer-links">
            <a href="#"><i class="fas fa-link"></i> Plotter</a>
            <a href="#"><i class="fas fa-plus"></i> Wanted Ad</a>
            <a href="#"><i class="fas fa-map-marked"></i> Tracker</a>
            <a href="#"><i class="fas fa-check-square"></i> And another thing</a>
          </div>
          <!-- end delete all the links -->
        </footer>
      <!-- END FOOTER -->
    </div>
    
    <script>// Load the IFrame Player API code asynchronously.
      var tag = document.createElement('script');
      tag.src = "https://www.youtube.com/player_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    
      // Replace the 'ytplayer' element with an <iframe> and
      // YouTube player after the API code downloads.
      var player;
      function onYouTubePlayerAPIReady() {
        player = new YT.Player('ytplayer', {
          height: '270',
          width: '480',
          color: 'white',
          disablekb: '0',
          videoId: 'IOX30CHr4JY'
        });
      }
    </script>
    
    <!-- the following should go into your CSS -->
    
    <style>/* define grid areas */
    #app-header { grid-area: header }
    #app-sidebar { grid-area: sidebar }
    #main-content { grid-area: main }
    #app-footer { grid-area: footer }
    /* end define grid areas want to shuffle things around? Read about grid here https://css-tricks.com/snippets/css/complete-guide-grid/ */
    
    div#app {
      font-family: sans-serif;
      background: #efefef;
      color: #1a1a1a;
      display: grid;
      grid-template-columns: 15% 22.5% 22.5%;
      grid-template-rows: auto;
      grid-template-areas: 
        "header header header header"
        "sidebar main main main"
        "footer footer footer footer";
      margin: 10px auto
    }
    
    #app-header {
      font-size: 2rem;
      text-align: center;
      text-transform: uppercase;
      text-shadow: 0 0 7px black, 0 0 5px black, 0 0 2px black;
      color: #efefef;
      padding: 3rem;
      margin-bottom: 10px
    }
    
    #app-sidebar {
      top: 5px;
      text-align: center;
      padding: 1%;
      margin-right: 1%
    }
    
    #app-sidebar > * {
      margin: 5px 0
    }
    
    #app-sidebar h3 {
      text-transform: uppercase;
      border-bottom: 1px dotted #ccc
    }
    
    #main-content {
      padding: 10px;
      border-left: 5px solid rgba(0,0,0, .1)
    }
    
    #main-content input { 
      display: none 
    }
    
    #main-content label {
      color: #1a1a1a;
      cursor: default;
      display: inline-block;
      padding: 10px 
    }
    
    #main-content input:not(:checked) + label:hover {
      cursor: pointer
    }
    
    #main-content input:checked + label {
      background: #fefefe;
      border-radius: 5px 5px 0 0
    }
    
    .tab-content {
      display: none
    }
    
    #history:checked ~ .history,
    #personality:checked ~ .personality,
    #notes:checked ~ .notes {
      display: block;
      background: #fefefe;
      padding: 10px
    }
    
    #app-footer {
      background: black;
      margin-top: 10px;
      padding: 10px;
      display: flex;
      color: #ccc
    }
    
    #app-footer a {
      color: #efefef;
      text-decoration: none
    }
    
    #app-footer-links {
      flex-grow: 2;
      flex-basis: calc(100% - 480);
      padding: 10px;
      display: flex;
      flex-wrap: wrap
    }
    
    #app-footer-links a {
      letter-spacing: 1.5px;
      text-transform: uppercase;
      display: block;
      align-self: center;
      width: 100%;
      padding: 10px;
      background: #0a0a0a;
      border: 1px solid black;
      outline: 1px solid #0a0a0a
    }
    
    #app-footer-links a:hover {
      background: black;
      border-color: #0a0a0a;
      outline-color: black
    }
    
    #app-footer-links a i {
      margin-right: 1em
      }
      
      @media screen and (max-width: 767px) {
    	div#app { display: block }
        #app-header { font-size: 1.5rem; padding: 2rem 5px }
        #main-content { border: 0 }
        #main-content label { display: block }
        #main-content input:checked + label { border-radius: 0 }
    	#app-sidebar div { display: inline-block; padding: 0 5px; margin: 0 }
        #app-footer { flex-wrap: wrap }
        div#yt-container { width: 100%; overflow: hidden }
        iframe#ytplayer { width: 100% }
      }
    </style>



    User Feedback

    Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.

    Guest

    Huskerdust

       1 of 1 member found this review helpful 1 / 1 member

    I love profile applications! 

    Response from the author:

    Profile applications are the future!

    Share this review


    Link to review

×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.