Docs

[mtusa]

hello, I would like to recreate the following date/calendar icon in link below: (see picture attached)
http://www.wp.mallolarquitectos.com/

Is there an element like this in wordpress x theme?

Thank you!

[Jade]

Hi there,

There is a Recent Post element in Cornerstone which you can use but the display is different from the screenshot you provided. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding. Take care!

[mtusa]

This reply has been marked as private.

[Jade]

Hi there,

We could adjust the spacing by adding a custom CSS but would you mind providing the direct link to the test page? I tried checking your pages but I can’t seem to find the correct page.

Thank you/

[mtusa]

This reply has been marked as private.

[Jade]

Hi there,

Thanks for the info.

Please try to add a class to the column of the date. You can find this setting if you click on the pencil icon in the column where the date is. Assuming that the class name you added is event-date, save it then add this code in the custom CSS:

.event-date h2 {
    margin-top: 0 !important;
}

Hope this helps.

[mtusa]

thank you!
is there any way i can get them closer to each other?

Also, how do i remove the extra space between border and text on left and right of the date? I want it to be the same size padding like top and bottom.

Also, in the second column, i want to remove the space between the heading and the main text.

Thank you.

[Jade]

Hi there,

Please update this code:

.event-date h2 {
    margin-top: 0 !important;
}

to

.event-date h2 {
    margin-top: 0 !important;
    margin-bottom: 0;
    width: 100%;
}

As for the event details, instead of adding the content a line after the headline, try to do it this way:

[x_custom_headline type="left" level="h2" looks_like="h5"]GREENBUILD EXPO[/x_custom_headline]Join us at the Greenbuild Expo in Los Angeles, Ca.
Booth#2104

Please edit the event date content and wrap the shortcodes inside a div like this:

<div>[x_custom_headline type="center" level="h2" looks_like="h3"]5-6[/x_custom_headline][x_custom_headline type="center" level="h2" looks_like="h4"]OCT[/x_custom_headline] [x_custom_headline type="center" level="h2" looks_like="h5"]2016[/x_custom_headline]</div>

Then add this CSS:

.event-date div {
    border: 2px solid #efefef;
    width: 120px;
    margin: 0 auto;
    text-align: center;
    height: 100px;
}

Hope this helps.

[mtusa]

That worked. Thank you. but now i want to align the content of first column with the second column.

[Jade]

Please add this code as well:

p:empty {
    display: none;
}

.page-id-3264 #x-content-band-4 .x-column:nth-child(2) h2 {
    margin-top: 5px;
}

Then update this code:

.event-date div {
    border: 2px solid #efefef;
    width: 120px;
    margin: 0 auto;
    text-align: center;
    height: 100px;
}

to

.event-date div {
    border: 2px solid #efefef;
    width: 120px;
    float: right;
    text-align: center;
    height: 100px;
}

[mtusa]

That works but now if i want to add another event in column 3 and 4 and want the same look, how do i change that?

[Jade]

Instead of using this code:

.page-id-3264 #x-content-band-4 .x-column:nth-child(2) h2 {
    margin-top: 5px;
}

Try to add a class to the column that contains the event info just like what we did with the date column. Assuming the class you added is even-info, then replace the code above with:

.page-id-3264 .x-content-band .even-info h2 {
    margin-top: 5px;
}

Hope this helps.

[mtusa]

Thank you but that didn’t change anything.
I added the class to the column content band for 3 and 4.

[Jade]

Hi there,

The class name in the visual composer seems to require a space after it. I have already corrected it and the issue should be solved now.

Hope this helps.

[mtusa]

excellent! thank you!

[Author]

Posts