Element inspecteren ,cq wijzigingen Joomla site

[thecase]

Ik heb een vraag over "element inspecteren" in CHROME.

Nu heb ik een Joomla-website en die wil ik op enkele dingen gaan aanpassen.
Zo heb ik een module "media sponsor" welke een random weergave geeft van plaatjes. (1)
Nu wil het zijn dat de plaatsje niet goed worden weergegeven en wil ik dus enkele gegevens aanpassen.(paarse gebied)
Nu kan ik zien (bij nr.2) wat ik moet aanpassen .
Maar ik weet niet waar ik dat moet doen bij mijn ftp-bestanden van de website ?
Als ik iets wijzig bij nr.3 dat weet ik dat , de bestandsnaam staat daar namelijk achter.

Dus mijn vraag is waar kan ik die dingen, die staan bij nr. 2 aanpassen?

Gr. Jan

 

[Tha Devil]

Ik zou in custom.css een nieuwe declaratie toevoegen:

.vsirw a img {
    position: absolute;
    max-width: 100%;
    opacity: 0.05
    z-index: 1;
    top: 6px;
    left: 2px;
}

 

[thecase]

Dit is misschien wel een oplossing ,maar het gaat mij om waar ik deze dingen aan kan passen.
Dus als dat iemand mij nog kan vertellen.
Ik ga dit z.w.z. proberen Tha Devil.

 

[Tha Devil]

Je bedoelt dat je niet weet waar dat bestand (custom.css) staat? Even het "Netwerk"-tabblad openen in je Inspector, daar staat hij wel tussen. Dubbelklik er op en hij opent in een nieuw venster.

Daar kun je mooi het pad naar het bestand zien

 

[thecase]

Nee Tha Devil , ik bedoel als ik iets bij nr.3 aan wil passen staat er achter custom.css en dan de regel waar ik het moet aanpassen ,maar als ik iets wil aanpassen bij nr.2 dan staat er volgens mij nergens waar ik dit moet aanpassen.
Als ik het probeer bij nr.2 dan kan ik zien of het goed is wat ik wil aanpassen ,maar dan ik de vraag ,waar moet dit in bijv. het css of iets dergelijk (ftp-bestanden)

 

[thecase]

Dat custom.css behoort tot de module mod_za_slider ,waar ik aanpassingen in wil doen is VS Image Rotator (vsir) .
Ik zie alleen een vsir.js bestand en als ik die open staat er nergens iets in over dat .vsirw a img {
position: absolute;
max-width: 100%;
opacity: 0.05
z-index: 1;
top: 6px;
left: 2px;

ik denk dat ik u verkeerd begrijp en zit verkeerd te zoeken !

 

[Tha Devil]

Stijl declaraties toevoegen aan nr. 2 is niet aan te raden. Dan ga je inline CSS maken en dat zorgt voor slechte onderhoudbaarheid

De regels die ik eerder gaf gaan hetzelfde resultaat hebben, alleen staat het dan netjes in een CSS-bestand en wordt er gebruik gemaakt van specifieke selectors (Namelijk: Een HTML-element met de CSS-class "vsirw" die een "a" bevat, waar weer een "img" in staat)

Aangezien de module geen eigen CSS-bestand heeft zou ik het in die van de template toevoegen (Die kun je waarschijnlijk ook binnen het admin-gedeelte van Joomla wijzigen)

Volgens mij is dat tmpl.default.css.

Voeg daar onderaan deze regels toe en herlaad de pagina:

/***************************************************************************
/*
/*   Custom CSS 
/*
/**************************************************************************/
.vsirw a img {
    position: absolute;
    max-width: 100%;
    opacity: 0.05
    z-index: 1;
    top: 6px;
    left: 2px;
}

 

[thecase]

Ik heb het geplaatst in tmpl.default.css. maar er verandert niets!

 

[Tha Devil]

Ik zie waar het probleem zit: De stijl wordt er nu via JS op toegepast en die over ruled de declaratie vanuit het CSS-bestand.

De berekening in het JS-bestandvan de huidige waardes wordt echter op basis van de afbeeldingen gedaan. Van de grootste afbeelding worden de gegevens gebruikt.

Ik zie dat niet alle zaken aangepast hoeven te worden, enkel de positie waardes.

Wijzig de code dus naar:

/***************************************************************************
/*
/*   Custom CSS 
/*
/**************************************************************************/
.vsirw a img {
    top: 6px !important;
    left: 2px !important;
}

Het gebruik van !important binnen CSS is iets dat ik niet gauw aanraad, maar in dit geval moet je wel aangezien je met inline-CSS zit.

 

[thecase]

Super Tha Devil het werkt.