Change the location of the 'submit a request' button

Thanks 1263169183150 - that was incredibly helpful! Much 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 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!

:)

Perfect, thank you so much!

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>

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!

Hi Sierra Collins,

On home_page or category_page??

Share a screenshot please exactly where you want to.

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.