Community Forums › Forums › Archived Forums › General Discussion › How do I create a dark-colored "frame" to surround text on a light background?
- This topic has 10 replies, 4 voices, and was last updated 11 years ago by mediafun.
-
AuthorPosts
-
April 5, 2013 at 11:56 am #33339mediafunMember
Hi folks,
I’m currently using the Genesis child theme that comes with the framework. I’d like to create a “frame” around my text, akin to what I’ve got on my blog:
http://mediafunhouse.blogspot.com/
That was made using a very simple choice of template in Blogger. I’d like to do the same with the site I’m building using Genesis, which is here:
http://mediafunhouse.com/blog/
Thus far the answers I’ve gotten indicate that doing this would require what seems to be a major “manipulation of code.” I can do simple, straightforward tweaks of code, but rebuilding or rewriting code is something I’m not adept at — I am a beginner at all this and have thus far been using simpler templates for the work I’ve done online. Prior to discovering Genesis, I had been using the free Startup WP theme — that extremely simplistic theme had this kind of a “frame” for the text, and I would like to find a way to discover/duplicate it using Genesis.
So the question goes: is it possible to do the above “framing” of text on a *light* background with a sides/top/bottom *darker* color (for the whole page, not for select lines or paragraphs) using the Genesis child theme -- or is there another child theme with which this can be simply achieved? (I see that some of the child themes *appear* to have darker colors on the sides/top/bottom of the pages, and would be willing to buy the theme if it came ready to keep that kind of dark-colored framing.)
How can I do this, in the simplest fashion possible, without rewriting major clumps of code?
Thanks,
Ed Grant
April 5, 2013 at 12:02 pm #33341Nick DavisMemberHi Ed
I might have misunderstood what you are asking but do you have an option under Appearance > Background (within the WordPress admin) to change the background there?
If that's available you should be able to upload an image to used as a tiled background (a few nice ones here: http://subtlepatterns.com/ ) or just pick a colour
Cheers, Nick
PS If you are still stuck you could try the following plugin from the awesome Travis Smith here: http://wordpress.org/extend/plugins/genesis-custom-backgrounds/
@iamnickdavis. I share the best new Genesis stuff weekly at GenesisWP.guide
I also offer Genesis theme setup and Photoshop (PSD) to Genesis conversionsApril 5, 2013 at 1:27 pm #33356mediafunMemberNope, that's not what I'm looking for -- I don't want to change the background of the text area, I'm looking to put a dark-colored frame AROUND the text area (sides/top/bottom).
Again, it's possible with the simplest WP theme, Startup WP, and is readily available in Blogger. To see what I'm referring to, again, please look at my blog:
http://mediafunhouse.blogspot.com/
That is what I'm trying to do here, without having to rewrite large amounts of code. SURELY something that simple can be done using the dashboard (or a very straightforward code-tweak) on one of the child themes here, somehow? It's an extremely common "look" in both websites and blogs, it must be part of the Genesis universe.
Thanks,
Ed
April 6, 2013 at 9:10 am #33473Megan GrayMemberCould you try adding a border to #inner and adjusting the padding some?
Just as an example to get you started
#inner {
border: 1px solid;
clear: both;
overflow: hidden;
padding-top: 40px;
padding-top: 2.5rem;
padding: 10px;
}April 6, 2013 at 9:12 am #33474ramseypMemberEd,
The Media Funhouse site's "dark frame" is actually a dark background color. What sets it off is that the page also has a white background color behind the content. You can achieve this by adding these lines to the tail end of your style.css:
body: { background-color: #2d3037; }
#content: { -moz-box-sizing: border-box; box-sizing: border-box; padding: 20px; background: #fff; }
#title a,#title a:visited,.genesis-nav-menu a, .navigation li a, .widgettitle a, $footer p {
color: #fff;
}That will place the content behind a white background & the rest of the page will have a dark background. The header, navigation and footer text will be white, as well.
Cheers!
Pat
April 6, 2013 at 6:42 pm #33597mediafunMemberPat,
Thanks, but I added the code you supplied to my css.style doc and nothing changed.
http://mediafunhouse.com/blog/
I placed it exactly at the end of the style sheet. I'll attach the very bottom of the style sheet below, so you can see what's right above it. Should I place it somewhere else on the style sheet? I'm using the "sample" child theme.
Thanks for defining what I'm looking for. If there's anything else I can do to make this change, I would be infinitely grateful.
Ed
P.S. Thanks to Megan too for her response.
I put it below this (the end of my css.style doc):
}/* iPhones (portrait and landscape) ----------- */
@media only screen and (max-width: 480px) {html {
font-size: 87.5%; /* 14px base */
}#header .search-form {
width: 100%;
}.archive-page,
.five-sixths,
.four-fifths,
.four-sixths,
.one-fifth,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fifths,
.three-fourths,
.three-sixths,
.two-fifths,
.two-fourths,
.two-sixths,
.two-thirds {
margin: 0;
width: 100%;
}}
April 8, 2013 at 8:14 am #33974mediafunMemberDoes ANYONE (user or SP employee) have an answer for this query? Pat seemed to be leading me in the right direction, but his code-patch didn't do anything when added to the bottom of my css code. Does anyone know of a way to "patch" a solution into the dreaded css.style doc, which I do not have any familiarity with? (Man, are we adrift in Genesis-land if we cannot alter code...)
Is there a child theme that has this split-the-background effect available, and makes it easy to achieve? (It's possible from the dashboard on the very elementary StartupWP theme -- are these child themes just too sophisticated to allow for simple fixes?)
I'm currently using the "sample" child theme, but would be willing to buy another one IF I can get the dark background on the sides/top/bottom and a white background behind the text.
Can ANYONE help me out on this? Users? Moderators???
Ed
April 8, 2013 at 9:35 am #33989ramseypMemberEd,
Apologies - I had a couple of typos in my original code. Try the code below in place of what you've added to style.css
body { background-color: #2d3037; }
#content { -moz-box-sizing: border-box; box-sizing: border-box; padding: 20px; background: #fff; }
#title a, #title a:visited, .genesis-nav-menu a, .navigation li a, .widgettitle a, #footer p {
color: #fff;
}
April 8, 2013 at 11:59 am #34040mediafunMemberThanks for the update, but (I hate to add these "buts"... but) when I add that code all that happens is that my site-header and the names on my menu disappear from view (they're still there, but "invisible"). Should I be doing something different, or is that new piece of code doing something other than what it's supposed to do? (read: allow a different background color that resembles a "frame" for the text?)
The site is not public yet, so I'll leave it that way for a while today so you can see what happened.
http://mediafunhouse.com/blog/
Thanks again for responding to this.
Ed
April 8, 2013 at 6:58 pm #34173mediafunMemberStill interested in seeing if this can be accomplished. Pat did the heavy lifting -- does anyone from SP wanna fill in the code error? I'd love to implement that change, and that's what I believe these forums are for, helping people. Can the folks who designed the child theme throw a life saver out, or is that forbidden?
Ed
April 9, 2013 at 9:58 am #34279mediafunMemberWould love to have this issue resolved positively. I guess I'm counting on Pat. Thanks to whomever answers.
Ed
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.