Community Forums › Forums › Archived Forums › Design Tips and Tricks › Can't find CSS to color borders
- This topic has 4 replies, 2 voices, and was last updated 9 years, 8 months ago by
keithmoore43.
-
AuthorPosts
-
May 28, 2015 at 10:13 am #153978
keithmoore43
MemberWorking on my first Genesis Framework, trying to get a handle on basic layout colors (not to mention seeing how much I've learned after 3 semesters at the local JC). I've got the header all green, the footer all blue, and now I'd like to make the borders in the content area yellow. I've done that, as shown in the image below, but the edges are still white unless I shrink the screen enough.
How can I make the borders in this entire section yellow? I've used Firebug to inspect the element, but it just takes me to "site-container" and my attempts to add background-color to these classes isn't having any effect.
Any suggestions on what to explore next would be awesome
May 28, 2015 at 10:42 am #153985SavvyJackie
MemberHi,
See if you have a site-inner class. It may need to be changed to the yellow. If you have a link, I can definitely find out which one it is.
Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie
Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂
May 28, 2015 at 11:06 am #153990keithmoore43
MemberI'm working on MAMP, so I'm not sure how to share it. But I started playing with a subdomain before doing that, so I just copied the CSS file over from the MAMP version.
Thanks!
May 28, 2015 at 11:45 am #153998SavvyJackie
Member/* ## Site Containers
--------------------------------------------- */Hi Keith,
I changed this code in my browser and that stretched the yellow across screen. Specially making the site-inner 100% max-width vs the 1200. Now you'd have to style the container inside that site-inner so that it is placed where you want it. You'll also need to change the site-inner in the media queries for the different viewports.Backup your stylesheet before editing.
If you enter this code below right before the @media section, you can see how if affects the layout. You'll need to tweak it for the different combinations for sidebars, etc. and add styling for the viewport widths, but it is a start.
.site-inner, .wrap { margin: 0 auto; max-width: 1200px; } .site-inner { clear: both; padding-top: 40px; background-color: #F5DF65; max-width: 100%; } .content { margin: 0 auto; float: none; } .content-sidebar .content, .content-sidebar-sidebar .content, .sidebar-content-sidebar .content { float: none; }
Cheers,
Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie
Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂
May 28, 2015 at 5:15 pm #154022keithmoore43
MemberHmm, a little confused here. I added max-width: 100% to the .site-inner class, which extends everything to the edges, including the white content area, when the goal is to just get the orange/yellow background to extend.
When I "inspect element" on the white border, it simply points to site-container, but I've got no clue where to expand the margins from that info.
And you're saying to put all the above code above the @media section? I tried that and got the borders to extend, but then the content and widget areas went way out of whack.
I appreciate the help. 🙂
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.