Change the location of the 'submit a request' button

12 Commentaires

  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    Hey Csenge Orban,

    Follow the below steps to move the 'submit a request' button to the hero section.

    i). Currently, the button is on the header file.

     

     

    ii). And currently, your hero section is like on the homepage.

     

    iii). Cut that button from the header file and paste that here,

     

    iv).Output

     

     

    v). If the 'submit a request' button helper two times in your header file, remove that second one if you don't want to show that button in the header on mobile devices.

     

    Thanks

    Team

    0
  • Csenge Orban

    Hi Diziana,

    thank you for your quick response and help.

    It worked, but the button is currently displayed extremely small (See screenshot below). Where can I customize the 'Submit a request' button? I cant find the class 'submit-a-request' in the style.css file.

     

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    @Csenge Orban, remove the button tag from the helper:-

     

    Current:

     <button>{{link 'new_request' class='submit-a-request'}}</button>

     

     

     

    Add only helper:

    {{link 'new_request' class='submit-a-request'}}

     

     

     

    Now it has fixed, when you would choose end_user it would be shown else would be hidden.

     

    User role: end_user

     

     

     

    User role:-  Agent

     

     

    Thanks

    1
  • Sierra Collins

    This was really helpful! Can you share how we would move the submit a request button to show above the categories? The customer would actually like to move both the "Submit a request" button and "My activities" button above their categories in the Help Center. 

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    Hi Sierra Collins,

    On home_page or category_page??

    Share a screenshot please exactly where you want to.

     

    0
  • Csenge Orban

    Hi Ifra,

    I have added the "Submit a request" and "My activities" to the home_page tab in the hero inner section. How can I change the name of the hyperlink? Instead of "My activities" I want to display it as "My Request". 

    This is currently my code: 

    <section id="main-content" class="section hero">
      <div class="hero-inner">
        {{link 'new_request' class='submit-a-request'}} 
        <br>
        <br>
        <br>
        <br>
        {{link "my_activities" class="my_requests"}}
      </div>
    </section>

    Thank you for your help in advance!

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    Use the code below:

      <section id="main-content" class="section hero">
      <div class="hero-inner">
        {{link 'new_request' class='submit-a-request'}} 
        <br>
        <br>
        <br>
        <br>
      {{#link "my_activities" class="my_requests"}} My Requests {{/link}}
      </div>
    </section>
    0
  • Csenge Orban

    Perfect, thank you so much!

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    :)

    0
  • Diane S.

    Thanks so much for the helpful code to replace the search bar with the Submit a Request button.

    However, I would like to customize the appearance of the new Submit a Request (or Submit a Ticket, as I have retitled it) button. Ideally I would like it to mirror the appearance of the category/section links, but if that is not possible I would at minimum like it to be larger and be able to change the color of the font and outline of the box to stand out against our Hero image, without affecting the categories/sections.

    See screenshot - the Submit a Ticket button is barely visible because the text and border are the same dark grey as the buttons below, and the button is significantly smaller.

    Using the Copenhagen theme, version 2.16.1.

    Current code in home_page.hbs for the hero section is:

    <section id="main-content" class="section hero">
      <div class="hero-inner">
        {{link 'new_request' class='submit-a-request button'}}
      </div>
    </section>

    Removing the button tage on the submit-a-request class results in just the plain text link, which is also not what we want.

    Any suggestions appreciated!

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    Hi Diane Schramke, do the following:-

    i). Copy the given code and paste to the style.css file at the bottom.

    .submit-a-request.hero-section {
        padding: 15px 35px;
        font-size: 20px;
        color: #fff;
        font-weight: 600;
        border: 1px solid #fff;
        border-width: 2px;
    }
    .submit-a-request.hero-section:hover {
      text-decoration: none;
    background-color: yellow; /*Hover button background-color */
     border-color: yellow; /*Hover button border-color */
    }

    a.submit-a-request.hero-section:visited{
      color: #fff;
    }


    Screenshot for the same:-

     

     

    ii). Change the name of button class, remove button and add hero-section name

     

    Output: 

     

    Before mouse hover 

     

     

    After mouse hover

     

     

     

    iii). you can change the hover color of button here. 

    .submit-a-request.hero-section:hover {
     text-decoration: none;
    background-color: yellow;   /*Hover button background-color */
     border-color: yellow;          /*Hover button border-color */
    }

     

    Remove yellow and add yours whatever you want.

    And, if you don't need to add hover background-color in button then remove these both properties.

     

    After removing:

    .submit-a-request.hero-section:hover {
     text-decoration: none;
    }

     

    Thanks

     

    1
  • Diane S.

    Thanks Ifra Saqlain - that was incredibly helpful! Much appreciated. 

    0

Vous devez vous connecter pour laisser un commentaire.

Réalisé par Zendesk