Show sidebar on Web Pages

Frappe Framework App Development
1

Hi,

Is there any way to show sidebar on custom Web Pages that I create on /www folder ?

Thanks

2

Hi @aldoblack,

if you create the web page from the webpage function, there is a function for the sidebar. Simply define your sidebar and use it.

Create a new web page from Website

grafik
grafik1188Ă—596 22.7 KB

Save webpage and create a sidebar definition
grafik
grafik1177Ă—567 22.8 KB

Define the sidebar and save
grafik
grafik1191Ă—390 17 KB

Make sure to check “Show sidebar” and “Published” and check the new site…
grafik
grafik1191Ă—444 14.6 KB

Hope this helps…

3

I wanted to do this in code, not in ERPNext. But Thanks anyway,

4

Hi @aldoblack,

in that case, that might be helpful (put inside the <div class="container">):

<div class="page-container" id="page-website-with-sidebar" 
   data-path="website-with-sidebar" data-doctype="Web Page">
  <div class="sidebar-block">
    <div class="web-sidebar">
      <!-- <div class="your-account-info-sidebar">
      <div class="row">
        <div class="col-xs-2">
          <span class="user-image-sidebar"></span>
        </div>
        <div class="col-xs-10">
          <div class="web-sidebar-user">Max Power</div>
            <a href="/?cmd=web_logout">
              <div class="text-muted small">Logout</div>
            </a>
          </div>
        </div>
      </div> -->
      <div class="sidebar-items">
        <ul class="list-unstyled">	
          <li class="sidebar-item">
            <a href="/blog" class="gray ">Blog</a>
          </li>	
            <li class="sidebar-item">
              <a href="/me">My Account</a>
            </li>	
          </ul>
        </div>
      </div> 
    </div>
    <div class="page-content with-sidebar">
      <div class="page-content-wrapper">
        <div class="row page-head">
          <div class='col-sm-12'></div>
          <div class="col-sm-8 col-xs-6">
            <h1>Website with sidebar</h1>
          </div>
          <div class="col-sm-4 col-xs-6"></div>
        </div>
        <div class="page_content">
          <div class="webpage-content">
            <article class="web-page-content" id="website-with-sidebar" style="text-align: Left">
This is a webpage with a sidebar<br>
            </article>
          </div>
        </div>
      </div>
      <!-- sidebar ends -->
    </div>
  </div>
</div>

Hope this helps.

5

All you have to do is just put

context.show_sidebarar = 1

on python code of web page and it show automatically.

1 Like