Webpage custom module

[ColmK1997]

Hi, 

I have made the following webpage: https://www.privacyengine.io/iapp-training-certification

As you can see i have 4 courses on offer, i was wondering how I can make each course stand out as an invidual tile (border around each section), essentially to make them appear as buttons?

I'd also like to have a sash banner appear on the Bundle course saying "Discount offer". 

Can someone please help me?

[piersg · Accepted solution]

You need to give this card a unique id or class, I was just working with what you had currently.

Then change this

.span3.widget-span.widget-type-custom_widget.box {
  position: relative;
}

to

.[MY UNIQUE CLASS] {
  position: relative;
}

or 

#[MY UNIQUE ID] {
  position: relative;
}

[ColmK1997]

Thanks for your help, it  actually fixed it when i took out the opening: <div section> 

from the header HTML: https://www.privacyengine.io/iapp-training-certification?hs_preview=ziOeZYFp-38007725805

[piersg]

Edit: Ah, I forgot to close the style tag. The last <style> should be </style>. Try that

Maybe the rich text doesn't like styles being added to it like that. Paste the styles into the Header HTML in the Advanvced settings of the page (Settings > Advanced options > Header HTML field) instaed.

[ColmK1997]

Works now, but its appearing in the haeder too: https://www.privacyengine.io/iapp-training-certification?hs_preview=ziOeZYFp-38007725805

[ColmK1997]

Hi I have done that and this is what i am getting: https://www.privacyengine.io/iapp-training-certification?hs_preview=ziOeZYFp-38007725805

[piersg]

In your rich text module, add this HTML (click Advanced > Source code to open the HTML editor of the rich text module):

Edited to close style tag

<div class="ribbon"><span>Discount offer</span></div>
<style>
.span3.widget-span.widget-type-custom_widget.box {
  position: relative;
}
.ribbon {
    position: absolute;
    right: -9px;
    top: -9px;
    z-index: 1;
    overflow: hidden;
    width: 95px;
    height: 95px;
    text-align: right;
}
.ribbon span {
  font-size: 10px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  width: 110px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#9BC90D 0%, #79A70A 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 25px;
  right: -20px;
}
.ribbon span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #79A70A;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #79A70A;
}
.ribbon span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #79A70A;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #79A70A;
}
</style>

[ColmK1997]

Hi, 

Thank you for your response. 

I like the way this site has the banner appear on the top: https://www.cssportal.com/css-ribbon-generator/

Could you please explain to me how I can do this?

[piersg]

Hi @ColmK1997, looks like you figured out the border. For the sash banner, you could do this with the CSS :after or :before properties.

Basic version:

.span3.widget-span.widget-type-custom_widget.box {
  position: relative;
}
.span3.widget-span.widget-type-custom_widget.box:after {
    content: 'Discount offer';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px;
    background-color: #2A8CD1;
    text-align: center;
    color: white;
}

Would look like this: