HomeHome  
  • WelcomeWelcome  
  • Events  
  • PublicationsPublications  
  • FAQFAQ  
  • SearchSearch  
  • MemberlistMemberlist  
  • UsergroupsUsergroups  
  • RegisterRegister  
  • Log inLog in  
  • You are not connected. Please login or register


    Frame the profile fields

    • Veteran staff member

        Reputation : 11
        Registered on : 2012-03-27
        Posts : 116
      Frame the profile fields

      Description


      Hello guys,
      with this tutorial you will able to frame the profile fields next to a post. You have to edit the templates and you have to add a code in your personal css stylesheet.

      Set up


      First you have to go here: ACP->Display->Templates->General->viewtopic_body
      There you have to search the following appointment.
      Code:
      {postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}
      Than you have to add these div-tags in front of and behind the variables:
      Code:
      <div class="frame"></div>
      Now it have to looks like that:
      Code:
      <div class="frame">{postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}</div>

      Than you have to go here: ACP->Display->Pictures&Colors->Colors->CSS Stylesheet
      Here you must add this css code:
      Code:
      .frame{
      background-color:#FF0000;
      border-bottom-color:#FF0000;
      border-style:solid;
      border-bottom-width:2px;
      border-left-color:#FF0000;
      border-left-width:1px;
      border-right-color:#FF0000;
      border-right-width:2px;
      border-top-color:#FF0000;
      border-top-width:1px;
      margin-bottom:3px;
      padding: 3px 3px 3px 3px;
      }

      Customize the tutorial


      You only have to adapt the allegations to your wishs, like colors, widths and heights and so on ... You also can change the name of the div class in the css and in your template.

      Demonstration




      Technical problems



      The tutorial was tested on this forum and with all browsers; If you notice that the tutorial doesn't work for a browser or for a version of forum (PhpBB2, PhpBB3, PunBB, Invision) contact an administrator and we will fill this field with your reporting.

      Thanks, the staff
      For every problem or question please, contact us in the section Support for the tutorials, The staff will answer you as soon as it is possible...

      Friendly,
      The team of the Forum of Codes.



      Last edited by Cyborg112233 on Sun Apr 01, 2012 4:37 pm; edited 1 time in total

      • Co-Founder

          Reputation : 38
          Registered on : 2012-02-26
          Posts : 284
        Tutorial accepted

        avatar
        • Administrator

            Reputation : 315
            Registered on : 2012-02-22
            Posts : 2317
            School of codes courses: coming soon
          Very good! yes



          Niko wants you in the team Guest

          Community manager and Administrator at Forumattivo.com

          • Veteran staff member

              Reputation : 11
              Registered on : 2012-03-27
              Posts : 116
            @Niko wrote:Very good! yes
            Thank you very much. :)

            avatar
            • Veteran staff member

                Reputation : 14
                Registered on : 2012-02-25
                Posts : 98
              Bravo, nice guide;)

              • Veteran staff member

                  Reputation : 11
                  Registered on : 2012-03-27
                  Posts : 116
                Thanks. :)

                avatar
                • ***


                    Reputation : 1
                    Registered on : 2014-12-11
                    Posts : 49
                    Love Fmcodes
                  Very nice code!


                  YOUR BANNER HERE
                  728x90
                  DMCA.com Protection Status
                  Free forum | © PunBB | Free forum support | Contact | Report an abuse | Free forum