Odd behaviour

Started by Dave, June 11, 2026, 08:00:56 AM

Previous topic - Next topic

Dave

Hi Chen,

I'm working on a new Autumn theme and have been building it here, I'm posting this link so you can see the theme working as designed. If you go to here you see the theme installed there also.

On the build site with Tiny Portal installed (that's what I'm using on Quizland) everything looks fine with the title and cat bars, but on DJ.co.uk with EhPortal installed the title and cat bars in the portal have a gap at the bottom where the leaves are sitting.

I have highlighted the issue in the attached, dj.png has the issues and smf214.png has not.

Any ideas why that's doing that?
If you want play quizzes or games click below

Chen Zhen


It's being caused by the toggle icon CSS.
If you upload a copy of your theme to an admin board on your Hobby site, I can experiment with it to fix the EhPortal CSS behavior. Actually, I think I have FTP access so I suppose I can likely get it myself. I'll look at it this weekend.
It looks like I need to add some relative + absolute positioning on the parent + toggle-icon to fix it.
 

Dave

#2
Yes it's installed on DJ where you are admin and have ftp access. Not sure if you know but we're now using a new index.css code layout, it's inline with SMF3.0, just in case you wonder why it looks like that.
If you want play quizzes or games click below

Dave

#3
I've had another look at it this morning Chen and I've fixed it. The catbar needed to have height which I've now added at line 4330
height: 35px; and the issue is resolved.

I would be grateful, if you have, the time to look over the theme and see if you can see any errors though, but no rush as it wont be added anywhere for public use until 1st September.

One other thing I did change is in the portal.css

Line 376 changed from

sp_article_icon
{
    vertical-align: middle;
    margin: 0rem 0rem 0rem 0rem !important;
}

to
sp_article_icon
{
    vertical-align: middle;
    margin: 0rem 0.3rem 0rem 0rem !important;
}

This is so the Icon has padding to the side of the catbar title
If you want play quizzes or games click below

Chen Zhen


I'm not sure which EhPortal version you are using but the CSS in the current one already matches the second code box.

I posted version 1.40.4-RC4 which includes CSS changes that should fix what you reported.

Dave

If you want play quizzes or games click below

Chen Zhen

I'll have to work on this some more because I'm not seeing uniform behavior for the toggle icon placement between your theme & others. I tried using negative values to get the thing to move but that's not a good way to do it.

Dave

OK no rush, just letting you know abut things
If you want play quizzes or games click below

Chen Zhen


Try out RC9 which should look better on your seasonal themes.

Something I noticed in your theme(s) is that you have CSS that adds a lot of bottom padding to hyperlinks within cat & title bars. I have fixed that for EhPortal by ensuring everything is "unset" for hyperlinks in that location but I think other mods or people putting links in SMF settings may cause problems using your theme(s) that have that CSS.
You might want to change it so that whatever it was intended for has some specific CSS class instead of a generalized link inside of catbg/titlebg.
This is one of the things that was breaking the cat_bars for EhPortal until I adjusted for it.



Dave

OK I'll give it a go.

My seasonal themes are just hacks of the SMF Default Curve, all I've done is to change the background and colours of it in the css, I don't remember changing anything to do with hyperlinks etc, that's not to say I didn't I just don't remember changing them.
If you want play quizzes or games click below

Chen Zhen


Those links weren't behaving like that for the default theme and I was able to see it in the browser's console.
There was extra padding added for titlebg and catbg which included "a" so it was applying it to hyperlinks that reside within those cat titles. I thought perhaps you added something for that behavior but didn't realize it can target all links in those title/cat bars.

It's all fixed now because all I had to do was specify "unset: all" at the onset of the CSS targeting EhPortal's titled article links. I likely neglected to fix some of the title/cat bars properly just yet but blocks and articles should be OK now.