[jrhager84Participant]

I have images for a bio section that will be overlaid on the background per row on the bio page. I have cutout the images, and have no matte and a transparent background. However, when I import it into cornerstone, there’s a white border around the subject. Please advise. Thanks!

http://www.guardiancheer.com/about-us

All up to date.

[ThaiModerator]

Hi There,

Did you mention this image: http://www.guardiancheer.com/wp-content/uploads/2016/04/Deon.png?

I couldn’t see any white borders around it.

Could you please provide us with a screenshot?

Thank you.

[jrhager84Participant]

What the heck? The white stroke around the image is now gone, but now for some reason the image quality is all aliased. Do you have any tips for adding a transparent png to a background in theme x? Thanks!

[jrhager84Participant]

Also — I can’t seem to get the image to align to the bottom, so there’s no gap between the end of the picture, and the bottom of the row. I have to offset it with margin, and when you zoom/scale, it gets off of the bottom line. Just wondering what code one would use for that. Thanks!

[ZeshanMember]

Hi there @jrhager84,

Thanks for writing back!

You should be able to use any transparent high-quality image just fine. As for the margin below the row, you can remove it by adding the following CSS code under Custom > CSS in the Customizer:

.x-container.offset {
  margin-bottom: 0;
}

Thank you!

[jrhager84Participant]

Can I add this in the style section of the individual row that I want to add this to? Just curious. Thanks!

[ZeshanMember]

Hi there,

Thanks for updating the thread!

This CSS code won’t be applied to the row or section but instead on the page container itself. This is because you are using the default page template and that template has a margin top and bottom styling. For more information on the page templates, please refer to this article: https://community.theme.co/kb/page-templates/

Thank you!

[jrhager84Participant]

Apologies, but this novice is confused. If I change the template, can I add that css code into the style of that individual row in cornerstone?

[JoaoModerator]

Hi there,

I am not sure I understand what you mean by templates on this case.But if you change The templates all your content will be overwritten unless you save as a Cornerstone Template or Block and re-use it later.

If you mean Stacks Like Integrity, Renew, Ethos or Icon, your CSS will still be there.

In case something happen you also can always go back to the Customizer and add it again.

But if you would like to apply the code to inside Cornerstone you can apply it to the Section or Row depending on your goals.

The Style Box is located at the bottom of the Sections, Rows, Columns and Elements on Cornerstone, please se attached image.

Hope that helps,

Joao

[jrhager84Participant]

Yes. That was my question. I would like to add the custom code to the style portion inside of cornerstone, that way if anything gets deleted or changed over time, it’ll erase redundant code. I’m assuming the style box already takes the brackets into consideration, so I can omit those?

[RadModerator]

Hi there,

You can only add styling within the style input box. You can only add class based CSS (with brackets) in custom CSS section.

For example, you can add this styling as is to Style input box.

color:#000; font-weight: bold;

Then you can also add this class based CSS to customizer or cornerstone’s custom CSS.

.hello_world {
color:#000; font-weight: bold;
}

Since it’s class based, then you can simply add hello_world to Class input box, instead of Style input Box.

Hope this helps.

[jrhager84Participant]

So I’m having a pain getting it to align at various zoom levels (making it responsive). Is there a way to have the image ‘snap’ into a circle almost social-media style icon in mobile? So it doesn’t look weird? Sorry, this newb is trying his best! hahaha

[ChristopherModerator]

Hi there,

Please add this CSS :

div#deon {
    background-color: #000;
    border-radius: 100%;
    height: 100%;
}

Remove negative margin from image element. Add mbn in image’s class field.
Add pbn in section #2 class field.

Hope it helps.

[jrhager84Participant]

Is there a resource somewhere that explains these classes, and what their practical application is? what does mbn and pbn stand for, and what is the significance of it? Please direct me where appropriate. Thank you!

[jrhager84Participant]

The inclusion of mbn and pbn actually led me to the resource for the *why*. I’ll post here for any that run into similar issues.

https://community.theme.co/kb/css-class-index/

[Author]

Posts