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;
}
|