Skip to main content
Recent Posts
91
Theme development / Re: Click to expand quote
Last post by Spuds -
QuoteSMF 2.1 is just using the tag, sans class, and is fine with that
You are making a compelling reason to add the class:smiley_cat:
QuoteBut sure, keep the class if you want to. It won't do any harm, particularly if it also means less code to edit. Although I probably wouldn't bother keeping .quoteheader for the cites.
That is pretty much what I did, Uh Huh that's right. 
92
Theme development / Re: Click to expand quote
Last post by Antechinus -
AFAIK blockquotes are not used in any other context, so the class should not be necessary. Quotes in portal blocks call the same markup and CSS as in standard posts, and even if someone did want an unusual use and/or presentation they should be able to get that with a descendant. SMF 2.1 is just using the tag, sans class, and is fine with that.

But sure, keep the class if you want to. It won't do any harm, particularly if it also means less code to edit. Although I probably wouldn't bother keeping .quoteheader for the cites.
93
Theme development / Re: Click to expand quote
Last post by Spuds -
I updated my local with those changes (and a few other tweaks where  .bbc_quote in the css needs to now be blockquote)  Seems to work fine and saves some markup which is good.

I will need to update all of the parse_bbc tests since the output markup has changed.  Also need to check on the editor and wizzy toggling just to make sure nothing got (way) out of wack there.

Question .... as the new markup specifically targets the blockquote tag (as its class-less), any concerns with un-intended spillover?  We could do blockquote class="bbc_quote" as well.
95
Theme development / Re: Click to expand quote
Last post by Spuds -
Thanks:cool:

I'll give that new markup a try, but I reserve the option to add in some fancy:hot_pepper:  sauce here and there.  I have a branch with a bunch of theme cleanup (well what I consider cleanup ha) that I can make those changes in. 
96
Theme development / Re: Click to expand quote
Last post by Antechinus -
Oi Spudseses,

I remember waffling about simplifying quote markup a while back, but can't find where it was. Anyway, this was what I had in mind. It uses the same basic markup as SMF 2.1, which I think is the most sensible way of doing it. I've bunged all the sources stuff into one file, with the CSS done as comments.

Code: [Select]
<?php
// Current markup (from GitHub).
array(
self::ATTR_TAG => 'quote',
self::ATTR_TYPE => self::TYPE_PARSED_CONTENT,
self::ATTR_BEFORE => '<div class="quoteheader">' . $txt['quote'] . '</div><blockquote>',
self::ATTR_AFTER => '</blockquote>',
self::ATTR_BLOCK_LEVEL => true,
self::ATTR_AUTOLINK => true,
self::ATTR_LENGTH => 5,
),
array(
self::ATTR_TAG => 'quote',
self::ATTR_TYPE => self::TYPE_PARSED_CONTENT,
self::ATTR_PARAM => array(
'author' => array(
self::PARAM_ATTR_MATCH => '([^<>]{1,192}?)',
self::PARAM_ATTR_QUOTED => self::OPTIONAL,
),
),
self::ATTR_BEFORE => '<div class="quoteheader">' . $txt['quote_from'] . ': {author}</div><blockquote>',
self::ATTR_AFTER => '</blockquote>',
self::ATTR_BLOCK_LEVEL => true,
self::ATTR_AUTOLINK => true,
self::ATTR_LENGTH => 5,
),
array(
self::ATTR_TAG => 'quote',
self::ATTR_TYPE => self::TYPE_PARSED_EQUALS,
self::ATTR_BEFORE => '<div class="quoteheader">' . $txt['quote_from'] . ': $1</div><blockquote>',
self::ATTR_AFTER => '</blockquote>',
self::ATTR_QUOTED => self::OPTIONAL,
self::ATTR_PARSED_TAGS_ALLOWED => array(
'url',
'iurl',
),
self::ATTR_BLOCK_LEVEL => true,
self::ATTR_AUTOLINK => true,
self::ATTR_LENGTH => 5,
),
array(
self::ATTR_TAG => 'quote',
self::ATTR_TYPE => self::TYPE_PARSED_CONTENT,
self::ATTR_PARAM => array(
'author' => array(
self::PARAM_ATTR_MATCH => '([^<>]{1,192}?)',
),
'link' => array(
self::PARAM_ATTR_MATCH => '(?:board=\d+;)?((?:topic|threadid)=[\dmsg#\./]{1,40}(?:;start=[\dmsg#\./]{1,40})?|msg=\d{1,40}|action=profile;u=\d+)',
),
'date' => array(
self::PARAM_ATTR_MATCH => '(\d+)',
self::PARAM_ATTR_VALIDATE => 'htmlTime',
),
),
self::ATTR_BEFORE => '<div class="quoteheader"><a href="' . $scripturl . '?{link}">' . $txt['quote_from'] . ': {author} ' . ($modSettings['todayMod'] == 3 ? ' - ' : $txt['search_on']) . ' {date}</a></div><blockquote>',
self::ATTR_AFTER => '</blockquote>',
self::ATTR_BLOCK_LEVEL => true,
self::ATTR_AUTOLINK => true,
self::ATTR_LENGTH => 5,
),
array(
self::ATTR_TAG => 'quote',
self::ATTR_TYPE => self::TYPE_PARSED_CONTENT,
self::ATTR_PARAM => array(
'author' => array(
self::PARAM_ATTR_MATCH => '([^<>]{1,192}?)',
),
),
self::ATTR_BEFORE => '<div class="quoteheader">' . $txt['quote_from'] . ': {author}</div><blockquote>',
self::ATTR_AFTER => '</blockquote>',
self::ATTR_BLOCK_LEVEL => true,
self::ATTR_AUTOLINK => true,
self::ATTR_LENGTH => 5,
),


// Proposed markup (simpler, easier to deal with).
array(
self::ATTR_TAG => 'quote',
self::ATTR_TYPE => self::TYPE_PARSED_CONTENT,
self::ATTR_BEFORE => '<blockquote><cite>' . $txt['quote'] . '</cite>',
self::ATTR_AFTER => '</blockquote>',
self::ATTR_BLOCK_LEVEL => true,
self::ATTR_AUTOLINK => true,
self::ATTR_LENGTH => 5,
),
array(
self::ATTR_TAG => 'quote',
self::ATTR_TYPE => self::TYPE_PARSED_CONTENT,
self::ATTR_PARAM => array(
'author' => array(
self::PARAM_ATTR_MATCH => '([^<>]{1,192}?)',
self::PARAM_ATTR_QUOTED => self::OPTIONAL,
),
),
self::ATTR_BEFORE => '<blockquote><cite>' . $txt['quote_from'] . ': {author}</cite>',
self::ATTR_AFTER => '</blockquote>',
self::ATTR_BLOCK_LEVEL => true,
self::ATTR_AUTOLINK => true,
self::ATTR_LENGTH => 5,
),
array(
self::ATTR_TAG => 'quote',
self::ATTR_TYPE => self::TYPE_PARSED_EQUALS,
self::ATTR_BEFORE => '<blockquote><cite>' . $txt['quote_from'] . ': $1</cite>',
self::ATTR_AFTER => '</blockquote>',
self::ATTR_QUOTED => self::OPTIONAL,
self::ATTR_PARSED_TAGS_ALLOWED => array(
'url',
'iurl',
),
self::ATTR_BLOCK_LEVEL => true,
self::ATTR_AUTOLINK => true,
self::ATTR_LENGTH => 5,
),
array(
self::ATTR_TAG => 'quote',
self::ATTR_TYPE => self::TYPE_PARSED_CONTENT,
self::ATTR_PARAM => array(
'author' => array(
self::PARAM_ATTR_MATCH => '([^<>]{1,192}?)',
),
'link' => array(
self::PARAM_ATTR_MATCH => '(?:board=\d+;)?((?:topic|threadid)=[\dmsg#\./]{1,40}(?:;start=[\dmsg#\./]{1,40})?|msg=\d{1,40}|action=profile;u=\d+)',
),
'date' => array(
self::PARAM_ATTR_MATCH => '(\d+)',
self::PARAM_ATTR_VALIDATE => 'htmlTime',
),
),
self::ATTR_BEFORE => '<blockquote><cite><a href="' . $scripturl . '?{link}">' . $txt['quote_from'] . ': {author} ' . ($modSettings['todayMod'] == 3 ? ' - ' : $txt['search_on']) . ' {date}</a></cite>',
self::ATTR_AFTER => '</blockquote>',
self::ATTR_BLOCK_LEVEL => true,
self::ATTR_AUTOLINK => true,
self::ATTR_LENGTH => 5,
),
array(
self::ATTR_TAG => 'quote',
self::ATTR_TYPE => self::TYPE_PARSED_CONTENT,
self::ATTR_PARAM => array(
'author' => array(
self::PARAM_ATTR_MATCH => '([^<>]{1,192}?)',
),
),
self::ATTR_BEFORE => '<blockquote><cite>' . $txt['quote_from'] . ': {author}</cite>',
self::ATTR_AFTER => '</blockquote>',
self::ATTR_BLOCK_LEVEL => true,
self::ATTR_AUTOLINK => true,
self::ATTR_LENGTH => 5,
),

/*
CSS for the proposed new markup would essentially be:

/* ---------------------------- */
/* themes/default/css/index.css */
/* ---------------------------- */

/* The "Quote:" and "Code:" header parts... *//*
.codeheader, blockquote > cite {
font-size: var(--font13);
font-weight: 600;
padding: .2em .4em;
border-bottom: 1px solid;
}

.codeheader {
margin-top: .4em;
border-top: 3px solid;
border-bottom: none;
}

/* [Select] link to copy code. *//*
.codeoperation {
font-weight: normal;
}

/* A quote, perhaps from another post. *//*
blockquote,
/* A code block - maybe PHP ;) - shared styles. *//*
.bbc_code {
font-size: var(--font13);
overflow: auto;
margin: 0 0 1em 0;
padding: .4em .67em;
border: 1px solid;
border-top: none;
}

blockquote {
margin: .4em 0 1em 0;
border: 1px solid;
}

/* ---------------------------- */
/* themes/default/css/light.css */
/* ---------------------------- */

/* The "Quote:" and "Code:" header parts... *//*
.codeheader, blockquote > cite {
color: var(--body_text);
border-color: var(--primary_border);
background: var(--primary_white);
}

*/


// Fancy stuffz from BBCParser.php... (Ant liketh not teh fancy stuffz. :P )
protected function alternateQuoteStyle(array &$tag)
{
// Start with standard
$quote_alt = false;
$first_quote = 0;

foreach ($this->open_tags as $open_quote)
{
if (isset($open_quote[Codes::ATTR_TAG]) && $open_quote[Codes::ATTR_TAG] === 'quote')
{
$quote_alt = !$quote_alt;
$first_quote++;
}
}
if ($first_quote === 0)
{
// First quote (of nested or single) receives a wrapper so its markup will be:
// <div class="quote-read-more"> .. relative
// <input type="checkbox" class="quote-show-more">.. absolute over the blockquote
// <blockquote> .. same as always ... with a max height that is removed on input click
// </div>
$tag[Codes::ATTR_BEFORE] = str_replace('<blockquote>', '<div class="quote-read-more"><input type="checkbox" class="quote-show-more"><blockquote>', $tag[Codes::ATTR_BEFORE]);
$tag[Codes::ATTR_AFTER] = str_replace('</blockquote>', '</blockquote></div>', $tag[Codes::ATTR_AFTER]);
}
else
{
// Nested quotes, located inside the above parent quote
// @NOTE: I might be missing something, but I can't see why you would need anything extra here.
// With the proposed change in quote markup, a simple max-height and hidden overflow on the first quote should deal with all child elements.
}
}

?>
97
Site Feedback / Re: EARLY Beta version of 2.0
Last post by Spuds -
I installed the Wave plugin (I think its from WebAIM) for chrome and that seems to do good job at pointing out problem areas w/o having to have a site published, so good for development.  I ran it on light and made a couple of alt text (all those alt="") and link fixes (a few text-less links), colors were fine.  Only checked a few of the main pages.

I'll look to see what it takes to get to AA on the dark theme.  Agree about to much contrast, for me it get harsh and for dark themes I tend to like ones with a touch less contrast, probably why Darktanion ended up where it did.  It was one of those color wheel changes on text/links until, yeah that feels good to my eyes.

Glad you got to reset the theme.  That theme choice area of Profile was redone in 2.0, it used to use the admin controller but now its stands alone in the profile controller, so yeah, a few bugs added.
98
Site Feedback / Re: EARLY Beta version of 2.0
Last post by Antechinus -
Yep, I got myself back to the Light variant somehow. Can't remember exactly how I did it, but basically "ok, try this now and see what happens".

The WebAIM site is a very good resource. I use it a lot. One of the things I have noticed about dark themes is that I find them much easier on the eyes if everything is balanced for contrast ratios. IOW, body text, link text, titles, etc (and taking into account that a larger font-size and/or higher font-weight gives the visual impression of higher contrast for the same colours). If not all backgrounds are the same, I often don't use the same text/link colours on all backgrounds.

I tend to use the contrast checker a lot as a starting point, then tweak things from there to compensate for font-size and font-weight. I don't always go for passing WCAG AAA either. From memory, I think WCAG AA is the usual standard for most countries, and dyslexic users (not an insignificant percentage) find too much contrast makes their dyslexia worse (the text starts crawling around the page for them) so there are arguments for not using too much contrast in a default theme. Black on white, or the inverse, are way too harsh, IMO.
99
Site Feedback / Re: EARLY Beta version of 2.0
Last post by Spuds -
QuoteLooks like you have some sort of bug with variant selection.
Seems to work as long as you do not use the "Forum Default" selection area.  But yes that overall area is still not working as it should, something else to look into  :P

QuoteAs things stand, it comes nowhere near meeting basic a11y guidelines.
If I get motivated I'll do that! Overall it was mostly a test (for me) to see if I had broken out enough color vars in the CSS to make at least basic styling "do-able", I doubt it will go anywhere.