CSS Code for Layout grid

  • Unknown's avatar
    panda970 · Member ·

    Hi all,

    I’m using the layout grid for my blog posts. One column has the text of the post, and another column has my author spotlight.

    I would like to put a border around the author spotlight, does anyone know the CSS for for this?

    Thanks!

    The blog I need help with is: (visible only to logged in users)

  • aleone89 · Staff ·

    Hello there,

    It looks like you’re on the business plan, so you’re able to reach out for support in realtime here: https://wordpress.com/help/contact/

    This CSS here may be of use to you: 

    
/* Add border to LOG blog 4th Col */

.wp-block-jetpack-layout-grid.column4-desktop-grid__row-1 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
    border: 1px solid;
    padding: 10px;
}

    I hope this helps.

  • aleone89 · Staff ·

    Hello there,

    It looks like you’re on the business plan, so you’re able to reach out for support in realtime here: https://wordpress.com/help/contact/

    This CSS here may be of use to you: 

    
/* Add border to LOG blog 4th Col */

.wp-block-jetpack-layout-grid.column4-desktop-grid__row-1 > .wp-block-jetpack-layout-grid-column:nth-child(4) {
    border: 1px solid;
    padding: 10px;
}

    I hope this helps.

  • Unknown's avatar
    josegreyes94 · Member ·

    Hey hi hello!

    As you’re directly asking for the CSS, I assume you’re familiar with applying CSS to specific elements. As such, let’s jump straight to the CSS! (But if you’d like a refresher on how to apply CSS, this link may help)

    Firstly, am I understanding correctly that you want a border around the image inside the author spotlight column? If so, here’s are a couple of approaches for you to try. I’ll include explanations, in case you’d like to make your own adjustments:

    (P.S.: I think “Approach 2” might be better)

    Approach 1, with focus on “border”:

    .spotlight-image {
    border: 3px solid black;
    padding: 10px 3px 0 12px;
    background: white;
    border-radius: 10%;
    box-shadow: -4px 6px 7px #464646;
    }

    Notes:

    border: 3px solid black;

    – The “main border”
    – Border thickness adjusted by increasing/decreasing “3px”
    – “solid” is the border style; alternatives are double, dotted, dashed, etc.
    – “black” can be replaced with other colours

    padding: 10px 3px 0 12px;
    background: white;

    – The padding combined with the white background makes the image’s background look slightly larger
    – This helps center the subject of the image, as adding a border affects how the image looks
    – If you don’t want this, you can leave out the padding and background
    – The padding numbers “10px 3px 0 12px” refer to the top, right, bottom, and left of your image
    – Adjusting the numbers changes the amount of “white space”
    – I suggest testing out replacing “0” with “3px” or any other values

    border-radius: 10%;

    – This determines how round the image’s corners are
    – Highly recommended that you adjust this value to your preference

    box-shadow: -4px 6px 7px #464646;

    – A shadow for “depth”
    – “#464646” is a black’ish color
    – The values “-4px 6px 7px” determine how off-set the shadow is
    – “-4px” means “4px left”; “6px” means “6px down”; “7px” means “7px of blur”
    – Adjust to preference

    Approach 2, with focus on box-shadow:

    .spotlight-image {
    padding: 10px 3px 0 12px;
    background: white;
    border-radius: 10%;
    box-shadow: 0px 0px 3px 3px #000000eb, -8px 12px 10px #0000009e;
    }

    box-shadow: 0px 0px 3px 3px #000000eb, -8px 12px 10px #0000009e

    – There are two box-shadows separated by the coma
    – “0px 0px 3px 3px #000000eb” is similar to “border: 3px solid”
    – It means, 0px left/right, 0px top/down, 3px blur, 3px “thickness”
    – The values after the coma are the border’s shadow/blur, with similar meanings
    – Adjust the shadow sizes and colours to preference

    Additionally, in case adding these borders makes the author spotlight image look “too low”, a fix I can recommend is adding “transform: translateY(-15px);” to the code above (and adjusting the value to your preference). This will move the entire image up 15 pixels. (Which I find looks rather fine!)

    Referencing Approach 2, the code should then look something like this:

    .spotlight-image {
    padding: 10px 3px 0 12px;
    background: white;
    border-radius: 10%;
    box-shadow: 0px 0px 3px 3px #000000eb, -8px 12px 10px #0000009e;
    transform: translateY(-15px);
    }

    If you’d like some guidance on further adjustments to the CSS, or some pointers for where/how to apply the CSS, feel free to let us know!

    All that said, I hope this helps. And if not, we’ll be happy to provide more assistance!

  • Unknown's avatar
    josegreyes94 · Member ·

    Oh. My apologies! I somehow missed sir @aleone89’s posts despite refreshing twice.

    In that case, do stick with his advice, both regarding contacting realtime support as well as the CSS code suggested! I especially like the inclusion of the note “/* Add border to LOG blog 4th Col */” above the CSS, as it helps with quickly describing the code’s purpose.

  • The topic ‘CSS Code for Layout grid’ is closed to new replies.