position van specifiek icoon aanpassen

Zie post #9 voor een nieuw probleem

Worden de icoontjes wel geladen @ element inspecteren -> network?

Dylanh schreef:

Worden de icoontjes wel geladen @ element inspecteren -> network?

Nee, alleen de jQuery-, Bootstrap- en pNotify-bestanden worden geladen. Ik weet überhaupt niet waar de icoontjes vandaan komen, want ik heb nergens .png-bestanden o.i.d. de manier om zon icoontje aan te roepen is als volgt:

$.pnotify({
    title: Pines Icon Success,
    text: We reached the moon first! See, we planted a flag.,
    type: success,
    icon: picon picon-flag-green
});

achter icon zie je dus picon picon-flag-green staan, maar daar blijft het verder ook bij.

toevoeging op 21 december 2013, 20:50:10:
oh ik ben nu element inspecteren -> Network van mijn website gaan vergelijken met http://pinesframework.org/pnotify/ en daar kwam ik een bestand tegen -- icons.css, en hierin staan een helehoop referenties naar icoontjes, zoals hieronder:

.picon-weather-freezing-rain {background-image:url("16/status/weather-freezing-rain.png")}
.picon-weather-hail {background-image:url("16/status/weather-hail.png")}
.picon-weather-many-clouds {background-image:url("16/status/weather-many-clouds.png")}
.picon-weather-mist {background-image:url("16/status/weather-mist.png")}
.picon-weather-showers {background-image:url("16/status/weather-showers.png")}
.picon-weather-showers-day {background-image:url("16/status/weather-showers-day.png")}
.picon-weather-showers-night {background-image:url("16/status/weather-showers-night.png")}
.picon-weather-showers-scattered {background-image:url("16/status/weather-showers-scattered.png")}
.picon-weather-showers-scattered-day {background-image:url("16/status/weather-showers-scattered-day.png")}
.picon-weather-showers-scattered-night {background-image:url("16/status/weather-showers-scattered-night.png")}
.picon-weather-snow {background-image:url("16/status/weather-snow.png")}
.picon-weather-snow-rain {background-image:url("16/status/weather-snow-rain.png")}
.picon-weather-snow-scattered {background-image:url("16/status/weather-snow-scattered.png")}
.picon-weather-snow-scattered-day {background-image:url("16/status/weather-snow-scattered-day.png")}
.picon-weather-snow-scattered-night {background-image:url("16/status/weather-snow-scattered-night.png")}

even kijken of ik er iets aan heb.

Ik denk dat dat het probleem is.

Hupsakee, het werkt nu Ik kan geen efficiënte manier vinden om die icons in één keer te downloaden, dus dan zal ik maar alleen downloaden wat ik nodig heb. Bedankt voor die Network tip in ieder geval, dat heeft me geholpen

Graag gedaan.

Wel raar dat die icons niet bij het hele pakket zat.

Dylanh schreef:

Graag gedaan.

Wel raar dat die icons niet bij het hele pakket zat.

Ja inderdaad. Ik ben er inmiddels achter dat de auteurs van de iconset oxygen-icons.org zijn, maar die website is inmiddels offline. Wel zijn de icons dus nog te downloaden via de site van pNotify, handmatig weliswaar.

Die staan als het goed is ook op iconfinder.com

https://www.iconfinder.com/search/?q=iconset:oxygen

Milan schreef:

Die staan als het goed is ook op iconfinder.com

https://www.iconfinder.com/search/?q=iconset:oxygen

Had de set inderdaad ook al als een .zip gevonden, alsnog bedankt
toevoeging op 22 december 2013, 14:51:06:
Ik zit nu wel met een ander probleempje: Al mijn icoontjes werken nu, maar de jQuery-UI icoontjes staan 5px te ver naar boven om de een of andere reden... Nu kan ik dit wel aanpassen door aan de betreffende span het volgende toe te voegen:

position: relative;
bottom: -5px;

maar uiteraard gaan de non-jQuery-icoontjes dan ook weer 5px omlaag en dat is niet de bedoeling. Weet iemand hier misschien een geschikte oplossing voor? voorbeeld v.h. probleem is te zien op http://badumtss.nl/dev/, en dan moet je even een error-popup vergelijken met prestatie of info.

Je kan de jquery icoontjes een andere class geven dan de non-jquery icoontjes..

Dylanh schreef:

Je kan de jquery icoontjes een andere class geven dan de non-jquery icoontjes..

zo veel verstand heb ik er niet van, dan moet ik het jQuery-UI bestand gaan aanpassen en dat is enorm

Codeblok (voorbeeld.php):

1



Codeblok (voorbeeld.php):

1
2
3
4

.fix {
position: relative;
bottom: -5px;
}

Ik weet alleen niet waar ik dan de fix class bij moet zetten, er is namelijk nergens een span waar ik dat gewoon bij moet plakken, aangezien pnotify.js de span zelf aanmaakt.

// Add the appropriate icon.
            if (opts.icon !== false) {
                $("<div />", {"class": "ui-pnotify-icon"})
                .append($("<span />", {"class": opts.icon === true ? (opts.type == "error" ? styles.error_icon : (opts.type == "info" ? styles.info_icon : (opts.type == "success" ? styles.success_icon : styles.notice_icon))) : opts.icon}))
                .prependTo(pnotify.container);
            }

toevoeging op 22 december 2013, 15:25:15:
Ik kan fix iig niet bij regel 3 toevoegen, want dan zit ik weer met het probleem dat het op alle types notificaties wordt toegepast.

Voeg in /css/ui-lightness/jquery-ui-1.10.3.custom.min.css bij .ui-icon position: relative; bottom: -5px;

toe.

Nielsjojo schreef:

Voeg in /css/ui-lightness/jquery-ui-1.10.3.custom.min.css bij .ui-icon position: relative; bottom: -5px;

toe.

dat heeft gewerkt. Heel erg bedankt