WordPress.org

Ready to get started?Download WordPress

Forums

CSS....CSS3 and Word Press ? (6 posts)

  1. tcw7
    Member
    Posted 1 year ago #

    Hi all,

    Is there a difference between writing CSS and CSS3 Code?

    I'm starting with wordpress...and trying to learn how to ROUND CORNERS in my basic page...but having trouble with rounded corners. I saw some code written in css3 and tried to use it but it didn't work.

    I thought maybe there might be a conflict between using WP and "WHICH STYLE OF CSS" I should use?

    Your constructive input is greatly appreciated.

    thank you!

  2. simalamdeveloper
    Member
    Posted 1 year ago #

    Hello tcw7

    CSS3 just adds a bunch of additional styling features to CSS, It is written the same as the older version of CSS

    Some CSS3 Features do not work in all browsers. Rounded corners do not work in Internet explorer less than version 9

    Here site I like to use for getting rounded corner code.
    http://border-radius.com/

    For an example of a simple rounded corner div

    <div class="content">
      <p>Look mom, I am rounded!</p>
    </div>
    
    .content{
        height:300px;
        width:300px;
        background-color:red;
    
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
    }

    Make sure you are targeting the correct element you want to have the rounded corners with the correct class or id.

    Hope this helps!

  3. tcw7
    Member
    Posted 1 year ago #

    Thanks simalam,

    Do you load this in the style.css page?

  4. tcw7
    Member
    Posted 1 year ago #

    Whoops...just loaded in the 2010 theme "style.css" folder.

    ...and its not working (sigh).

  5. simalamdeveloper
    Member
    Posted 1 year ago #

    Sorry I should have been more specific. Place the css part in the style.css of your the current active theme

    .content{
        height:300px;
        width:300px;
        background-color:red;
    
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
    }

    And the html in one of the templates you are viewing

    <div class="content">
      <p>Look mom, I am rounded!</p>
    </div>

    Test to see if you get a red box on the page. If not try a differn't class name. Your styles ".content" could be getting overwritten by another style in the CSS file.

    Once you get a red box with rounded corners working, try a different element in your theme and find out what class or id it's using and try giving it rounded corners.

  6. tcw7
    Member
    Posted 1 year ago #

    thanks simalam!

    Which file would you make the HTML change?

    Thank you!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.