Remove side code panel?

[lborruto]

Sorry for opening this, but is it possible to remove the side code panel?
I read some tricks to do it on this github, but it's seems outdated.

looking like this:

Thanks for any help!

[MasterOdin]

There is not a toggle for this, no, so you'll need to edit some amount of the layout stuff to accomplish this.

Here's a patch that gets you there (more or less) with one language support (the first one listed in the index.md file):

diff --git a/source/layouts/layout.erb b/source/layouts/layout.erb
index 29b80d7..ff3d236 100644
--- a/source/layouts/layout.erb
+++ b/source/layouts/layout.erb
@@ -52,17 +52,6 @@ under the License.
     </a>
     <div class="toc-wrapper">
       <%= image_tag "logo.png", class: 'logo' %>
-      <% if language_tabs.any? %>
-        <div class="lang-selector">
-          <% language_tabs.each do |lang| %>
-            <% if lang.is_a? Hash %>
-              <a href="#" data-language-name="<%= lang.keys.first %>"><%= lang.values.first %></a>
-            <% else %>
-              <a href="#" data-language-name="<%= lang %>"><%= lang %></a>
-            <% end %>
-          <% end %>
-        </div>
-      <% end %>
       <% if current_page.data.search %>
         <div class="search">
           <input type="text" class="search" id="input-search" placeholder="Search">
@@ -94,23 +83,9 @@ under the License.
       <% end %>
     </div>
     <div class="page-wrapper">
-      <div class="dark-box"></div>
       <div class="content">
         <%= page_content %>
       </div>
-      <div class="dark-box">
-        <% if language_tabs.any? %>
-          <div class="lang-selector">
-            <% language_tabs.each do |lang| %>
-              <% if lang.is_a? Hash %>
-                <a href="#" data-language-name="<%= lang.keys.first %>"><%= lang.values.first %></a>
-              <% else %>
-                <a href="#" data-language-name="<%= lang %>"><%= lang %></a>
-              <% end %>
-            <% end %>
-          </div>
-        <% end %>
-      </div>
     </div>
   </body>
 </html>
diff --git a/source/stylesheets/screen.css.scss b/source/stylesheets/screen.css.scss
index 83da68c..59b7b10 100644
--- a/source/stylesheets/screen.css.scss
+++ b/source/stylesheets/screen.css.scss
@@ -327,7 +327,6 @@ html, body {
   }

   &>h1, &>h2, &>h3, &>h4, &>h5, &>h6, &>p, &>table, &>ul, &>ol, &>aside, &>dl {
-    margin-right: $examples-width;
     padding: 0 $main-padding;
     box-sizing: border-box;
     display: block;
@@ -516,10 +515,6 @@ html, body {
     color: #fff;

     margin: 0;
-    width: $examples-width;
-
-    float:right;
-    clear:right;

     box-sizing: border-box;

[lborruto]

There is not a toggle for this, no, so you'll need to edit some amount of the layout stuff to accomplish this.

Here's a patch that gets you there (more or less) with one language support (the first one listed in the index.md file):

diff --git a/source/layouts/layout.erb b/source/layouts/layout.erb
index 29b80d7..ff3d236 100644
--- a/source/layouts/layout.erb
+++ b/source/layouts/layout.erb
@@ -52,17 +52,6 @@ under the License.
     </a>
     <div class="toc-wrapper">
       <%= image_tag "logo.png", class: 'logo' %>
-      <% if language_tabs.any? %>
-        <div class="lang-selector">
-          <% language_tabs.each do |lang| %>
-            <% if lang.is_a? Hash %>
-              <a href="#" data-language-name="<%= lang.keys.first %>"><%= lang.values.first %></a>
-            <% else %>
-              <a href="#" data-language-name="<%= lang %>"><%= lang %></a>
-            <% end %>
-          <% end %>
-        </div>
-      <% end %>
       <% if current_page.data.search %>
         <div class="search">
           <input type="text" class="search" id="input-search" placeholder="Search">
@@ -94,23 +83,9 @@ under the License.
       <% end %>
     </div>
     <div class="page-wrapper">
-      <div class="dark-box"></div>
       <div class="content">
         <%= page_content %>
       </div>
-      <div class="dark-box">
-        <% if language_tabs.any? %>
-          <div class="lang-selector">
-            <% language_tabs.each do |lang| %>
-              <% if lang.is_a? Hash %>
-                <a href="#" data-language-name="<%= lang.keys.first %>"><%= lang.values.first %></a>
-              <% else %>
-                <a href="#" data-language-name="<%= lang %>"><%= lang %></a>
-              <% end %>
-            <% end %>
-          </div>
-        <% end %>
-      </div>
     </div>
   </body>
 </html>
diff --git a/source/stylesheets/screen.css.scss b/source/stylesheets/screen.css.scss
index 83da68c..59b7b10 100644
--- a/source/stylesheets/screen.css.scss
+++ b/source/stylesheets/screen.css.scss
@@ -327,7 +327,6 @@ html, body {
   }

   &>h1, &>h2, &>h3, &>h4, &>h5, &>h6, &>p, &>table, &>ul, &>ol, &>aside, &>dl {
-    margin-right: $examples-width;
     padding: 0 $main-padding;
     box-sizing: border-box;
     display: block;
@@ -516,10 +515,6 @@ html, body {
     color: #fff;

     margin: 0;
-    width: $examples-width;
-
-    float:right;
-    clear:right;

     box-sizing: border-box;

Thanks you for your message,
I'm a beginner sorry, could you explain more on how I can achieve this?

[MasterOdin]

The above was a git patch that would remove the necessary lines to get what you wanted. I've also attached it here to make it a bit easier to save:
sidebar.patch.txt

You would download the file and then within your repo do git apply < sidebar.patch.txt which will change source/layouts/layout.erb and source/stylesheets/screen.css.scss above.

Alternatively, you could open the files yourself and delete those lines that are marked with a - above.

[lborruto]

The above was a git patch that would remove the necessary lines to get what you wanted. I've also attached it here to make it a bit easier to save:
sidebar.patch.txt

You would download the file and then within your repo do git apply < sidebar.patch.txt which will change source/layouts/layout.erb and source/stylesheets/screen.css.scss above.

Alternatively, you could open the files yourself and delete those lines that are marked with a - above.

It worked! Do you know if it's possible to modify the text align? I mean, is it possible to make some text center align and another one right align?

[MasterOdin]

You can modify the source/stylesheets/screen.css.scss file to alter specific element style there. Markdown also allows adding HTML tags directly so you could do something like:

<div style='text-align: right'>This text will appear on right edge</div>

as well (with whatever style you want). If you find using the same bunch of style attributes, you may consider adding them into a scss or css file for easier reusability.