Docs

[acritch]

I recently switched to using Cornerstone from VC. For me, it means having to re-do the couple of pages I had created using VC and some 3rd party VC plug-ins (X just didn’t provide everything I wanted). Now that I am using Cornerstone I cannot use those 3rd party plug-ins and I need to figure out how to do it with Cornerstone.

Ultimately what I am looking for is something like this:

3 icons with counters and static text.

This is how I was trying to accomplish the 3 icons with counters:

1. Make a new row and split it into 1/3s
2. In each 1/3 column place a Block Grid with 2 blocks.
3. In the 1st block place the icon image – this is working no problem.
4. In the 2nd block place the shortcode for Counter – here lies the issue… I go the counter code from the Integrity shortcode list. I am trying to use the one with an icon in the suffix. I modified the shortcode to have the icon I want with the values and colors I want, but the icon isn’t changing away from the light bulb used in the example. This is the shortcode I am using:

[counter num_start="0" num_end="10" num_suffix="% <i class='x-icon-arrow-down' data-x-icon=''></i>" num_speed="1500" num_color="#fe461f" text_above="" text_below="in required planning activities"]

There are also three other counter/cornerstone related issues I am facing:

1. If I paste the shortcode into the “Text” (instead of “Visual”) it appears fine in the preview (aside from the icon issue mentioned above). If I then switch to “Visual” it removes the icon and all formatting from the shortcode. The only way to get it back is to re-paste or re-type the code.

2. I tried to add the Counter shortcode using the Shortcode box above the text field, but when I click on the “Counter” shortcode nothing happens. The others work fine and will show options, but not Counter. Why is this?

Any ideas how to fix these problems? If I can get the first issue solved with the icon the other two are less important, but if you have any info on all 3 that would be awesome! I would also be open to options if there is another way to accomplish what I am looking for.

[acritch]

This reply has been marked as private.

[Rad]

Hi there,

It should be like this,

[counter num_start="0" num_end="10" num_suffix="% <i class='x-icon' data-x-icon='&#xf063;'></i>" num_speed="1500" num_color="#fe461f" text_above="" text_below="in required planning activities"]

data-x-icon should have the icon code for the arrow, you can find other icon codes here http://fontawesome.io/cheatsheet/

I went ahead and changed it on your provide page.

Cheers!

[acritch]

Awesome! Thank you very much!

[acritch]

One more question on this band.

The spacing in the right-most column of the row is too close to the right edge. I want to align the counter shortcode to the left, but everytime I go to the visual side to set the alignment I lose my icon and styling on the counter. What can I add to the shortcode on the text side to do the alignment?

[Joao]

Hi There,

In Cornerstone you can add 5% to the padding right of each column.

Please see img attached.

Hope that helps,

Joao

[acritch]

That did it, thanks!

When trying to design a site that will look good (as it can) on all devices is it best to use % for padding/margin values or px?

[Joao]

Hi There,

I personally always use % because % is not absolute while pxs is, there is also another measures vh em, it is an intersting subject to have a read when working with web design.

Explore it a bit 🙂

Let us know if you have any questions,

Joao

[Author]

Posts