Image borders, window borders, code for image border rather then plain color?

  • 1
  • Question
  • Updated 9 years ago
  • Answered
Would someone be able to tell me where to find the tutorial on how to make a "top" border like the one in the screenshot, only by using an image that should appear after the screenshot:





Thank you much, denise PS I do want the border around the whole widget, just want a thicker border at top with the "wood" image instead of a plain color. The rest of the border will just be either a plain brown to match, or, if I can put the "wood" code in for whole border that is fine too:)
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
  • excited and having fun working this a.m.

Posted 9 years ago

  • 1
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
Boomer also has these types of boxes on his site. If anyone at all knows where the instruction is to create the borders I would sure appreciate any leads you might give me:) Denise
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Hi Denise,
I did something for you here: http://hindsite.synthasite.com/denise...

Rounded corners are going to be a mission for me to do. Firstly, corners are usually
done with small wedge shaped images and it is going to be impossible to get the wood grain to line up with the corners. I think it's possible with a "sliding door" type script which is used for variable width buttons, which I have used before, but I wouldn't know how to impliment it here.

If you are going to use the box I made for you, I would make the wood grain image large enough to cater for the widest box you would use on your site, and either lighten it or darken it, depending on what colour font you are going to place over the wood grain image.
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
om gosh!!!!!!!!!! It's perfect, absolutely perfect!! I don't plan to use any text in the top border so it will work "as is". Oh I so love it!! The only question I have, is when I enter it into an "element" of my layout, how do I get it to size itself to however big the widget/gadget is, or, the amount of text I type into it? I must have to plug in some number changes in the code? I did in fact find a border making site but all it would allow into the code was color i.e. #477784 etc. I couldn't figure out how to put in the URL to the code;) ty ty Boomer!! Denise
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
Oh boy oh boy Boomer!!! Look at the site I just found! I haven't gone over it real well yet but it looks wayyyyyyyy good for our use, woohoo!! See you soon, denise

http://www.pageresource.com/dhtml/css...
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Hi Denise,

I'm glad you like it :-)
I've included the code below.

<div style="width:400px;height:16px;font-family: verdana; color:#000000; font-weight: bold;text-transform: capitalize;text-align: left;
padding:10px;background-image:url('h ttp://hindsite.synthasite.com/resources/WoodBackground.png');border:solid 1px #C18551;">
DENISE'S TEXT BOX
</div>

<div style="margin:0px;width:400px;height:128px;border:solid 1px #C18551;background:#FFFFFF;padding:10px;">
<font size="2" face="verdana" color="#000000">

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.


</font>
</div>

I've bolded all the editable parts of the code and I'll go through them one at a time.

1) 400px - That's the width of the wood grain heading. Leave the height at 16px.
2) verdana - Change to whatever font style you prefer.
3) #000000 - The colour you would like the heading font to be.
4) Your image URL..
5) 1px - The border line thickness. Can be 1px, 2px, 3px etc, etc.
6) #C18551 - The border line colour.
7) DENISE'S TEXT BOX - Heading text. (Leave out if you want it blank)

8) 400px - That's the width of the text portion. Make the same as the heading width.
9) 128px - This will change for each box depending on how much text you put in it.
10) 1px - Text box line thickness.
11) #C18551 - Text box border line colour.
12) #FFFFFF - Background colour of the text box. In my case it's white. (#FFFFFF)
13) verdana - Text box font style.
14) #000000 - Text colour.
15) Lorem ipsum... - Your text goes here.

Create a wood grain image that will be wider than your widest text box.
Make the height of the image more than 16px.. say about 20px.

It's all pretty easy once you get the hang of it. Once you have it the way you like,
the only thing you have to change everytime is the width and height and obviously
the text of each box. The wood grain image will automatically scale to fit the heading.

Good luck. I think it's gonna look great on your site.
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
oh wooooooooowwwww! I am gonna just love this! I can't thank you enough! What a lot of time you've given me Boomer. I so hope I can return the favor somehow one day:) Denise
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
@ Boomer,

What is this?:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.

I see it all over the place.
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
Hmm, it isn't working boomer but here is what I put in for my URL as that is the only thing I am changing at this point:

<div style="width:400px;height:16px;font-family: verdana; color:#000000; font-weight: bold;text-transform: &nbsp;capitalize;text-align: left;padding:10px;background-image:url('http://fromheretoeden.com/ resources/images/borders/border.png');border:solid 1px #C18551;"></div>

I have a subfolder under "images" now called borders so I think I have my "path" typed correctly. I made a wood-grain image and it is 420 x 20px. It looked really small in Fireworks but I didnt pay attention to that. Just did the #'s as you directed:) Thank you boomer. I am off to work on my pic-show I am trying to create now;) Denise
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
guess what, LOL, now that I pasted it here, looks as if I have a space in there that shouldn't be. I'll go fix that and maybe solve my problem;)
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
Hi UK, I wanted to let you know about the latin or whatever it is. They use this for a "placeholder" to "hold" the text box as I understand it. The textbox sizes itself according to how much text you have in there and so instead of having to type something each time just to show how the box expands, they use that "code". I think that is how it was explained to me:) Denise PS I know this was for boomer but I thought I might help since I knew something for a change, LOL!!!!
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
No, that wasn't it, I'm going to try a few different things to see if I can remedy the prob but if you are around today maybe you could take a quick peek for me Boomer:) There is no hurry at all though. I am just going to work on the next thing today, whatever that may be;) denise
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
Ohhhhhhhhhhh shoot boomer, so sorry, I forgot to "trim the canvas" or fit the canvas on my image!!! That is the problem!!! Ok, off to fix that now;) denise
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
Hey Boomer, it is my "image" I am certain, that is holding things up. I forgot to trim it as I mentioned above. But the file-manager is giving me problems as it won't allow me to delete or replace the old image. I usually make a new "folder" after I reboot and then try uploading the new image again. This has worked in the past. We'll see;) I'll keep you posted, denise:)
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
use picnik to crop or resize the image that way you dont need to replace the old image.
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
ty Alex, it didn't work as far as the code goes, but, I was able to get rid of that image I did not want on my FM:) Thank you again for the heads up on picnic. I am going to start using it more now:) It makes sense that it should work better since it was built to go along with yola sitebuilder;) denise
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
Hmm, ok, I didn't even think of using picnik because of my paintnet I always use. Yes, I will give that a try:) Thank you Alex!! Denise:)
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
Ok, I did re-size the image boomer, to 420 px X 20px. It isn't showing up though. I believe I have the code correct but may be missing something:(
My path is http://fromheretoeden.com/resources/i...

I'll be back and forth today online and off. ttyl:) Denise
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Hi Denise,

If you paste in the code you have a few comments above you will notice that it appears on 6 lines.

Just make it into 1 line of code. It will work then.

I would add it to a text widget so you can easily edit it later.

Lee.
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
Hi Lee, I don't understand your direction above. About the "6" lines of code and making it into 1. Could you explain that to me a little further? Say I am looking at boomers original code and what exactly do I need to put in and take away from that code? Thank you much, denise:)
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
oh wait, so the code I have above that I was showing folks, ok, so it is on 6 lines and I need to make it one line? I'm working on figuring this out, LOL!! Sorry Lee, kind of an airhead I am at times;) denise
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
Ok, I don't know what you mean by "make it 1 line of code"? I do see how when pasting it in I end up on 6 lines:) Can you tell me how to make it 1 line Lee? Ty much, denise
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Denise,

as an example if the code looked like this:

hello my name is lee
i love yola
i live in england

then make it look like this:

hello my name is lee i love yola i live in england

Hope this helps - Lee.
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
Ohhhhhhh, Ok, LOL!! I guess doing that assures there are no accidental "breaks" in the codes:) Good idea, ty Lee, denise:)
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
Well, I am using the code you gave me Lee. And when I enter that, I am keeping it all on one line. I also tried Boomers code on one line. I am still not getting my wood image. One thing I notice when using your code is that I get an extra URL of my site and it shows up as "text" where the wood image should appear. I don't think you meant that to be in there. Do you want me to go back to using boomers code? You did say yours worked so I am guessing you tried it out. I don't know what I am doing or not doing here. Think I'll take a break, lol:) Ty much for all our help:) Denise
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
ignore my code - you will notice i deleted it from the thread - the forum was messing it up - you must still have it in your emails.

Use the code you posted here before. and do what i suggest above.

Lee.
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
Ok Lee, will do, thank you again for all your time. I will let you know what happens;) Denise
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
Now I'm really confused. I know I wrote you here and told you it worked perfectly now and thank you so much!!! The only problem now is with the file-manager itself. It is not allowing me to upload the "lighter" colored version of the text box which will match my nav buttons. So, now I am going back in, rename the file and try it that way. I hope they fix the file-manager soon:( I can't edit it in picnik because picnik can't match up with my nav button brightness/contrast. I tried but it doesn't have the same options as paintnet. It will all work out eventually:) ty again Lee:) Denise
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
Ok, Im calling it a day. I cannot seem to get the file right. I think the code is fine but I had to get the woodgrain effect sized just right so it matches the other wood images on my page. I ended up with the file wood.png. It is 420 px X 20px. I believe this is an ok size, it looks great but it won't load up on the page in sitebuilder. Doesn't show in a preview either. Only thing I can think of is the file is still wrong. I even tried making a file exactly 400 X 16 which is boomers size for the upper border. I'm lost and tired but thank you to all that have helped me with this.

Denise
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Denise.. if you don't mind.. can you please post the page url where you have this code? It may be easier for us to see what exactly is going on. =)
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
This is all taken care of little. You can close this out if you like:) ty, denise
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Im confident the code is fine, Denise.
Can you post the image URL and I'll test it on my test site.
I'll be around today if you need help.
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
hi boomer, yes, I think the code is fine too. Something strange happened just before I shut down lastnight. The image of my "top border" showed up but, it was only half the size of the 16px height. Are you sure that height is right because when I make an image that size or even at 20 px it looks like about 1/8 of an inch. Anyway, I went back in to change the height and couldn't get the new file to upload, again. I plan on working on it today as I truly want this part of the project finished. Ty and hope you are having a good weekend;) denise PS http://fromheretoeden.com/resources/i...
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
hey boomer, believe it or not, the image is fine now. I made it 420 X 28px. ttyl, denise
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
You know what...I may have been wrong about that image size of 20px, sorry!
So, are you saying it's working now, Denise. Is everything fine?
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
Yes darlin, it's workin fine! I am having some internet problems. I have highspeed but way in the country so sometimes horribly slow. The file-manager is tempermental also. But, your code is wonderful and it just took a little, resizing on the image;) Ty soooooooo much, Denise PS Check out my page header. I found out yesterday how I could make fancy letters using that woodgrain texture!! I need to tweak what I have a bit but you can see it so far;)
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
It looks really great. I see youv'e changed your template as well - nice choice!
I like the wood grain lettering - it's all starting to fit together nicely now.
How about placing the lettering directly on the banner pic instead of in the blue block. Just a thought, it might look better? Or not!
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
I did think about that, placing the letters directly, but it was an afterthought because I just learned how to make the letters, LOL! In the direction it told me to place them on a background but didn't even think to just use my photo(header photo). I will try it and see if I like that better;) Ty much for the suggestion! Also, I am anxious to get this site done but there is soooooooooo much to do. But you are right, it all seems to be coming together, finally;) Denise
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
Hey Boomer, if you get a chance, tell me what you think of the header/title now. I tried it just on the main image like you mentioned. I think I like it better that way too. Sometimes I wish I could get an idea and stick to it but I am always changing my mind and wanting to try something else. It's a curse, LOL!!! ttyl, denise;)
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
I love it, Denise - much, much better :-)
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
Well I certainly respect your opinion;) so that is the way it shall stay!! I actually got some of my content pasted in about my home-State. I never knew what to have a website on but people kept saying "what do you love" and it all came down to my home so it's all about Oregon, lol:) ty boomer, denise
PS I am planning a slideshow effect, yes, I love yours but I am doing my best not to copy exactly, that isn't right, but I can change mine around enough so I won't be a copycat;) Denise
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
we all copy Boomer - dont worry about it :)
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
LOLLLLLLLLLLL!!! You are hilarious;) Ok, I'm off to copy his pagesource now, LOL! Problem is, I know nothing about South Africa so my site will sound really uneducated;) But Oregon?? Now I know a little bout that State;)
denise
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Imitation is the sincerest form of flattery ;-)
There are so many people here using this code now - It's great though.
http://www.dynamicdrive.com/dynamicin...

It's on Littleus's Yolacodes site as well. Have fun !!
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
That's great and yes, that so many want to have a website as beautiful and organized as yours is a dream come true. You are a great person to want to share your smarts so generously;) I may try dynamic drive again. The first time I had some glitches but if I don't find "the idea" I have in my brain, online, I will take another look at it. I love your slideshow, and those "thought bubbles" with that hover over your smaller images, wow, way cool;) Denise
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hey Denise

Just so that you know.. all of those codes - slideshow, "thought bubbles" are all available through the Yola Code Site. =)
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
@Boomer.. it's not MY Yola Code Site! =)
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
Oh that's great! Thank you much! I haven't begun to read all of the tutorials on Yola:) Denise
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Sorry Denise.. I think you misunderstood me. The Yola Code Site is separate from the Yola site and its tutorials. It's a site that has a bunch of different things that you could use on your site such as the slideshow and the "thought bubble". You will not find these through the tutorial. The link for the Yola Code site is: http://yolacodes.yolasite.com

~ Littleus
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
Ok little, I will keep that in mind then:) ty so much, denise;)