[Tristan AParticipant]

Hi there,

In a few topics there have been requests for code to point downpointing arrows on content bands. For example, in this topic: https://theme.co/x/member/forums/topic/adding-row-divider-shapes/

There you have suggested to add the class down-arrow to the content band and add the following CSS.

.x-content-band.down-arrow {
position: relative;
}

.x-content-band.down-arrow .x-container-fluid {
position: static;
}

.x-content-band.down-arrow .x-container-fluid:before {
content: “”;
display: block;
position: absolute;
top: 0;
left: 50%;
width: 0;
height: 0;
margin-left: -25px;
border-width: 25px;
border-style: solid;
border-color: #dbdbdb transparent transparent;
}

.x-content-band.down-arrow .x-container-fluid:after {
content: “”;
display: block;
position: absolute;
top: -1px;
left: 50%;
width: 0;
height: 0;
margin-left: -25px;
border-width: 25px;
border-style: solid;
border-color: #fff transparent transparent;
}

I have tried this as well as similar solutions suggested elsewhere on the forum. None of these seem to work?

I will private a URL and login credentials in a private reply.

Many thanks!

[Tristan AParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

Thank you for the access information. The code isn’t working because it is no longer applicable in your site. Please replace it with the code below.

.x-content-band.down-arrow {
  position: relative;
}

.x-content-band.down-arrow .x-container {
  position: static;
}

.x-content-band.down-arrow .x-container:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -25px;
  border-width: 25px;
  border-style: solid;
  border-color: #dbdbdb transparent transparent;
}

.x-content-band.down-arrow .x-container:after {
  content: "";
  display: block;
  position: absolute;
  top: -1px;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -25px;
  border-width: 25px;
  border-style: solid;
  border-color: #fff transparent transparent;
}

Please let us know if this works out for you.

[Tristan AParticipant]

Ok thanks!

I have one issue though still. I want a triangular indent from the first content band in white, into the second content in black.

So I added the class ‘down-arow’ to the second content band. However, there now is a triangle appearing on top off the first white content band too??

Also I added 15px of padding on top of the black content band, the triangle is now a bit off…

Thanks for all your help!

[Rue NelModerator]

Hello There,

To target which content with different color, you use the ID just like this.

#x-content-band-2.down-arrow .x-container:before {
  border-color: #000 transparent transparent;
}

When you add a padding on the content band, it moves down because the top is based on area of the container of the content band. If you want to add a padding, you make use this and not on the content band itself.

.x-content-band.down-arrow .x-container {
  padding: 15px 0;
}

Hope this helps. Kindly let us know.

[Tristan AParticipant]

That certainly worked getting the arrow right!

However, the CSS code for the padding didn’t work.

I solved this, by adding padding to the mailform elements in the black content bar. That works fine. However, when I resize the screen to smaller sizes, the triangle separates from the white content bar and floats into the black content bar again?

[ZeshanMember]

Hi Tristan,

Thanks for writing in!

Upon checking, the arrow is appearing just fine for me on smaller screens (see: http://prntscr.com/72ks3l). Would you mind confirming again? Perhaps you can provide us with some screenshots of the issue.

Thanks!

[Tristan AParticipant]

Yes, you are right indeed! Strange…I am 100% convinced it looked different before. I may have purged the cache in between or something… but it does look much better.

Thanks!

[NicoModerator]

Glad to hear that.

Let us know if you need anything else.

Thanks. Have a great day! 🙂

[Tristan AParticipant]

One more question on this topic…. What if I wished to change the color of the down-arrow?

Say… I have a red content band. I could target that content band as suggested above, but how to change the color of the arrow, to match the content band?

[FriechModerator]

Hi There,

Simple change the border-color property.

#x-content-band-2.down-arrow .x-container:before {
  border-color: #ff0000 transparent transparent;
}

Thanks!

[Tristan AParticipant]

This reply has been marked as private.

[ZeshanMember]

Hi Tristan,

Please use following code instead:

#x-content-band-5.down-arrow .x-container:before,
#x-content-band-5.down-arrow .x-container:after {
    border-color: #c9c9c9 transparent transparent;
}

Thanks!

[Tristan AParticipant]

Thanks! That works!

Final question: I will probably have several standard content bands in different colors that I would like to have the down-arrow on. For example, red, blue and green ones.

Rather than Id them by by number (as in #x-content-band-5.down-arrow, #x-content-band-6.down-arrow, etc.) it should be possible to ID them universally (“red-band”, “green-band”) and add class “down-arrow”?

So the CSS would be something like:

#green-band.down-arrow .x-container:before,
#green-band.down-arrow .x-container:after {
border-color: green transparent transparent;
}

#red-band.down-arrow .x-container:before,
#red-band.down-arrow .x-container:after {
border-color: red transparent transparent;
}

Correct?

[ChristopherModerator]

Hi there,

No, content bands don’t accept ID, the current IDs generated automatically, if you wish to use custom ID then switch to classic editor,text tab and wrap your text like this :

<div id="red-brand-down">content here</div>

Now you can add a button and instead of using standard ID, use this custom ID.

Hope that helps.

[Author]

Posts