[SOLVED] Need some help for adapting the css in the context of CB & prostar template

Hi, I am no css expert. Because of this I need some help for adapting the css file of my prostar template (PS: So far I have added all modifications to the file: /templates/protostar/css/user.css ...and this worked fine) But I don't know how to fix the following 'wish':

But let me explain from the beginning:


As soon as you click on the CB registration button it looks like this:





...in order to add some extra spacing between the images (blue arrow) I added the following (override) commands to the user.css file of the prostar template:

/** this command shiftet the sunset image little bit downwards **/
/** the value: 2rem is not important for the moment **/

.cb_template .col-12 {
padding-top: 2rem;
}


/** by the help of this command I have filled up the white background space with my 'heart' background image - same background
image as on the remaining website **/

.cbCanvasLayoutBackground {
background-image: url("/images/Herzmuster_20210222-min.jpg");
}



the result looks not bad but ist not perfect:





I have marked the 'problem' with red arrows .....there seems to be a very thin line, separating the background of the canvas and the background of the whole website (ps: both background images are identical)....and I have absolutely no idea how to wipe out this kind of 'border'. As already mentioned I am not a css expert. I am sure there is a more easy way to do it

regards

.cb_template .col-12 {
padding-top: 2rem;
}

Do not do this. That's too generic and will impact every grid on your site. Use the CSS class cbRegistration which surrounds the entire CB registration output. Example as follows.


Ideally you should just be adding a bottom margin to whatever is above the component output and your module on the left though.

.cbCanvasLayoutBackground {
background-image: url("/images/Herzmuster_20210222-min.jpg");
}

This is not necessary. We provide a parameter to select an image for the registration header canvas background within CB > Configuration > Registration using the "Registration Title Image" parameter. Ensure the image has a simple alphanumeric name and is placed in Joomlas images folder.

there seems to be a very thin line, separating the background of the canvas and the background of the whole website (ps: both background images are identical)....and I have absolutely no idea how to wipe out this kind of 'border'.

That's due to the canvas background having a thin border around it to blend it into the page. Your current CSS is pushing down its grid so it's pushing it away from its border. My above CSS class suggestion of cbRegistration will avoid this issue.

Thanks - your script works perfectly:-)