Portal-Message styled blocks

Plone Support Theming
1

Hello

I am trying to get s block-format, where I can put some block-formats into my site to use with some content for our Intranet.

Out of the alerts.plone.less, I have tried quite some possibilities to build this - unfortunately without success :frowning:

So here is it, how my block should look like:
(i) Info

I struggle, getting the fixed texts in front of my text.

My file for the styles are ina file called stlyes.loosli.less. There the following entry can be found:

.loosli-info {
  border: 0;
  border-radius: @plone-alert-border-radius;
  box-shadow: 0 1px 2px rgba(0,0,0,.17);
  text-shadow: 0 1px rgba(255,255,255,.1);
  background: @loosli-div-block-background;
  > strong:before, > dt:before {
    content: "Info";
    font-weight: @plone-font-weight-bold;
    color: @loosli-gray-dark
    }
  > strong:before, > dt:before {
    content: "i";
    font-weight: @plone-font-weight-bold;
    color: @loosli-div-block-background;
    background: @loosli-blue
    }
}

It just somehow does not work out as I expected... The first part is working, setting the formats for the Block-text as defined. But when I want to use the "strong"-part before, none of the fixed text is showing up.

If you think, this is totally wrong, this guy has no clue of what he is doing: Well, that's right: I'm just trying to see, what I see in the other less-files (mainly out of alerts.plone.less) and adapt it to the styles.loosli.less-file. In order to correct that, I ask here in the forum :slight_smile: I am pretty sure, once, I know the trick, I can manage my path on my own.
-> I didn't find out with these less-files, what options are available and what they mean and how they need to be applied...

Is anybody kindly able to give me a hint further, so I can move on? Thank you very much in advance!

Kind regards
David

2

With the help of @agitator this could be solved.
The following shows, how to put a text - we have a small letter "i" with a light color and a round background with the desired colour as background - in front of a text-block.

// block-name
.loosli-info {
// general format of the block
  border: 0;
  border-radius: @plone-alert-border-radius;
  box-shadow: 0 1px 2px rgba(0,0,0,.17);
  text-shadow: 0 1px rgba(255,255,255,.1);
  background: @loosli-info-block-background;
// text to put left (before) of the content within the textblock
  &:before {
    content: "i";
    display: inline-block;
    margin-right: 0.5em;
// this makes it a round spot and gives it a colour
    border-radius: 50%;
    width: 1.5em;
    background-color: @plone-alert-info-bullet;
// put the "i" in the middle of the spot
    padding-left: 0.65em;
// text format
    font-weight: bold;
    color: @loosli-info-block-background;
// put the created spot (blue) with light "i" left of the paragraph of the block (like in a listing)
    margin-left: -2em;
  }
}

I hope, this helps other people as well who are batteling with nicely looking content :slight_smile:

Great weekend to all and thnak you
David