Holy Grail 3-Panel Layout Template - How to change background colors?

[Rich Hartnett]

I'm experimenting with the "Holy Grail" 3-Panel Template provided in the A5W builder, and it looks like it comes pre-set with the left panel having a light green background, and the right panel with a light blue background.

I want both panels to have the light blue background, but I can't seem to find any reference to color in the html code on the source page.

Has anyone used this template, or have any idea how to modify the background colors?

[Steve Wood]

Re: Holy Grail 3-Panel Layout Template - How to change background colors?

Although I have not used these in production, I know how they work. When you create a new A5W page from template, it generates a unique CSS file just for that one page, named the same as the page but ending in ".css". Playing with it now, I see that it does not put the css file in the css folder. But anyway, you do not set panel color in the HTML (although you could) instead you would open that css file and find the class that defined the background for the panel and give it a background color. Publish both the A5W page and the CSS file to your server.

[Rich Hartnett]

Re: Holy Grail 3-Panel Layout Template - How to change background colors?

Thanks Steve.

I did find the layout named as the page with .css in the project folder like you said, but when I look through it, none of the color indicators seem to show the existing colors of light green or blue. In fact, all of the colors listed show only a pound sign (#) and three characters, whereas normally colors in html are shown with the pound sign and six characters.

Am I missing something here?

#header ul li a {
display:block;
float:left;
margin:0 0 0 1px;
padding:3px 10px;
text-align:center;
background:#eee;
color:#000;
text-decoration:none;
position:relative;
left:15px;
line-height:1.3em;
}
#header ul li a:hover {
background:#369;
color:#fff;

[Steve Wood]

Re: Holy Grail 3-Panel Layout Template - How to change background colors?

The light blue in the image in your original post is not going to be found in the css because that is just an image of what the page might look like. It is not what it actually looks like, and the colors are not in the live template.

The color value #fff means #ffffff. Less obvious is the color #369 is the same as #336699. I just checked and Alpha's CSS Editor also does not know that shorthand and #369 is converted to #000369, which is an incorrect conversion.

This what I have been using for layouts. It is a "grid system" and once you get the hang of it, hard to go back: http://thisisdallas.github.io/Simple-Grid/

[Rich Hartnett]

Re: Holy Grail 3-Panel Layout Template - How to change background colors?

Hmmm, that's interesting about the colors not being in the live template, because when I published my test page using that template, both the light green and light blue are there. (see pic)

In any event, I downloaded the SimpleGrid system, but I'm confused as to how I get it into my A5W page to start with. I tried using the "Import html Form, but I got an error message. (see pic)

I'm guessing this isn't the correct way to do this?

[peteconway]

Re: Holy Grail 3-Panel Layout Template - How to change background colors?

Rich, just by looking at what your are trying to do, you really should just be using the UX with 3 containers with returns turned off with say 20%/60%/20% width settings, the template builder was a long time ago, always found them difficult to work with. Pete :)

[GGandhi]

Re: Holy Grail 3-Panel Layout Template - How to change background colors?

.holygrail {
	    background:#CDEAFF;    	/* Right column background colour */
	}
    .holygrail .colmid {
        float:left;
        width:200%;
        margin-left:-12em; 		/* Width of right column */
        position:relative;
        right:100%;
        background:#fff;    	/* Centre column background colour */
    }
    .holygrail .colleft {
        float:left;
        width:100%;
        margin-left:-50%;
        position:relative;
        left:24em;         		/* Left column width + right column width */
        background:#cfc;    	/* Left column background colour */
    }

if you going down on the css file you will see this this is where you change it.
you were looking at the general body declaration area.

[Steve Wood]

Re: Holy Grail 3-Panel Layout Template - How to change background colors?

Just back on panel colors in the template for a moment - the process for selecting a template is interesting. When you initially select a template it shows color in the example. If you continue to select various templates, eventually the template example goes to all gray, no colored panels. So that is why I did not see color in my css.

[Rich Hartnett]

Re: Holy Grail 3-Panel Layout Template - How to change background colors?

I did see the colors listed in the CSS Govindan, and I tried changing them, but nothing happened. Turns out I was changing the wrong ones.

The ones you pointed out did the trick!

Thanks to you, Steve and Pete for your help, as usual!

Rich