wip
This commit is contained in:
Joey Kimsey
@ -21,14 +21,14 @@
|
||||
|
||||
|
||||
<div class="mb-3 row">
|
||||
<label for="title" class="col-lg-5 col-form-label text-end">Description:</label>
|
||||
<label for="description" class="col-lg-5 col-form-label text-end">Description:</label>
|
||||
<div class="col-lg-3">
|
||||
<textarea class="form-control" name="description" maxlength="2000" rows="10" cols="50" id="description"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
{folderSelect}
|
||||
<div class="mb-3 row">
|
||||
<label for="title" class="col-lg-5 col-form-label text-end">Privacy</label>
|
||||
<label for="privacy" class="col-lg-5 col-form-label text-end">Privacy</label>
|
||||
<div class="col-lg-3">
|
||||
<select id="privacy" name="privacy" class="form-control">
|
||||
<option value="private">Private</option>
|
||||
@ -37,7 +37,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3 row">
|
||||
<label for="title" class="col-lg-5 col-form-label text-end">Color</label>
|
||||
<label for="color" class="col-lg-5 col-form-label text-end">Color</label>
|
||||
<div class="col-lg-3" id="colorContainer">
|
||||
{colorSelect}
|
||||
</div>
|
||||
|
||||
@ -5,6 +5,7 @@
|
||||
<form method="post">
|
||||
<fieldset>
|
||||
<input type="hidden" name="token" value="{TOKEN}">
|
||||
<input type="hidden" name="dash_id" id="dash_id" value="{ID}">
|
||||
<input type="hidden" name="link_order" value="{link_order}" id="dashLinkOrder">
|
||||
<div class="row g-3" id="bookmarkSort">
|
||||
{folderPanels}
|
||||
|
||||
@ -8,31 +8,75 @@
|
||||
Since you can't use extensions on mobile, you can log in from your mobile device and visit this page.
|
||||
</p>
|
||||
<p>
|
||||
Below is a code snippet that you can copy, then create a new bookmark on your mobile device as you would normally.
|
||||
Before saving the bookmark, change the name to something simple like "ATB Bookmarker" and paste thiis code as the url.
|
||||
Below is a code snippet that you can copy. Copy the code, then create a new bookmark on your mobile device as you would normally.
|
||||
Before saving the bookmark, change the name to something simple like "ATB Bookmarker" and paste this code as the url.
|
||||
</p>
|
||||
<p>
|
||||
Once you have the bookmarklet saved, you can simply go to your mobile bookmarks while on a page and this snippet will grab the info you need and add it to you account.
|
||||
</p>
|
||||
</div>
|
||||
<div class="context-second-bg p-4 border m-4">
|
||||
<form method="post">
|
||||
<fieldset>
|
||||
<!-- Privacy -->
|
||||
<div class="d-flex align-items-center border p-2 rounded mb-3 context-main-bg">
|
||||
<div class="me-3 fw-bold">Default privacy:</div>
|
||||
<div class="">
|
||||
<select id="privacy" name="privacy" class="form-control">
|
||||
<option value="private">Private</option>
|
||||
<option value="public">Public</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Description -->
|
||||
<div class="d-flex align-items-center border p-2 rounded mb-3 context-main-bg">
|
||||
<div class="me-3 fw-bold">Ask for Description:</div>
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" id="includeDescription" name="includeDescription"{editModeSwitch_IS_CHECKED}>
|
||||
<label class="form-check-label" for="includeDescription"></label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Color -->
|
||||
<div class="d-flex align-items-center border p-2 rounded mb-3 context-main-bg">
|
||||
<div class="me-3 fw-bold">Include a default color:</div>
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" id="includeColor" name="includeColor"{editModeSwitch_IS_CHECKED}>
|
||||
<label class="form-check-label" for="includeColor"></label>
|
||||
</div>
|
||||
<div class="">
|
||||
{colorSelect}
|
||||
</div>
|
||||
</div>
|
||||
<!-- Folder -->
|
||||
<div class="d-flex align-items-center border p-2 rounded mb-3 context-main-bg">
|
||||
<div class="me-3 fw-bold">Include a default folder:</div>
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" id="includeFolder" name="includeFolder"{editModeSwitch_IS_CHECKED}>
|
||||
<label class="form-check-label" for="includeFolder"></label>
|
||||
</div>
|
||||
<div class="">
|
||||
{folderSelect}
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
<div class="card-footer d-flex justify-content-center align-items-center context-main-bg">
|
||||
<button type="submit" name="submit" value="submit" class="btn btn-md atb-green-outline my-2">Refresh Code</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="">
|
||||
<div class="context-second-bg p-4">
|
||||
<pre lang="javascript">
|
||||
javascript:(function() {
|
||||
const apiKey = localStorage.getItem('notAnAuthToken');
|
||||
const apiUrl = localStorage.getItem('api_url');
|
||||
const name = prompt("Enter a name for the bookmark:");
|
||||
const notes = prompt("Enter any notes (optional):");
|
||||
const color = prompt("Enter a color (optional):");
|
||||
const privacy = prompt("Enter privacy level (e.g., public/private):");
|
||||
const folder = prompt("Enter a folder (optional):");
|
||||
const apiKey = "{BK_API_KEY}";
|
||||
const apiUrl = "{BK_API_URL}";
|
||||
const url = window.location.href;
|
||||
|
||||
if (!apiKey) {
|
||||
alert("You must sign in to obtain an auth token.");
|
||||
return;
|
||||
}
|
||||
|
||||
const name = prompt("Enter a name for the bookmark:");
|
||||
{BK_JS_NOTES}
|
||||
{BK_JS_COLOR}
|
||||
{BK_JS_PRIVACY}
|
||||
{BK_JS_FOLDER}
|
||||
|
||||
if (!name) {
|
||||
alert("Name is required.");
|
||||
return;
|
||||
|
||||
@ -0,0 +1,19 @@
|
||||
<div class="col-10 offset-md-1 context-main-bg p-4 my-5">
|
||||
<legend class="text-center">Mobile Bookmarklet</legend>
|
||||
<hr>
|
||||
<div class="col-8 offset-2 ">
|
||||
<div class="h5">
|
||||
<p>
|
||||
You can quickly and easily add bookmarks to your AllTheBookmarks account from any mobile device.
|
||||
Since you can't use extensions on mobile, you can log in from your mobile device and visit this page.
|
||||
</p>
|
||||
<p>
|
||||
Once logged in, there will be a code snippet that you can copy. Copy the code, then create a new bookmark on your mobile device as you would normally.
|
||||
Before saving the bookmark, change the name to something simple like "ATB Bookmarker" and paste this code as the url.
|
||||
</p>
|
||||
<p>
|
||||
Once you have the bookmarklet saved, you can simply go to your mobile bookmarks while on a page and this snippet will grab the info you need and add it to you account.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
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="#" 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="#" 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>
|
||||
@ -5,7 +5,7 @@
|
||||
{tutorialCrumbs}
|
||||
<hr>
|
||||
<p class="card-text">
|
||||
Exporting your bookmarks is lightning fast and simple inside of firefox.
|
||||
Exporting your bookmarks is lightning fast and simple inside of Firefox.
|
||||
</p>
|
||||
|
||||
<h5 class="mt-4">Step 1: open the main application menu </h5>
|
||||
@ -32,7 +32,7 @@
|
||||
<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>
|
||||
<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>
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
</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.
|
||||
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">
|
||||
|
||||
@ -9,22 +9,40 @@
|
||||
<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 couldn't be easier.
|
||||
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/options.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
|
||||
<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 Options</h5>
|
||||
|
||||
<h5>Step 2: Open the Add-on manage page</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.
|
||||
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.)
|
||||
|
||||
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