...

View Full Version : Create Dynamic text box?



Bobster0007
11-01-2011, 11:37 PM
Hey guys!
Can someone give me the code ( CSS ?) to put a box ( prefer rounded corners ) around the text content area on my website? I guess it would be called dynamic, but I would like it to change in size depending on the amount of html text en capsuled with it. Is that done with CSS? Thanks :thumbsup:
bradentonairconditioning.org


ps... I did not include any code because im not sure what you need.

Excavator
11-01-2011, 11:51 PM
Hello Bobster0007,
Some generic examples here:

one (http://nopeople.com/CSS%20tips/rounded%20corners/index.html)
two (http://nopeople.com/CSS%20tips/rounded%20corners%20-%20CSS%20only/index.html)
three (http://nopeople.com/CSS%20tips/slider/index.html)

Bobster0007
11-02-2011, 12:27 AM
Hello Bobster0007,
Some generic examples here:

one (http://nopeople.com/CSS%20tips/rounded%20corners/index.html)
two (http://nopeople.com/CSS%20tips/rounded%20corners%20-%20CSS%20only/index.html)
three (http://nopeople.com/CSS%20tips/slider/index.html)[/indent]
Hey Excavator,
Yea Im not sure what to do with that. lol . I don't have to have rounded corners. I just wanted the text area to look more professional. Maybe have the box run the horizontal width of the theme. This is a wordpress theme so it dont use the index.html file. It has the style CSS file though. Any help will be appreciated.
ps....... the last link is to a 404

Excavator
11-02-2011, 12:33 AM
Hey Excavator,
Yea Im not sure what to do with that. lol . I don't have to have rounded corners. I just wanted the text area to look more professional. Maybe have the box run the horizontal width of the theme. This is a wordpress theme so it dont use the index.html file. It has the style CSS file though. Any help will be appreciated.
ps....... the last link is to a 404

It may not be named index.html but I'm pretty sure it has markup.
Fixed the 404

Can't even guess what you want to change by the information you've given. That's why the generic examples. "I just wanted the text area to look more professional. " really tells us nothing.

Bobster0007
11-02-2011, 01:17 AM
Yes I really like the #3 box... I just want a box like that to go across the page to house some text. I would like for the box to increase or decrease in size depending on the amount of text thats entered. I want it to be just under the feature area thats up now. I guess I would enter the CSS into my themes "style CSS'' sheet. But Im not sure where to enter the "Markup" sheet data?

Excavator
11-02-2011, 01:34 AM
Im not sure where to enter the "Markup" sheet data?

That's going to make things difficult as I'm really not familiar editing wordpress themes.

Bobster0007
11-02-2011, 01:47 AM
That's going to make things difficult as I'm really not familiar editing wordpress themes.Ok sir, thanks for trying... :thumbsup:

Excavator
11-02-2011, 01:50 AM
Ok sir, thanks for trying... :thumbsup:

If you link to the site it would not be too hard to tell where the markup and CSS should be added. Impossible for me to tell from here the method since I can't see what UI Wordpress makes you use...

Bobster0007
11-02-2011, 02:06 AM
Here is the URL... http://bradentonairconditioning.org

Sammy12
11-02-2011, 02:27 AM
http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-93.png

add a class called dynamic-box



.dynamic-box {
border-radius: 10px;
-wekbit-border-radius: 10px;
-moz-border-radius: 10px;
padding: 20px;
}


if you can't add a class to the html for whatever reason, just add the css to the .hentry class


here's a cool little tool you can use if you are still confused http://border-radius.com/

- Sammy

Bobster0007
11-02-2011, 03:07 AM
http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-93.png

add a class called dynamic-box



.dynamic-box {
border-radius: 10px;
-wekbit-border-radius: 10px;
-moz-border-radius: 10px;
padding: 20px;
}


if you can't add a class to the html for whatever reason, just add the css to the .hentry class


here's a cool little tool you can use if you are still confused http://border-radius.com/

- Sammy Sammy, I tried adding both classes separately to the "child theme's" CSS stylesheet but nothing happened. If youre not familiar with wordpress, its run with php and you cant access any html which still seems wierd to me when I can see html as your image shows. oh well, thanks for trying also... :confused:

Sammy12
11-02-2011, 03:12 AM
just add it to a css file

you don't need to add a new class, you can add it onto an existing one (.hentry)
it shouldn't mess anything up since .hentry was only used once on this page, so I'm guessing it wouldn't be harmful



.home .hentry {
border-radius: 10px;
-wekbit-border-radius: 10px;
-moz-border-radius: 10px;
padding: 20px;
}


if it doesn't work could you post a screen shot of the css file? I never used wordpress before

Bobster0007
11-02-2011, 03:30 AM
No it didnt work... I cant see where to upload file on the page in the box like you did so here is an attachment css file.

Sammy12
11-02-2011, 03:35 AM
haha add border: #333 1px solid;

LOL, the borders are curved, but no line has been defined!!!



.home .hentry {
border: #333 1px solid;
border-radius: 10px;
-wekbit-border-radius: 10px;
-moz-border-radius: 10px;
padding: 20px;
}


THERE WE GO

Bobster0007
11-02-2011, 03:50 AM
Thank you so much Sammy, that was awesome! :thumbsup:

I will have to study what you did so I can learn something. lol

Sammy12
11-02-2011, 03:59 AM
I think this is more of what your looking for (more css3 like), I wrote the reasoning for each to help you study



.home .hentry {
border: #B7B7B7 1px solid;
border-radius: 10px; /* W3C requirement */
-wekbit-border-radius: 10px; /* needed for chrome/safari */
-moz-border-radius: 10px; /* needed for firefox */
padding: 35px; /* push the text inward so that it isn't right next to the border */

/* shadow */
box-shadow: 0 0 10px 0 #AAA;
-webkit-box-shadow: 0 0 10px 0 #AAA;
-moz-box-shadow: 0 0 10px 0 #AAA;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum