On Tue, Dec 19, 2017 at 2:37 AM, <sky5w...@gmail.com> wrote:
> Came back to this after dinner.
> The introduction of new Timeline classes(Modern,Compact,Verbose,Columnar)
> means there is no catch-all for timelineComment.
> So, I cut and paste in the CSS for each possible case.
> /* Enable timeline comments to respect linefeeds. */
> span.timelineModernComment {
> font-family: Consolas;
> white-space: pre;
> }
> And I had to check both boxes before clicking Publish button.
> [x] Skin draft1 has been tested and found ready for production.
> [x] The current skin should be overwritten with draft1.
> {Publish} <-- Click button to update CSS in use.
> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
> Having done that, I have my newline comments.
> But, I now see issues with 'Compact' being not very. The ellipsis is on
its
> own line.
> 'Modern' jumps out as the most clean, but it has a leading blank line I'd
> like to remove.
>
> How can I force the 'timelineModernDetail' contents to be centered or
> left-justified?
> And prevent the empty leading line in timelineModernComment?
Just in case you don't know how to, "debugging" CSS these days is quite
easy:
Which browser are you using?
I normally use both Firefox and Chrome.
Both have the same shortcut (CTRL+SHIFT+I) for launching the "Developer's
Tools" window frame.
Click the mouse arrow symbol from the "Developer's Tools", then click any
element in the main browser window, in your case anywhere in the text below
(copied from today's trunk of http://fossil-scm.org/index.html/timeline):
*Leaf check-in: a6c5a462 user: drh tags: trunk*
When you select that element, you should see, in one of the "Developer's
Tools" frames, the defintion for the selected element's CSS class(es):
(CB = CheckBox)
.timelineModernDetail{
CB: font-size: 80%;
CB: text-align: right;
CB: float: right;
CB: opacity: 0.75;
CB: margin-top: 0.5em;
CB: margin-left: 1em;
}
You may uncheck any CB to exclude any attribute, edit any attribute value,
or add any other CSS attribute.
As all the attributes are updated in the browser in real-time, it is very
easy to CSS style the tag exactly the way you want it.
When you are done, just copy the CSS class from the "Developer's
Tools" frame, go to the */setup_skinedit* Fossil page and paste the CSS
class at the end of the existing CSS.
Why at the end and not at the beginning?
Because that way you take advantage of CSS cascading specificity:
https://www.w3.org/TR/css3-cascade/#cascading
Order of AppearanceThe last declaration in document order wins.
(I recommend you to read the entire document only if you don't have any
hobby.)
This is very convenient if you want to experiment with several different
versions of your .timelineModernDetail CSS class, so just paste them after
each other.
(When you are done, it is always recommended to clean up your CSS, and only
use one instance of a class, at least in the same CSS document.)
In the example below, *color: red* will never apply, as *color: blue* is
the last declaration in the document and thus wins.
.timelineModernDetail{
font-size: 80%;
text-align: right;
float: right;
opacity: 0.75;
margin-top: 0.5em;
margin-left: 1em;
margin-left: 1em;
*color: red;*
}
.timelineModernDetail{
font-size: 80%;
text-align: right;
float: right;
opacity: 0.75;
margin-top: 0.5em;
margin-left: 1em;
*color: blue;*
}
Just my two cents.
BR,
Johan
>
> Thanks for Fossil!
>
> _______________________________________________
> fossil-users mailing list
> fossil-users@lists.fossil-scm.org
> http://lists.fossil-scm.org:8080/cgi-bin/mailman/listinfo/fossil-users
>
_______________________________________________
fossil-users mailing list
fossil-users@lists.fossil-scm.org
http://lists.fossil-scm.org:8080/cgi-bin/mailman/listinfo/fossil-users
