Curly Container?

[Former Member]

I am requesting help.

link to forum

*My Source:http://www.dynamicdrive.com/style/csslibrary/item/curly-corner-container/

I have tried the css and the html. I am unable to get the curly container to work.

I have tried both codes. I have tried templates and the header.

Is it possible to get the curly container?

[Brian]

Hi, @womenonly.

It works, but you need to rehost the image they provided and change the URL of the image in the CSS they gave to that of the image once you've rehosted it.

background: transparent url(media/brcorner.gif) bottom right no-repeat;

[Former Member]

I did a test run. What did I do wrong?

Jun 4, 2014 8:49:44 GMT -8 Brian said:

Hi, @womenonly.

It works, but you need to rehost the image they provided and change the URL of the image in the CSS they gave to that of the image once you've rehosted it.

background: transparent url(media/brcorner.gif) bottom right no-repeat;

[Brian]

You were supposed to replace the bit I highlighted in green in the code they provided on the site, not use the code in my post by itself.

[Former Member]

I added this code to the global header.

<style type="text/css">
.curlycontainer{
border: 1px solid #b8b8b8;
margin-bottom: 1em;
width: 300px;
}
.curlycontainer .innerdiv{
background: transparent url(media/brcorner.gif) bottom right no-repeat;
left: 2px;
top: 2px;
padding: 1px 4px 15px 5px;
}
</style>
<div class="curlycontainer">
<div class="innerdiv">
<b>Some title</b> <br />
Where is the curly corner?
</div>
</div>

[Brian]

You just need to change the part in red below to an actual image URL. That's it.

<style type="text/css">
.curlycontainer{
border: 1px solid #b8b8b8;
margin-bottom: 1em;
width: 300px;
}
.curlycontainer .innerdiv{
background: transparent url(media/brcorner.gif) bottom right no-repeat;
left: 2px;
top: 2px;
padding: 1px 4px 15px 5px;
}
</style>
<div class="curlycontainer">
<div class="innerdiv">
<b>Some title</b> <br />
Where is the curly corner?
</div>
</div>

[♥ ℒʊ√ ♥]

Hi, @womenonly, as Brian has said, you need a hosted image for that code to work.

I've made a corner for you. Host it to your account. If it needs tweaking just let me know. I hope this helps.






EDIT: I just saw the link to your forum. Here's another ~ the color of your board.

[Former Member]

Jun 4, 2014 15:13:30 GMT -8 ♥ ℒʊ√ ♥ said:

Hi, @womenonly, as Brian has said, you need a hosted image for that code to work.

I've made a corner for you. Host it to your account. If it needs tweaking just let me know. I hope this helps.

 


EDIT: I just saw the link to your forum. Here's another ~ the color of your board.

 

LUV:

Thank you for knowing that I did not understand.

What is a hosted image?

How do I se that code? 

I do like your curly corners.

[♥ ℒʊ√ ♥]

@womenonly,  Not a problem. I knew where things were getting lost in the translation, so to speak.

Let me do this. I'm going to host my images on TinyPic for you. Then I will post Brians's code as an exact copy and paste for you to put in.

What I don't think you understood is that CSS won't make a curled border. I have shadows on some of my themes, written in CSS, but you can't get the curly border with just CSS. You need to have an image to make that curl.

Let me go and host those pics for you ~ and I'll return with an exact copy and paste you need.

[♥ ℒʊ√ ♥]

Ok, for the white corner ~

<style type="text/css">
.curlycontainer{
border: 1px solid #b8b8b8;
margin-bottom: 1em;
width: 300px;
}
.curlycontainer .innerdiv{
background: transparent url(http://i61.tinypic.com/pvvah.png) bottom right no-repeat;
left: 2px;
top: 2px;
padding: 1px 4px 15px 5px;
}
</style>
<div class="curlycontainer">
<div class="innerdiv">
<b>Some title</b> <br />
Where is the curly corner?
</div>
</div>




For the tan corner ~


<style type="text/css">
.curlycontainer{
border: 1px solid #b8b8b8;
margin-bottom: 1em;
width: 300px;
}
.curlycontainer .innerdiv{
background: transparent url(http://i62.tinypic.com/242da4w.png) bottom right no-repeat;
left: 2px;
top: 2px;
padding: 1px 4px 15px 5px;
}
</style>
<div class="curlycontainer">
<div class="innerdiv">
<b>Some title</b> <br />
Where is the curly corner?
</div>
</div>


As I said, it may need to be tweaked, but you'll see the curly corners once you copy and paste either corner. Hope this helped. 

[Former Member]

LUV

Thank you.

How did you create a curled corner?

It does need to bit  of work.

[♥ ℒʊ√ ♥]

Did I misunderstand, @womenonly?

I thought you wanted the curly corners to be at the bottom of the forum in the left and right hand corners ~ to match the top rounded right and left corner?












If you want it for a container, it needs to be smaller. Much, much smaller. Something like this It's the same size as the one on the Dynamic Drive link that I just found and you posted a screenshot of. So now that I found the link, this size should work.





<style type="text/css">
.curlycontainer{
border: 1px solid #b8b8b8;
margin-bottom: 1em;
width: 300px;
}
.curlycontainer .innerdiv{
background: transparent url(http://i61.tinypic.com/vh9j09.png) bottom right no-repeat;
left: 2px;
top: 2px;
padding: 1px 4px 15px 5px;
}
</style>
<div class="curlycontainer">
<div class="innerdiv">
<b>Some title</b> <br />
Where is the curly corner?
</div>
</div>

[♥ ℒʊ√ ♥]

I have software, Photoshop and several others, to create graphics. It's not something easily and quickly learned. It's a .png image so there is transparency in the background to give it the curled effect.

But you can save and use my images and find an online photo resizer to play with the size you need. Here's a site you can use ~ www.picresize.com/   


EDIT: I tried this on my test board ~ it works, @womenonly.

[Former Member]

Jun 5, 2014 13:32:08 GMT -8 ♥ ℒʊ√ ♥ said:

Did I misunderstand, @womenonly?

I thought you wanted the curly corners to be at the bottom of the forum in the left and right hand corners ~ to match the top rounded right and left corner?


womenonly said:
LUV: You did not misunderstand me. I placed the code in the header and that's where it landed.What did I do wrong?








If you want it for a container, it needs to be smaller. Much, much smaller. Something like this It's the same size as the one on the Dynamic Drive link that I just found and you posted a screenshot of. So now that I found the link, this size should work.





<style type="text/css">
.curlycontainer{
border: 1px solid #b8b8b8;
margin-bottom: 1em;
width: 300px;
}
.curlycontainer .innerdiv{
background: transparent url(http://i61.tinypic.com/vh9j09.png) bottom right no-repeat;
left: 2px;
top: 2px;
padding: 1px 4px 15px 5px;
}
</style>
<div class="curlycontainer">
<div class="innerdiv">
<b>Some title</b> <br />
Where is the curly corner?
</div>
</div>

[♥ ℒʊ√ ♥]

Good morning, @womenonly. 

Well, first, the code you wanted help with was for a container. Not for a "border around the forum". Two completely different things.

This is much more complicated. I've done themes with top, center and bottom images in them, but nothing like this. 

In the themes I'v described, you place code in two areas ~ both the forum wrapper and the Style Sheet. It's not something you would place in the Global Header.


But you're not working with an image. Your working with a hex color to create a border by inserting measurements.

Brian or David Clark will be better able to assist.

You'll need a left corner image which I can do later in the day if they can get you sorted out. 

Good luck!