WordPress.org

Ready to get started?Download WordPress

Forums

Montezuma
[resolved] [closed] Border color as opposed to whole page color (88 posts)

  1. ConsiderThis1
    Member
    Posted 6 months ago #

    This is my MOST favorite site from Showcase
    http://orchardcottagemuchmarcle.co.uk/

    I would like to see how my site looks using color in a border like that, as opposed to the whole page.

    I looked at the source code for Orchard Cottage, but wasn't able to work out what I needed to do to get that effect.

    Please will you help.

    My site is:
    http://health-boundaries.com/

  2. CrouchingBruin
    Member
    Posted 6 months ago #

    When you get the time, learn to use a web developer tool like Firebug (for Firefox) or Chrome Developer Tools (automatically built in to Chrome). These types of tools allow you to inspect the guts of any web site, including your own. So if you are wondering what selectors to use for your CSS rules, or what color a particular web site is using on a certain element, you can easily find out how.

    OK, so The Lodge at Orchard Cottage has #344970 as the background color for its body element. Remember from this thread, I showed you how to change the page color by adding a background-color property to the body selector? Go back and do the same thing, but instead of setting background-color to #FFFFB3, set it to #344970.

    Now, you want to set your other page elements to have a white background. Look in your virtual layout.css file, and you'll see sections for #banner (the header area) and #main (the main content area). Add a background-color property to each section so that they are white (or whatever other color you want:
    Change this:

    /* The header area */
    #banner {
    	position: 				relative;
    }

    To this:

    /* The header area */
    #banner {
    	position: 				relative;
    	background-color:			#fff;
    }

    Do the same thing for the #main section.

    If you want to change the footer to the same color as the borders as well (like The Lodge does), then you should set the background-color of #footer-bg (the full width of the footer area) to #344970 as well (you'll want to delete the border-top property to get rid of the white line at the top of the footer).

    One thing you'll notice is that the breadcrumbs bar stretches all the way across the width of the page, between your header and the main content area. The Lodge decided to delete the breadcrumbs bar altogether (and that's easy to do), but you can make it look correct if you want to keep it. In your breadcrumbs.css virtual file, down at the bottom, change this:

    #breadcrumbs1 {
    	padding: 				5px 0 5px 30px;
    }
    
    #breadcrumbs1-bg {
    	border-top: 			solid 1px #cccccc;
    	border-bottom: 		solid 1px #cccccc;
    	background: 			#f7f7f7;
    	position:				relative;
    }

    to this:

    #breadcrumbs1 {
    	border-top: 			solid 1px #cccccc;
    	border-bottom: 		solid 1px #cccccc;
    	padding: 				5px 0 5px 0px;
    	background: 			#f7f7f7;
    }
    
    #breadcrumbs1-bg {
    	background: 			#344970;
    	position:				relative;
    }

    Notice that I changed the last value for padding in #breadcrumbs1 from 30px to 0px.

  3. ConsiderThis1
    Member
    Posted 6 months ago #

    Hi CrouchingBruin,
    I can't wait to try this.

    I know how to use Chrome to see the source elements of a page. I thought I could figure out how to change background color that way. I looked at the source for a LOT of the showcase sites.

    Since your help with the color, that worked, I have a better sense of it.

    I'm going to go try this NOW.

    Thank you for another page to my WordPress Montezuma notebook.

  4. ConsiderThis1
    Member
    Posted 6 months ago #

    Hi again,
    Okay, I think that I didn't write clearly so the answer is harder to follow.

    I like how the Cottage page looks with the white middle. I want to get the white middle with my yellow border that you helped me create.

    So... to do that I... Oh, oh. I'm really unclear. I don't what the banner to be white, nor the footer, and I think the breadcrumbs are all right, though to be truthful although I read about breadcrumbs both here and via Google searches, I didn't know it was the bar.

    I remind myself of a girl in grade school who had robins and sparrows totally confused.

  5. CrouchingBruin
    Member
    Posted 6 months ago #

    Ah, OK, I thought you liked the color of The Lodge page, not just the effect. Well, just follow the same instructions, but set the background-color of body back to #FFFFB3. And just change #main to #fff, if you don't want to change the color of the header & footer:

    /* The main row, with the #content column and perhaps sidebars left/right */
    #main 	{
    	padding: 				30px 0;
    	background-color: 			#fff;
    }
  6. daprela
    Member
    Posted 6 months ago #

    I just looked at your website, and the header is totally messed up on my PC. Is it because you're working on it, or you simply didn't notice? The three items with the star (should this be a menu?) are over the header, hiding part of the text

  7. ConsiderThis1
    Member
    Posted 6 months ago #

    Hi daprela,
    Thank you for looking at my website. Yes, totally messed up. I'm trying to move my Yahoo site here. I built my site using their program, so I can't move my site, I have to recreate it.

    Getting the page color right was a priority. I don't think anyone's coming here to see my pages because I ... Well, I don't really know how that works.

    I'd like to get the white space in the middle of my pages, but I'm SO SLOW. It takes me forever to Get things.

    Sigh.

    Karen

  8. CrouchingBruin
    Member
    Posted 6 months ago #

    I'd like to get the white space in the middle of my pages ...

    Well, you have the page the right color. To make the middle white, all you have to do is go to Appearances > Montezuma Options > CSS Files, click on layout.css, scroll down until you see the section for #main, and add a background-color property to it.
    Change this:

    /* The main row, with the #content column and perhaps sidebars left/right */
    #main 	{
    	padding: 				30px 0;
    }

    to this:

    /* The main row, with the #content column and perhaps sidebars left/right */
    #main 	{
    	padding: 				30px 0;
    	background-color: 			#fff;
    }
  9. ConsiderThis1
    Member
    Posted 6 months ago #

    Oh WOW ~~~ That is SO Cool~~~ I was stuck in Content.css

    Thank you SO MUCH~~~~!!!!!!!

    Karen

  10. ConsiderThis1
    Member
    Posted 6 months ago #

    That is SUCH a gift. I can't thank you enough!!!!

  11. CrouchingBruin
    Member
    Posted 6 months ago #

    I was stuck in Content.css

    As I mentioned in the other thread, sometimes it can be difficult trying to figure out which virtual CSS file to use. When in doubt, however, you can always stick your CSS in the various.css file, and it will override any other CSS because various.css gets included at the end.

  12. CrouchingBruin
    Member
    Posted 6 months ago #

    That is SUCH a gift. I can't thank you enough!!!!

    I want to see this theme succeed, not because I have any personal investment in it, but I think it's a great theme to use because of it's flexibility, so I'll lend a hand to solve problems with it whenever I can.

  13. ConsiderThis1
    Member
    Posted 6 months ago #

    This is excellent to know, about various.css

    The help manual I'm building myself is making me feel a lot more confident. And, it's making my site much lovelier. Happiness!!!!

  14. ConsiderThis1
    Member
    Posted 6 months ago #

    }
    */
    
    /* The header area full width background */
    #banner-bg 	{
    }
    
    /* The header area */
    #banner {
      	background color:		#000033;
      	position: 				relative;
    }
    
    #logo-area {
    	margin-left: 			0px;
    }

    I've never used back ticks before, so I hope I have them right...

    I thought that change would change the color... but... No.

  15. ConsiderThis1
    Member
    Posted 6 months ago #

    That's weird, on my computer screen the color and "relative" beneath it are lined up... Could that be the problem????

  16. daprela
    Member
    Posted 6 months ago #

    When I visit your website, over the header I can see this CSS instruction:
    'container_color' = '#000033',
    This indicates that for some reason this instruction is not interpreted as CSS but as normal text.

    The alignment of the elements in your code has no influence. Sometimes the CSS instructions that you add to your custom CSS are overridden by higher level CSS instructions. Without going into much details on how CSS works, you can try to add the !important directive, it usually works.

    background color: #000033 !important;

  17. ConsiderThis1
    Member
    Posted 6 months ago #

    Hi daprela,
    Thanks, I'll try that. I think I removed it... it's a bit scary when I try different things, then there are so many tries I can't be sure I removed everything that didn't work.

    It will be ULTRA cool if that works.

    I have solar so I'm needing to shut off my inverter now. Thank you again.

  18. daprela
    Member
    Posted 6 months ago #

    By the way, I just noticed that the instruction is wrong. There's an hyphen missing. It's not

    background color

    but

    background-color

  19. ConsiderThis1
    Member
    Posted 6 months ago #

    Hi daprela,
    Wow, I did not see that! I'm unable to stay away. I have a tiny bit of electricity in my Portable Power....

    So... I can do this!

    Thank YOU.

    Karen

  20. ConsiderThis1
    Member
    Posted 6 months ago #

    Wow, that hyphen did it.

    Now, to make it go all the way across... and then put a picture in... and the words.

    This makes it about a quarter of the way to completion. I am SO happy. Progress.

    Thank you, daprela!

  21. daprela
    Member
    Posted 6 months ago #

    You're welcome, happy to see your enthusiasm :-)

    If you need help with the next step just write here.

  22. ConsiderThis1
    Member
    Posted 6 months ago #

    Hi daprela,
    Thank you. That's kind.

    I thought about the change all night and decided that full yellow may look better in the end.

    But, I'd like to try my header picture up there. That's the picture in my home page. Would I put it in by writing img where the background-color was? I'm going to try that in a moment.

  23. ConsiderThis1
    Member
    Posted 5 months ago #

    Hi daprela -

    I've added a new site: http://off-grid-insights.com/

    I got the top part to work by following instructions given re my first site. But, in order for them to work I had to shut down my computer and restart. Up until then the changes I made in the css and php files didn't seem to take.

    However, even after shutting down, starting again, and clearing my cache... the body is not turning white.

    }
    
    /* The main row, with the #content column and perhaps sidebars left/right */
    #main 	{
    	padding: 				30px 0;
      	background-color: 			#fff;

    What do you see as the problem???

    Also, do you know how to make the padding or the margin, or whatever controls where the contents appear in the sidebar... narrower?

  24. CrouchingBruin
    Member
    Posted 5 months ago #

    Hi, Karen:

    Your #main section is white; that's the part that is showing the main content, where all the text is.

    Are you trying to change the body from yellow to white? In your content.css file, you have this:

    body {
    
       	background-color:		#ffff99;
      	margin: 				0;
    	padding: 				0;
    	font-family: 			"Segoe UI", "Lucida Grande", "Helvetica Neue", sans-serif;
    	font-size: 				15px;
    	opacity: 				0;
      	background-color:		#ffff99;
    }

    You have two background-color properties for body; delete one of the background-color lines and change #ffff99 on the remaining one, which is the yellow color, to #ffffff (white).

    You will also need to go into your layout.css file and change the background-color here:

    #banner {
    	position: 			relative;
      	background-color:		#ffff99;
    }
  25. ConsiderThis1
    Member
    Posted 5 months ago #

    Hi CrouchingBruin ---

    First of all, it is SO NICE to see you!!! Happiness!!!

    I tried to follow your input for my other site, exactly, because it's what I wanted:
    http://www.health-boundaries.com/

    I thought that if I did it from top down in the css and php files, that the changes would take place from the top of my page down through the bottom...

    I'll go make the changes.

  26. ConsiderThis1
    Member
    Posted 5 months ago #

    I was afraid it was going to turn the whole page white... but... the color didn't change at all. I even closed my browser and reopened it, just in case that was the magic touch...

    /* Uncomment for boxed style,
    also uncomment div#container in main templates */
    /*
    #container {
    	display: table;
    	-moz-box-sizing: content-box;
    	-webkit-box-sizing: content-box;
    	box-sizing: content-box;
    	-o-box-sizing: content-box;
    	margin: 0 auto;
    	box-shadow: 0 0 30px -20px #999;
    	color: #fff
    	border: solid 1px #ddd;
    }
    */
    
    /* The header area full width background */
    #banner-bg 	{
    }
    
    /* The header area */
    #banner {
    	position: 				relative;
      	background-color:		#fff;
    }
  27. ConsiderThis1
    Member
    Posted 5 months ago #

    Gosh, I wonder if it's my browser cache that is making me see my body as yellow, when I want it to be white with yellow around it. You sound as if you see my page that way... I'm going to go clear my browser cache, I thought clearing the WordPress cache was what did it.

  28. CrouchingBruin
    Member
    Posted 5 months ago #

    I still see this for body:

    body {
    
       	background-color:		#ffff99;
      	margin: 				0;
    	padding: 				0;
    	font-family: 			"Segoe UI", "Lucida Grande", "Helvetica Neue", sans-serif;
    	font-size: 				15px;
    	opacity: 				0;
      	background-color:		#ffff99;
    }

    Go into content.css and take out the first background-color line, then change the second one's value to #fff. Once again, don't change the rule for #container, change it for body.

  29. ConsiderThis1
    Member
    Posted 5 months ago #

    that's so weird. I changed it to this,

    /********************************************************************
    	<BODY> for TEXT
    ********************************************************************/
    
    body {
    
       	background-color:		#ffff99;
      	margin: 				0;
    	padding: 				0;
    	font-family: 			"Segoe UI", "Lucida Grande", "Helvetica Neue", sans-serif;
    	font-size: 				15px;
    	opacity: 				0; /* <--- will be turned on ( = set to '1' ) with jQuery
    									after google fonts, if any, have loaded and masonry layout,
    									if any, was applied */
      	background-color:		#ffffff;
    }

    But that didn't make a difference, so I changed that first set of rules that I copied before...

    Maybe I was supposed to change both, since it says Background for Text... I'll go try that.

  30. ConsiderThis1
    Member
    Posted 5 months ago #

    I think it must have something to do with my caches... I can't even find a place where I still have the ffff99 that I want bordering the white.

    When you helped me with my first site, I changed my code to be the way you showed, but it didn't make a difference to my site as I saw it. then I moved the bit of code to the top, or the bottom, I forget, but the opposite position to that you indicated.

    After that it worked, but... maybe what really happened was that the cache didn't change, and then it did after my computer had been off for the night.

    ????

    I don't understand why it's not changing...?

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.