ngg Rahmen um Bilder

Saturo

Ich habe ein Problem mit den Rahmen um die Bilder.

Die Einstellungen die ich in der highslide.css vornehme wirken sich auf die Bilder in den Beiträgen als auch auf das ngg widget in der Sidebar aus.

Code

.highslide img {
     background-color:#ffffff;
     border:4px solid gray;
     #margin:4px 0px 4px 5px;
    #padding:4px;
    #position:relative;
}
.highslide:hover img {
    border: 4px solid #7A9900;

Die Eingaben die ich in der ngg_shadow.css vornehmen zeigen nur bei den
Alben und Galerien Wirkung, nicht aber bei den Vorschau Thumbnails und dem Sidebar Widget.

CSS

/*
CSS Name: Shadow Effect
Description: NextGEN Default Style with a Shadow effect
Author: Alex Rabe
Version: 1.30
   
This is a template stylesheet that can be used with NextGEN Gallery. I tested the
styles with a default theme Kubrick. Modify it when your theme struggle with it,
it's only a template design


*/


/* ----------- Album Styles Extend -------------*/


.ngg-albumoverview {
    margin-top: 10px;
    width: 100%;
     
    display:block !important;
}


.ngg-album {
    /*height: 130px;*/
    padding: 5px;
    margin-bottom: 5px;
    border: 1px solid #cccccc;
    overflow:hidden;
}


.ngg-albumtitle {
    text-align: left;
     font-weight: bold;
    margin:0px;
    padding:0px;
    font-size: 1.4em;
    margin-bottom: 10px;
}


.ngg-thumbnail {
    float: left;
    margin-right: 12px;
}


.ngg-thumbnail img {
    background-color:#ffffff;
    border:4px solid gray;
    margin:4px 0px 4px 5px;
    padding:4px;
    position:relative;
}


.ngg-thumbnail img:hover {
    background-color: #ffffff;
border:4px solid #7a9900;
}


.ngg-description {
    text-align: left;
}


/* ----------- Album Styles Compact -------------*/


.ngg-album-compact {
    float:left;
    height:180px;
    padding-right:6px !important;
    margin:0px !important; 
    text-align:left;
    width:120px;    
}


.ngg-album-compactbox {
    background:transparent url(albumset.gif) no-repeat scroll 0%;
    height:86px;
    margin:0pt 0pt 6px !important;
    padding:12px 0pt 0pt 7px !important;
    width:120px;
}




.ngg-album-compactbox .Thumb {
    border:1px solid #7A9900;
    margin:0px !important;
    padding:0px !important;
    width:91px; 
    height:68px;
}


.ngg-album-compact h4 {
    font-size:15px;
    font-weight:bold;
    margin-bottom:0px;
    margin-top:0px;
    width:110px;
}


.ngg-album-compact p {
    font-size:11px;
    margin-top:2px;
}


/* ----------- Gallery style -------------*/


.ngg-galleryoverview {
    margin-top: 10px;
    width: 100%;
     
    display:block !important;
}


.ngg-gallery-thumbnail-box {
    float: left;
}


.ngg-gallery-thumbnail {
    float: left; 
    background: url(shadowAlpha.png) no-repeat bottom right !important;
    background: url(shadow.gif) no-repeat bottom right;
    margin: 10px 0 0 10px !important;
}


.ngg-gallery-thumbnail img {
    margin: -6px 6px 6px -6px;
    background-color:#FFFFFF;
    border:2px solid #50570F;
    display:block; 
    padding:4px;
    position:relative;
}


.ngg-gallery-thumbnail img:hover {
    background-color: #ffffff;
border:2px solid #7A9900;
} 


.ngg-gallery-thumbnail span {
    display:none;
}


.ngg-clear {
    
}


/* ----------- Gallery navigation -------------*/


.ngg-navigation {
    font-size:0.9em !important;
     !important;
    display:block !important;
    padding-top:15px;
    text-align:center;
}


.ngg-navigation span {
    font-weight:bold;
    margin:0pt 6px;
}


.ngg-navigation a.page-numbers, a.next, a.prev, 
                span.page-numbers, span.next, span.prev {
    border:1px solid #DDDDDD;
    margin-right:3px;
    padding:3px 7px;
}


.ngg-navigation a.page-numbers:hover, a.next:hover, a.prev:hover, 
                span.page-numbers:hover, span.next:hover, span.prev:hover {
    background-color: #0066CC;
    color: #FFFFFF !important;
    text-decoration: none !important;
}


/* ----------- Image browser style -------------*/


.ngg-imagebrowser {
    
}


.ngg-imagebrowser h3 {
    text-align:center;
}


.ngg-imagebrowser img {
    border:1px solid #A9A9A9;
    margin-top: 10px; 
    margin-bottom: 10px; 
    width: 100%;
    display:block !important;
    padding:5px;
}


.ngg-imagebrowser-nav {
    padding:5px;
    margin-left:10px;    
}


.ngg-imagebrowser-nav .back {
    float:left;
    border:1px solid #DDDDDD;
    margin-right:3px;
    padding:3px 7px;
}


.ngg-imagebrowser-nav .next {
    float:right;
    border:1px solid #DDDDDD;
    margin-right:3px;
    padding:3px 7px;
}


.ngg-imagebrowser-nav .counter {
    text-align:center;
    font-size:0.9em !important;
}


/* ----------- Slideshow -------------*/
.slideshow {
    margin-left: auto; 
    margin-right: auto;
    text-align:center;    
}


.slideshowlink {
    
}


/* ----------- Single picture -------------*/
.ngg-singlepic {
    background-color:#FFFFFF;
    border:2px solid #8fb300;
    display:block;  
    margin:5px;
    padding:4px;
    position:relative;
}


.ngg-left {
    float: left;
}


.ngg-right {
    float: right;
}




/* ----------- Sidebar widget -------------*/


.ngg-widget,
.ngg-widget-slideshow {
    overflow: hidden;
    margin:0pt;
    padding:5px 0px 0px 0pt;
}


.ngg-widget img {
    border:none;
    margin:0pt 2px 2px 0px; 
    padding:1px; 
}


/* ----------- Related images -------------*/
.ngg-related-gallery {
    background:#ffffff;
    border:1px solid #8fb300;
    overflow:hidden;
    margin-bottom:1em;
    margin-top:1em;
    padding:5px;
}
.ngg-related-gallery img {
    border: 1px solid #8fb300;
    float: left;
    margin: 0pt 3px;
    padding: 2px;
    height: 50px;
    width:  50px;
}


.ngg-related-gallery img:hover {
    border: 1px solid #000000;
}

Alles anzeigen

Link zum Blog

Mein Problem: Ich möchte bei den Bildern in den Beiträgen einen anderen Rahmen verwenden als für das Sidebar Widget.
Hat jemand eine Idee wie ich das realisieren kann?

Viele Grüsse
Christian

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

maxe

Es gibt doch in der ngg_shadow.css die verschiedenen Klassen, z.B. dieser nur für die Widgets:

Code

.ngg-widget img {
    border:[COLOR=Red]1px solid #0000FF;[/COLOR]    
    margin:0pt 2px 2px 0px; 
    padding:1px; 
}

falls das nicht klappt, z.B. bei den thumbnails, schreibst du ein !important dazu:

CSS

.ngg-thumbnail img {
    background-color:#ffffff;
    border:[COLOR=Red]4px solid red !important;[/COLOR]
    margin:4px 0px 4px 5px;
    padding:4px;
    position:relative;
}

Saturo

vielen Dank für den Tipp, es hat geklappt.

Viele Grüsse
Christian

maxe

Du sag mal, hast du die ngg-clear Klasse bearbeitet? Sieht bei den Thumbnails irgendwie komisch aus. Mach mal folgendes:

Code

.ngg-clear {
[COLOR=Red]clear:left;[/COLOR]
}

Saturo

war kein Wert gesetzt, ich hab

Code

[COLOR=Red]clear:left;


[/COLOR]

gesetzt stelle aber keinen Unterschied fest.

maxe

Naja, im FF sieht es jetzt wieder vernünftig aus.

Saturo

Ich habe jetzt noch etwas seltsames festgestellt:

hat der Autor Adminrechte werden die Bilder wie gewünscht dargestellt.
Hat er jedoch nur Autorenrechte, werden die Bilder mit einen kleinen Rand dargestellt und highslide funktioniert nicht.

Hat jemand einen Idee was da verdreht ist?

Hier nochmal der Link zum Blog.

Viele Grüsse
Christian

Saturo

Ich habe das Problem jetzt ersteinmal dadurch gelöst, dass ich allen Autoren Adminrechte gegeben habe. So werden die Bilder korrekt dargestellt.

Vielleicht hat ja noch jemand einen Tipp.

Viele Grüsse
Christian

littleturtle

Hallo,

ich komme gar nicht so weit. Ich habe die neueste Version der NGG installiert, schaffe es aber irgendwie nicht, die Rahmen um die Bilder zu verändern. Ich verstehe nicht, in welche Dateien / Themes und CSS-Files ich welchen Code schreiben soll. Könntest Du mir da einen kurzen Überblick geben, wie Du das gelöst hast?

Gruß

Willkommen! Melden Sie sich an oder registrieren Sie sich.

ngg Rahmen um Bilder

Jetzt mitmachen!