WordPress.org

Ready to get started?Download WordPress

Forums

Code conundrum (12 posts)

  1. Dot
    Member
    Posted 1 year ago #

    Hello

    I have inputted the following recommended code, intended to enhance my images with the titled effects, with the following results:

    1. To get a thin border:
    img {
    border: 1px solid #000000
    }
    - No impact

    2. To get a double border:
    img {
    padding: 1px
    border: 1px solid #000000
    }
    - only the padding works: and only for the header image!! (which I'd wanted unaffected)

    3. To get a solid border of colour:
    img {
    padding: 1px;
    border: 1px solid #000000
    backbround-color: #000000
    }
    -Again only the padding only changes for the header image changes
    -and the solid border works around everything else; although I had wanted to be able to select which images I'd wished to have bordered this way; not the "follow me" buttons eg

    :/
    Anyone any ideas please?

  2. Chandan Kumar
    Member
    Posted 1 year ago #

    I think border none has been defined somewhere in your stylesheet. So please implement "!important" it as follows:

    img{
     border:1px solid #000000!important;
    }

    You can override some specific image style by adding individual class to it.

  3. Dot
    Member
    Posted 1 year ago #

    Hello,
    I just tried this, and it worked: great, thanks -

    any idea how I can apply this to only certain images please? (it's making my header image go wonky at the moment)

  4. Chandan Kumar
    Member
    Posted 1 year ago #

    Add class or id attribute to image and then assign particuler style to it as follows:

    //HTML
    <img src="image_url" alt="" class="profile_pic" />
    
    //CSS
    .profile_pic{
     border:1px solid #000000!important;
    }

    Or

    You can override your image style which are in header like:

    #header img{
     border:none!important;
    }
  5. Dot
    Member
    Posted 1 year ago #

    Thankyou for this:
    Do I input the HTML code into the post page?

  6. Chandan Kumar
    Member
    Posted 1 year ago #

    Yes! Add class attribute with particular class name in your html img tag wherever you want and then override their style in your stylesheet as given in previous example.

  7. Dot
    Member
    Posted 1 year ago #

    Sorry; umph: "in your html image tag" ? What/where is that please?

  8. Chandan Kumar
    Member
    Posted 1 year ago #

    It will be in your index.php or any particular page template. You will have to do find that.

  9. Dot
    Member
    Posted 1 year ago #

    Great!

    So with:

    <img src = "image_url" alt= " "
    class = profile_pic"/>

    img is the selector
    and profile-pic the value of class attribute

    Please?

  10. Chandan Kumar
    Member
    Posted 1 year ago #

    <img src="image_url" alt="" class="profile_pic" />

    In the above code "img" is the html tag and it has a class selector named as "profile_pic". Now you can define specific style to this image.

    I think your query has been resolved now.

  11. Dot
    Member
    Posted 1 year ago #

    Sure - thanks

  12. Dot
    Member
    Posted 1 year ago #

    Resolved!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.