Nov 26, 2015 23:00:14 GMT -5
Basically, I'm trying to create a header at the top of certain pages.
It would contain text, a few small images and links.
The problem is I'm also trying to make a border around this header using an image to do so, something similar to what
THIS is trying to teach using css, but it doesn't seem to work on proboards.
All it would need to do is scale its size depending on the content.
I've looked around and didn't see anything already here that does this, but if there is, could someone point it out?
Nov 27, 2015 18:29:00 GMT -5
I don't see why you cannot do it on proboards.
You may be able to have it scale with the content, but the content may have to scale with the image, which may not be what you are looking for.
Can you post a link to your board where you are having this problem.
valykry
Dec 2, 2015 8:46:26 GMT -5
well basically, the problem I'm having is after placing this code in the header section:
.module {
border-image-source: url(http://s20.postimg.org/3lpkqgi1p/mlp_storybook_border_by_mrfugums_d45lsua.png);
border-image-slice: 26;
border-image-width: 20;
border-image-outset: 1;
border-image-repeat: round;
}
all it seems to do is display the code as text at the top of the page. Probably a noob mistake on my part. At the moment a link wouldn't do much good as the owner has the site placed in maintenance mode, and doesn't want me to disable it.
However, I've found another way to get the result I want, though the coding isn't nearly as clean, and rather than using 1 single image, I had to chop it into 8 individual images (Top, bottom, left, right, and one for each corner)
VISUALLY, it does what I want, but I just can't help but feel that method is inefficient.
<!DOCTYPE html>
<html>
<link href='https://fonts.googleapis.com/css?family=Coming+Soon' rel='stylesheet' type='text/css'><head>
<style>
div.background
{
background: url(http://s20.postimg.org/wjec87i3d/border_bottomleft.png)no-repeat bottom left,
url(http://s20.postimg.org/d2tmlomzd/border_bottomright.png)no-repeat bottom right,
url(http://s20.postimg.org/8i7g6r3a1/border_topleft.png)no-repeat top left,
url(http://s20.postimg.org/syigozdjt/border_topright.png)no-repeat top right,
url(http://s20.postimg.org/620kvsevx/border_top.png)repeat-x top center,
url(http://s20.postimg.org/cm3d24swt/border_bottom.png)repeat-x bottom center,
url(http://s20.postimg.org/n19zuf719/border_left.png)repeat-y center left,
url(http://s20.postimg.org/dw68eat0d/border_right.png)repeat-y center right,
url(http://s20.postimg.org/62jvhi6ah/white2.png) repeat;
/*url(https://s-media-cache-ak0.pinimg.com/736x/bf/58/83/bf5883b6e138e8b06cb0d731b64ae9a3.jpg)repeat*/
border: 1px solid black;
}
div.transbox
{
margin: 27px;
opacity:1;
filter:alpha(opacity=100); /* For IE8 and earlier */
font-family: 'Coming Soon', cursive;
}
div.transbox p
{
margin: 1%;
font-weight: bold;
color: #000000;
font-family: 'Coming Soon', cursive;
}
h1 {font-family: 'Coming Soon', cursive;}
p {font-family: 'Coming Soon', cursive;}
a.{font-family: 'Coming Soon', cursive;}
</style>
</head>
<body><div class="background">
<div class="transbox">
<p>Insert text here. Blah blah blah<br> Blah<br> Blah<br>Yet more filler<br> and done.</p>
</div>
</div>
</body>
</html>
</div>
yea, not as clean as I'd like, and probably inefficient for slower internet connections, BUT it gets the look I want. Still, I'm still hoping to find a better method.
ALSO, this probably isn't the place to ask this, but since it is related, I might as well. I'm also trying to figure out how to keep these headers from showing up in the threads within the board the header is applied to. As of now, I can apply one of these to the header of the home page, and the various boards as I like, but it's appearing within user created threads as well and I'd like to do away with that.
Dec 2, 2015 12:55:01 GMT -5
Okay, first you need to figure out what you want to put this border around. Then add module to the existing classes. Just pasting in the code that you want to use does nothing. You have to tell it which element to apply to by adding in the proper class/id to the element.
Here is what I was able to do:
codepen.io/fallensamurai/pen/WreMZYvalykry