avatar Circular image

[Fred Montier]

Hi, having problem with CSS in a uniImage. My goal is to produce circular images with CSS but I can only apply to the main class in CustomCSS as follows:

img {
  vertical-align: middle;
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

Problem is, affects all uniImage. I want to apply to a specific uniImage

When I change the name for instance ...

.avatar {
  vertical-align: middle;
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

And try to apply in only one specific  uniImage it does not work. Have tried beforeinit, run time adding  config.cls , addCls etc...

Using version 1.0.70.92

 

 

Edited April 5, 2019 by fredmontier
Forgot print

[Sherzod]

11 minutes ago, fredmontier said:

And try to apply in only one specific  uniImage it does not work. Have tried beforeinit, run time adding  config.cls , addCls etc...

Hi,

Try:

1. UniImage ->

function beforeInit(sender, config)
{
    config.cls='avatar';
}

2. CustomCSS:

.avatar img {
  vertical-align: middle;
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

 

[Fred Montier]

Oh.. .man...  I'm so dumb !

Thanks a lot. This is for a example I will post here.

A lot of people asked me about it and it turn out to be a little trickier than I thought.

Really appreciated your help.

[FFREDIANELLI]

But how to have two diferent sizes, for example, i need with 50px on header and 24 on grid it assume only the first one even with different names, the second stay squared.

ON FIRST BUTTON

function beforeInit(sender, config)
{
   config.cls='avatar50';
}

ON SECOND BUTTON

function beforeInit(sender, config)
{
   config.cls='24avat';
}

on SERVERMODULE

 .avatar50 img {
  vertical-align: middle;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

 .24avat img {
  vertical-align: middle;
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

Result:

[FFREDIANELLI]

My deadline date to finish my programa is arriving... no one have one idea to how to have two circular images of different sizes in the same form ?

[Sherzod]

50 minutes ago, FFREDIANELLI said:

My deadline date to finish my programa is arriving... no one have one idea to how to have two circular images of different sizes in the same form ?

.avatar50 img {
  vertical-align: middle;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.avatar24 img {
  vertical-align: middle;
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

function beforeInit(sender, config)
{
    config.cls='avatar50'
}

function beforeInit(sender, config)
{
    config.cls='avatar24'
}

 

[Sherzod]

CSS class names should not begin with a number...

[55143681]

On 4/17/2019 at 1:00 AM, Sherzod said:

CSS class names should not begin with a number...

 

On 4/17/2019 at 12:58 AM, Sherzod said:

.avatar50 img {
  vertical-align: middle;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.avatar24 img {
  vertical-align: middle;
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

function beforeInit(sender, config)
{
    config.cls='avatar50'
}

function beforeInit(sender, config)
{
    config.cls='avatar24'
}

 

Every one ,This method works well,

but ,

You should not copy the code from the web,

You should type the code yourself.

 

[gerhardhziegler]

Good evening, how could I generate this effect at runtime, because I automatically create the pictures!
If I just copy the Source-Text into UniEvents.Text it doesnt work.

function beforeInit(sender, config)
{
    config.cls='avatar50'
}

[Sherzod]

Hello, 

1 hour ago, gerhardhziegler said:

If I just copy the Source-Text into UniEvents.Text it doesnt work.

Give an example, a testcase  of how you do it.

[gerhardhziegler]

6 hours ago, Sherzod said:

Hello, 

Give an example, a testcase  of how you do it.

Dear Sharzod, i already solved the problem using JSCall to add to Cls.

[Sherzod]

Hi,

35 minutes ago, gerhardhziegler said:

using JSCall to add to Cls

Yes