customize Phoca Spectrum in Joomla 6

[phanti09]

Hi,
I'm trying to adapt Spectrum template to my website. I have a question regarding the design of the feature box. How can I maintain the design? The images are shown in a circle but they look compressed or stretched. How can I influence the design?
I installed also a blank Spectrum with the demo content, but do not get the point, where these designs are maintained.

I adjusted also the image sizes to the same size than in demo data, but that do not solve the issue.

[christine]

Hi,

It's difficult to guess without seeing it. If possible, please show us the URL.

Kind regards
Christine

[phanti09]

Hi,
I add a screenshot here:
https://imgur.com/a/vvSYIkx

I have the site currently only in my local environment.
Where are these circles comming from? Do I have influence on the colors etc? I found out that the sharpness and the stretching becomes better when I increase the picture size.
Thanks
Stefan

[phanti09]

Hi,
I managed the issue with the pictures. I tested with size and resolution and managed it at the end.
https://imgur.com/a/uc2FzRC

Will you please describe, how the circle around the pictures is made?
Thank you
Stefan

[christine]

Hallo Stefan,

Wir können hier Deutsch schreiben (anhand der screenshots).
Wenn Du mit dem Inspector über das Bild (welches wir leider nicht sehen können) hoverst, solltest Du Segmente/Codes sehen.

Hier wegen "Circles": https://www.w3schools.com/HOWTO/howto_css_circles.asp
Also haben die Bilder ev. wo: border-radius

Liebe Grüße
Christine

[christine]

Hallo Stefan,

Benno hat mir freundlicher Weise ein Spectrum zur Verfügung gestellt.
In Moment eine (vorübergehende) funktionierende Lösung, da es keine custom.css oder user.css gibt.

Und zwar gehst Du zu:
Templates: Anpassen (Phoca_spectrum) > Editor > CSS
Datei „‎/media/templates/site/phoca_spectrum/css/override.min.css“ im Template „phoca_spectrum“ bearbeiten
Code ans Ende dort gesetzt:

Code: Select all

.phModParticlesFeatureBoxContainer .phModParticlesImage img {
border-radius: 0 !important;
}

Liebe Grüße
Christine

[christine]

Hallo,

erstelle Dir eine user.css

Templates: Anpassen (Phoca_spectrum) > Editor > CSS
Neue Datei >
Dateiname: user
Dateityp: .css
Erstellen

https://imgur.com/a/E7TaK8z
und dort den Code (voriges Post) eingeben.

Liebe Grüße
Christine

[phanti09]

Hallo,
wenn ich also in Spectrum ein Particle vom Type Feature Box verwende, werden die Images immer kreisförmig dargestellt. Es ist nicht vorgesehen, über das Backend das zu ändern. Verstehe ich das so richtig?

Ich habe auch noch ein weiteres Problem. Ich versuche unsere Themenübersicht wie in den Beispieldaten des Templates unter references darzustellen.
https://imgur.com/a/A2ClqEI
Vom Banner Particle habe ich einen Link (#our-team) zum ersten Thema (Urlaub) eingebaut.
https://imgur.com/LqeYp56
Das funktioniert prima. Ich möchte nun vom Thema Urlaub einen Link zum nächsten Thema Hunde einbauen. Dabei stellt sich das Problem, dass ich für alle Themen ein Particle Type Image and Content an der Position bottom-d benutze. Damit wäre der internen Link immer gleich. Wenn ich ander Positionen verwende (bottom-c, bottom-e, bottom-f) ist die Darstellung des Inhalts anders. Bei bottom-b ist die Schriftfarbe weiß, bei bottom-c wird ein gelber Rahmen über den Inhalt eingeblendet.
https://imgur.com/0JarbnA
Ich habe versucht, die Parameter im Template-stil auf dem Reiter Layout(Webseite) anzugleichen, also alle Einstellungen wie in bottom-d einzustellen. Das hat so leider nicht funktioniert. Es wäre super, wenn man die unterschiedliche Darstellung der einzelnen Positionen bottom-a bis bottom-g im Backend des Template-Stil ein- oder ausschalten könnte.
Aber vielleicht finde ich ja nur nicht den richtigen Punkt, um meine Wünsche zu realisieren.
Danke für eure Hilfe
Stefan

[Jan]

Hallo, in den Vorlageneinstellungen kann man eigene Container hinzufügen und nicht benötigte Container deaktivieren. Benötige ich einen ähnlichen Container beispielsweise für eine bestimmte Position, erstelle ich einen neuen, platziere ihn unter dieser Position und weise ihm dieselben Werte wie dem vorherigen Container zu.

[phanti09]

Hallo Jan,
vielen Dank für die Antwort. Ich mag die Phoca Templates, meine aktuellen Webseiten, https://bommelreisen.de und https://berendesbande.de sind mit dem Horizon Template realisiert.
Ich würde euch ja auch gern unterstützen und ggf. eine Benutzeranleitung schreiben, aber mir fehlen einfach zu viele Informationen. Deine Antwort hilft schon etwas weiter, aber die gestellten Fragen hast du nicht beantwortet.

Wie kommt das Design in den Container - ich vermute über CSS Klassen oder Variablen?
Nur welche sind das und an welcher Stelle muss man ansetzen, um sie zu ändern?
Ich vermute wiederum in der user.css kann man die passenden Overlays erstellen.

Ich hab mir das Spectrum Video auf YouTube angesehen. Da gibt es am Ende einen Bonus um die Hintergrundfarbe der Button zu setzen. Dazu muss man schon wissen, wie Dinge heißen, die man überschreiben möchte. Gibt es dazu eine Liste oder Dokumentation? Brennend interessieren würde mich die Background Farbe des Footer Particle.

Ich gebe gerne zu, dass meine CSS Kenntnisse nur mäßig sind. Ich bin eben kein Programmierer sondern ein ambitionierter Anwender.
LG
Stefan