My site:
Here.
I will be honest. I tried this a time or two before and experimented with how to make it work. I know the instructions are pretty clear, but they weren't clear enough for an individual like me, and I struggled until I threw it out the first time.
Perhaps that I'm a problem child doesn't help my case. I have been trying to get footer images on the main page because I'm also using the
category-info center images plugin (which covers main headers), and I wanted header / footer images everywhere else.
After making a thread about what I wanted, Stinky666 pointed me back here and I decided that I would try again, just to be thorough in trying the help given. After several combinations, frustration and some very roundabout thinking, I finally come up with something that worked for me: I had to split the code into sections of two classes at a time, and change the "@container" sections per code to another 'call sign' as it were, per section.
End result?
/* Start of head/base/side images code - Do not delete rows unless you know how LESS variables work.
For the image urls, replace the| @empty; |text with| url("http://example.com/image.png");
For the heights, replace| 0; |with the appropriate dimension and unit, example| 500px;
Do the same for the side margin; this is how much space on each side should be left to show the side image.
If the width seems incorrect, check for any plugins (such as sidebars) that are redefining the forum or wrapper width and try that value.
The code expects that the forum/wrapper width is the same as the width of the head/base images.
*/
@board_head_image_url: url("");
@board_side_image_url: url("");
@board_base_image_url: url("http://i88./k175/onyx_embers/FooterimgsA-1.png");
@board_head_image_height: 0px;
@board_base_image_height: 21px;
@board_side_image_margin: 0px;
/* Do not edit past here if you aren't sure how. */
html.multiplebgs .container.boards,
html.multiplebgs .container.stats,
{
background-image: @board_head_image_url, @board_base_image_url, @board_side_image_url;
padding: @board_head_image_height 0 @board_base_image_height;
background-position: left top, left bottom, left @board_head_image_height;
background-repeat: repeat-x, repeat-x, repeat-y;
}
html.multiplebgs .container.boards > div,
html.multiplebgs .container.stats > div,
{ margin: 0 @board_side_image_margin; }
post_head_image_url: url("http://i88./k175/onyx_embers/header02.png");
post_side_image_url: url("");
post_base_image_url: url("http://i88./k175/onyx_embers/footer02.png");
post_head_image_height: 20px;
post_base_image_height: 20px;
post_side_image_margin: 0px;
/* Do not edit past here if you aren't sure how. */
html.multiplebgs .container.threads,
html.multiplebgs .container.posts,
{
background-image:
post_head_image_url,
post_base_image_url,
post_side_image_url;
padding:
post_head_image_height 0
post_base_image_height;
background-position: left top, left bottom, left
post_head_image_height;
background-repeat: repeat-x, repeat-x, repeat-y;
}
html.multiplebgs .container.threads > div,
html.multiplebgs .container.posts > div,
{ margin: 0
post_side_image_margin; }
legend_head_image_url: url("http://i88./k175/onyx_embers/header02.png");
legend_side_image_url: url("");
legend_base_image_url: url("http://i88./k175/onyx_embers/footer02.png");
legend_head_image_height: 20px;
legend_base_image_height: 20px;
legend_side_image_margin: 0px;
/* Do not edit past here if you aren't sure how. */
html.multiplebgs .container.gravity-related-topics,
html.multiplebgs .container.legend,
{
background-image:
legend_head_image_url,
legend_base_image_url,
legend_side_image_url;
padding:
legend_head_image_height 0
legend_base_image_height;
background-position: left top, left bottom, left
legend_head_image_height;
background-repeat: repeat-x, repeat-x, repeat-y;
}
html.multiplebgs .container.gravity-related-topics > div,
html.multiplebgs .container.legend > div,
{ margin: 0
legend_side_image_margin; }
@search_head_image_url: url("http://i88./k175/onyx_embers/header02.png");
@search_side_image_url: url("");
@search_base_image_url: url("http://i88./k175/onyx_embers/footer02.png");
@search_head_image_height: 20px;
@search_base_image_height: 20px;
@search_side_image_margin: 0px;
/* Do not edit past here if you aren't sure how. */
html.multiplebgs .container.search,
html.multiplebgs .container.new-area,
{
background-image: @search_head_image_url, @search_base_image_url, @search_side_image_url;
padding: @search_head_image_height 0 @search_base_image_height;
background-position: left top, left bottom, left @search_head_image_height;
background-repeat: repeat-x, repeat-x, repeat-y;
}
html.multiplebgs .container.search > div,
html.multiplebgs .container.new-area > div,
{ margin: 0 @search_side_image_margin; }
@edit-user_head_image_url: url("http://i88./k175/onyx_embers/header02.png");
@edit-user_side_image_url: url("");
@edit-user_base_image_url: url("http://i88./k175/onyx_embers/footer02.png");
@edit-user_head_image_height: 20px;
@edit-user_base_image_height: 20px;
@edit-user_side_image_margin: 0px;
/* Do not edit past here if you aren't sure how. */
html.multiplebgs .container.edit-user,
html.multiplebgs .container.conversations,
{
background-image: @edit-user_head_image_url, @edit-user_base_image_url, @edit-user_side_image_url;
padding: @edit-user_head_image_height 0 @edit-user_base_image_height;
background-position: left top, left bottom, left @edit-user_head_image_height;
background-repeat: repeat-x, repeat-x, repeat-y;
}
html.multiplebgs .container.edit-user > div,
html.multiplebgs .container.conversations > div,
{ margin: 0 @edit-user_side_image_margin; }
@members_head_image_url: url("http://i88./k175/onyx_embers/header02.png");
@members_side_image_url: url("");
@members_base_image_url: url("http://i88./k175/onyx_embers/footer02.png");
@members_head_image_height: 20px;
@members_base_image_height: 20px;
@members_side_image_margin: 0px;
/* Do not edit past here if you aren't sure how. */
html.multiplebgs .container.members,
html.multiplebgs .container.calendar,
{
background-image: @members_head_image_url, @members_base_image_url, @members_side_image_url;
padding: @members_head_image_height 0 @members_base_image_height;
background-position: left top, left bottom, left @members_head_image_height;
background-repeat: repeat-x, repeat-x, repeat-y;
}
html.multiplebgs .container.edit-user > div,
html.multiplebgs .container.conversations > div,
{ margin: 0 @members_side_image_margin; }
I hope this might help others who might be in my boat. This really is a good code once I figured out how to use it. Thanks for posting it after all, Shrike! =]
