TP-Docs
HTML5 Icon HTML5 Icon HTML5 Icon
TP on Social Media

Recent

Welcome to TinyPortal. Please login or sign up.

July 20, 2024, 04:39:15 PM

Login with username, password and session length
Members
Stats
  • Total Posts: 195,333
  • Total Topics: 21,233
  • Online today: 133
  • Online ever: 3,540 (September 03, 2022, 01:38:54 AM)
Users Online
  • Users: 0
  • Guests: 69
  • Total: 69

ElkArte TinyPortal Layout & Design

Started by McFly, March 22, 2022, 11:10:37 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

McFly

For ELK1

First, I removed the "clearthefloat" paragraphs. This did not require any change to the CSS (for now).

However, I noticed the following oddity. For the DIVs "tpleftbarheader" and "tprightbarheader" the margin widths are taken inline from the settings. But for "tpleftbarheader" only style="" is displayed, for "tprightbarheader" the specification is missing completely. However, the widths are displayed as "inline" in the developer (firefox) and are also displayed correctly.  ???
"I'm not going to censor myself to comfort your ignorance."

Testsites (may be online or not ;-) )
ElkArte 1.1.x & TP on Apache2.4.48, PHP 8.1.2 FPM/FastCGI, MariaDB 10.5.12

@rjen

That is due to the collapse function..

This line comes from SMF version, but I assume it is there in Elk too:

<div id="tpleftbarHeader" style="' , in_array('tpleftbarHeader',$context['tp_panels']) && $context['TPortal']['showcollapse']==1 ? 'display: none;' : '' , '">

If the collapse is selected it will toggle to style="display: none;"
I suppose the style element could have been but into the condition as well..

This would fix that empty style I guess..

<div id="tpleftbarHeader" ' , in_array('tpleftbarHeader',$context['tp_panels']) && $context['TPortal']['showcollapse']==1 ? 'style="display: none;"' : '' , '>
Running Latest TP on SMF2.1 at: www.fjr-club.nl

McFly

#2
I know what you mean. You mean that the missing style expression is because it is the collapse function. But this function sets the two or three DIVs following "tp-left/rightblock_body" to "display: none".

But I meant the following: For <div id="tpleftbarHeader" style=""> there should be a "margin-right: 4px" inside the "style" specification, for <div id="tprightbarHeader" > the "style" specification is completely missing. However, the margins are rendered correctly and also appear in the browser's "inline" enumeration.
"I'm not going to censor myself to comfort your ignorance."

Testsites (may be online or not ;-) )
ElkArte 1.1.x & TP on Apache2.4.48, PHP 8.1.2 FPM/FastCGI, MariaDB 10.5.12

McFly

ELK1

Removed two classes no longer used for input buttons (button, button_submit), also adopted the "submitbutton" class for most save button DIVs. A few typos corrected.
"I'm not going to censor myself to comfort your ignorance."

Testsites (may be online or not ;-) )
ElkArte 1.1.x & TP on Apache2.4.48, PHP 8.1.2 FPM/FastCGI, MariaDB 10.5.12

@rjen

Quote from: McFly on March 24, 2022, 09:33:46 AM
ELK1

Removed two classes no longer used for input buttons (button, button_submit), also adopted the "submitbutton" class for most save button DIVs. A few typos corrected.

This is another one of these things that I will not (yet) do in SMF version: because we are supporting both SMF2.0 (using class="button_submit") and SMF2.1 (class="button"). This is the kind of stuff I can pickup for the SMF version when we drop 2.0 support...

Good that you do it now for the Elk version though...
Running Latest TP on SMF2.1 at: www.fjr-club.nl

tino

Quote from: McFly on March 24, 2022, 09:33:46 AM
ELK1

Removed two classes no longer used for input buttons (button, button_submit), also adopted the "submitbutton" class for most save button DIVs. A few typos corrected.

Thanks for these.

Are you comfortable using Git/GitHub? It's alot easier to track these changes if you can submit PR's against the main repo, to then be merged.

McFly

Quote from: tino on March 24, 2022, 01:29:11 PM
...

Are you comfortable using Git/GitHub? It's alot easier to track these changes if you can submit PR's against the main repo, to then be merged.
I can give that a chance. I'll have to read up on it first and get to know it.
"I'm not going to censor myself to comfort your ignorance."

Testsites (may be online or not ;-) )
ElkArte 1.1.x & TP on Apache2.4.48, PHP 8.1.2 FPM/FastCGI, MariaDB 10.5.12

McFly

Now the first extension at the CSS. For this, the menus in the admin area are now built according to ELK model.

I noticed that the menu under "Block access" is missing. Feature?  ;)
"I'm not going to censor myself to comfort your ignorance."

Testsites (may be online or not ;-) )
ElkArte 1.1.x & TP on Apache2.4.48, PHP 8.1.2 FPM/FastCGI, MariaDB 10.5.12

McFly

Just a small revision to the CSS classes "blockbody" and "h2.category_header ...", as "blockbody" fabricates an unsightly border when rendering a block without title and border styles.
"I'm not going to censor myself to comfort your ignorance."

Testsites (may be online or not ;-) )
ElkArte 1.1.x & TP on Apache2.4.48, PHP 8.1.2 FPM/FastCGI, MariaDB 10.5.12

McFly

Again, a few typos weeded out. Found some more "submitbutton" and changed quite a few style="float: left/right", "clear: whatever" and "overflow: auto/hidden" in existing classes, and introduced new class for the bullets.
"I'm not going to censor myself to comfort your ignorance."

Testsites (may be online or not ;-) )
ElkArte 1.1.x & TP on Apache2.4.48, PHP 8.1.2 FPM/FastCGI, MariaDB 10.5.12

McFly

It's really not good when I have too much spare time ...  :2funny:

I have revised the category list again and also adapted the article list in the same way. No more tables, no inline styles and similar to ELK.
"I'm not going to censor myself to comfort your ignorance."

Testsites (may be online or not ;-) )
ElkArte 1.1.x & TP on Apache2.4.48, PHP 8.1.2 FPM/FastCGI, MariaDB 10.5.12

tino

Thanks! I'll push these to github later this week.

Are all the changes included in the latest zip file? Or do I need to apply them in order.

McFly

Quote from: tino on March 30, 2022, 06:01:14 PM
...

Are all the changes included in the latest zip file? Or do I need to apply them in order.
The latest zip file always contains the previous changes.
"I'm not going to censor myself to comfort your ignorance."

Testsites (may be online or not ;-) )
ElkArte 1.1.x & TP on Apache2.4.48, PHP 8.1.2 FPM/FastCGI, MariaDB 10.5.12

McFly

There is more to come! Have now finished work ...

Again a few typos. For this I have - with one exception - all replaced by the class strong. But for this to work, a bug in ELK's index.css has to be fixed first. Around the line 750 a dot has been forgotten there before the class.
"I'm not going to censor myself to comfort your ignorance."

Testsites (may be online or not ;-) )
ElkArte 1.1.x & TP on Apache2.4.48, PHP 8.1.2 FPM/FastCGI, MariaDB 10.5.12

tino

Quote from: McFly on March 31, 2022, 11:24:36 AM
But for this to work, a bug in ELK's index.css has to be fixed first. Around the line 750 a dot has been forgotten there before the class.

We can't rely on that being fixed, so will have to have our own tp override. Or similar.

McFly

#15
Quote from: tino on March 31, 2022, 12:13:45 PM
...

We can't rely on that being fixed, so will have to have our own tp override. Or similar.
For this I have just added a class in the tp-styles. The file will be available later.

By the way, I also just found the thing with the inline styles of "tp-left/rightbarheader"! They are hidden in the HTML header as scripts. Are defined in "Subs.php" from line 75.

EDIT:

Cleaned out the CSS itself a bit and added the "strong" class.
"I'm not going to censor myself to comfort your ignorance."

Testsites (may be online or not ;-) )
ElkArte 1.1.x & TP on Apache2.4.48, PHP 8.1.2 FPM/FastCGI, MariaDB 10.5.12

@rjen

#16
Just a warning (have not checked the css yet) but if you are using very common class names (such as strong or float left) it is advisable to create distinct class names , such as tp_strong or tp_floatleft to prevent issues with conflicting class names in themes or other mods ...
Running Latest TP on SMF2.1 at: www.fjr-club.nl

McFly

Quote from: @rjen on March 31, 2022, 05:44:39 PM
Just a warning (have not checked the css yet) but if you are using very common class names (such as strong or float left) ...
I definitely spent too much time in front of the monitor yesterday! Or: when you can't see the forest for the trees.  :doh:

Good that I have again slept a night over it. It is of course NOT an error in the CSS of ELK. I will revise the files again.

EDIT: Attached zip file replaced.
"I'm not going to censor myself to comfort your ignorance."

Testsites (may be online or not ;-) )
ElkArte 1.1.x & TP on Apache2.4.48, PHP 8.1.2 FPM/FastCGI, MariaDB 10.5.12

McFly

Just a small revision of the category and article list, CSS adjustment.
"I'm not going to censor myself to comfort your ignorance."

Testsites (may be online or not ;-) )
ElkArte 1.1.x & TP on Apache2.4.48, PHP 8.1.2 FPM/FastCGI, MariaDB 10.5.12

tino

Thanks, I'll get this checked in to git today hopefully!

McFly

Reworked article in cat page (tableless) and CSS.
"I'm not going to censor myself to comfort your ignorance."

Testsites (may be online or not ;-) )
ElkArte 1.1.x & TP on Apache2.4.48, PHP 8.1.2 FPM/FastCGI, MariaDB 10.5.12

McFly

The next bunch of changes. The descriptive texts are now also all implemented as paragraphs below the header.
"I'm not going to censor myself to comfort your ignorance."

Testsites (may be online or not ;-) )
ElkArte 1.1.x & TP on Apache2.4.48, PHP 8.1.2 FPM/FastCGI, MariaDB 10.5.12

tino

Thanks for all these!

All your changes should be in this commit https://github.com/tinoest/ElkTinyPortal/commit/ff9d200c228dbaf358124dbcd22803163269267f I'll push it to the main repo this weekend.

McFly

Quote from: tino on April 08, 2022, 10:29:43 AM
Thanks for all these!

All your changes should be in this commit https://github.com/tinoest/ElkTinyPortal/commit/ff9d200c228dbaf358124dbcd22803163269267f I'll push it to the main repo this weekend.
O0 O0 O0

Then I will wait for that and after that I will archive my current WIP folder and open a new WIP with the repository up to date.
"I'm not going to censor myself to comfort your ignorance."

Testsites (may be online or not ;-) )
ElkArte 1.1.x & TP on Apache2.4.48, PHP 8.1.2 FPM/FastCGI, MariaDB 10.5.12

tino

Quote from: McFly on April 08, 2022, 02:08:28 PM
Quote from: tino on April 08, 2022, 10:29:43 AM
Thanks for all these!

All your changes should be in this commit https://github.com/tinoest/ElkTinyPortal/commit/ff9d200c228dbaf358124dbcd22803163269267f I'll push it to the main repo this weekend.
O0 O0 O0

Then I will wait for that and after that I will archive my current WIP folder and open a new WIP with the repository up to date.

Should be available here https://github.com/Tinyportal/ElkTP it's the master branch

I have also synced the development branch for Elkarte 2 with the changes you made to keep them in sync.