Help Center : Adding article in white space beside "Submit Request field"

17 Kommentare

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

    Hey Salim, use the below code to add the promoted article beside the form:

    Code to be embedded: 

    {{#if promoted_articles}}
        <section class="section articles">
         <h2>{{t 'promoted_articles'}}</h2>
          <ul class="article-list promoted-articles">
            {{#each promoted_articles}}
            <li class="promoted-articles-item">
              <a href="{{url}}" title="{{title}}">
                {{title}}
              </a>
            </li>
            {{/each}}
          </ul>
        </section>
        {{/if}}
      





    Screenshot for the same:







    Output:


     

     

    If any confusion, let me know :)

     

    Thanks

    Team

    0
  • Salim Moumouni

    Hi Ifra Saqlain

    Thank you for the reply and solution. I tried adding it at the end of the following templates but it did not work. Am I doing it wrong? (removed them in the image)

    0
  • Salim Moumouni

    Update: It shows but it shows like this:

    0
  • Salim Moumouni

    See code below Ifra Saqlain

    <div class="hero-pages">
       <div class="container">
          <nav class="sub-nav">
             {{breadcrumbs}}
             <div class="search-container">
                {{search submit=false}}
             </div>
          </nav>
          <h1 class="request-heading">
             {{t 'submit_a_request'}}
             <span class="follow-up-hint">
             {{follow_up}}
             </span>
          </h1>
       </div>
    </div>
    <div class="form-cont">
       <div id="main-content" class="form">
          {{request_form wysiwyg=true}}
       </div>
      
      
     {{#if promoted_articles}}
        <section class="section articles">
         <h2>{{t 'promoted_articles'}}</h2>
          <ul class="article-list promoted-articles">
            {{#each promoted_articles}}
            <li class="promoted-articles-item">
              <a href="{{url}}" title="{{title}}">
                {{title}}
              </a>
            </li>
            {{/each}}
          </ul>
        </section>
        {{/if}}
      
    </div>
    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    @Salim, replace your code with the given below, new_request_page.hbs :-

    <div class="hero-pages">
       <div class="container">
          <nav class="sub-nav">
             {{breadcrumbs}}
             <div class="search-container">
                {{search submit=false}}
             </div>
          </nav>
         </div>
    </div>
    <div class="container req-form">
      <div class="form-cont">
          <h1 class="request-heading">
             {{t 'submit_a_request'}}
             <span class="follow-up-hint">
             {{follow_up}}
             </span>
          </h1>
       


       <div id="main-content" class="form">
          {{request_form wysiwyg=true}}
       </div>
      </div>
      
      
     {{#if promoted_articles}}
        <section class="section promoted-articles">
         <h1>{{t 'promoted_articles'}}</h1>
          <ul class="article-list promoted-articles">
            {{#each promoted_articles}}
            <li class="promoted-articles-item">
              <a href="{{url}}" title="{{title}}">
                {{title}}
              </a>
            </li>
            {{/each}}
          </ul>
        </section>
        {{/if}}
      </div>

     

     

    Go to your style.css file and copy paste the CSS code at the bottom area:-

    .container.req-form{
      display: flex;
        flex-direction: column;
    }

    .section.promoted-articles {
          display: flex;
        flex-direction: column;
        width: 100%;
        flex: 1 0 100%;
        margin-left: 0;
      margin-top:40px;
    }

    .promoted-articles .promoted-articles-item{
      width:100%;
    }

    @media(min-width:992px){
      .section.promoted-articles {
        width: 40%;
        flex: 1 0 40%;
        margin-left: 40px;
        margin-top:0;
    }
      .container.req-form{
        flex-direction: row;
    }
    }

     

     

    Output is:-

     

     

    Thanks

    0
  • Salim Moumouni

    Hi Ifra Saqlain 

    I've followed the instructions, it's changed however it still shows at the bottom

    0
  • Salim Moumouni

    It also updated the format of my main page promoted article so I removed the code from style.css

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

    Update your CSS code:

     

    .container.req-form{
      display: flex;
        flex-direction: column;
    }

    .req-form .section.promoted-articles {
          display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
        flex: 1 0 100%;
        margin-left: 0;
      margin-top:40px;
    }

    .req-form .promoted-articles-item{
          width: 100%;
        flex: 1 0 100%;
    }

    @media(min-width:992px){
      .req-form .section.promoted-articles {
        width: 40%;
        flex: 1 0 40%;
        margin-left: 40px;
        margin-top:0;
    }
      .container.req-form{
        flex-direction: row;
    }
    }
    0
  • Salim Moumouni

    Still no luck, I copied the above code at the end of the style.css but the issue persists. Ifra Saqlain

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

    @Salim, did you copy and paste your HBS code on new request page ? if not , do this.

     

    Remove your new_request_page.hbs code and copy-paste the below code, I have added some divs with the classes in your code which I have given above but you didn't do copy-paste.

    <div class="hero-pages">
       <div class="container">
          <nav class="sub-nav">
             {{breadcrumbs}}
             <div class="search-container">
                {{search submit=false}}
             </div>
          </nav>
         </div>
    </div>
    <div class="container req-form">
      <div class="form-cont">
          <h1 class="request-heading">
             {{t 'submit_a_request'}}
             <span class="follow-up-hint">
             {{follow_up}}
             </span>
          </h1>
       


       <div id="main-content" class="form">
          {{request_form wysiwyg=true}}
       </div>
      </div>
      
      
     {{#if promoted_articles}}
        <section class="section promoted-articles">
         <h1>{{t 'promoted_articles'}}</h1>
          <ul class="article-list promoted-articles">
            {{#each promoted_articles}}
            <li class="promoted-articles-item">
              <a href="{{url}}" title="{{title}}">
                {{title}}
              </a>
            </li>
            {{/each}}
          </ul>
        </section>
        {{/if}}
      </div>

     

    Now, add the given CSS code:

    .container.req-form{
      display: flex;
        flex-direction: column;
    }

    .req-form .section.promoted-articles {
          display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
        flex: 1 0 100%;
        margin-left: 0;
      margin-top:40px;
    }

    .req-form .promoted-articles-item{
          width: 100%;
        flex: 1 0 100%;
    }

    @media(min-width:992px){
      .req-form .section.promoted-articles {
        width: 40%;
        flex: 1 0 40%;
        margin-left: 40px;
        margin-top:0;
    }
      .container.req-form{
        flex-direction: row;
    }
    }
    0
  • Salim Moumouni

    Hello , I copied the above snippet you provided and the below is the outcome. Ifra Saqlain

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

    I don't have this kind of issue in the Copenhagen theme. Can share your HC public URL here? so I can figure it out.

    0
  • Salim Moumouni

    The link is https://boat-ed.zendesk.com/hc/en-us I am using the Havelock theme Ifra Saqlain

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

    Okay,

    Remove your previous added CSS code (ALL) which I shared above and add the below code:

    .container.req-form{
      display: flex;
        flex-direction: column;
    }

    .req-form .section.promoted-articles{
          display: block;
        width: 100%;
        margin-left: 0;
      margin-top:40px;
    }

    .req-form .promoted-articles-item{
          width: 100%;
        flex: 1 0 100%;
    }

    @media(min-width:992px){
      .req-form .section.promoted-articles{
        width: 40%;
        margin-left: 40px;
        margin-top:0;
    }
      .container.req-form{
        flex-direction: row;
    }
    }

     

    and let me know.

     

     

    Thanks

    0
  • Salim Moumouni

    You're awesome, Thank you! Looks much better now! One last thing, any way to get point form like your very first image? Ifra Saqlain

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

    Like this one:-

     

     

     

    Bullets in the article, add the given CSS at the bottom on style.css file:

    .req-form .section.promoted-articles ul {
      list-style: disc;
        padding-left: 16px;
    }
    0
  • Salim Moumouni

    Success, thank you very much for all your help!

    0

Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.

Powered by Zendesk