Serenity – Remove Border on Image

Community Forums Forums Design Tips and Tricks Serenity – Remove Border on Image

This topic is: resolved

This topic contains 14 replies, has 5 voices, and was last updated by  Tonya 4 months, 3 weeks ago.

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #53553

    nkitchen31
    Participant
    Post count: 16

    I would like to add an image, but the default has a border around all images. I want to put on just one image with no border. How would this be done?

    Thank you in advance!

    #53559

    braddalton
    Participant
    Post count: 10567

    Add 0 to the border filed under Advanced Settings > Advanced image settings when you edit the image after insertion.

    Image properties > Border 0


    #53561

    nkitchen31
    Participant
    Post count: 16

    this is in a text widget

    #53563

    braddalton
    Participant
    Post count: 10567

    Change it before pasting it into the text widget.

    Click the image and then click the small window which appears to edit the image.


    #53574

    nkitchen31
    Participant
    Post count: 16

    It’s just code in the text widget… I don’t understand what you are talking about.. ???

    #53605

    nkitchen31
    Participant
    Post count: 16

    Could you please explain what you mean by changing it before I put it into a text widget? The .css has a border for all images in the featured’s. I want to only remove it for 1 image.

    #53673

    braddalton
    Participant
    Post count: 10567

    When you upload and insert an image in a new post draft, you can then click the image and small window which appears to edit it.

    Then you can add 0 to the border filed under Advanced Settings > Advanced image settings when you edit the image after insertion.

    Then you can copy and paste the HTML for the image into your text widget.


    #67194

    Emilio
    Participant
    Post count: 5

    Hi,

    When I tried placing a zero in the border box the border still appears. I would like to control when borders appear. So what am I doing wrong?

    #67318

    braddalton
    Participant
    Post count: 10567

    You can inspect the image using Firebug and use the image i.d in a new CSS rule to add or remove the border on specific images:

    Examples:

    Add a border to a specific image.
    [css]
    .wp-image-123866 {
    border: 5px solid red;
    }
    [/css]

    Or remove a border:
    [css]
    .wp-image-123866 {
    border: none;
    }
    [/css]


    #67386

    Emilio
    Participant
    Post count: 5

    Okay, once I have the image ID, where do I place the CSS code?

    Emilio

    #67391

    braddalton
    Participant
    Post count: 10567

    At the end of your child themes style.css file before the Media Queries


    #113055

    fastlane
    Participant
    Post count: 4

    Is there a way to globally remove borders on all images? (I am using the News child theme…)

    thanks

    Almanack

    #113076

    Tonya
    Member
    Post count: 190

    Yes, you can add the following to your style.css file:

    img {
    border: 0;
    }

    Cheers


    Web developer, Software & Electrical Engineer, Bringing ideas to life is my art
    Find Me: tonyadoescode.com | Twitter | GitHub | Customize without touching the child theme

    #113079

    fastlane
    Participant
    Post count: 4

    excellent

    thank you

    #113081

    Tonya
    Member
    Post count: 190

    You’re very welcome :)


    Web developer, Software & Electrical Engineer, Bringing ideas to life is my art
    Find Me: tonyadoescode.com | Twitter | GitHub | Customize without touching the child theme

Viewing 15 posts - 1 through 15 (of 15 total)

The topic ‘Serenity – Remove Border on Image’ is closed to new replies.