Navigation
Archive / Make column borders opaque
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • September 26, 2016 at 3:38 pm #1191376
    heroish
    Participant

    Hi,

    I am using X Theme with an Integrity stack.

    My page has a background image. I have a column with text and a solid coloured background.

    I want to add a border to the column which has an opaqueness/blend/transparency with the background page image and not the column solid colour.

    I can set the border for the column to be any colour I want. I can also set it so it has transparency and opaqueness with the solid colour that is contained within the column.

    However, the I can’t see to make the border opaque and blend with the background image. It is like the column is extended and then the border is added over the extended column or something!? I am not sure why this happens.

    Can you please advise.

    September 26, 2016 at 5:03 pm #1191457
    Jade
    Moderator

    Hi there,

    You can use the rgba value of the border color so that you could set its transparency like this: border: solid 5px rgba(255, 0, 0, 0.3);

    Kindly give us the url of the page in question if you are trying to set it to a specific element.

    Thank you.

    September 27, 2016 at 12:46 pm #1192659
    heroish
    Participant
    This reply has been marked as private.
    September 27, 2016 at 1:32 pm #1192712
    Rupok
    Member

    Hi there,

    Thanks for writing back. it seems you are setting the border to the column. You don’t need to set any CSS for that because you can use the Huebert color picker where you can set the opacity level as well – http://prntscr.com/cn2fba

    So let’s set a color and change the opacity level to get an opaque border.

    Hope this makes sense.

    September 27, 2016 at 2:15 pm #1192760
    heroish
    Participant

    Hi,

    I tried that – it is happening in the live site. But it makes the border transparent with the column and not the page background.

    I set it to black – changed the setting in the colour picker and it went grey as the column is. Not to the background – does this make sense?

    I want it to blend in outside of the column to the background image?

    September 27, 2016 at 2:20 pm #1192769
    heroish
    Participant
    This reply has been marked as private.
    September 27, 2016 at 4:06 pm #1192928
    Darshana
    Moderator

    Hi there,

    Can you please provide us with a screenshot of how it is rendering on your development environment? so that we can understand it better and assist you accordingly.

    Thanks!

    September 28, 2016 at 2:34 am #1193521
    heroish
    Participant
    This reply has been marked as private.
    September 28, 2016 at 4:03 am #1193585
    Lely
    Moderator

    Hi There,

    Thank you for the screenshots. Please add the following on the row style field:
    border: solid 13px rgba(0, 0, 0, 0.3); border-radius: 10px;

    Then remove the border set for column. See attached screenshot:

    September 28, 2016 at 1:10 pm #1194358
    heroish
    Participant

    Thank you that helped a lot!

    Is it possible to make the column have rounded corners to match the border? (The grey filled in column on the page.)

    September 28, 2016 at 2:39 pm #1194486
    Jade
    Moderator

    Hi there,

    You can add a border-radius value in the style element of the column to do that.

    Hope this helps.

  • Author
    Posts
  • <script> jQuery(function($){ $("#no-reply-1191376 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>