Question for Devblog, changing background color
-
Devblog – since you’ve been helping me so much I thought I continue to pester you with questions! I hope you don’t mind. I notice that my theme is really popular and especially because of the background colors – its really distinct so I was thinking of changing both the background (outside margin) and the inside blog part (sorry don’t know tech words) to shades or light brown/tan. I think that will go with the green. Is there a two color combination you’d suggest or is there a palette I can choose from?
Btw – I checked out your site are you a person or a company? I liked the “new” clip art in the corner, how do I get that on my website :)
many thanks in advance!
Esther
theconsultancygroupguyana.comThe blog I need help with is: (visible only to logged in users)
-
There are loads of colour code pickers available on the web. Give google (or your favourite search engine) a whirl and poke through the sites you find. Including “graphic design” or “web design” in your search terms will stop you getting loads of interior decorating sites!
Here’s the code to target your two page areas with a couple of new colours:
lh
body {background-color:#9E9066}
#container {background-color:#BFA76F} -
I am legion, for we are many.
I’m kidding, of course. I’m a person, and the blog I’m assuming you checked out is me photoblog.
Now, regarding your blog. I’m just curious, when you say your theme is really popular, do you mean, your visitors like it or many wordpress users use it? If it’s the former, why would you want to change the colors if your readers like it? I’m just curious.
There are two colors that compliment I believe compliment well the dark green of your header, so I’d use either of these two for your blog background:
body {background: #914141;} OR body {background #8d3f74}Try them out.
Also, you might want to try this website. On the left column you enter, let’s say, the HEX code for green in the field above the button that reads “Set Hex”, press it and on the right column all the colors that compliment/combine with green will appear in the boxes there. This is the URL
http://www.colorschemer.com/online.html
This is another nice one:
http://colorschemedesigner.com/
For the background of your contents area, something like this might work for you:
#container {background: #fff3e5}The only little problem is that those white Xs you put there to space the images out will be visible. I would recommend leaving the background contents white, but it’s up to you.
The little “new” image is a background image for the newest post of the blog. I don’t know where you would use it since it seems you don’t have blog entries but just static pages. It wouldn’t look good on them.
HTH.
-
-
Hey there –
Thanks as always for the “super” quick reply. Sorry I was a bit cryptic in my message it was late …. what I meant was, Mistylook is a popular theme and what makes it distinct are the background color combination and the fonts used in the widgets (I wan’t to eventually change that also). So I want to personalize it a bit more, only thing is I’m a CSS/website primitive!
Believe it or not I find this stuff horrifyingly technical – when I change the codes, I do so in the CSS thingy that you sent me before? I don’t just enter those two codes in the blank box, do I? I know you must be howling with laughter when you read my questions!!!
So how did you know about the little X’s :) that’s amazing – I thought it wasn’t visible.
Thanks as always and if you’re ever in South America/the Caribbean the drinks are on us!
E
-
When I enter just the codes, the size of the website – shrinks back to how it was before you expanded it. I think I’d like to expand it a bit more even.
-
No problem, and thanks!
I knew about the Xs because if you change the background color of the contents area to a different color they become visible.
Also, this code should be added to the one I previously gave you. In other words, the whole thing should look like this:
body {background: #914141;} #container {background: #fff3e5} #container,#navigation,#footer { width:90%; min-width:720px; } #navigation .page_item a { background:#223007; color:#cac5a9; } #navigation .page_item a:hover { background:#90330e; color:#fff; } #content { margin:0; } #content-main { width:auto; padding:0 200px 0 20px; } #sidebar { float:right; width:200px; margin:0 10px 0 -210px; } #headerimage { background:#223007 url('http://theconsultancygroup.files.wordpress.com/2010/04/bamboo-19.jpg') top right no-repeat!important; clear:both; color:#fff; height:200px; width:auto; margin:10px; }I added the new selectors to the top because of the order of elements, but that’s just the way I code (it looks more organized). If you add them at the bottom, they should work the same.
-
-
If you want to format something like the “TCG Brochure 2010” (text to the right, image to the left), you could do something like this:
In your text/HMTM editor you’d enter this code
<div class="row"> <div class="left">IMG HERE</div> <div class="right">TEXT HERE</div> </div>and in your CSS Editor, you’d ADD this code:
.row { clear: both; margin: epx 10px 10px; overflow: hidden; padding: 10px; width: 540px; } .left, .right {width: 50%;} .left {float: left;} .right {float: right;}If that’s too much, then you could use tables (personally, I don’t like using tables for this kind of things):
<table style="border: 0; width: 560px;"> <tr> <td>IMG HERE</td> <td>TEXT HERE</td> </tr> </table>HTH.
-
Ok – I fiddled around with the color scheme and kept the container light and darkened the outside. That will have to do for now – thanks a lot.
E
- The topic ‘Question for Devblog, changing background color’ is closed to new replies.
WordPress.com Forums 