We build. You grow.

Get best community software here

Start a social network, a fan-site, an education project with oxwall - free opensource community software

Get started

Changing class selector used in widget | Forum

Topic location: Forum home » Development » Custom Code Modifications

Peter Jan 19 '16

Hi folks,

I tried to change images size for UsersWidget that's shown on Main page. The trouble is that if i change .ow_avatar img class in theme base.css it messes up images across the whole website where that class's been used.. I would like to know if there is the way I can change that class in UsersWidget to another one, let's say ow_avatar2, so I wouldn't have to modify original one but would just specify parameters for new class .ow_avatar2 in .css

I hope I explained it well enough..

Thank you for any help

Peter Jan 20 '16

Can anyone help with this please?

Leader

Darryl B Jan 20 '16

Try this. I tried it on my test site, and seems to work for the users widget for latest, and online. Copy and paste it into you themes custom css. I changed the size from 40px to 60px just to test it. There may be other settings that you may want to add. This is just for size.

div div .ow_lp_avatars .ow_avatar {
    height:60px;
    width:60px;
}
div div .ow_lp_avatars .ow_avatar a img {
    height:60px;
    width:60px;
}

Leader

Darryl B Jan 21 '16

If you have the round avatar images, and you wanted to do something a little more slick. You can try this. This adds a border, and a will transition to a square on hover,
**Updated the css below. This will get the transition to be smooth both ways in case anyone reading the post is giving it a shot on their site**

div div .ow_lp_avatars .ow_avatar {
    height:60px;
    width:60px;
}
div div .ow_lp_avatars .ow_avatar a img {
    height:60px;
    width:60px;
    border-radius:50%;
    border:3px outset silver;
    -webkit-transition: ease-out .5s;
    -moz-transition: ease-out .5s;
    -o-transition: ease-out .5s;
     transition: ease-out .5s;
}
div div .ow_lp_avatars .ow_avatar a img:hover {
    border-radius:0%;
}

The Forum post is edited by Darryl B Jan 21 '16

Peter Jan 21 '16

Many thanks Darryl, it did the big part of the job! I have added and modified few more classes in css and than achieved exactly what I wanted.

Thanks again for your valuable answer! You've made my day..

Oxwall Software

Please sign in

We build. You grow.

Start a social network, a fan-site, an education project with oxwall - free opensource community software

Changing class selector used in widget | Forum