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.

Border image around forum body

View previous topic View next topic Go down

Border image around forum body

Post by Centesimus on August 19th 2013, 10:48 am

Hello everyone, I've got another slight problem. Is it possible to add a repeatable border image around the body of the forum? Like the example below (done in photoshop)




Forum link : http://riftclanhere.forumotion.net/t1-in-need-of-suggestions

Centesimus
Forumember

Posts : 25
Reputation : 0
Language : Dutch,English

Back to top Go down

Re: Border image around forum body

Post by runawayhorses on August 19th 2013, 2:38 pm

Here you go, add this to your CSS stylesheet:

Change the style, color and width to your preferences.

Code:
.pun {
border-style: solid;
border-color: #8E6D4E!important;
border-width: 10px;
}

runawayhorses
Hyperactive

Male Posts : 2537
Reputation : 162
Language : English
Location : United States

http://runawayhorses.alldiscussion.net/

Back to top Go down

Re: Border image around forum body

Post by Centesimus on August 19th 2013, 5:23 pm

@runawayhorses wrote:Here you go, add this to your CSS stylesheet:

Change the style, color and width to your preferences.

Code:
.pun {
border-style: solid;
border-color: #8E6D4E!important;
border-width: 10px;
}
Thanks for the code- but I'd love to have an image as the border, not a solid line. Is there any way to do this?

Centesimus
Forumember

Posts : 25
Reputation : 0
Language : Dutch,English

Back to top Go down

Re: Border image around forum body

Post by runawayhorses on August 19th 2013, 6:06 pm

Yes but Internet Explorer does not support the border-image property. It would consist I think of adding a div to your css selector then adding the webkit coding for firefox and another one for chrome.. etc.

Its tricky and I don't have the time to figure it out right now for what you want to do. Perhaps someone else can.

runawayhorses
Hyperactive

Male Posts : 2537
Reputation : 162
Language : English
Location : United States

http://runawayhorses.alldiscussion.net/

Back to top Go down

Re: Border image around forum body

Post by Centesimus on August 19th 2013, 7:45 pm

@runawayhorses wrote:Yes but Internet Explorer does not support the border-image property. It would consist I think of adding a div to your css selector then adding the webkit coding for firefox and another one for chrome.. etc.

Its tricky and I don't have the time to figure it out right now for what you want to do. Perhaps someone else can.
Alright, thanks for the help anyways Smile

Centesimus
Forumember

Posts : 25
Reputation : 0
Language : Dutch,English

Back to top Go down

Re: Border image around forum body

Post by Centesimus on August 20th 2013, 4:58 pm

bump

Centesimus
Forumember

Posts : 25
Reputation : 0
Language : Dutch,English

Back to top Go down

Re: Border image around forum body

Post by SLGray on August 20th 2013, 8:31 pm

Yesterday at 12:45 pm
Today at 9:58 am

Please don't double/triple post. Your post need to be separated by 24 hours before bumping, replying or adding more information. Please use the edit button instead!


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35629
Reputation : 2372
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

Re: Border image around forum body

Post by runawayhorses on August 21st 2013, 4:17 am

You can try replacing that code above with this one below, just add your image url where it says to in the code:
You'll probably need to adjust the sizes (i.e. 14px 24px 14px 18px) but this should give you something to work with:

Code:
.pun {
  border-style: solid;
border-width: 14px 24px 14px 18px;
-moz-border-image: url(URL OF IMAGE GOES HERE) 14 24 14 18 round;
-webkit-border-image: url(URL OF IMAGE GOES HERE) 14 24 14 18 round;
-o-border-image: url(URL OF IMAGE GOES HERE) 14 24 14 18 round;
border-image: url(URL OF IMAGE GOES HERE) 14 24 14 18 fill round;
}

runawayhorses
Hyperactive

Male Posts : 2537
Reputation : 162
Language : English
Location : United States

http://runawayhorses.alldiscussion.net/

Back to top Go down

Re: Border image around forum body

Post by Centesimus on August 21st 2013, 10:32 am

@runawayhorses wrote:You can try replacing that code above with this one below, just add your image url where it says to in the code:
You'll probably need to adjust the sizes (i.e. 14px 24px 14px 18px) but this should give you something to work with:

Code:
.pun {
 border-style: solid;
border-width: 14px 24px 14px 18px;
-moz-border-image: url(URL OF IMAGE GOES HERE) 14 24 14 18 round;
-webkit-border-image: url(URL OF IMAGE GOES HERE) 14 24 14 18 round;
-o-border-image: url(URL OF IMAGE GOES HERE) 14 24 14 18 round;
border-image: url(URL OF IMAGE GOES HERE) 14 24 14 18 fill round;
}

Thanks so far! I managed to put the border in- the problem is tho that the border is the same on both the sides- is there any way to mirror them ? So that the one on the left is looking to the right and the one on the right is looking to the left? Is there also a way to put a border at the bottom of the body?

http://runecms.forumotion.net/t1-your-first-subject

Centesimus
Forumember

Posts : 25
Reputation : 0
Language : Dutch,English

Back to top Go down

Re: Border image around forum body

Post by Raziel21 on August 21st 2013, 12:09 pm

You'll have to make an image of a frame which will be transparent (png)

Like this one

When you make your frame, upload it to a host (photobucket for an example)

Then you'll have to go to a sitehttp://border-image.com/where you're going to adjust it the way that you want. There's an option to drop a link of your image so that you may adjust it to suit your preference.

The site will give you the same code like runawayhorses gave you, however you're the one who'll need to adjust the numbers/properties in css at the end.

Good luck!

Raziel21
Forumember

Male Posts : 86
Reputation : 0
Language : Serbian, English, Russian, Italiano, Espanol
Location : Belgrade, Serbia

http://mizuchi.forumotion.com/forum

Back to top Go down

Re: Border image around forum body

Post by runawayhorses on August 23rd 2013, 2:02 pm

@Centesimus wrote:
@runawayhorses wrote:You can try replacing that code above with this one below, just add your image url where it says to in the code:
You'll probably need to adjust the sizes (i.e. 14px 24px 14px 18px) but this should give you something to work with:

Code:
.pun {
 border-style: solid;
border-width: 14px 24px 14px 18px;
-moz-border-image: url(URL OF IMAGE GOES HERE) 14 24 14 18 round;
-webkit-border-image: url(URL OF IMAGE GOES HERE) 14 24 14 18 round;
-o-border-image: url(URL OF IMAGE GOES HERE) 14 24 14 18 round;
border-image: url(URL OF IMAGE GOES HERE) 14 24 14 18 fill round;
}
Thanks so far! I managed to put the border in- the problem is tho that the border is the same on both the sides- is there any way to mirror them ? So that the one on the left is looking to the right and the one on the right is looking to the left? Is there also a way to put a border at the bottom of the body?

http://runecms.forumotion.net/t1-your-first-subject
The way Raziel21 explained will get you the border on all sides. I'm not a fan of image borders because although I don't use internet explorer, it can't read the border image property, so my knowledge of using image borders are limited. But I think Raziel21 has an interesting and effective method.

runawayhorses
Hyperactive

Male Posts : 2537
Reputation : 162
Language : English
Location : United States

http://runawayhorses.alldiscussion.net/

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