Tagged: ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • June 27, 2020 at 11:41 pm #1226147
    CharlieTh

    I am trying to recreate the look of the Grid Row on this page. Created with Enfold, it is a very nice site — and a neat look created with your Grid Row element (I think).

    Meet the Judges

    Here is my attempt to figure out how:
    https://goodnewsfortheworld.com/test-page-for-judge-grid/

    I have accomplished most of the look.

    Key(s) to look are
    * Using small images as background, but making them “fly” to upper left or upper right corners, depending on the rows.
    * And also to make the bottom row’s textblock float right.

    However, I haven’t figured out how to do the little green arrows that point to the appropriate images.

    Can you give it a look and see if you can figure out how it’s done?

    Thanks in advance!

    July 1, 2020 at 8:25 am #1227123
    Ismael

    Hey CharlieTh,

    Thank you for the inquiry.

    This is the css used to create the arrow, or how it was added over the image.

    #top .flex_column_table_cell .avia_textblock::after {
    content: "";
    position: absolute !important;
    color: #fff !important;
    display: block;
    z-index: 99999999999999999 !important;
    overflow: visible !important;
    visibility: visible !important;
    font-family: 'entypo-fontello';
    left: auto;
    top: 23%;
    width: 0;
    height: 0;
    border-bottom: 30px solid transparent;
    border-top: 30px solid #e8e8e800;
    border-left: 40px solid #539550;
    right: -30px;
}

    You might have to adjust the selector a bit or add a custom css class to the element where you want to add it.

    Best regards,
    Ismael

    July 9, 2020 at 2:47 am #1229025
    CharlieTh

    Thank you for locating that.
    I tried to change the selector multiple, multiple ways and nothing seemed to “appear.”

    Might you have a suggestion?

    It’s a neat effect.

    July 12, 2020 at 7:19 pm #1229783
    Ismael

    Hi,

    Sorry for the delay. To create the arrow, try to start with this css code.

    .gr-custom .av_textblock_section::after {
	content: '';
	position: absolute !important;
	color: #fff !important;
	display: block;
	z-index: 99999999999999999 !important;
	overflow: visible !important;
	visibility: visible !important;
	font-family: 'entypo-fontello';
	left: auto;
	top: 23%;
	width: 0;
	height: 0;
	border-bottom: 30px solid transparent;
	border-top: 30px solid #e8e8e800;
	border-left: 40px solid #539550;
	right: -30px;
}

    Best regards,
    Ismael

    July 23, 2020 at 11:45 pm #1232824
    CharlieTh

    Great, Ismael!

    I used the following css derived from yours (which I would have NEVER figured out). Looks very nice — but I tried to move the second row’s arrows down a little and can’t figure out what to tweak. I thought top: 23% might be it, but don’t see that that does much of anything.

    Here is my css derived from yours:

    .gr-custom.gr-custom-1 .av_textblock_section ::after {
    content: ”;
    position: absolute !important;
    color: #fff !important;
    display: block;
    z-index: 99999999999999999 !important;
    overflow: visible !important;
    visibility: visible !important;
    font-family: ‘entypo-fontello’;
    left: auto!important;
    top: 23%;
    width: 0;
    height: 0;
    border-bottom: 30px solid transparent;
    border-top: 30px solid #e8e8e800;
    border-left: 40px solid #539550;
    right: 180px;
    }
    .gr-custom.gr-custom-2 .av_textblock_section ::after {
    content: ”;
    position: absolute !important;
    color: #fff !important;
    display: block;
    z-index: 99999999999999999 !important;
    overflow: visible !important;
    visibility: visible !important;
    font-family: ‘entypo-fontello’;
    left: auto!important;
    top: 23%;
    width: 0;
    height: 0;
    border-bottom: 30px solid transparent;
    border-top: 30px solid #e8e8e800;
    border-right: 40px solid #539550;
    left: 180px!important;
    }

    July 28, 2020 at 3:18 am #1233631
    Ismael

    Hi,

    Glad to know it’s working. If you want to adjust its vertical position, try to apply a top margin to the element.

    margin-top: 50px;

    And if you want to pull it upwards, try to use a negative value instead.

    margin-top: -50px;

    Best regards,
    Ismael

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.