View this page "Background Variables"

351 views
Skip to first unread message

Pete Hopkins

unread,
Mar 11, 2010, 3:28:27 PM3/11/10
to Blogger Template Design Group

Click on http://groups.google.com/group/blogger-template-design/web/background-variables
- or copy & paste it into your browser's address bar if that doesn't
work.

Alain-Christian (http://mystady.com)

unread,
Mar 22, 2010, 10:02:00 PM3/22/10
to Blogger Template Design Group
Hmmm. I guess this is only if you plan to use backgrounds with images?
I tried to replace "color" with background and got this error:


We were unable to save your template
Please correct the error below, and submit your template again.
Invalid variable declaration in page skin: This is not a recognized
background variable value. Backgrounds must have exactly six
components. Input: #FFFFFF


I'm going to stick to using the "color" variable for instances where
background images are not being used. As I'm sure you know it's not
necessary to have all those background properties declared every time:

http://www.w3.org/TR/CSS2/colors.html

Alain-Christian (http://mystady.com)

unread,
Mar 23, 2010, 12:07:45 AM3/23/10
to Blogger Template Design Group
Experimented some more, I may have found a bug. Let's look at the
following Variable:

<Variable name="body.background" description="Body Background"
type="background" color="#00FF00" default="#FF0000 none repeat scroll
top left">

When you go to the Background you'll see the background is colored red
(#FF0000) with "none" as the background image. Click to select a
background image and you'll see the backgrounds are red before the
images load. Now click on "No image" at the top. The background color
changed to green (#00FF00). Reading the text, it's my understanding
that the value of the color attribute would be ignored since I set an
explicit value in the default attribute. Was I mistaken?

On Mar 11, 4:28 pm, Pete Hopkins <phopk...@google.com> wrote:
> Click onhttp://groups.google.com/group/blogger-template-design/web/background...

Siobhan Quinn

unread,
Mar 23, 2010, 12:31:03 AM3/23/10
to blogger-tem...@googlegroups.com
Thanks Alain-Christian - I'll make sure our engineers look into it and respond!

To unsubscribe from this group, send email to blogger-template-design+unsubscribegooglegroups.com or reply to this email with the words "REMOVE ME" as the subject.



--
Siobhan Quinn
Product Manager, Blogger.com
Google


iwongu

unread,
Mar 23, 2010, 2:04:47 AM3/23/10
to Blogger Template Design Group
Thanks for the catch Alain! We are working on fixing the bug and
you'll be see the fix in our next release.


On Mar 23, 1:07 pm, "Alain-Christian (http://mystady.com)"

Pete Hopkins

unread,
Mar 24, 2010, 1:26:14 PM3/24/10
to blogger-tem...@googlegroups.com

It's only worth using "background" if you're specifically making a
body.background variable that you want to be customizable from the
Background tab.

-- Pete

Alain-Christian (http://mystady.com)

unread,
Mar 24, 2010, 5:04:31 PM3/24/10
to Blogger Template Design Group
I plan to slowly add support for the new Template Designer as time
goes on. I was actually able to fully incorporate the background tab
despite the small bug(?) I noted. It appears to be backwards
compatible with the old editor as well which is nice.

Unfortunately I wasn't able to work in support for Groups. Groups
would be really nice to have as you can edit multiple variables
simultaneously. Can you explain how groups are to be formatted? I
couldn't figure out the role of "selector" and the error message I got
when I uploaded didn't help much.

Wongoo Lee

unread,
Mar 24, 2010, 7:34:37 PM3/24/10
to blogger-tem...@googlegroups.com
The selector is used to show outlines in the preview for your group variable. It seems that you are using IE. Could you try this on chrome or firefox?

Alain-Christian (http://mystady.com)

unread,
Mar 25, 2010, 12:47:52 AM3/25/10
to Blogger Template Design Group
Oh, I don't use IE. And Chrome is super sluggish on my PC for some
reason. Though on my Mac it was lightning fast. But my Mac is out of
commission right now. I use Firefox. But maybe I didn't explain it
properly.

I wanted to add the <Group/> stuff to my template but when I try that
I get an error message. I even tried copying a group from another
template (to troubleshoot and see if it was a formatting issue) but
the uploader didn't like that either. Here's the message I get:

We were unable to save your template
Please correct the error below, and submit your template again.

Invalid variable declaration in page skin: The skin variables could
not be parsed as they are not well-formed. Input:

After that it's blank but if you view source you'll see it continues
after "Input":

<skinvariables><variable name="bodyBackColr" description="Body
Background Color" type="color" default="#C3D9FF">

Then it goes on to basically list EVERYTHING between the "/* Variable
definitions */" comment. The last line is multiple closing "</
variable>" ending with "</skinvariables>".

Now, it's possible I'm getting that message because I didn't put a
forward slash at the end of ALL my variable definitions but I suspect
there's something else I'm missing. So something I noticed with the
new templates are the addition of "b:version" and "class" attributes
to the HTML element. ( b:version='2' class='v2' ) I added them to my
template but the uploader still didn't like that. So then I removed
the Group and tried again, it worked! I took a look at the blog and I
could tell immediately it was parsing it differently. There were gaps
in places and some page elements were misaligned, it didn't look
right. It wasn't a major difference but it was different enough. I
removed the two attributes to put things back the way they were. And
then I got an idea to try something completely different!


On another blog I used the template designer and changed the skin to
Simple. I went to Edit HTML and tried the following experiments with
the version and class attributes:

b:version='2' class='v2' - It's like this by default. Our control
group.
(omit both attributes) - "The template is invalid. Please make sure it
is well-formed and complies to the Blogger Template Language
Specifications."
b:version='2' (omit class) - The Changes were saved. The navbar shift
to the right but I didn't notice much else.*
b:version='1' (omit class) - "The template is invalid. Please make
sure it is well-formed and complies to the Blogger Template Language
Specifications."
(omit version) class='v2' - "The template is invalid. Please make sure
it is well-formed and complies to the Blogger Template Language
Specifications."
(omit version) class='v1' - "The template is invalid. Please make sure
it is well-formed and complies to the Blogger Template Language
Specifications."
b:version='2' class='v1' - Saves. Navbar shifts to the right.
b:version='1' class='v1' - "The template is invalid. Please make sure
it is well-formed and complies to the Blogger Template Language
Specifications."
b:version='1' class='v2' - "The template is invalid. Please make sure
it is well-formed and complies to the Blogger Template Language
Specifications."

* The blog I used has only one post in it. It's possible that because
there's so little content I'm missing any other changes.

I haven't put my old template through this matrix but seeing as how
I'm trying to make it compatible with the new designer that might be
time wasted anyway.

I have my guesses but perhaps you guys can explain how these new
attributes come into play. Also is the DOCTYPE for a new template
SUPPOSED to look like this:

<!DOCTYPE html PUBLIC "null" "null">

Is that a mistake?


On Mar 24, 7:34 pm, Wongoo Lee <iwo...@gmail.com> wrote:
> The selector is used to show outlines in the preview for your group
> variable. It seems that you are using IE. Could you try this on chrome or
> firefox?
>
> On Thu, Mar 25, 2010 at 6:04 AM, Alain-Christian (http://mystady.com) <
>

Alain-Christian (http://mystady.com)

unread,
Mar 25, 2010, 3:44:32 AM3/25/10
to Blogger Template Design Group
Hahaha! My problem WAS the forward slash! And it looks like "selector"
can be omitted. Neat!


On Mar 25, 12:47 am, "Alain-Christian (http://mystady.com)"

Wongoo Lee

unread,
Mar 25, 2010, 4:03:51 AM3/25/10
to blogger-tem...@googlegroups.com
Glad to hear that your problem became past!

To unsubscribe from this group, send email to blogger-template-design+unsubscribegooglegroups.com or reply to this email with the words "REMOVE ME" as the subject.

Pete Hopkins

unread,
Mar 25, 2010, 11:58:28 AM3/25/10
to blogger-tem...@googlegroups.com
On Thu, Mar 25, 2010 at 3:44 AM, Alain-Christian (http://mystady.com)
<mynameb...@gmail.com> wrote:
> Hahaha! My problem WAS the forward slash! And it looks like "selector"
> can be omitted. Neat!

I'll make sure to call this out explicitly when I write the
documentation for the <Group> element, but you do indeed need the
trailing slash.

We require the slash so that the variables are valid XML, which lets
us use an XML parser to read them (which makes it reasonable to extend
the language with things like groups).

The old parser didn't -- and still doesn't -- require the trailing
slash, so if you don't need <Group> support you can omit it and it'll
parse with the old parser.

The selector attribute, btw, defines a CSS selector that will be used
to draw the red outline when the group is selected in the editor's
Advanced tab.

-- Pete

> To unsubscribe from this group, send email to blogger-template-design+unsubscribegooglegroups.com or reply to this email with the words "REMOVE ME" as the subject.
>

Alain-Christian (http://mystady.com)

unread,
Mar 25, 2010, 4:48:32 PM3/25/10
to Blogger Template Design Group
Funny you should mention that. The episode with the trailing slashes
got me to review W3C's XHTML docs. I found a lot of mistakes in my
template. First thing I did was change the DOCTYPE declaration from
XHTML 1.0 Strict to Transitional. (You're not allowed to use iframes
in Strict, apparently.) I fixed a few other things. But some things I
didn't bother with like adding a space before the trailing / and > in
empty elements because the uploader will just strip out the space.
When I try validating the page (not the template) at http://validator.w3.org/
as XHTML 1.0 Transitional I get hundreds of errors. When I try it as
HTML 4.01 Transitional I get considerably less errors.

I'm confused what DOCTYPE should I be targeting?

On Mar 25, 11:58 am, Pete Hopkins <phopk...@google.com> wrote:
> On Thu, Mar 25, 2010 at 3:44 AM, Alain-Christian (http://mystady.com)
>

Pete Hopkins

unread,
Mar 25, 2010, 5:02:38 PM3/25/10
to blogger-tem...@googlegroups.com
On Thu, Mar 25, 2010 at 4:48 PM, Alain-Christian (http://mystady.com)
<mynameb...@gmail.com> wrote:
> Funny you should mention that. The episode with the trailing slashes
> got me to review W3C's XHTML docs. I found a lot of mistakes in my
> template. First thing I did was change the DOCTYPE declaration from
> XHTML 1.0 Strict to Transitional. (You're not allowed to use iframes
> in Strict, apparently.) I fixed a few other things. But some things I
> didn't bother with like adding a space before the trailing / and > in
> empty elements because the uploader will just strip out the space.
> When I try validating the page (not the template) at http://validator.w3.org/
> as XHTML 1.0 Transitional I get hundreds of errors. When I try it as
> HTML 4.01 Transitional I get considerably less errors.
>
> I'm confused what DOCTYPE should I be targeting?

I used to use XHTML Transitional, though I've started to favor the
simplified HTML5 DOCTYPE, which is what the new templates (are
supposed to*) use. (See: http://ejohn.org/blog/html5-doctype/)

The DOCTYPE is orthogonal to how you format the blog skin CSS, which
is entirely a Blogger thing.

Also, I personally don't care overly about passing the W3C validator
beyond a few things:
- HTML should be well-formed. Dangling open tags can break layouts or
just do weird things.
- Bear in mind when elements aren't supposed to nest, such as <ul> or
<blockquote> inside of <p>, which will cause the <p> to be implicitly
closed.

Other than that, a lot of validation stuff is annoying. Stuff like the
"target" attribute being invalid.

-- Pete


* = I'm just looking now and noticing that something in our pipleline
is adding "null" attributes to the DOCTYPE. Grrr. Have to track that
down.

Alain-Christian (http://mystady.com)

unread,
Mar 25, 2010, 7:22:57 PM3/25/10
to Blogger Template Design Group
I used the validator to see if I was making any other formatting
mistakes. In general I never use it.

On Mar 25, 5:02 pm, Pete Hopkins <phopk...@google.com> wrote:
> On Thu, Mar 25, 2010 at 4:48 PM, Alain-Christian (http://mystady.com)
>

> <mynamebackwa...@gmail.com> wrote:
> > Funny you should mention that. The episode with the trailing slashes
> > got me to review W3C's XHTML docs. I found a lot of mistakes in my
> > template. First thing I did was change the DOCTYPE declaration from
> > XHTML 1.0 Strict to Transitional. (You're not allowed to use iframes
> > in Strict, apparently.) I fixed a few other things. But some things I
> > didn't bother with like adding a space before the trailing / and > in
> > empty elements because the uploader will just strip out the space.

> > When I try validating the page (not the template) athttp://validator.w3.org/

Reply all
Reply to author
Forward
0 new messages