WordPress.org

Ready to get started?Download WordPress

Forums

BlackBird
[resolved] Circles (5 posts)

  1. kbernauer
    Member
    Posted 1 year ago #

    I noticed all of the examples have circle cropped images at the bottom. Any way to remove, use a different shape or replace with rounded edge rectangular images of my own? I'm contemplating buying it but want to make sure this it's flexible.

    Thanks!

  2. waterworks2
    Member
    Posted 1 year ago #

    The circles are actually squares that just have a really large border radius of 100px. So yah, just upload your own images for that area, then remove border-radius or set to very small number if you want a square-ish box with rounded off corners.

    Try downloading Firebug for FF to explore the coding of a template further. You can change the css in the lower right pane and see what effect those changes will have on the page your currently viewing.

    .feature-content-inner .circle {
        background: none repeat scroll 0 0 #F3CC0C;
        border-radius: 100px 100px 100px 100px;
        color: #FFFFFF;
        display: block;
        font-size: 20px;
        height: 148px;
        line-height: 100px;
        margin-left: 45px;
        text-align: center;
        width: 152px;
    }
  3. kbernauer
    Member
    Posted 1 year ago #

    Thanks so much. I installed Firebug and found the css but could not find the same code to edit in WP. I found similar CSS in Edit Themes/Stylesheet (style.css) but not the exact same. I apologize, this is my first WP site. Can you direct me to it or is it locked down in the free version? Thanks again.

  4. waterworks2
    Member
    Posted 1 year ago #

    Yah, Firebug will split out the code if the CSS is written in shorthand.

    For instance, in actual css, this may be written:

    padding: 10px 5px;

    but then in Firebug, it might break it out like this:

    padding-top: 10px;
    padding-right: 5px;
    padding-bottom: 10px;
    padding-left: 5px;

    Depends on your firebug settings.

    And if you are not comfortable with editing original CSS sheet (ie..you want to leave as original), then you can do something like this at the bottom of the css sheet, then add your new code. If you use the same code as code above, it will overwrite the original code with your new stuff. For instance:

    /* My Custom Template Edits */
    
    .feature-content-inner .circle {
         border-radius: 10px;
    }

    And as long as this comes at the bottom of your CSS it should override the original border radius set for the circles. You should also read up on the term !important here: http://coding.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/ in case the code you're adding doesn't override like you want it to.

  5. kbernauer
    Member
    Posted 1 year ago #

    Perfect! Got it! Thanks again!

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags