[Support]

Hello,

Yes, this is possible. Porto Admin uses the standard Select2 library, so you can use its tags feature: when the user types a value that isn’t in the list, Select2 offers it as a new option. You can then catch that selection and save it to MySQL with an AJAX call.

1. HTML / PHP (initialize this select manually, so remove data-plugin-selectTwo from it to avoid a double initialization):

html

<select id="category" name="category_id" class="form-control select2-addable" data-table="categories">
    <?php foreach ($categories as $cat): ?>
        <option value="<?= (int)$cat['id'] ?>"><?= htmlspecialchars($cat['name']) ?></option>
    <?php endforeach; ?>
</select>

2. JavaScript (place it after the template’s scripts):

js

(function($) {
    'use strict';

    $('.select2-addable').each(function() {
        var $select = $(this);

        $select.select2({
            theme: 'bootstrap',
            tags: true,
            createTag: function(params) {
                var term = $.trim(params.term);
                if (term === '') {
                    return null;
                }
                return { id: term, text: term, newTag: true };
            },
            templateResult: function(data) {
                return data.newTag ? 'Add "' + data.text + '"' : data.text;
            }
        });

        $select.on('select2:select', function(e) {
            var data = e.params.data;
            if (!data.newTag) {
                return;
            }

            var $tempOption = $select.find('option').filter(function() {
                return this.value === data.id;
            });

            $.ajax({
                url: 'add-option.php',
                method: 'POST',
                dataType: 'json',
                data: { table: $select.data('table'), name: data.text }
            }).done(function(res) {
                if (res.success) {
                    // Replace the temporary value with the real database ID
                    $tempOption.val(res.id);
                    $select.val(res.id).trigger('change');
                } else {
                    $tempOption.remove();
                    $select.val(null).trigger('change');
                    alert(res.message || 'Could not save the option.');
                }
            }).fail(function() {
                $tempOption.remove();
                $select.val(null).trigger('change');
                alert('Could not save the option.');
            });
        });
    });

}).apply(this, [jQuery]);

3. add-option.php

php

<?php
header('Content-Type: application/json');

// Only allow known tables/columns, never use the table name from the request directly
$allowed = [
    'categories' => 'name',
    'brands'     => 'name',
];

$table = $_POST['table'] ?? '';
$name  = trim($_POST['name'] ?? '');

if (!isset($allowed[$table]) || $name === '') {
    echo json_encode(['success' => false, 'message' => 'Invalid request.']);
    exit;
}

$column = $allowed[$table];

$pdo = new PDO('mysql:host=localhost;dbname=your_db;charset=utf8mb4', 'user', 'pass', [
    PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
]);

// Return the existing row if the value is already there
$stmt = $pdo->prepare("SELECT id FROM $table WHERE $column = ? LIMIT 1");
$stmt->execute([$name]);
if ($id = $stmt->fetchColumn()) {
    echo json_encode(['success' => true, 'id' => (int)$id]);
    exit;
}

$stmt = $pdo->prepare("INSERT INTO $table ($column) VALUES (?)");
$stmt->execute([$name]);

echo json_encode(['success' => true, 'id' => (int)$pdo->lastInsertId()]);

Add the class select2-addable and the matching data-table attribute to each Select2 that should allow new options, and add each table to the $allowed list in the PHP file. The whitelist matters because the table name comes from the browser.

Please note this is a customization beyond the template itself, so you may need to adapt it to your database structure.

Kind regards,
Okler Themes

---

[Support]

This reply has been marked as private.

[Support]

1)
Line 433:

Change FROM:

<a class="accordion-toggle text-color-light" data-bs-toggle="collapse" data-bs-target="#collapsePrimaryOne" aria-expanded="true" aria-controls="collapsePrimaryOne">

TO:

<a class="accordion-toggle text-color-light" data-bs-toggle="collapse" data-bs-target="#collapsePrimaryOne" aria-expanded="true" aria-controls="collapsePrimaryOne" role="button">

2)
Change FROM:

<div id="collapsePrimaryOne" class="collapse" aria-labelledby="collapsePrimaryHeadingOne" data-bs-parent="#accordionPrimary" role="accordion">

TO:

<div id="collapsePrimaryOne" class="collapse" aria-labelledby="collapsePrimaryHeadingOne" data-bs-parent="#accordionPrimary" role="region">

---

[Support]

To fix that:

FROM:

<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">

TO:

<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample" role="button">

---

FROM:

<div id="collapsePrimaryOne" class="collapse" aria-labelledby="collapsePrimaryHeadingOne" data-bs-parent="#accordionPrimary">

TO:

<div id="collapsePrimaryOne" class="collapse" aria-labelledby="collapsePrimaryHeadingOne" data-bs-parent="#accordionPrimary" role="accordion">

---

[Support]

Hello, sorry about that.

Please try to change the CSS:

And the JS:

---

[Support]

Hello, OK, sure, to change the font size on mobile resolutions you need to change the latest value of the array.

data-fontsize=”[’60’,’60’,’60’,’30’]”
data-lineheight=”[’55’,’55’,’55’,’30’]”

30px will be applied to resolutions lower than 500px (mobile).

The 4 values are based in these resolutions: 4096,1200,992,500 (lower than)

---

[Support]

This reply has been marked as private.

[Support]

This reply has been marked as private.

[Support]

This reply has been marked as private.

[Support]

This reply has been marked as private.

[Support]

This reply has been marked as private.

[Support]

Hello, try to add this:

.tp-revslider-mainul {
	margin: 0 !important;
	padding: 0 !important;
}

---

[Support]

Hello, try adding this:

@media (min-width: 992px) {
    #header .header-nav-bar .header-nav {
        margin-left: 0 !important;
    }
}

---

[Support]

This reply has been marked as private.

[Support]

Hi, I’m not 100% sure I understand the question but please try this:

(css/custom.css)

@media (max-width: 991px) {
	#header > div > div.header-top.bg-topbar-light-tan > div > div > div.header-column.justify-content-start > div > ul {
		text-align: center;
	}
}

---

[Author]

Posts