Re: First Play With Blocks
Chris, I have mangled your design around (on purpose) to get the best outcome and sadly it is not pretty.
What Xara has done is decided you are not capable enough to alter its WB.
So it has invented a Layout Group that you cannot edit.
What I do is green bar select the WB and Ungroup.
Next, in P&L gallery select the Layout group and Ungroup.
Make changes.
Select all the required components and Arrange > Create WB.
Do the same for the Variant.
Move the WB up or down and check the Main/Variant follows.
BETTER
Design your own WB layout and ignore the Xara ones.
Acorn
Re: First Play With Blocks
Thank you for confirming. This is only the second site out of 23 that the owner requires partial control themselves. I'll just use Coffeecup's software instead.
2 Attachment(s)
Re: First Play With Blocks
Quote:
Originally Posted by
Chris M
Thank you for confirming. This is only the second site out of 23 that the owner requires partial control themselves. I'll just use Coffeecup's software instead.
For this site, I have a Xara approach that even a noobie can handle if they can use Notepad and move and rename images.
I'll have to rework a CMS I was building to make it fit but here goes: Attachment 133991
<style>
.one {
background: url('latest/ImageOne.png') no-repeat center center fixed;
}
.two {
background: url('latest/ImageTwo.png') no-repeat center center fixed;
}
.one, .two {
background-size: cover;
width: 100%;
height:100%;
}
</style>
- Each changing image is now a Placeholder with simple HTML code:
Code:
<div class='one'></div>
Code:
<div class='two'></div>
- Main & Variant(s) share this identical HTML - automatically in a Web Block
- The Website head has CSS that replaces the background of these Placeholder images:
Code:
<style>
.one {
background: url('latest/ImageOne.png') no-repeat center center fixed;
}
.two {
background: url('latest/ImageTwo.png') no-repeat center center fixed;
}
.one, .two {
background-size: cover;
width: 100%;
height:100%;
}
</style>
I will deal with the changing Link after this detail - You create a separate folder (latest) on the server at the same level as the published HTML files. Give the customer edit on this for changing:
- changelink.txt with contents - const latestlink = 'https://duckduckgo.com'; - advise the customer to only replace and save the web address (in bold)
- ImageOne.png - I used PNG to allow easy use of transparency - advise the customer to only replace the image but keep the exact same image filename; used images can be kept if renamed
- ImageTwo.png - I used PNG to allow easy use of transparency - advise the customer to only replace the image but keep the exact same image filename; used images can be kept if renamed
- [For testing - export locally to a folder. In this folder, add latest and its changing contents]
Attachment 133992
LINK
- <script src="latest/changelink.txt"></script>, also in Website Head, accesses changelink.txt and add a JavaScript variable, latestlink, into your rendered page.
- In Website Body:
Code:
<script>
document.querySelectorAll('a[href*="latest/changelink.txt"]').forEach( (link) => {
link.href = latestlink;
});
</script>
- Last thing, make sure the Link is set to open in a new window/tab.
The customer is only shown details regarding Paragraph 5.
Acorn
Re: First Play With Blocks
Thank you for all the trouble you went to, but I just used different software. The job's all done.
Using Coffecup made more sense in this case anyway, it's not SAAS and image/link changing is simple.