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