Forums

WordPress › Support » How-To and Troubleshooting

[resolved] Rounded Corners for Text box (9 posts)

  1. cableghost
    Member
    Posted 6 months ago #

    I would like to execute rounded corners for text boxes on my pages and the best approach seems to be using jquery. Though they (http://www.atblabs.com/jquery.corners.html) have provided the code (below) and the js files, I do not know how to call the js files from the script provided...any suggestions would be appreciated.

    <div style="background-color:#acc; padding:5px" class="rounded">
  Simple Example
</div>
<script>$(document).ready( function(){
  $('.rounded').corners();
});</script>

    I would suspect I could place the above script into my header.php, but how does the script and the class="rounded" know where the js files are? I have placed the js files into a folder called scripts on my main directory.

    -Scott

  2. Lari
    Member
    Posted 6 months ago #

    Try

    <script>jQuery(document).ready( function($){
  $('.rounded').corners();
});</script>
    instead.

  3. cableghost
    Member
    Posted 6 months ago #

    Thanks Lori,

    1. where do I place that script and how do I activate it?

    2. Could I place the code in my header.php template?

    3. How do I make the layer/div recognize it...is it as simple as adding class="rounded" as the example above?

    -Scott

  4. cableghost
    Member
    Posted 6 months ago #

    Once again, I'm having difficulty in executing this code. I'm not certain how to call the jquery script.

    Place the following code in the <Head> section of Header.php:

    <script>jQuery(document).ready( function($){
  $('.rounded').corners();
});</script>

    Here's the box to be placed in the post:
    <div class="rounded">Simple Example</div>

    Here's the CSS code:
    .rounded{background-color:#acc; padding:5px}

    If jquery.corners.js is located in a folder called /scripts on the root directory, how do I call it into action?

    -Scott

  5. othellobloke
    Member
    Posted 6 months ago #

    I know this doesn't help but if they're not at 90 degrees they're not corners. A corner can't be rounded - that's a curve ;)

  6. cableghost
    Member
    Posted 6 months ago #

    Semantics. I actually wonder how people that make such comments have the time to do it. If you could offer anything positively substantial to this topic, I'm all ears (though I realize that statement isn't true either).

    -Scott

  7. ClaytonJames
    Member
    Posted 6 months ago #

    At the risk of being pedantic, ( and thinking simply that you may not have seen this ) was anything located here at all useful?

    "To use Javascript repeatedly within your site, you can either set the call for the Javascript, or the script itself, in the head of your header.php template file, between the meta tags and the style sheet link, no differently than you would if you were using Javascript in any HTML page. To "load" the Javascript file into your site, in the head, add something like this:"

    <script type="text/javascript" src="/scripts/xxx.js"></script>

  8. cableghost
    Member
    Posted 6 months ago #

    Thank you Clayton, though I may still not understand. Please correct my errors below...

    I place the following 2 scripts in my Header.php <head> section...

    <script type="text/javascript" src="http://www.mysite.com/scripts/jquery.corners.js"></script>
<script type="text/javascript" src="http://www.mysite.com/scripts/jquery.corners.min.js"></script>

    I create css code such as...

    #divsample
	{
	position: relative;
	margin-left: auto;
	margin-right: auto;
	margin-top: 3em;
	padding: 0;
	text-align: left;
	background-color: #eeeeee;
        width:80%;
	}

    Finally, I create the <div> below...
    <div id="divsample">Rounded</div>

    What am I missing to make this function?

    -Scott

  9. ClaytonJames
    Member
    Posted 6 months ago #

    To be bluntly honest, I just read through this example code, and I don't have a clue. Sorry.

    http://www.atblabs.com/jquery.corners.html

Reply

You must log in to post.

About this Topic

Tags