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

2 years 7 months ago - 2 years 7 months ago #326014 by erichburkhard
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
Attachments:

Please Log in to join the conversation.

2 years 7 months ago #326016 by krileon

.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.

.cbRegistration {
    margin-top: 2rem;
}

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.


Kyle (Krileon)
Community Builder Team Member
Before posting on forums: Read FAQ thoroughly + Read our Documentation + Search the forums
CB links: Documentation - Localization - CB Quickstart - CB Paid Subscriptions - Add-Ons - Forge
--
If you are a Professional, Developer, or CB Paid Subscriptions subscriber and have a support issue please always post in your respective support forums for best results!
--
If I've missed your support post with a delay of 3 days or greater and are a Professional, Developer, or CBSubs subscriber please send me a private message with your thread and will reply when possible!
--
Please note I am available Monday - Friday from 8:00 AM CST to 4:00 PM CST. I am away on weekends (Saturday and Sunday) and if I've missed your post on or before a weekend after business hours please wait for the next following business day (Monday) and will get to your issue as soon as possible, thank you.
--
My role here is to provide guidance and assistance. I cannot provide custom code for each custom requirement. Please do not inquire me about custom development.
The following user(s) said Thank You: erichburkhard

Please Log in to join the conversation.

2 years 7 months ago #326078 by erichburkhard
Thanks - your script works perfectly:-)
The following user(s) said Thank You: krileon

Please Log in to join the conversation.

Moderators: beatnantkrileon
Time to create page: 0.355 seconds

Facebook Twitter LinkedIn