wip
This commit is contained in:
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