Row Top Style

[Adrian]

Hi.

I would like to know if it’s possible to choose the “chevron” style as in the PSD file?

Thank you

Adrian

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Hi

Sorry I’m not sure what you’re referring to?

– Kyle

[Adrian]

Hi Kyle.

I’m referring to the Row style that can be modified with the Swift Page Builder. (Check FB_02.png) Right now I can choose between “Slant Left-to right or Slant Right-to left”

I need to change the Row style into the “chevron”‘ style (Check Chevron.png) present in the PSD file.

Sorry if my English is approximate.

Adrian

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Unfortunately that’s not currently possible, but something we will consider for a future update

– Kyle

[Adrian]

Thank you for your quick reply.

If it isn’t available, it’s strange to use this style in your designs… A bit confusing.

Adrian

[Kyle – SUPPORT]

Sorry I did not realise it was in the design. Basically we have a main designer and a main developer, the designer will first create the PSD for theme, and then send to the developer to build. Some things are not possible/easy for the developer to do, so not everything from the design ends up in the final theme.

I’ll check if this is something that is possible to add

– Kyle

[Adrian]

Ok, I understand.

Thank you to have a look at this featured.

have a nice day.

Adrian

[Kyle – SUPPORT]

No problem

[ehstadolnik]

I made the same mistake of using the chevron background in my client-approved design, so I put this hack together and it works pretty well:
CSS

.spb-row-container[data-top-style="slant-ltr"]:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-top: 50px solid #FFF;
  border-left: 683px solid transparent; /* overridden with JS */
  border-right: 683px solid transparent; /* overridden with JS */
  background: transparent;
  -webkit-transform: none;
  -moz-transform: none;
  transform: none;
}

#main-container .spb-row-container[data-top-style="slant-ltr"]:before,
#main-container .spb-row-container[data-bottom-style="slant-ltr"]:after {
  background: transparent;
}

.spb_row_slant_spacer {
  height: 50px;
}

JS

    /* Chevron */
    function computeChevron() {
      var row = $('.spb-row-container[data-top-style="slant-ltr"]');
      var borderWidth = row.width() / 2 | 0; // calculate & trim decimals

      $('<style>.spb-row-container[data-top-style="slant-ltr"]:before{border-left-width: ' + borderWidth + 'px !important; border-right-width: ' + borderWidth + 'px !important;}</style>').appendTo('head');
    }
    computeChevron();

    $(window).on('resize', function(){
      computeChevron();
    });

[Kyle – SUPPORT]

Ok great!

– Kyle