The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

[HELP] Circle/Square Images

View previous topic View next topic Go down

Solved [HELP] Circle/Square Images

Post by Shuhei-sama on December 8th 2014, 4:08 am

http://ftascension.forumotion.co.uk

So I saw this place and I liked the fact that the places are circles. However, on my forums, the images appear as squares. So I assume that the images were originally squares, but it can somehow turn into circles. Can I get help on that? Getting circular images when Im adding the image to "forum description"?

Shuhei-sama
New Member

Posts : 8
Reputation : 1
Language : English

http://fairytailrpunleashed.forumotion.com/

Back to top Go down

Solved Re: [HELP] Circle/Square Images

Post by Ange Tuteur on December 8th 2014, 4:25 am

Hello Shuhei-sama,

When adding the images use HTML and add a classname to it, for example :
Code:
<img class="radius" src="/myimg.gif"/>
( replace myimg.gif by the URL of your image )

Then you can use CSS to style the image :
Display > Colors > CSS stylesheet
Code:
.radius { border-radius:100px }
( You can paste the above in your sheet )

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: [HELP] Circle/Square Images

Post by Shuhei-sama on December 8th 2014, 4:29 am

I attempted it with my forum but all I got was an image that couldn't be read. It's the first image.


Last edited by Shuhei-sama on December 9th 2014, 5:21 am; edited 1 time in total

Shuhei-sama
New Member

Posts : 8
Reputation : 1
Language : English

http://fairytailrpunleashed.forumotion.com/

Back to top Go down

Solved Re: [HELP] Circle/Square Images

Post by Ange Tuteur on December 8th 2014, 4:53 am

Did you add it into the description of the forum ?

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: [HELP] Circle/Square Images

Post by Shuhei-sama on December 8th 2014, 5:24 am

No. First, I added the CSS code to the style sheet. Then I edited the first forum and added the picture. Then I added the code you said above with the picture/image link in the image url section.

Shuhei-sama
New Member

Posts : 8
Reputation : 1
Language : English

http://fairytailrpunleashed.forumotion.com/

Back to top Go down

Solved Re: [HELP] Circle/Square Images

Post by Ange Tuteur on December 8th 2014, 7:13 am

Add the image into the description :

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: [HELP] Circle/Square Images

Post by Shuhei-sama on December 9th 2014, 5:12 am

It still gets the same problem. The image I want is.
I input the image url: "http://i.imgur.com/zaKtHLs.png" into the code. I add the CSS stylesheet code. I put the following in the description.


Code:
<img class="radius" src="http://i.imgur.com/zaKtHLs.png"/>
And the problem still persists.

Shuhei-sama
New Member

Posts : 8
Reputation : 1
Language : English

http://fairytailrpunleashed.forumotion.com/

Back to top Go down

Solved Re: [HELP] Circle/Square Images

Post by Ange Tuteur on December 9th 2014, 5:48 am

add this rule to your stylesheet :
Display > Colors > CSS stylesheet
Code:
.radius {
 -webkit-border-radius:100px;
  -moz-border-radius:100px;
  border-radius:100px;
}

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: [HELP] Circle/Square Images

Post by Shuhei-sama on December 10th 2014, 7:26 am

A final touch I'd like to make. I was wondering how you could minimize the overall size of the image?

Shuhei-sama
New Member

Posts : 8
Reputation : 1
Language : English

http://fairytailrpunleashed.forumotion.com/

Back to top Go down

Solved Re: [HELP] Circle/Square Images

Post by Rhino.Freak on December 10th 2014, 7:29 am

@Shuhei-sama wrote:A final touch I'd like to make. I was wondering how you could minimize the overall size of the image?

Using the "width" and "height" tags..

Code:
.radius { width: 80%; height: 80%; }

change to whatever you'd like

Rhino.Freak
Active Poster

Male Posts : 1243
Reputation : 105
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

Solved Re: [HELP] Circle/Square Images

Post by Shuhei-sama on December 10th 2014, 7:31 am

And my problems are solved. Worked quite well. Thank you for your time!

Shuhei-sama
New Member

Posts : 8
Reputation : 1
Language : English

http://fairytailrpunleashed.forumotion.com/

Back to top Go down

Solved Re: [HELP] Circle/Square Images

Post by Rhino.Freak on December 10th 2014, 7:31 am

you're welcome ^^ Smile

Rhino.Freak
Active Poster

Male Posts : 1243
Reputation : 105
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

Solved Re: [HELP] Circle/Square Images

Post by Ange Tuteur on December 10th 2014, 5:49 pm

Topic archived

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum