can we add borders to individual content in a page

I want to add borders to my content in a page can any one help with me code

  • Jude
    • DEV MAN

    Hi @bharathfriendsmeet

    Thanks for getting in touch !

    Here is some CSS that can add this for you

    .cma-wysiwyg-editor h1 span,
    .cma-wysiwyg-editor p
     {
        border: 1px solid black;
    }

    Feel free to adjust the thickness and color of the border before adding it in.

    Cheers
    Jude

  • bharath
    • Design Lord, Child of Thor

    Hi @Jude

    I have applied this css

    .cma-wysiwyg-editor h1 span,
    .cma-wysiwyg-editor p
    {
    border-style: outset;
    border-width:5px;
    }

    .cma-wysiwyg-editor h1
    {
    border-style: outset;
    border-width:5px;
    }

    and i am using content manager to edit content for that i used

    <p style="padding: 10px;"><iframe src="https://archive.org/embed/Gurajada1862-1915" width="500" height="140" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>

    and

    <p><img class="aligncenter wp-image-268" src="http://www.telugurachayita.org/wp-content/uploads/2016/03/Gurajada-300x300.jpeg" alt="Gurajada" width="174" height="174" /></p>

    but i am getting extra space below audio and sides of image file ... you can find in this attachment Please help me in removing the extra space and alignment...

  • Michael Bissett
    • Recruit

    Hey @bharathfriendsmeet,

    From what's been posted here, I'm seeing that the site is http://www.telugurachayita.org, but I don't know which page on your site is in question (I tried looking around the site, but couldn't locate the page in question).

    That said, I'd first like to suggest the use your browser's developer tools. I personally use Google Chrome, and we've got a guide on using those available over here:

    https://premium.wpmudev.org/blog/chrome-developer-tools/

    (check out the "Inspecting Elements" & "Working With CSS" sections in particular)

    In regards to the audio player, it's possible that there's some padding or a margin applied, these articles have more information on the use of those CSS properties:

    http://www.w3schools.com/cssref/pr_padding.asp
    http://www.w3schools.com/cssref/pr_margin.asp

    As for the image, I'd say that there's a margin being applied. The styles that are applied to an element can be seen when using the code inspector (like what I advised above).

    Kind Regards,
    Michael

  • Jude
    • DEV MAN

    Hi again @bharathfriendsmeet

    Thanks for the link. Here you go

    img.aligncenter.wp-image-268 {
        border-style: outset;
        border-width:5px;
    }
    
    body > section:nth-child(4) >
    section > div.row.row-equal-height >
    div:nth-child(2) >
    div:nth-child(2) > p > iframe {
        border-style: outset;
        border-width:5px;
    }

    Not the CSS above is super specific so it may not work if you change too much on the page. There is no easy alternate way because of how the CMA editor spews out HTML.

    Cheers
    Jude

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.