otobot1 Posted October 23, 2020 Share Posted October 23, 2020 Site URL: https://infinityfs.squarespace.com/individuals I'm building a new site on 7.0 Brine, and I'm trying to figure out how to change the background color of an entire column if it's possible. I managed to emulate the look I want by changing the colors of the spacers, image, and text block that make up the column, but as expected, it breaks when the page gets smaller because the spacers shrink vertically relative to the image block. If I want to make this work, I need to be able to color the entire column area. Is this possible? As long as this question remains open, the site password will be "CSSisconfusing". Link to comment
tuanphan Posted October 23, 2020 Share Posted October 23, 2020 Add to Home > Design > Custom CSS div#block-yui_3_17_2_1_1603436775273_52904 + .row .span-4 { background: white !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
otobot1 Posted October 23, 2020 Author Share Posted October 23, 2020 1 hour ago, tuanphan said: Add to Home > Design > Custom CSS div#block-yui_3_17_2_1_1603436775273_52904 + .row .span-4 { background: white !important; } I added the code but it didn't seem to do anything. I haven't edited that section of my index page in the past 6 hours so I don't think the block id would have changed Link to comment
tuanphan Posted October 25, 2020 Share Posted October 25, 2020 div#block-yui_3_17_2_1_1603436775273_52904 + .row .span-4 { background: red !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
otobot1 Posted October 26, 2020 Author Share Posted October 26, 2020 Ah I see what the code does now. Super clever! My friend helped me tweak is a little bit to get more the effect that I was looking for, but this was super helpful because we couldn't figure out how to affect the whole columns because their ID changes every time the page loads. This is the code we wound up going with if you're curious. Thanks for the help. //making all background colours the same height div#block-yui_3_17_2_1_1603436775273_52904 + .row{ display:flex; } //rounding the corners of all 3 columns div#block-yui_3_17_2_1_1603436775273_52904 + .row .span-4{ border-radius: 4px; } //changing colours of columns in 3 values section to different shades of grey //columns 1 and 3 div#block-yui_3_17_2_1_1603436775273_52904 + .row .span-4:nth-child(odd) { background: #F9F9F9 !important; box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.1); } //column 2 div#block-yui_3_17_2_1_1603436775273_52904 + .row .span-4:nth-child(even) { background: #F4F4F4 !important; box-shadow: 0px 0px 3px 5px rgba(0,0,0,0.1); //z-index:0; position:relative; } Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.