• Ifra Saqlain

  • 25 juin 2022 04:38
  • Modifié

  Community Moderator

  

  

  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

• Csenge Orban

  • 27 juin 2022 07:41

  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.

  

   

• Ifra Saqlain

  • 28 juin 2022 05:21
  • Modifié

  Community Moderator

  

  

  @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

• Sierra Collins

  • 15 juillet 2022 21:18

  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. 

• Ifra Saqlain

  • 16 juillet 2022 04:27
  • Modifié

  Community Moderator

  

  

  Hi Sierra Collins,

  On home_page or category_page??

  Share a screenshot please exactly where you want to.

   

• Csenge Orban

  • 25 juillet 2022 13:37

  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!

• Ifra Saqlain

  • 25 juillet 2022 18:11

  Community Moderator

  

  

  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>

• Csenge Orban

  • 27 juillet 2022 07:11

  Perfect, thank you so much!

• Ifra Saqlain

  • 27 juillet 2022 12:36

  Community Moderator

  

  

  :)

• Diane Schramke

  • 22 août 2022 18:14

  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!

• Ifra Saqlain

  • 23 août 2022 18:43
  • Modifié

  Community Moderator

  

  

  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

   

• Diane Schramke

  • 24 août 2022 18:58

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

Vous devez vous connecter pour laisser un commentaire.