all atb changes
This commit is contained in:
Joey Kimsey
43
app/plugins/bookmarks/views/tutorials/brave/export.html
Normal file
43
app/plugins/bookmarks/views/tutorials/brave/export.html
Normal file
@ -0,0 +1,43 @@
|
||||
<section class="container my-5">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body context-main-bg">
|
||||
<h2 class="card-title text-center mb-4">How to Export bookmarks from Brave</h2>
|
||||
{tutorialCrumbs}
|
||||
<hr>
|
||||
<p class="card-text">
|
||||
Exporting your bookmarks is lightning fast and simple inside of brave.
|
||||
</p>
|
||||
<h5 class="mt-4">Step 1: open the main application menu </h5>
|
||||
<p class="card-text">
|
||||
Simply left-click these three lines on the right side of your main toolbar.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/brave/settings.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
|
||||
</div>
|
||||
<h5>Step 2: Open the Bookmark Manager</h5>
|
||||
<p class="card-text">
|
||||
In the list, hover over <strong>Bookmarks and Lists</strong> then select <strong>Bookmark Manager</strong>.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/brave/bookmark-manager.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
<h5>Step 2: Open the Export Menu</h5>
|
||||
<p class="card-text">
|
||||
On this page, in the top right, you should see another set of three dots, click these.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/brave/bookmark-menu.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
<p class="card-text">
|
||||
From this list, select <strong>Export Bookmarks</strong>.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/brave/export.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
|
||||
<p class="card-text">
|
||||
Finally, save the <strong>.html</strong> file somewhere easy to access when you use the <a href="/bookmarks/import" class="text-decoration-none atb-green">imports</a> feature.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
45
app/plugins/bookmarks/views/tutorials/brave/import.html
Normal file
45
app/plugins/bookmarks/views/tutorials/brave/import.html
Normal file
@ -0,0 +1,45 @@
|
||||
<section class="container my-5">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body context-main-bg">
|
||||
<h2 class="card-title text-center mb-4">How to Import bookmarks in Brave</h2>
|
||||
{tutorialCrumbs}
|
||||
<hr>
|
||||
<p class="card-text">
|
||||
Importing your bookmarks from AllTheBookmarks is lightning fast and simple inside of brave.
|
||||
</p>
|
||||
<h5 class="mt-4">Step 1: open the main application menu </h5>
|
||||
<p class="card-text">
|
||||
Simply left-click these three lines on the right side of your main toolbar.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/brave/settings.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
|
||||
</div>
|
||||
<h5>Step 2: Open the Bookmark Manager</h5>
|
||||
<p class="card-text">
|
||||
In the list, hover over <strong>Bookmarks and Lists</strong> then select <strong>Bookmark Manager</strong>.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/brave/bookmark-manager.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
<h5>Step 2: Open the Import Menu</h5>
|
||||
|
||||
<p class="card-text">
|
||||
On this page, in the top right, you should see another set of three dots, click these.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/brave/bookmark-menu.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
|
||||
<p class="card-text">
|
||||
From this list, select <strong>Import Bookmarks</strong>.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/brave/import.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
|
||||
<p class="card-text">
|
||||
Finally, select the <strong>.html</strong> file you saved when using the <a href="/bookmarks/export" class="text-decoration-none atb-green">exports</a> feature.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
36
app/plugins/bookmarks/views/tutorials/brave/pin.html
Normal file
36
app/plugins/bookmarks/views/tutorials/brave/pin.html
Normal file
@ -0,0 +1,36 @@
|
||||
<section class="container my-5">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body context-main-bg">
|
||||
<h2 class="card-title text-center mb-4">How to pin the extension to your toolbar in Brave</h2>
|
||||
{tutorialCrumbs}
|
||||
<hr>
|
||||
<div class="alert alert-success w-100 text-center" role="alert">
|
||||
If you have not already installed the AllTheBookmarks Brave extension, you can find it in the
|
||||
<a href="/brave" class="text-decoration-none text-primary" target="_blank">Chrome Web Store</a>.
|
||||
</div>
|
||||
<p class="card-text">
|
||||
Once installed, you can add the extension to your brave toolbar with just a few easy steps.
|
||||
</p>
|
||||
<h5 class="mt-4">Step 1: Find the extensions icon on your toolbar.</h5>
|
||||
<p class="card-text">
|
||||
It should look like this:
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/brave/extensions-icon.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
|
||||
</div>
|
||||
<h5>Step 2: Left click this icon and a list of your currently installed extensions should show.</h5>
|
||||
<p class="card-text">
|
||||
Next to AllTheBookmarks, on the right you should see a pin icon, click this.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/brave/pin.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
<p class="card-text">
|
||||
Once pinned, you should see the AllTheBookmarks icon on the toolbar.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/brave/pinned.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
34
app/plugins/bookmarks/views/tutorials/brave/settings.html
Normal file
34
app/plugins/bookmarks/views/tutorials/brave/settings.html
Normal file
@ -0,0 +1,34 @@
|
||||
<section class="container my-5">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body context-main-bg">
|
||||
<h2 class="card-title text-center mb-4">How to Access Extension Settings in Brave</h2>
|
||||
{tutorialCrumbs}
|
||||
<hr>
|
||||
<div class="alert alert-success w-100 text-center" role="alert">
|
||||
If you have not already installed the AllTheBookmarks Brave extension, you can find it in the
|
||||
<a href="/brave" class="text-decoration-none text-primary" target="_blank">Chrome Web Store</a>.
|
||||
</div>
|
||||
<p class="card-text">
|
||||
With Brave, accessing the extension settings couldn't be easier.
|
||||
</p>
|
||||
<h5 class="mt-4">Step 1: Locate the Extension Icon</h5>
|
||||
<p class="card-text">
|
||||
Simply locate the AllTheBookmarks icon on your toolbar and right-click the icon.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/brave/options.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
|
||||
</div>
|
||||
<h5>Step 2: Open the Options</h5>
|
||||
<p class="card-text">
|
||||
From the dropdown menu that appears, select <strong>Options</strong>. You should be greeted by a settings page very similar to the one below.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/brave/settings-page.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
<p class="card-text">
|
||||
(If you need help pinning the extension to your toolbar for easy access, we have a separate
|
||||
<a href="/tutorials/brave/pin" class="text-decoration-none atb-green">tutorial</a> for that.)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
38
app/plugins/bookmarks/views/tutorials/card.html
Normal file
38
app/plugins/bookmarks/views/tutorials/card.html
Normal file
@ -0,0 +1,38 @@
|
||||
<section class="container my-5">
|
||||
<h1 class="text-center mb-4">{pretty} Tutorials</h1>
|
||||
<div class="row g-4">
|
||||
<!-- Opera Section -->
|
||||
<div class="col-md-8 offset-2">
|
||||
{tutorialCrumbs}
|
||||
<div class="card h-100 shadow-sm context-main-bg">
|
||||
<div class="card-body text-center">
|
||||
<i class="fab fa-{printed} fa-3x mb-3 atb-green"></i>
|
||||
<h5 class="card-title text-center">{pretty}</h5>
|
||||
<hr>
|
||||
<ul class="list-group list-group-flush rounded">
|
||||
<li class="list-group-item context-second-bg mb-1">
|
||||
<a href="{ROOT_URL}tutorials/{printed}/pin" class="text-decoration-none atb-green">
|
||||
How to pin the extension to your toolbar
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-group-item context-second-bg mb-1">
|
||||
<a href="{ROOT_URL}tutorials/{printed}/settings" class="text-decoration-none atb-green">
|
||||
How to Open the extension settings page
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-group-item context-second-bg mb-1">
|
||||
<a href="{ROOT_URL}tutorials/{printed}/import" class="text-decoration-none atb-green">
|
||||
How to Import Bookmarks into the browser
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-group-item context-second-bg mb-1">
|
||||
<a href="{ROOT_URL}tutorials/{printed}/export" class="text-decoration-none atb-green">
|
||||
How to export Bookmarks from the browser
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
43
app/plugins/bookmarks/views/tutorials/chrome/export.html
Normal file
43
app/plugins/bookmarks/views/tutorials/chrome/export.html
Normal file
@ -0,0 +1,43 @@
|
||||
<section class="container my-5">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body context-main-bg">
|
||||
<h2 class="card-title text-center mb-4">How to Export bookmarks from Chrome</h2>
|
||||
{tutorialCrumbs}
|
||||
<hr>
|
||||
<p class="card-text">
|
||||
Exporting your bookmarks is lightning fast and simple inside of chrome.
|
||||
</p>
|
||||
<h5 class="mt-4">Step 1: open the main application menu </h5>
|
||||
<p class="card-text">
|
||||
Simply left-click these three dots on the right side of your main toolbar.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/chrome/settings.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
|
||||
</div>
|
||||
<h5>Step 2: Open the Bookmark Manager</h5>
|
||||
<p class="card-text">
|
||||
In the list, hover over <strong>Bookmarks and Lists</strong> then select <strong>Bookmark Manager</strong>.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/chrome/bookmark-manager.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
<h5>Step 2: Open the Export Menu</h5>
|
||||
<p class="card-text">
|
||||
On this page, in the top right, you should see another set of three dots, click these.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/chrome/bookmark-menu.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
<p class="card-text">
|
||||
From this list, select <strong>Export Bookmarks</strong>.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/chrome/export.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
|
||||
<p class="card-text">
|
||||
Finally, save the <strong>.html</strong> file somewhere easy to access when you use the <a href="/bookmarks/import" class="text-decoration-none atb-green">imports</a> feature.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
45
app/plugins/bookmarks/views/tutorials/chrome/import.html
Normal file
45
app/plugins/bookmarks/views/tutorials/chrome/import.html
Normal file
@ -0,0 +1,45 @@
|
||||
<section class="container my-5">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body context-main-bg">
|
||||
<h2 class="card-title text-center mb-4">How to Import bookmarks in Chrome</h2>
|
||||
{tutorialCrumbs}
|
||||
<hr>
|
||||
<p class="card-text">
|
||||
Importing your bookmarks from AllTheBookmarks is lightning fast and simple inside of chrome.
|
||||
</p>
|
||||
<h5 class="mt-4">Step 1: open the main application menu </h5>
|
||||
<p class="card-text">
|
||||
Simply left-click these three dots on the right side of your main toolbar.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/chrome/settings.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
|
||||
</div>
|
||||
<h5>Step 2: Open the Bookmark Manager</h5>
|
||||
<p class="card-text">
|
||||
In the list, hover over <strong>Bookmarks and Lists</strong> then select <strong>Bookmark Manager</strong>.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/chrome/bookmark-manager.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
<h5>Step 2: Open the Import Menu</h5>
|
||||
|
||||
<p class="card-text">
|
||||
On this page, in the top right, you should see another set of three dots, click these.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/chrome/bookmark-menu.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
|
||||
<p class="card-text">
|
||||
From this list, select <strong>Import Bookmarks</strong>.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/chrome/import.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
|
||||
<p class="card-text">
|
||||
Finally, select the <strong>.html</strong> file you saved when using the <a href="/bookmarks/export" class="text-decoration-none atb-green">exports</a> feature.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
36
app/plugins/bookmarks/views/tutorials/chrome/pin.html
Normal file
36
app/plugins/bookmarks/views/tutorials/chrome/pin.html
Normal file
@ -0,0 +1,36 @@
|
||||
<section class="container my-5">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body context-main-bg">
|
||||
<h2 class="card-title text-center mb-4">How to pin the extension to your toolbar in Chrome</h2>
|
||||
{tutorialCrumbs}
|
||||
<hr>
|
||||
<div class="alert alert-success w-100 text-center" role="alert">
|
||||
If you have not already installed the AllTheBookmarks Chrome extension, you can find it in the
|
||||
<a href="/chrome" class="text-decoration-none text-primary" target="_blank">Chrome Web Store</a>.
|
||||
</div>
|
||||
<p class="card-text">
|
||||
Once installed, you can add the extension to your chrome toolbar with just a few easy steps.
|
||||
</p>
|
||||
<h5 class="mt-4">Step 1: Find the extensions icon on your toolbar.</h5>
|
||||
<p class="card-text">
|
||||
It should look like this:
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/chrome/extensions-icon.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
|
||||
</div>
|
||||
<h5>Step 2: Left click this icon and a list of your currently installed extensions should show.</h5>
|
||||
<p class="card-text">
|
||||
Next to AllTheBookmarks, on the right you should see a pin icon, click this.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/chrome/pin.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
<p class="card-text">
|
||||
Once pinned, you should see the AllTheBookmarks icon on the toolbar.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/chrome/pinned.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
34
app/plugins/bookmarks/views/tutorials/chrome/settings.html
Normal file
34
app/plugins/bookmarks/views/tutorials/chrome/settings.html
Normal file
@ -0,0 +1,34 @@
|
||||
<section class="container my-5">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body context-main-bg">
|
||||
<h2 class="card-title text-center mb-4">How to Access Extension Settings in Chrome</h2>
|
||||
{tutorialCrumbs}
|
||||
<hr>
|
||||
<div class="alert alert-success w-100 text-center" role="alert">
|
||||
If you have not already installed the AllTheBookmarks Chrome extension, you can find it in the
|
||||
<a href="/chrome" class="text-decoration-none text-primary" target="_blank">Chrome Web Store</a>.
|
||||
</div>
|
||||
<p class="card-text">
|
||||
With Chrome, accessing the extension settings couldn't be easier.
|
||||
</p>
|
||||
<h5 class="mt-4">Step 1: Locate the Extension Icon</h5>
|
||||
<p class="card-text">
|
||||
Simply locate the AllTheBookmarks icon on your toolbar and right-click the icon.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/chrome/options.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
|
||||
</div>
|
||||
<h5>Step 2: Open the Options</h5>
|
||||
<p class="card-text">
|
||||
From the dropdown menu that appears, select <strong>Options</strong>. You should be greeted by a settings page very similar to the one below.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/chrome/settings-page.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
<p class="card-text">
|
||||
(If you need help pinning the extension to your toolbar for easy access, we have a separate
|
||||
<a href="/tutorials/chrome/pin" class="text-decoration-none atb-green">tutorial</a> for that.)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
48
app/plugins/bookmarks/views/tutorials/edge/export.html
Normal file
48
app/plugins/bookmarks/views/tutorials/edge/export.html
Normal file
@ -0,0 +1,48 @@
|
||||
<section class="container my-5">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body context-main-bg">
|
||||
<h2 class="card-title text-center mb-4">How to Export bookmarks in Edge</h2>
|
||||
{tutorialCrumbs}
|
||||
<hr>
|
||||
<p class="card-text">
|
||||
Exporting your bookmarks is lightning fast and simple inside of Edge.
|
||||
</p>
|
||||
|
||||
<h5 class="mt-4">Step 1: open the main application menu </h5>
|
||||
<p class="card-text">
|
||||
Simply left-click these three dots on the right side of your main toolbar.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/edge/settings.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
|
||||
</div>
|
||||
|
||||
<h5>Step 2: Open the Bookmark Menu</h5>
|
||||
<p class="card-text">
|
||||
In the list, select <strong>Favorites</strong> and another menu should appear.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/edge/favorites.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
|
||||
<h5>Step 3: Open the Favorites Options</h5>
|
||||
<p class="card-text">
|
||||
In this menu, on the top right click the three dots for a final dropdown.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/edge/bookmark-options.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
|
||||
<h5>Step 4: Export your bookmarks</h5>
|
||||
<p class="card-text">
|
||||
From this list, select <strong>Export favorites</strong> and you should be taken to the import page.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/edge/export.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
|
||||
<p class="card-text">
|
||||
Finally, save the <strong>.html</strong> file somewhere easy to access when you use the <a href="/bookmarks/import" class="text-decoration-none atb-green">imports</a> feature.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
64
app/plugins/bookmarks/views/tutorials/edge/import.html
Normal file
64
app/plugins/bookmarks/views/tutorials/edge/import.html
Normal file
@ -0,0 +1,64 @@
|
||||
<section class="container my-5">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body context-main-bg">
|
||||
<h2 class="card-title text-center mb-4">How to Import bookmarks in Edge</h2>
|
||||
{tutorialCrumbs}
|
||||
<hr>
|
||||
<p class="card-text">
|
||||
Importing your bookmarks from AllTheBookmarks is lightning fast and simple inside of Edge.
|
||||
</p>
|
||||
|
||||
<h5 class="mt-4">Step 1: open the main application menu </h5>
|
||||
<p class="card-text">
|
||||
Simply left-click these three dots on the right side of your main toolbar.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/edge/settings.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
|
||||
</div>
|
||||
|
||||
<h5>Step 2: Open the Bookmark Menu</h5>
|
||||
<p class="card-text">
|
||||
In the list, select <strong>Favorites</strong> and another menu should appear.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/edge/favorites.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
|
||||
<h5>Step 3: Open the Favorites Options</h5>
|
||||
<p class="card-text">
|
||||
In this menu, on the top right click the three dots for a final dropdown.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/edge/bookmark-options.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
|
||||
<h5>Step 4: Open the Import Page</h5>
|
||||
<p class="card-text">
|
||||
From this list, select <strong>Import favorites</strong> and you should be taken to the import page.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/edge/import.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
|
||||
<h5>Step 5: Open the Importer</h5>
|
||||
<p class="card-text">
|
||||
On this page, under the title <strong>Import from other browsers</strong> click the button labeled <strong>Choose what to import</strong>.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/edge/import-menu.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
|
||||
<h5>Step 6: Begin Importing</h5>
|
||||
<p class="card-text">
|
||||
Under <strong>Import from</strong> make sure to select <strong>Favorites or bookmarks HTML file</strong>.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/edge/import-select.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
|
||||
<p class="card-text">
|
||||
Finally, select the <strong>.html</strong> file you saved when using the <a href="/bookmarks/export" class="text-decoration-none atb-green">exports</a> feature.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
36
app/plugins/bookmarks/views/tutorials/edge/pin.html
Normal file
36
app/plugins/bookmarks/views/tutorials/edge/pin.html
Normal file
@ -0,0 +1,36 @@
|
||||
<section class="container my-5">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body context-main-bg">
|
||||
<h2 class="card-title text-center mb-4">How to pin the extension to your toolbar in Edge</h2>
|
||||
{tutorialCrumbs}
|
||||
<hr>
|
||||
<div class="alert alert-success w-100 text-center" role="alert">
|
||||
If you have not already installed the AllTheBookmarks Edge extension, you can find it in the
|
||||
<a href="/edge" class="text-decoration-none text-primary" target="_blank">Microsoft Store</a>.
|
||||
</div>
|
||||
<p class="card-text">
|
||||
Once installed, you can add the extension to your Edge toolbar with just a few easy steps.
|
||||
</p>
|
||||
<h5 class="mt-4">Step 1: Find the extensions icon on your toolbar.</h5>
|
||||
<p class="card-text">
|
||||
It should look like this:
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/edge/extensions-icon.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
|
||||
</div>
|
||||
<h5>Step 2: Left click this icon and a list of your currently installed extensions should show.</h5>
|
||||
<p class="card-text">
|
||||
Next to AllTheBookmarks, on the right you should see an eye icon, click this.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/edge/pin.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
<p class="card-text">
|
||||
Once pinned, you should see the AllTheBookmarks icon on the toolbar.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/edge/pinned.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
37
app/plugins/bookmarks/views/tutorials/edge/settings.html
Normal file
37
app/plugins/bookmarks/views/tutorials/edge/settings.html
Normal file
@ -0,0 +1,37 @@
|
||||
<section class="container my-5">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body context-main-bg">
|
||||
<h2 class="card-title text-center mb-4">How to Access Extension Settings in Edge</h2>
|
||||
{tutorialCrumbs}
|
||||
<hr>
|
||||
<div class="alert alert-success w-100 text-center" role="alert">
|
||||
If you have not already installed the AllTheBookmarks Edge extension, you can find it in the
|
||||
<a href="/edge" class="text-decoration-none text-primary" target="_blank">Microsoft Store</a>.
|
||||
</div>
|
||||
<p class="card-text">
|
||||
With Edge, accessing the extension settings couldn't be easier.
|
||||
</p>
|
||||
|
||||
<h5 class="mt-4">Step 1: Locate the Extension Icon</h5>
|
||||
<p class="card-text">
|
||||
Simply locate the AllTheBookmarks icon on your toolbar and right-click the icon.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/edge/options.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
|
||||
</div>
|
||||
|
||||
<h5>Step 2: Open the Options</h5>
|
||||
<p class="card-text">
|
||||
From the dropdown menu that appears, select <strong>Extension Options</strong>. You should be greeted by a settings page very similar to the one below.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/edge/settings-page.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
|
||||
<p class="card-text">
|
||||
(If you need help pinning the extension to your toolbar for easy access, we have a separate
|
||||
<a href="/tutorials/edge/pin" class="text-decoration-none atb-green">tutorial</a> for that.)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
55
app/plugins/bookmarks/views/tutorials/firefox/export.html
Normal file
55
app/plugins/bookmarks/views/tutorials/firefox/export.html
Normal file
@ -0,0 +1,55 @@
|
||||
<section class="container my-5">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body context-main-bg">
|
||||
<h2 class="card-title text-center mb-4">How to Export bookmarks in Firefox</h2>
|
||||
{tutorialCrumbs}
|
||||
<hr>
|
||||
<p class="card-text">
|
||||
Exporting your bookmarks is lightning fast and simple inside of Firefox.
|
||||
</p>
|
||||
|
||||
<h5 class="mt-4">Step 1: open the main application menu </h5>
|
||||
<p class="card-text">
|
||||
Simply left-click these three lines on the right side of your main toolbar.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/firefox/settings.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
|
||||
</div>
|
||||
|
||||
<h5>Step 2: Open the Bookmark Menu</h5>
|
||||
<p class="card-text">
|
||||
In the list, select <strong>Bookmarks</strong> and another menu should appear.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/firefox/bookmarks.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
|
||||
<h5>Step 3: Open the Bookmark Manager</h5>
|
||||
<p class="card-text">
|
||||
In the list, select <strong>Manage Bookmarks</strong>.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/firefox/manage-bookmarks.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
|
||||
<h5>Step 4: Open the Export Menu</h5>
|
||||
<p class="card-text">
|
||||
On this page, near the top left, you should see a button that says <strong>Import and Backup</strong>. Click this button and another menu should appear.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/firefox/import-export.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
|
||||
<p class="card-text">
|
||||
From this list, select <strong>Export Bookmarks</strong>.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/firefox/export.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
|
||||
<p class="card-text">
|
||||
Finally, save the <strong>.html</strong> file somewhere easy to access when you use the <a href="/bookmarks/import" class="text-decoration-none atb-green">imports</a> feature.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
55
app/plugins/bookmarks/views/tutorials/firefox/import.html
Normal file
55
app/plugins/bookmarks/views/tutorials/firefox/import.html
Normal file
@ -0,0 +1,55 @@
|
||||
<section class="container my-5">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body context-main-bg">
|
||||
<h2 class="card-title text-center mb-4">How to Import bookmarks in Firefox</h2>
|
||||
{tutorialCrumbs}
|
||||
<hr>
|
||||
<p class="card-text">
|
||||
Importing your bookmarks from AllTheBookmarks is lightning fast and simple inside of firefox.
|
||||
</p>
|
||||
|
||||
<h5 class="mt-4">Step 1: open the main application menu </h5>
|
||||
<p class="card-text">
|
||||
Simply left-click these three lines on the right side of your main toolbar.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/firefox/settings.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
|
||||
</div>
|
||||
|
||||
<h5>Step 2: Open the Bookmark Menu</h5>
|
||||
<p class="card-text">
|
||||
In the list, select <strong>Bookmarks</strong> and another menu should appear.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/firefox/bookmarks.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
|
||||
<h5>Step 3: Open the Bookmark Manager</h5>
|
||||
<p class="card-text">
|
||||
In the list, select <strong>Manage Bookmarks</strong>.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/firefox/manage-bookmarks.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
|
||||
<h5>Step 3: Open the Import Menu</h5>
|
||||
<p class="card-text">
|
||||
On this page, near the top left, you should see a button that says <strong>Import and Backup</strong>. Click this button and another menu should appear.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/firefox/import-export.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
|
||||
<p class="card-text">
|
||||
From this list, select <strong>Import Bookmarks</strong>.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/firefox/import.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
|
||||
<p class="card-text">
|
||||
Finally, select the <strong>.html</strong> file you saved when using the <a href="/bookmarks/export" class="text-decoration-none atb-green">exports</a> feature.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
36
app/plugins/bookmarks/views/tutorials/firefox/pin.html
Normal file
36
app/plugins/bookmarks/views/tutorials/firefox/pin.html
Normal file
@ -0,0 +1,36 @@
|
||||
<section class="container my-5">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body context-main-bg">
|
||||
<h2 class="card-title text-center mb-4">How to pin the extension to your toolbar in Firefox</h2>
|
||||
{tutorialCrumbs}
|
||||
<hr>
|
||||
<div class="alert alert-success w-100 text-center" role="alert">
|
||||
If you have not already installed the AllTheBookmarks Firefox add-on, you can find it in the
|
||||
<a href="/firefox" class="text-decoration-none text-primary" target="_blank">Firefox Store</a>.
|
||||
</div>
|
||||
<p class="card-text">
|
||||
Once installed, you can add the extension to your firefox toolbar with just a few easy steps.
|
||||
</p>
|
||||
<h5 class="mt-4">Step 1: Find the extensions icon on your toolbar.</h5>
|
||||
<p class="card-text">
|
||||
It should look like this:
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/firefox/extensions-icon.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
|
||||
</div>
|
||||
<h5>Step 2: Left click this icon and a list of your currently installed extensions should show.</h5>
|
||||
<p class="card-text">
|
||||
Next to AllTheBookmarks, on the right you should see a settings icon, click this then select <strong>Pin to Toolbar</strong>
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/firefox/pin.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
<p class="card-text">
|
||||
Once pinned, you should see the AllTheBookmarks icon on the toolbar.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/firefox/pinned.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
52
app/plugins/bookmarks/views/tutorials/firefox/settings.html
Normal file
52
app/plugins/bookmarks/views/tutorials/firefox/settings.html
Normal file
@ -0,0 +1,52 @@
|
||||
<section class="container my-5">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body context-main-bg">
|
||||
<h2 class="card-title text-center mb-4">How to Access Extension Settings in Firefox</h2>
|
||||
{tutorialCrumbs}
|
||||
<hr>
|
||||
<div class="alert alert-success w-100 text-center" role="alert">
|
||||
If you have not already installed the AllTheBookmarks Firefox add-on, you can find it in the
|
||||
<a href="/firefox" class="text-decoration-none text-primary" target="_blank">Firefox Store</a>.
|
||||
</div>
|
||||
<p class="card-text">
|
||||
With Firefox, accessing the extension settings is a breeze.
|
||||
</p>
|
||||
|
||||
<h5 class="mt-4">Step 1: Locate the Extension Icon</h5>
|
||||
<p class="card-text">
|
||||
Simply locate the AllTheBookmarks icon on your toolbar and right-click the icon.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/firefox/icon.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
|
||||
</div>
|
||||
|
||||
<h5>Step 2: Open the Add-on manage page</h5>
|
||||
<p class="card-text">
|
||||
From the dropdown menu that appears, select <strong>Manage Extension</strong>.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/firefox/manage.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
|
||||
<h5>Step 3: Open the extension setting page</h5>
|
||||
<p class="card-text">
|
||||
The extension management page should appear similar to this. In the top right, click these three dots and select <strong>Options</strong>.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/firefox/manage-select.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
|
||||
<p class="card-text">
|
||||
You should be greeted by a settings page very similar to the one below.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/firefox/settings-page.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
|
||||
<p class="card-text">
|
||||
(If you need help pinning the extension to your toolbar for easy access, we have a separate
|
||||
<a href="/tutorials/firefox/pin" class="text-decoration-none atb-green">tutorial</a> for that.)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
247
app/plugins/bookmarks/views/tutorials/list.html
Normal file
247
app/plugins/bookmarks/views/tutorials/list.html
Normal file
@ -0,0 +1,247 @@
|
||||
<section class="container my-5">
|
||||
<h1 class="text-center mb-4">Mobile Tutorials</h1>
|
||||
<div class="row g-4 mb-4">
|
||||
<!-- Apple Section -->
|
||||
<div class="col-md-6">
|
||||
<div class="card h-100 shadow-sm context-main-bg">
|
||||
<div class="card-body text-center">
|
||||
<i class="fab fa-apple fa-3x mb-3 atb-green"></i>
|
||||
<h5 class="card-title text-center">Apple</h5>
|
||||
<hr>
|
||||
<ul class="list-group list-group-flush rounded">
|
||||
<li class="list-group-item context-second-bg mb-1">
|
||||
<a href="{ROOT_URL}tutorials/mobile/iphone" class="text-decoration-none atb-green">
|
||||
How to add the app to your iPhone home-screen.
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Opera Section -->
|
||||
<div class="col-md-6">
|
||||
<div class="card h-100 shadow-sm context-main-bg">
|
||||
<div class="card-body text-center">
|
||||
<i class="fab fa-android fa-3x mb-3 atb-green"></i>
|
||||
<h5 class="card-title text-center">Android</h5>
|
||||
<hr>
|
||||
<ul class="list-group list-group-flush rounded">
|
||||
<li class="list-group-item context-second-bg mb-1">
|
||||
<a href="{ROOT_URL}tutorials/mobile/android" class="text-decoration-none atb-green">
|
||||
How to add the app to your Android home-screen.
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 class="text-center mb-4">Browser Tutorials</h1>
|
||||
<div class="row g-4">
|
||||
<!-- Opera Section -->
|
||||
<div class="col-md-4">
|
||||
<div class="card h-100 shadow-sm context-main-bg">
|
||||
<div class="card-body text-center">
|
||||
<i class="fab fa-opera fa-3x mb-3 atb-green"></i>
|
||||
<h5 class="card-title text-center">Opera</h5>
|
||||
<hr>
|
||||
<ul class="list-group list-group-flush rounded">
|
||||
<li class="list-group-item context-second-bg mb-1">
|
||||
<a href="{ROOT_URL}tutorials/opera/pin" class="text-decoration-none atb-green">
|
||||
How to pin the extension to your toolbar
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-group-item context-second-bg mb-1">
|
||||
<a href="{ROOT_URL}tutorials/opera/settings" class="text-decoration-none atb-green">
|
||||
How to Open the extension settings page
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-group-item context-second-bg mb-1">
|
||||
<a href="{ROOT_URL}tutorials/opera/import" class="text-decoration-none atb-green">
|
||||
How to Import Bookmarks into the browser
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-group-item context-second-bg mb-1">
|
||||
<a href="{ROOT_URL}tutorials/opera/export" class="text-decoration-none atb-green">
|
||||
How to export Bookmarks from the browser
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Firefox Section -->
|
||||
<div class="col-md-4">
|
||||
<div class="card h-100 shadow-sm context-main-bg">
|
||||
<div class="card-body text-center">
|
||||
<i class="fab fa-firefox fa-3x mb-3 atb-green"></i>
|
||||
<h5 class="card-title">Firefox</h5>
|
||||
<hr>
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item context-second-bg mb-1">
|
||||
<a href="{ROOT_URL}tutorials/firefox/pin" class="text-decoration-none atb-green">
|
||||
How to pin the extension to your toolbar
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-group-item context-second-bg mb-1">
|
||||
<a href="{ROOT_URL}tutorials/firefox/settings" class="text-decoration-none atb-green">
|
||||
How to Open the extension settings page
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-group-item context-second-bg mb-1">
|
||||
<a href="{ROOT_URL}tutorials/firefox/import" class="text-decoration-none atb-green">
|
||||
How to Import Bookmarks into the browser
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-group-item context-second-bg mb-1">
|
||||
<a href="{ROOT_URL}tutorials/firefox/export" class="text-decoration-none atb-green">
|
||||
How to export Bookmarks from the browser
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Chrome Section -->
|
||||
<div class="col-md-4">
|
||||
<div class="card h-100 shadow-sm context-main-bg">
|
||||
<div class="card-body text-center">
|
||||
<i class="fab fa-chrome fa-3x mb-3 atb-green"></i>
|
||||
<h5 class="card-title">Chrome</h5>
|
||||
<hr>
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item context-second-bg mb-1">
|
||||
<a href="{ROOT_URL}tutorials/chrome/pin" class="text-decoration-none atb-green">
|
||||
How to pin the extension to your toolbar
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-group-item context-second-bg mb-1">
|
||||
<a href="{ROOT_URL}tutorials/chrome/settings" class="text-decoration-none atb-green">
|
||||
How to Open the extension settings page
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-group-item context-second-bg mb-1">
|
||||
<a href="{ROOT_URL}tutorials/chrome/import" class="text-decoration-none atb-green">
|
||||
How to Import Bookmarks into the browser
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-group-item context-second-bg mb-1">
|
||||
<a href="{ROOT_URL}tutorials/chrome/export" class="text-decoration-none atb-green">
|
||||
How to export Bookmarks from the browser
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Brave Section -->
|
||||
<div class="col-md-4">
|
||||
<div class="card h-100 shadow-sm context-main-bg">
|
||||
<div class="card-body text-center">
|
||||
<i class="fab fa-brave fa-3x mb-3 atb-green"></i>
|
||||
<h5 class="card-title">Brave</h5>
|
||||
<hr>
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item context-second-bg mb-1">
|
||||
<a href="{ROOT_URL}tutorials/brave/pin" class="text-decoration-none atb-green">
|
||||
How to pin the extension to your toolbar
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-group-item context-second-bg mb-1">
|
||||
<a href="{ROOT_URL}tutorials/brave/settings" class="text-decoration-none atb-green">
|
||||
How to Open the extension settings page
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-group-item context-second-bg mb-1">
|
||||
<a href="{ROOT_URL}tutorials/brave/import" class="text-decoration-none atb-green">
|
||||
How to Import Bookmarks into the browser
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-group-item context-second-bg mb-1">
|
||||
<a href="{ROOT_URL}tutorials/brave/export" class="text-decoration-none atb-green">
|
||||
How to export Bookmarks from the browser
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Edge Section -->
|
||||
<div class="col-md-4">
|
||||
<div class="card h-100 shadow-sm context-main-bg">
|
||||
<div class="card-body text-center">
|
||||
<i class="fab fa-edge fa-3x mb-3 atb-green"></i>
|
||||
<h5 class="card-title">Edge</h5>
|
||||
<hr>
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item context-second-bg mb-1">
|
||||
<a href="{ROOT_URL}tutorials/edge/pin" class="text-decoration-none atb-green">
|
||||
How to pin the extension to your toolbar
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-group-item context-second-bg mb-1">
|
||||
<a href="{ROOT_URL}tutorials/edge/settings" class="text-decoration-none atb-green">
|
||||
How to Open the extension settings page
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-group-item context-second-bg mb-1">
|
||||
<a href="{ROOT_URL}tutorials/edge/import" class="text-decoration-none atb-green">
|
||||
How to Import Bookmarks into the browser
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-group-item context-second-bg mb-1">
|
||||
<a href="{ROOT_URL}tutorials/edge/export" class="text-decoration-none atb-green">
|
||||
How to export Bookmarks from the browser
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Safari Section -->
|
||||
<div class="col-md-4">
|
||||
<div class="card h-100 shadow-sm context-main-bg">
|
||||
<div class="card-body text-center">
|
||||
<i class="fab fa-safari fa-3x mb-3 atb-green"></i>
|
||||
<h5 class="card-title">Safari</h5>
|
||||
<hr>
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item context-second-bg mb-1">
|
||||
<a aria-disabled="true" class="text-decoration-none atb-green disabled">
|
||||
How to pin the extension to your toolbar
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-group-item context-second-bg mb-1">
|
||||
<a aria-disabled="true" class="text-decoration-none atb-green disabled">
|
||||
How to Open the extension settings page
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-group-item context-second-bg mb-1">
|
||||
<a aria-disabled="true" class="text-decoration-none atb-green disabled">
|
||||
How to Import Bookmarks into the browser
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-group-item context-second-bg mb-1">
|
||||
<a aria-disabled="true" class="text-decoration-none atb-green disabled">
|
||||
How to export Bookmarks from the browser
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{LOGGEDIN}
|
||||
{BKMTUTS}
|
||||
<p class="px-2 text-muted text-center">
|
||||
The Main menu link to this page can be hidden in your <a href="/usercp/settings" class="text-decoration-none atb-green">Profile Settings</a>.
|
||||
</p>
|
||||
{/BKMTUTS}
|
||||
{/LOGGEDIN}
|
||||
</div>
|
||||
</section>
|
||||
33
app/plugins/bookmarks/views/tutorials/mobile/android.html
Normal file
33
app/plugins/bookmarks/views/tutorials/mobile/android.html
Normal file
@ -0,0 +1,33 @@
|
||||
<section class="container my-5">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body context-main-bg">
|
||||
<h2 class="card-title text-center mb-4">How to add the app to your Android home-screen.</h2>
|
||||
{tutorialCrumbs}
|
||||
<hr>
|
||||
<h5 class="mt-4">Step 1: Open https://allthebookmarks.com in Chrome.</h5>
|
||||
<p class="card-text">
|
||||
from this page, tap the menu icon (three dots) in the top-right corner.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/android/add.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
<h5>Step 2: Select "Add to Home screen" and a popup will let you choose the name.</h5>
|
||||
<p class="card-text">
|
||||
Next, tap "Add".
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/android/add2.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
<h5>Step 3: A popup will let you drag the icon around or you can simply select "Add to Home screen". </h5>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/android/add3.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
<p class="card-text">
|
||||
The shortcut will now appear on your home screen.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/android/added.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
24
app/plugins/bookmarks/views/tutorials/mobile/iphone.html
Normal file
24
app/plugins/bookmarks/views/tutorials/mobile/iphone.html
Normal file
@ -0,0 +1,24 @@
|
||||
<section class="container my-5">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body context-main-bg">
|
||||
<h2 class="card-title text-center mb-4">How to add the app to your iPhone home-screen</h2>
|
||||
{tutorialCrumbs}
|
||||
<hr>
|
||||
<h5 class="mt-4">Step 1: Open https://allthebookmarks.com in Safari.</h5>
|
||||
<span class="text-muted">(this is required; Chrome doesn’t support adding shortcuts on iOS)</span>
|
||||
<h5>Step 2: Tap the Share icon (square with an upward arrow).</h5>
|
||||
<p class="card-text">
|
||||
Next, Scroll down and select "Add to Home Screen" then tap "Add".
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/iphone/add.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
<p class="card-text">
|
||||
The shortcut will appear on your home screen.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/iphone/added.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
28
app/plugins/bookmarks/views/tutorials/mobileCard.html
Normal file
28
app/plugins/bookmarks/views/tutorials/mobileCard.html
Normal file
@ -0,0 +1,28 @@
|
||||
<section class="container my-5">
|
||||
<h1 class="text-center mb-4">{pretty} Tutorials</h1>
|
||||
<div class="row g-4">
|
||||
<!-- Opera Section -->
|
||||
<div class="col-md-8 offset-2">
|
||||
{tutorialCrumbs}
|
||||
<div class="card h-100 shadow-sm context-main-bg">
|
||||
<div class="card-body text-center">
|
||||
<i class="fa-solid fa-mobile fa-3x mb-3 atb-green"></i>
|
||||
<h5 class="card-title text-center">{pretty}</h5>
|
||||
<hr>
|
||||
<ul class="list-group list-group-flush rounded">
|
||||
<li class="list-group-item context-second-bg mb-1">
|
||||
<a href="{ROOT_URL}tutorials/mobile/iphone" class="text-decoration-none atb-green">
|
||||
How to add the app to your iPhone home-screen.
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-group-item context-second-bg mb-1">
|
||||
<a href="{ROOT_URL}tutorials/mobile/android" class="text-decoration-none atb-green">
|
||||
How to add the app to your Android home-screen.
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
40
app/plugins/bookmarks/views/tutorials/opera/export.html
Normal file
40
app/plugins/bookmarks/views/tutorials/opera/export.html
Normal file
@ -0,0 +1,40 @@
|
||||
<section class="container my-5">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body context-main-bg">
|
||||
<h2 class="card-title text-center mb-4">How to Export bookmarks in Opera</h2>
|
||||
{tutorialCrumbs}
|
||||
<hr>
|
||||
<p class="card-text">
|
||||
Exporting your bookmarks is lightning fast and simple inside of Opera.
|
||||
</p>
|
||||
|
||||
<h5 class="mt-4">Step 1: open the main application menu </h5>
|
||||
<p class="card-text">
|
||||
Simply left-click these three dots in the bottom left of the browser window.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/opera/sidebar.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
|
||||
</div>
|
||||
|
||||
<h5>Step 2: Open the Bookmark Menu</h5>
|
||||
<p class="card-text">
|
||||
In the list, click the icon next to <strong>Bookmarks</strong> and another window should open.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/opera/bookmarks.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
|
||||
<h5>Step 4: Export your bookmarks</h5>
|
||||
<p class="card-text">
|
||||
In the bottom right of the page, click <strong>Import / Export</strong> and select <strong>Export Bookmarks</strong>.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/opera/export.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
|
||||
<p class="card-text">
|
||||
Finally, save the <strong>.html</strong> file somewhere easy to access when you use the <a href="/bookmarks/import" class="text-decoration-none atb-green">imports</a> feature.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
48
app/plugins/bookmarks/views/tutorials/opera/import.html
Normal file
48
app/plugins/bookmarks/views/tutorials/opera/import.html
Normal file
@ -0,0 +1,48 @@
|
||||
<section class="container my-5">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body context-main-bg">
|
||||
<h2 class="card-title text-center mb-4">How to Import bookmarks in Opera</h2>
|
||||
{tutorialCrumbs}
|
||||
<hr>
|
||||
<p class="card-text">
|
||||
Importing your bookmarks from AllTheBookmarks is lightning fast and simple inside of Opera.
|
||||
</p>
|
||||
|
||||
<h5 class="mt-4">Step 1: open the main application menu </h5>
|
||||
<p class="card-text">
|
||||
Simply left-click these three dots in the bottom left of the browser window.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/opera/sidebar.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
|
||||
</div>
|
||||
|
||||
<h5>Step 2: Open the Bookmark Menu</h5>
|
||||
<p class="card-text">
|
||||
In the list, click the icon next to <strong>Bookmarks</strong> and another window should open.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/opera/bookmarks.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
|
||||
<h5>Step 3: Open the Import Page</h5>
|
||||
<p class="card-text">
|
||||
In the bottom right of the page, click <strong>Import / Export</strong> and select <strong>Import Bookmarks</strong> and you should be taken to the import page.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/opera/import.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
|
||||
<h5>Step 4: Begin Importing</h5>
|
||||
<p class="card-text">
|
||||
In this menu, click the dropdown and make sure to select <strong>Bookmarks HTML file</strong>.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/opera/import-select.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
|
||||
<p class="card-text">
|
||||
Finally, select the <strong>.html</strong> file you saved when using the <a href="/bookmarks/export" class="text-decoration-none atb-green">exports</a> feature.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
46
app/plugins/bookmarks/views/tutorials/opera/pin.html
Normal file
46
app/plugins/bookmarks/views/tutorials/opera/pin.html
Normal file
@ -0,0 +1,46 @@
|
||||
<section class="container my-5">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body context-main-bg">
|
||||
<h2 class="card-title text-center mb-4">How to pin the extension to your toolbar in Opera</h2>
|
||||
{tutorialCrumbs}
|
||||
<hr>
|
||||
<div class="alert alert-success w-100 text-center" role="alert">
|
||||
If you have not already installed the AllTheBookmarks Opera extension, you can find it in the
|
||||
<a href="#" class="text-decoration-none text-primary" target="_blank">Opera Store</a>.
|
||||
</div>
|
||||
<p class="card-text">
|
||||
Once installed, you can add the extension to your Opera toolbar with just a few easy steps.
|
||||
</p>
|
||||
<h5 class="mt-4">Step 1: Find the extensions icon on your toolbar.</h5>
|
||||
<p class="card-text">
|
||||
It should look like this:
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/opera/extensions.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
|
||||
</div>
|
||||
|
||||
<h5 class="mt-4">Step 0: Reveal the extensions toolbar. ( This step may not be required for all users ).</h5>
|
||||
<p class="card-text">
|
||||
If you find that you are having trouble locating the extensions icon, double check that the additional toolbar is expanded.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/opera/toolbar.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
|
||||
</div>
|
||||
|
||||
<h5>Step 2: Left click this icon and a list of your currently installed extensions should show.</h5>
|
||||
<p class="card-text">
|
||||
Next to AllTheBookmarks, on the right you should see an eye icon, click this.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/opera/pin.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
|
||||
<p class="card-text">
|
||||
Once pinned, you should see the AllTheBookmarks icon on the toolbar.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/opera/pinned.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
37
app/plugins/bookmarks/views/tutorials/opera/settings.html
Normal file
37
app/plugins/bookmarks/views/tutorials/opera/settings.html
Normal file
@ -0,0 +1,37 @@
|
||||
<section class="container my-5">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body context-main-bg">
|
||||
<h2 class="card-title text-center mb-4">How to Access Extension Settings in Opera</h2>
|
||||
{tutorialCrumbs}
|
||||
<hr>
|
||||
<div class="alert alert-success w-100 text-center" role="alert">
|
||||
If you have not already installed the AllTheBookmarks Opera extension, you can find it in the
|
||||
<a href="#" class="text-decoration-none text-primary" target="_blank">Opera Store</a>.
|
||||
</div>
|
||||
<p class="card-text">
|
||||
With Opera, accessing the extension settings couldn't be easier.
|
||||
</p>
|
||||
|
||||
<h5 class="mt-4">Step 1: Locate the Extension Icon</h5>
|
||||
<p class="card-text">
|
||||
Simply locate the AllTheBookmarks icon on your toolbar and right-click the icon.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/opera/options.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
|
||||
</div>
|
||||
|
||||
<h5>Step 2: Open the Options</h5>
|
||||
<p class="card-text">
|
||||
From the dropdown menu that appears, select <strong>Options</strong>. You should be greeted by a settings page very similar to the one below.
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<img src="/app/plugins/bookmarks/images/opera/settings-page.png" class="img-fluid rounded mb-4" alt="Extension settings page">
|
||||
</div>
|
||||
|
||||
<p class="card-text">
|
||||
(If you need help pinning the extension to your toolbar for easy access, we have a separate
|
||||
<a href="/tutorials/opera/pin" class="text-decoration-none atb-green">tutorial</a> for that.)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
Reference in New Issue
Block a user