Change the location of the 'submit a request' button

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

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.

@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

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. 

Hi Sierra Collins,

On home_page or category_page??

Share a screenshot please exactly where you want to.

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!

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>

Perfect, thank you so much!

:)

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!

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

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