jack.from.canada
posted this
01 September 2023
I can't really show you a screen shot because the old Artisteer website is no more. I have included a URL from the Wayback Machine Internet Archive, but it would be more practical to include a snippet of code from the website and the corresponding CSS file. It will better show what I'm talking about. And I will also include the graphic files referenced in that code snippet so you can see what it is I'm trying to accomplish within Nicepage.
From the HTML file...
<body>
<div id="art-main">
<header class="art-header">
From the CSS file that renders these classes...
#art-main
{
background: #F2F5E5 url('images/page.jpeg') repeat-x scroll;
background: url('images/pageglare.png') top center no-repeat, url('images/page.jpeg') repeat-x, #F2F5E5;
margin:0 auto;
font-size: 13px;
font-family: Tahoma, Arial, Helvetica, Sans-Serif;
position: relative;
width: 100%;
min-height: 100%;
left: 0;
top: 0;
cursor:default;
overflow:hidden;
}
and
.art-header
{
-webkit-border-radius:0 0 5px 5px;
-moz-border-radius:0 0 5px 5px;
border-radius:0 0 5px 5px;
border:1px solid #4C4539;
margin:0 auto;
background-repeat: no-repeat;
height: 175px;
background-image: url('images/object538245342.png'), url('images/header.png');
background-position: 488px -13px, 0 0;
position: relative;
width: 800px;
z-index: auto !important;
}
What we see in these snippets is code that displays TWO BACKGROUND IMAGES for the page background. The first image (page.jpeg) is a slim sliver of a multi-colored background, which is repeated horizontally across the screen as many times as is necessary to cover the screen; while the second image (pageglare.png) is a translucent file that features the image of clouds on a transparent background - so that the multi-colored strip can show through the transparent background. I know of no way in Nicepage to select MULTIPLE images as a page background. This leaves me having to define one of the images as the PAGE background, while defining the other as the HEADER and BLOCK backgrounds. But the way Nicepage is implemented, the HEADER and BLOCK images are displayed IN FRONT OF the PAGE background, and there is no z-setting available that allows me to change the order of displayed layers, so I cannot achieve the effect I want without compromising.
The closest I can come with the current version of Nicepage is to display the page.jpeg file as the PAGE background and then display the translucent pageglare.png file in the HEADER and again in the BLOCK so that the page background can show through the transparency. But this means the "clouds" are not being displayed as intended, but rather as a duplicate image (a portion of which is visible in the header area, and then the full image is visible in the block area).
There are two capabilities missing in Nicepage that would have allowed me to accomplish what I needed to accomplish.
1) Being able to select a TILED fill for an image in the header or block. If a TILED fill was available, I could have done the same type of tiled fill in the header and block that can currently be done at the page level.
2) Being able to select a z-index for the images (at the page and header/block level). If I was able to select which image would be displayed in front and which would be in back, I would be able to control the end-effect of what was visible to the user.
Of course, these are just "workarounds". The ultimate solution would have been able to select MULTIPLE images for the header, block and page backgrounds (as was implemented in Artisteer); with each of the images having independent control of how it would FILL the background (FILL, CONTAIN, TILE).
Here is a historic record of the Artisteer site as it looked recently before converting to Nicepage:
Cuddles Clothing for Kids (Artisteer version)
And here is the most recent version of the site, rendered with Nicepage:
Cuddles Clothing for Kids (Nicepage version)
I am enclosing the various graphic files referenced in the CSS as attachments to this post.
I can't really show you a screen shot because the old Artisteer website is no more. I have included a URL from the Wayback Machine Internet Archive, but it would be more practical to include a snippet of code from the website and the corresponding CSS file. It will better show what I'm talking about. And I will also include the graphic files referenced in that code snippet so you can see what it is I'm trying to accomplish within Nicepage.
From the HTML file...
<body>
<div id="art-main">
<header class="art-header">
From the CSS file that renders these classes...
#art-main
{
background: #F2F5E5 url('images/page.jpeg') repeat-x scroll;
background: url('images/pageglare.png') top center no-repeat, url('images/page.jpeg') repeat-x, #F2F5E5;
margin:0 auto;
font-size: 13px;
font-family: Tahoma, Arial, Helvetica, Sans-Serif;
position: relative;
width: 100%;
min-height: 100%;
left: 0;
top: 0;
cursor:default;
overflow:hidden;
}
and
.art-header
{
-webkit-border-radius:0 0 5px 5px;
-moz-border-radius:0 0 5px 5px;
border-radius:0 0 5px 5px;
border:1px solid #4C4539;
margin:0 auto;
background-repeat: no-repeat;
height: 175px;
background-image: url('images/object538245342.png'), url('images/header.png');
background-position: 488px -13px, 0 0;
position: relative;
width: 800px;
z-index: auto !important;
}
What we see in these snippets is code that displays TWO BACKGROUND IMAGES for the page background. The first image (page.jpeg) is a slim sliver of a multi-colored background, which is repeated horizontally across the screen as many times as is necessary to cover the screen; while the second image (pageglare.png) is a translucent file that features the image of clouds on a transparent background - so that the multi-colored strip can show through the transparent background. I know of no way in Nicepage to select MULTIPLE images as a page background. This leaves me having to define one of the images as the PAGE background, while defining the other as the HEADER and BLOCK backgrounds. But the way Nicepage is implemented, the HEADER and BLOCK images are displayed IN FRONT OF the PAGE background, and there is no z-setting available that allows me to change the order of displayed layers, so I cannot achieve the effect I want without compromising.
The closest I can come with the current version of Nicepage is to display the page.jpeg file as the PAGE background and then display the translucent pageglare.png file in the HEADER and again in the BLOCK so that the page background can show through the transparency. But this means the "clouds" are not being displayed as intended, but rather as a duplicate image (a portion of which is visible in the header area, and then the full image is visible in the block area).
There are two capabilities missing in Nicepage that would have allowed me to accomplish what I needed to accomplish.
1) Being able to select a TILED fill for an image in the header or block. If a TILED fill was available, I could have done the same type of tiled fill in the header and block that can currently be done at the page level.
2) Being able to select a z-index for the images (at the page and header/block level). If I was able to select which image would be displayed in front and which would be in back, I would be able to control the end-effect of what was visible to the user.
Of course, these are just "workarounds". The ultimate solution would have been able to select MULTIPLE images for the header, block and page backgrounds (as was implemented in Artisteer); with each of the images having independent control of how it would FILL the background (FILL, CONTAIN, TILE).
Here is a historic record of the Artisteer site as it looked recently before converting to Nicepage:
[Cuddles Clothing for Kids (Artisteer version)][1]
And here is the most recent version of the site, rendered with Nicepage:
[Cuddles Clothing for Kids (Nicepage version)][2]
I am enclosing the various graphic files referenced in the CSS as attachments to this post.
[1]: https://web.archive.org/web/20190913223352/http://cuddlesclothingforkids.org:80/
[2]: https://cuddlesclothingforkids.org
Last edited 01 September 2023 by jack.from.canada
