FMCodes • All-in-one Webmasters community
Would you like to react to this message? Create an account in a few clicks or log in to continue.

You are not connected. Please login or register

FMCodes • All-in-one Webmasters community  » Coding Community » Javascript & jQuery » Javascript & jQuery Tutorials » Create customized quote

Create customized quote

4 posters
Valid
Guest
  • Guest

    Team contributor
    You have been part of the community team
    Active Contributor
    The user has wrote more than 100 posts and comments
    Post lover
    You have liked more than 50 posts!
    Merry Christmas 2022
    Thanks for having been with us during Christmas season!
    Passioned user
    You have participated in 50+ different topics, a true fan!
    Forum Writer
    You have opened more than 20 topics on the forum
    Members Guru
    You have received more than 50 likes on your posts. Our members really what you have to say!
      Posts : 556
      Points : 22220
    CREATE CUSTOMIZED QUOTE


    Overview

    Description

    In this tutorial you will learn how to add button inside sceditor and by simple one click get generated table where you only have to change the text of the quote and image of the author. How cool is that?

    Demonstration

    Create customized quote Ezgif-com-gif-maker

    Technical limitations

    › This tutorial is dedicated to the forums powered by Forumotion free forum service
    › It only works with PhpBB3/PhpBB2/PunBB/Invision Forumotion forums' versions

    Installation

    Introduction

    Instalation consists of two parts. First one is CSS and second one is javascript. Let's role with css first.

    CSS

    In order to design the style of the resource, you need to go towards Administration Control Panel (ACP)   Display CSS & Colors CSS Style Sheet and add append the following code:

    You need to reply to the topic in order to see the code resources



    CSS Customization

    Now, here you can change colors for some specific parts of the quote box.
    For the first background color (darker green), locate:
    Code:
    .parentSpecialQuote
    and there change property
    Code:
    background-color
    . Ignore the fact it says hsl(), you can use hexdecimal value.

    Next thing to change is the inner background color of quote (where the text is) by targeting
    Code:
    .specialQuote
    and once more, changing the background-color of it.

    Also, if you would like to change the look of the image, not to be circle shape, you can always target
    Code:
    .parentSpecialQuote .author img:nth-child(1)
    and remove border-radius:50%

    Javascript & jQuery

    For the next step you need to go towards Administration Control Panel (ACP)   Modules HTML & Javascript Javascript codes management and create a new code - upon verifying that Javascript codes management is enabled.

    • Title: Add special quote in editor
    • Where: In the topics
    • Code:

      You need to reply to the topic in order to see the code resources




    Javascript Customization

    Here, there are few thing you can alter. The image that shows quote button is inside variable
    Code:
    arrowImg
    . Default image in case person don't change the author image is inside variable:
    Code:
    defaultImg
    .
    Variable
    Code:
    quoteBBTable
    generates the complete BB code inside text editor for user to complete.

    Final considerations

    It is extremely important to make your forum width to 70% so that all quote items stay well positioned. If you alter it, it will make everything stretched. In case you want to have your own forum width, you will have to customize CSS so that width is not calculated in percentage for table.

    Notes

    Approved bySystem32
    Approved on January 19th 2023
    Tested on Google Chrome
    Difficulty level  /   
    Source FMcodes

    This resource belong to this community unless differently stated.
    No reproduction possible without our agreement, in accordance with article L122-1 of the CPI.

    Valid
    sivastar


    • Community veteran
      You belong to this community since its ancient time
      Active poster
      The user has wrote more than 50 posts
      Passioned user
      You have participated in 50+ different topics, a true fan!
        Posts : 65
        Points : 93339
      Thanks for sharing

      Valid
      hoanglongnhatbao


      • Community veteran
        You belong to this community since its ancient time
        Passioned user
        You have participated in 50+ different topics, a true fan!
        Active Contributor
        The user has wrote more than 100 posts and comments
        Post lover
        You have liked more than 50 posts!
        Members Guru
        You have received more than 50 likes on your posts. Our members really what you have to say!
          Posts : 145
          Points : 93807
        Very good @niko

        Valid
        Sir Chivas


        • Community veteran
          You belong to this community since its ancient time
          Passioned user
          You have participated in 50+ different topics, a true fan!
          Forumotion expert
          This user is an expert with Forumotion free forum hosting
          10th Anniversary (Grand Re-open)
          Thanks for being part of our grand re-opening
          Active Contributor
          The user has wrote more than 100 posts and comments
            Posts : 113
            Points : 94945
          Awesome I've always wanted to meddle with the quote.

          Topic Actions

          Sponsored




          FMCodes • All-in-one Webmasters community  » Coding Community » Javascript & jQuery » Javascript & jQuery Tutorials » Create customized quote

          ©phpBB | Contact | Report an abuse | Cookies