KRemington
Member-
Posts
16 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Everything posted by KRemington
-
Custom wrapper not working with Fluid Engine
KRemington replied to KRemington's topic in Customize with code
Ah, I didn't think to duplicate the About page and repurpose it into a new Home page. That worked perfectly! Thank you, my king. -
Before Fluid Engine, I had a simple website that used custom CSS to create a white wrapper atop a gray background. However, when I came back to my website and updated the Home page to Fluid Engine, the text margins within the white wrapper got funky and I can't insert an image in the wrapper at all. To see, here's my Home Page that got updated to Fluid Engine, and here's my About page which hasn't yet updated to Fluid Engine (this has the desired behavior with text margins; I want everything to look like this). Here's a GIF of what happens when I try to add an image to the wrapper on my Home page with Fluid Engine. Here is the CSS that is being used for both my Home page and my About page. /* set homepage wrapper details */ section[data-section-id="63aef4b07e2b647db6afd610"] .content-wrapper .content { background: #f9fafb; border-style: solid; border-width: 1px; border-color: gray; padding: 20px 40px 60px 40px; max-width: 800px; } /* set About wrapper details */ section[data-section-id="61a91d5a71d3ac0135447767"] .content-wrapper .content { background: #f9fafb; border-style: solid; border-width: 1px; border-color: gray; padding: 20px 40px; max-width: 800px; } Since I can't revert my Home page to do away with Fluid Engine, is there any way I can preserve the white-on-gray wrapper in the new Fluid Engine environment that allows me to add images, and has the desired text margins? Any help would be significantly appreciated.
-
Ah, I got the white wrapper to reappear on the Home page by changing the section ID: /* set homepage wrapper details */ section[data-section-id="63aef4b07e2b647db6afd610"] .content-wrapper .content { background: #f9fafb; border-style: solid; border-width: 1px; border-color: gray; padding: 20px 40px 60px 40px; max-width: 800px; } However, the text is now wrapping on the Home page in a funky way, or has restrictive margins. The text on the About page is just the way I want it, but I have basically the exact same CSS code for my About page: /* set About wrapper details */ section[data-section-id="61a91d5a71d3ac0135447767"] .content-wrapper .content { background: #f9fafb; border-style: solid; border-width: 1px; border-color: gray; padding: 20px 40px; max-width: 800px; } Why does the text have different wrapping/margins on these pages, and how can I get the Home page to behave like the About page?
-
Unfortunately, that just turns the entire background white. What I want to do is create (what I think is called) a wrapper, which is white, but which sits upon the otherwise gray background, like in the Blog and About pages linked in the initial post.
-
I just upgraded my website to the new Fluid Engine, and doing so seems to have killed the white background I had on my website's home page. What I want is for the same white background on my blog page and About page to be present on the home page (and all other pages). Not sure how to get back to that though. Here is the custom CSS (which I don't fully understand) being used: /* reduce bottom margin of headers */ h1 :not(.blog-tile), h2 { margin-bottom: -15px !important; } /* customize blog bottom margin */ .blog-title { margin-bottom: 4px !important; } /* mobile nav font */ .header-menu-nav-item a { font-family: 'Fuzzy Bubbles Bold' !important; font-size: 30px; color: #00557a !important; } /* set homepage wrapper details */ section[data-section-id="6193328782fcf92d7a4532ab"] .content-wrapper .content { background: #f9fafb; border-style: solid; border-width: 1px; border-color: gray; padding: 20px 40px 60px 40px; max-width: 800px; } /* set About wrapper details */ section[data-section-id="61a91d5a71d3ac0135447767"] .content-wrapper .content { background: #f9fafb; border-style: solid; border-width: 1px; border-color: gray; padding: 20px 40px; max-width: 800px; } /* set blog main page wrapper details */ .blog-single-column.collection-content-wrapper { background: #f9fafb; border-style: solid; border-width: 1px; border-color: gray; padding: 20px 40px; margin: 40px auto; width: 90%; max-width: 800px; } /* set individual blog post wrapper details */ .blog-item-wrapper { background: #f9fafb; border-style: solid; border-width: 1px; border-color: gray; margin: 40px auto; padding: 20px 40px; max-width: 800px; } /* allows text to span wrapper in individual blog post */ .blog-item-inner-wrapper { width: 100% !important; } /* hacky way of getting paragraph breaks to show on blog main page */ .blog-single-column .blog-excerpt p { margin:0 0 15px 0; } Any help would be much appreciated!
-
Create colored bounding box for content
KRemington replied to KRemington's topic in Customize with code
Fantastic, thank you! -
Create colored bounding box for content
KRemington replied to KRemington's topic in Customize with code
That definitely works, thanks! A couple of questions: Is there a way to make it so that this applies to all sections by default, so that it doesn't need to be applied to each section manually? If not, what is the best way to find the section id? (e.g. data-section-id="6193328782fcf92d7a4532ab"). Pardon the ignorance; appreciate the help! -
Site URL: https://www.kremington.com I'm using the blank template and would like to create a colored bounding box around my content, like you see with many other websites. For example, these two seen here: (https://www.mikechenbooks.com/ and https://www.cgpgrey.com/) My website is kremington.com (very underdeveloped at the moment). I'm wondering how I might best set something like this up. I don't need anything fancy like background images or transparency, just a solid single-color bounding box (I'm sure there's a more official name than that). Any help would be greatly appreciated!
-
Site URL: https://www.kremington.com Pretty sure I'm just being dumb here, but I can't find a way to edit the background color of my site header. Site is here: https://www.kremington.com/ PW: hi I'm using the Blank template. I see how to add a logo, but not simply change the background color. The stuff I've found online seems to indicate that when you click "Edit Site Header" there should be a Colors option, but I have Style instead: Is custom CSS needed for this?