Basics: How to center a custom headline vertically

Hello,
I have an image as background. I overlaid this image with a Classic Custom Headline. I’m able to center this headline horizontally. But not centered vertically. I read your Support pages and found RueNel’s advice in Oct 17 to insert: vertical-align: middle; I did that but still couldn’t rectify it. As I don’t know CSS, could you guide me:

(a) How do I center the headline on all screens - such that the headline is equal distance from the top, bottom, right & left edges of the image?

(b) In order to make the headline stand out, is there a way to add a mask to my image on Cornerstone, i.e. to lighten the colours & make the image look cloudy?

(c ) I added a gray background to my custom headline. (so the headline appears to be in a box of its own.) But on laptop view, the headline is also not centered on this background box, but leaning closer to the bottom. (as seen in above screen shot). On phone view, the headline is center on the background box, but not on the image.
I have padding of the image set to zero, and margin-less row. And did what RueNel said:

(d) What’s the difference between “classic row” vs “row”, “classic column” vs “column” - as seen in the above screenshot of skeletal view?

Hello There,

Thanks for writing in!

To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation.

a.) The custom headline has a default top left bottom and right margin. Setting all the margin to a minimum or by adding a man (margin all none) class should resolve this issue. To know more about element spacing, please check this out: https://theme.co/apex/forum/t/customizations-element-spacing/211

To check all the utility classes, you can find it here: https://theme.co/apex/forum/t/customizations-css-class-index/207

b.) If you increase the opacity of the background color, the custom headline should stand out. Please increase it to at least 0.65 and see how it goes.

c.) I would love to check your page and the settings you have in creating this section. Please provide us access to the site.

d.) Classic elements are those elements that offers easy access and set up with no advance options like colors, margins, padding, borders, etc. The v2 elements on the other hand have different options that you can add or change like margins, padding, text color, alignment, font weight, shadows, separators, background image and background videos and a lot more.

Hope this helps.

1 Like

I didn’t realise my so called “background box” for my headlines was actually the opacity! I removed it to avoid any problems of entering the headline. Incidentally, is there an intro or non-techie guide to using this “opacity” and color of background anywhere in KB? i.e. the 2 rows and the graph of colours selection.

I applied the “man” in the “class” box, and it solved my issue. Thank you, RueNel!

You’re welcome!
We’re glad we were able to help you out.

By the way, we do no have any guide to use opacity or background colors in the knowledge base.
You can check this instead:
https://www.w3schools.com/CSSref/css3_pr_opacity.asp
https://www.w3schools.com/CSSref/pr_background-color.asp

Hmm, the 2 links are a bit technical for me. I was hoping to get some simple guide on using this color chart in Cornerstone:

I’ve been groping in the dark without fully appreciating the nuances. Eg, the 2 bars, the 3rd layer (with the 4 football circles). If I want black, do I move the circle on the color chart to the left or right…

Hello There,

The slider is for the opacity. The left side is transparent and if you slide to the right side, the color will become more into a solid color. If you want black, select the black color in the color picker and make sure that it is solid. The black color is rgba(0,0,0,1) or rgb(0,0,0);

Hope this helps.

Grateful. I didn’t know black has 2 ways of representing it!

Last question: what is the mystery of that 3rd row of 4 circles that look like footballs?

Hi,

You can set those in the color manager.

See screenshot

Thanks

Thanks Paul for solving the mystery of the ‘footballs’!

For beginners reading this, I found out these ‘footballs’ are to recall your saved colours.

If you need anything else please let us know.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.