Export Page Template or Custom Bloc kills Code Widget

JDW · April 15, 2019, 5:41am

Here’s my Blocs 3.2.2 document containing site navigation and search (via Google Custom Search):

I’ve spend many, many days crafting it, and with the help of @Pealco and a few others of you, it’s finally finished. I now want to merge the contents of the above document into my primary Blocs document here:

MainDocument.zip (2.3 MB)

(After merging, I intend to delete the existing navigation in that MainDocument.)

Sadly, Copy/Paste in Blocs isn’t an option, so my only recourse is to Export as a Page Template or Custom Bloc is available. HOWEVER, when I Export as Template or Bloc, all the content of my Code Widget is deleted when I use the Page Template or the Custom Bloc, AND then if I manually copy my code and then paste that code into Code Widget and subsequently close and then reopen the Code Widget, all my code is gone! Blocs repeatedly deletes my code! (NOTE: I am doing the Export on my Archive.zip document.)

I cannot help but see this as a bug, but before I report it to @Norm I wanted to post my experience here in the forum so some of you can look at it and see if I am missing something.

Again, all I want to do is incorporate the navigation and search features you see in my Archive.zip document above into my MainDocument. If someone could help me accomplish that, I would be eternally grateful.

Thank you,

James

Pealco · April 15, 2019, 9:10pm

After a long work, I think I could put everything ok, please check:

Archive.zip (2.3 MB)

Hope it help you…

JDW · April 16, 2019, 12:22am

@Pealco

As always, I humbly thank you for your kind assistance. You are without a doubt a kind soul and a true friend. Honestly, without your help, my Bloc experience would not be very good. I have learned quite a lot through my dialog with you as well. A thousand thanks!

Please forgive me, but I have 3 questions…

(1) Could you explain how you merged my two documents? I ask that or two reasons:

I want to know how to do it myself.
If possible, I want to inform @Norm in a more detailed way about how this process should be easy enough for anyone to do without help.

Next question…

When I opened the “Navi Test 5.bloc” document you prepared for me in your “Archive.zip” I found all the graphics inside the folder but they are all unattached from the originals inside the Blocs document. (My graphics don’t exist in Assets.) (2) Is that a bug? Seems strange to me that all the graphics should become unattached even though I included all the graphics with my original documents.

Last question…

(3) Do you know a fast and easy way to relink all the graphics? I would think it SHOULD be easy since all the graphics are sitting in the same folder as the document, but I don’t see an easy and fast way to relink them all. It’s really frustrating because in the right sidebar, I can see only the first part of the graphic filenames, and the last part is truncated. And to even find the graphics I must slowly dig through the left sidebar Bloc by Bloc, Row by Row, Column by Column, DIV by DIV. Surely there must be an easier way to relink graphics in Blocs?

Thank you,

James

UPDATE: I’ve spent the last hour struggling with my graphics. Not only are the delinked, but the size and margin info is deleted from the Classes assigned to some graphics which means I must rebuild that from scratch. And now I just tried to save and Blocs crashed. Crash Log below for @Norm. Today is NOT my day.

CrashLog.txt.zip (21.7 KB)

JDW · April 16, 2019, 2:25am

I’ve spent the last hour ripping out my hair, but I just can’t figure out out, hence this new question…

Here’s the code of my Code Widget:

<style>
.btn {
  background-color: none /* No background */
  border: none; /* No borders */
  color: #C0C0C0; /* Gray text */
  padding: 0px 1px; /* Padding to fix 1px truncation on left of icon */
  font-size: 18px;  /* Set a font size */
  cursor: pointer; /* Mouse pointer on hover */
}

.btn:hover {
  color: #ffffff !important;
}

.openBtn {
  background: #f1f1f1;
  border: none;
  padding: 10px 15px;
  font-size: 20px;
  cursor: pointer;
}

.openBtn:hover {
  background: #bbb;
}

.overlay {
  height: 100%;
  width: 100%;
  display: none;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9);
}

.overlay-content {
  position: relative;
  top: 46%;
  width: 80%;
  text-align: center;
  margin-top: 30px;
  margin: auto;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
  cursor: pointer;
  color: white;
}

.overlay .closebtn:hover {
  color: #ccc;
}

.overlay input[type=text] {
  border-radius: 10px 0px 0px 10px;
  padding: 15px;
  font-size: 17px;
  border: none;
  float: left;
  width: 80%;
  background: white;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

.overlay input[type=text]:hover {
  background: #f1f1f1;
}

.overlay button {
  float: left;
  width: 20%;
  padding: 15px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.overlay button:hover {
  background: #bbb;
}
</style>

<div id="myOverlay" class="overlay">
  <span class="closebtn" onclick="closeSearch()" title="Close Overlay">×</span>
  <div class="overlay-content">
    <form action="./search-results.html" method="get">
      <input type="hidden" name="cx" value="018348177762133457495:mdzyzovqz2q"></input>
      <input type="hidden" name="lr" value="lang_ja"></input>
      <input type="hidden" name="ie" value="UTF-8"></input>
      <input type="hidden" name="cof" value="FORID:11"></input>
      <input type="text" placeholder="サイト内検索..." name="q" autofocus id="SearchFieldBL" accesskey="F" class="search" autocomplete="off" maxlength="128" required pattern=".*\S.*" oninput="setCustomValidity('')" oninvalid="this.setCustomValidity('検索キーワードを入力してください。')"></input>
      <button type="submit"><i class="fa fa-search"></i></button>
    </form>
  </div>
</div>

<button class="btn"><i class="fa fa-search" onclick="openSearch()"></i></button>

<script>
function openSearch() {
  document.getElementById("myOverlay").style.display = "block";
  document.getElementById("SearchFieldBL").focus();
  document.getElementById("SearchFieldBL").select();
}

function closeSearch() {
  document.getElementById("myOverlay").style.display = "none";
}
</script>

The “.btn {}” part of the above code is the problem. I have other “buttons” on in my website, and the above code is locking all the button text to the same font size and changing their padding too. I don’t want that code to change the font size and padding of all my other buttons. But if I delete the 18px font-size line from the above code, my magnifying glass icon (search icon) will become too small. I tried renaming all instances of “btn” to “mag” but that doesn’t solve the problem and instead creates a new problem where there is an unwanted box around the icon like this:

SearchIcon

So my question is, how must I change the code above so that it will ONLY affect my magnifying glass icon/button?

NOTE! If you want to touch my document, please use the following version because I’ve spent all day working on it, reattaching graphics and fixing various problems:

Archive.zip (2.4 MB)

JDW · April 16, 2019, 11:09pm

Ideas, anyone?

Pealco · April 16, 2019, 11:30pm

I’m working on your code, sorry, I’m doing my new code Blocs page, ina few minutes I’ll finish your code…

Pealco · April 16, 2019, 11:56pm

Hello @JDW, there is the code with the button style applied only to the search “button”.

Archive.zip (2.3 MB)

About the Merge:

I went to your main page, not the nav bar page and save it as a template with all the options selected.
Then went to the nav bar page and add a new page, and selected the template created in the point 1)
then I just go to the specific blocs that I want and duplicated the bloc and choose destination for your home page, then I go to the main page and add the class if is important.
repeat all the processes before for others blocs.

About the global or dynamic when you click in a specific bloc just press (cmd+alt and press UP or DOWN to move the bloc up and down related to the bloc that is up or down.
Then you will see a blue bar on the left of the bloc and the blue on the first blocs meaning that the blocs are in the global header area, then you have the blocs with the grey bar, that means that they are in the dynamic area (only available in that specific page) and the blocs in the end that have the blue bar means that they belong to global footer area.

About the images when you open the .bloc file if appears that is missing assets, just press the circle arrows and choose the one related to that specific asset, then the app ask if you want to reconnect the rest of the assets and you press yes.

If is not the case, just open the asset manager right click on the asset and press refresh, I think you mean that. but in my file everything is ok.

JDW · April 17, 2019, 12:44am

You are a genuine miracle-worker, my friend!

I used TextWrangler to compare before/after and I see you made these changes to the Code Widget:

.btn {     ——>    .btn.search {

.btn:hover {     ——>    .btn.search:hover {

<button class="btn">     ——>    <button class="btn search">

My dead-to-code brain would never have figured out that magic on my own. Again, THANK YOU! Truly… Thank you!

About the missing assets…

When I opened the document you first created for me, Blocs did NOT give me the normal dialog box showing missing assets. But when I opened the Asset Manager, all of my graphics were gone except one. And yet, I could see the graphics on the actual page. And when I clicked on each graphic and looked at the right sidebar, I could see the graphics were detached from the originals because the little thumbnail was missing (in the right sidebar). So what I had to do was dig through everything in the left sidebar until I found each graphic, and then with each graphic selected I needed to open Asset Manager and click “+” to add back the missing graphic and reattach it. I was able to accomplish that without too much lost hair, but had this been a large website of many pages, I probably would have lost my mind. I think there must be a bug a work here. I don’t see why the graphics were detached in the first place, since I included all of them with the document. In any case, I’ve fixed that problem in this particular document, and hopefully the issue won’t crop up again.

Once again, you have my most humble thanks for your kind help, @Pealco. You are a bright and shining star of this forum!

Sincerely,

James