Skip to content

Commit af519a8

Browse files
marcos4503marcos4503
committed
Improvements to titles and added Frame tag
Topic Titles and Topic Subtitles have been improved. The Frame tag was also added.
1 parent b89f294 commit af519a8

File tree

10 files changed

+230
-3
lines changed

10 files changed

+230
-3
lines changed

‎Documentation-Template/Documentation.html‎

Lines changed: 110 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,10 +95,12 @@
9595
<li class="summarySubItem">Responsive Images</li>
9696
<ul>
9797
<li><a class="summaryItem" onclick="GoToDivSmoothly(this);" correspondentTopicId="13">Displaying a responsive image with zoom and caption controls</a></li>
98+
<li><a class="summaryItem" onclick="GoToDivSmoothly(this);" correspondentTopicId="13a">Displaying responsive images that don't interrupt the flow of text</a></li>
9899
</ul>
99100
<li class="summarySubItem">Responsive Videos</li>
100101
<ul>
101102
<li><a class="summaryItem" onclick="GoToDivSmoothly(this);" correspondentTopicId="14">Displaying a responsive video</a></li>
103+
<li><a class="summaryItem" onclick="GoToDivSmoothly(this);" correspondentTopicId="14a">Displaying responsive videos that don't interrupt the flow of text</a></li>
102104
</ul>
103105
<li class="summarySubItem">Formatted Codes</li>
104106
<ul>
@@ -246,12 +248,25 @@
246248
More two times...
247249
<doc.topictitle>This is a other Title for a Topic!</doc.topictitle>
248250
<doc.topictitle>This is a other other Title for a other Topic!</doc.topictitle>
251+
If you use the <doc.detach>:</doc.detach> character in the middle of a topic title, a separator will be shown. This will only work for the first <doc.detach>:</doc.detach> character in the topic title. See the code
252+
below as example.
253+
<doc.code language="html"><code>
254+
<doc.topictitle>Example: Topic Title!</doc.topictitle>
255+
</code></doc.code>
256+
And the result for this code is...
257+
<doc.topictitle>Example: Topic Title!</doc.topictitle>
258+
This separation can be especially useful when you want to separate the topic title into <doc.detach>SummarySubItem</doc.detach> &gt; <doc.detach>TopicTitle</doc.detach>, that way you can display the name of the SubItem
259+
that the Topic is in the Summary.
249260
<doc.info>
250261
Note that when you move the cursor over a Title, a "#" symbol is revealed, so that you can get a reference to that topic as a link. Note that this will only work if your <doc.detach>doc.topictitle</doc.detach>
251262
is inside <doc.detach>doc.topic</doc.detach> tag.
252263
</doc.info>
253264
<br>
254265
<br>
266+
<br>
267+
<br>
268+
<br>
269+
<br>
255270
</doc.topic>
256271
<!-- #endregion -->
257272

@@ -270,6 +285,10 @@
270285
<doc.topicsubtitle>This is a other other Subtitle for a other Topic!</doc.topicsubtitle>
271286
<br>
272287
<br>
288+
<br>
289+
<br>
290+
<br>
291+
<br>
273292
</doc.topic>
274293
<!-- #endregion -->
275294

@@ -351,11 +370,53 @@
351370
</doc.topic>
352371
<!-- #endregion -->
353372

373+
<!-- #region Displaying responsive images that don't interrupt the flow of text -->
374+
<doc.topic topicid="13a">
375+
<doc.topictitle>Displaying responsive images that don't interrupt the flow of text</doc.topictitle>
376+
377+
Sometimes it may be necessary to display an image in the documentation, but in such a way that the flow of text is not interrupted. This is possible to do with this Template! For this, use the code below...
378+
<doc.code language="html"><code>
379+
<doc.frame contentside="right" contentheight="120px">
380+
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it
381+
to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
382+
sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting
383+
industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five
384+
centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
385+
desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text
386+
ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining
387+
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions
388+
of Lorem Ipsum.
389+
390+
<doc.frameci src="DocumentationFiles/images/test1.png">Square Image (800x800)</doc.frameci>
391+
</doc.frame>
392+
</code></doc.code>
393+
And the result for this code is...
394+
<br>
395+
<br>
396+
<doc.frame contentside="right" contentheight="120px">
397+
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it
398+
to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
399+
sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting
400+
industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five
401+
centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
402+
desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text
403+
ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining
404+
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions
405+
of Lorem Ipsum.
406+
<doc.frameci src="DocumentationFiles/images/test1.png">Square Image (800x800)</doc.frameci>
407+
</doc.frame>
408+
<doc.info>
409+
For this tag to work well, you MUST respect the order of <doc.detach>Text</doc.detach> and then the <doc.detach>&lt;doc.frameci&gt;</doc.detach> tag. Do not try to change this order.
410+
</doc.info>
411+
412+
</doc.topic>
413+
<!-- #endregion -->
414+
354415
<!-- #region Displaying a responsive video -->
355416
<doc.topic topicid="14">
356417
<doc.topictitle>Displaying a responsive video</doc.topictitle>
357418

358-
To display a fully responsive image, automatically formatted and with zoom and caption controls, use the code below!
419+
To display a fully responsive video, automatically formatted, use the code below!
359420
<doc.code language="html"><code>
360421
<doc.video src="DocumentationFiles/videos/video.mp4" thumbnail="DocumentationFiles/thumbs/video.png">Legend goes here!</doc.video>
361422
</code></doc.code>
@@ -364,6 +425,54 @@
364425
</doc.topic>
365426
<!-- #endregion -->
366427

428+
<!-- #region Displaying responsive videos that don't interrupt the flow of text -->
429+
<doc.topic topicid="14a">
430+
<doc.topictitle>Displaying responsive videos that don't interrupt the flow of text</doc.topictitle>
431+
432+
Sometimes it may be necessary to display an video in the documentation, but in such a way that the flow of text is not interrupted. This is possible to do with this Template! For this, use the code below...
433+
<doc.code language="html"><code>
434+
<doc.frame contentside="right" contentheight="250px">
435+
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it
436+
to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
437+
sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting
438+
industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five
439+
centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
440+
desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text
441+
ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining
442+
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions
443+
of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text
444+
ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining
445+
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions
446+
of Lorem Ipsum.
447+
448+
<doc.framecv src="DocumentationFiles/videos/square.mp4" thumbnail="DocumentationFiles/thumbs/square.png">Legend goes here!</doc.framecv>
449+
</doc.frame>
450+
</code></doc.code>
451+
And the result for this code is...
452+
<br>
453+
<br>
454+
<doc.frame contentside="right" contentheight="250px">
455+
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it
456+
to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
457+
sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting
458+
industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five
459+
centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
460+
desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text
461+
ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining
462+
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions
463+
of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text
464+
ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining
465+
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions
466+
of Lorem Ipsum.
467+
<doc.framecv src="DocumentationFiles/videos/square.mp4" thumbnail="DocumentationFiles/thumbs/square.png">Legend goes here!</doc.framecv>
468+
</doc.frame>
469+
<doc.info>
470+
For this tag to work well, you MUST respect the order of <doc.detach>Text</doc.detach> and then the <doc.detach>&lt;doc.framecv&gt;</doc.detach> tag. Do not try to change this order.
471+
</doc.info>
472+
473+
</doc.topic>
474+
<!-- #endregion -->
475+
367476
<!-- #region Displaying code formatted in some language -->
368477
<doc.topic topicid="15">
369478
<doc.topictitle>Displaying code formatted in some language</doc.topictitle>

‎Documentation-Template/DocumentationFiles/css/all-css-content.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
@import url(tool-tags-style/achiev.css);
2020
@import url(tool-tags-style/code.css);
2121
@import url(tool-tags-style/detach.css);
22+
@import url(tool-tags-style/frame.css);
2223
@import url(tool-tags-style/image.css);
2324
@import url(tool-tags-style/info.css);
2425
@import url(tool-tags-style/list.css);

‎Documentation-Template/DocumentationFiles/css/tool-tags-style/frame.css‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
.toolTagFrame{
2+
display: inline-block;
3+
}
4+
.toolTagFrameImageContainer{
5+
display: grid;
6+
grid-template-rows: auto auto;
7+
background-color: rgb(239, 239, 239);
8+
border-radius: 4px;
9+
padding: 8px;
10+
width: auto;
11+
}
12+
.toolTagFrameImageImg{
13+
display: flex;
14+
align-items: center;
15+
justify-content: center;
16+
width: auto;
17+
margin-left: auto;
18+
margin-right: auto;
19+
margin-bottom: 8px;
20+
}
21+
.toolTagFrameImageImg img{
22+
max-width: 95%;
23+
border-radius: 4px;
24+
cursor: zoom-in;
25+
transition: all 250ms;
26+
}
27+
.toolTagFrameImageComment{
28+
text-align: center;
29+
font-style: italic;
30+
color: rgb(121, 121, 121);
31+
}
32+
.toolTagFrameVideoContainer{
33+
display: grid;
34+
grid-template-rows: auto auto;
35+
background-color: rgb(239, 239, 239);
36+
border-radius: 4px;
37+
padding: 8px;
38+
}
39+
.toolTagFrameVideoVideo{
40+
display: flex;
41+
align-items: center;
42+
justify-content: center;
43+
width: auto;
44+
margin-left: auto;
45+
margin-right: auto;
46+
margin-bottom: 8px;
47+
}
48+
.toolTagFrameVideoVideo video{
49+
max-width: 95%;
50+
border-radius: 4px;
51+
}
52+
.toolTagFrameVideoComment{
53+
text-align: center;
54+
font-style: italic;
55+
color: rgb(121, 121, 121);
56+
}

‎Documentation-Template/DocumentationFiles/css/tool-tags-style/topicSubtitle.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,13 @@
66
font-weight: bolder;
77
margin-top: 18px;
88
margin-bottom: 18px;
9+
}
10+
.toolTagTopicSubtitleSeparator{
11+
display: inline;
12+
padding-right: 4px;
13+
}
14+
.toolTagTopicSubtitleSeparator img{
15+
width: 10px;
16+
height: 10px;
17+
opacity: 0.5;
918
}

‎Documentation-Template/DocumentationFiles/css/tool-tags-style/topicTitle.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,16 @@
88
margin-top: 18px;
99
margin-bottom: 18px;
1010
}
11+
.toolTagTopicSeparator{
12+
display: inline;
13+
padding-left: 8px;
14+
padding-right: 8px;
15+
}
16+
.toolTagTopicSeparator img{
17+
width: 14px;
18+
height: 14px;
19+
opacity: 0.3;
20+
}
1121
.toolTagTopicTitle a:nth-child(2){
1222
display: flex;
1323
justify-content: center;

0 commit comments

Comments
 (0)