Adding CSS to image via Cornerstone – Themeco Community

Adding CSS to image via Cornerstone

cpjennmeakin — Wed, 03 Jun 2015 12:25:38 +0000

I am trying to add custom CSS and add a CSS selector to a single image using Cornerstone, much like you can using Visual Composer. Here is the feature that I’m referring to in VC:

I’m not seeing the option to do this in Cornerstone – can you tell me where I can add this?

Reply To: Adding CSS to image via Cornerstone

Darshana — Wed, 03 Jun 2015 19:46:18 +0000

Hi there,

Thanks for writing in! In the footer of your cornerstone, click on the middle button which then allows you to enable “Advance Controls”, so that you will see inputs for CSS IDs, classes, and inline styling appear.

Hope that’s clear.

Reply To: Adding CSS to image via Cornerstone

cpjennmeakin — Thu, 04 Jun 2015 14:03:24 +0000

perfect – got it, thanks!

something that was missing for me there were some hovers that tell me what each of those icons are. maybe a good detail to add?

Reply To: Adding CSS to image via Cornerstone

Darshana — Fri, 05 Jun 2015 02:31:26 +0000

Hi there,

I’m not sure what controls that you’re referring to. Could you please add little more information? (perhaps a screenshot). So that we can assist you.

Thanks!

Reply To: Adding CSS to image via Cornerstone

Andcom — Mon, 30 Nov 2015 20:24:32 +0000

The advice above completely changes the way I was doing things, I did realise it was that simple. Super useful.

But it has give me the following conundrum:

Sorry to bother you again, based on what I have just learnt above, I am trying to recreate as per the middle iPhone / percentage image.

I am nearly there on the left, but it’s took hours to get this far.

Any chance you could advise with the css as to make close to the middle picture.

Thank you so much in advance

Link:

http://andcom-solutions.com/x-support-test/

Reply To: Adding CSS to image via Cornerstone

Andcom — Mon, 30 Nov 2015 20:25:51 +0000

* not – did not

Reply To: Adding CSS to image via Cornerstone

Friech — Tue, 01 Dec 2015 02:52:33 +0000

Hi There,

At this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. Do you mean how to focus the background image horizontal position on the right? (the woman), If so you can update the background-position property to:

background-position: right 14px;

If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Hope it helps, Cheers!

Reply To: Adding CSS to image via Cornerstone

Andcom — Tue, 01 Dec 2015 16:05:14 +0000

Sorry if I wasn’t more clear, please see the attached image.

The above however is useful to me also. Learning as I go along, thank you for the help.

Thank you.

Reply To: Adding CSS to image via Cornerstone

Jade — Tue, 01 Dec 2015 20:45:15 +0000

Hi there,

Thanks for providing us with clear details.

To accomplish that, kindly adjust the padding of the section where you have attached the phone background image to 0 35px 0 35px and under the Style option, add background-size: 100%;. This should make the background image fit to the column and resize the counter element.

Hope this helps.

Reply To: Adding CSS to image via Cornerstone

Andcom — Tue, 01 Dec 2015 23:42:07 +0000

So the counter I have added the following CSS:

background-color: black; padding: 0px; background-size: 100%;

The Column I have the below padding and CSS:

120px 06 30 60

background-color: black; padding: 0px; background-size: 100%;

Which is got me there in 50 % of screen sizes, but at full screen and tablet the % are to high up into the top of the background picture or the % boxes resize badly.

How can I make the two resize better together I’m guessing I could ad a couple of CSS @media instructions, to keep them more in line a say a handful of resolutions (i.e the apple). Am I on the right track or is there an easier way?

If not please add the CSS here and I’l work out all the resolutions (assuming my logic is correct).

Thank you so much again. I will be buying another theme soon, the support is worth cost 10 fold.