Skip to main content
Topic: Custom.css with 1.1.1. (Read 2080 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

Custom.css with 1.1.1.

In my testforum I am using my custom_light.css from 1.0.10 in a copy of the default-theme from 1.1.1.
The custom_light.css is in --> themes -->mytheme --> css -->_light

It seems to me, that all changes I made two years ago in my  custom_light.css about the colors, etc. do no longer overwrite the admin_light.css, the admin.css and the jquery.sceditor.css.

The custom_light.css is only overwriting the index.css and the index_light.css now.

Do I have to edit the other css-files now (comment things out, for example) to get my custom.css working as before?
Or should the custom_light.css be uploaded in another direction?

Re: Custom.css with 1.1.1.

Reply #1

hmm... the customs are loaded a bit randomly... :-\
index.css
index_light.css
custom_light.css
admin.css
admin_light.css
custom.css

A more appropriate order should probably be:
index.css
index_light.css
admin.css
admin_light.css
custom.css
custom_light.css

though... it's a bit tricky...
Bugs creator.
Features destroyer.
Template killer.

Re: Custom.css with 1.1.1.

Reply #2

Yes, this would be more handy, Emanuele, ;)  but I just wanted to know, if the order of loading the files has changed too - or if there are some more parts in my "old" custom_light.css, which have mistakes now and are not displayed proper with 1.1.1. I have to do some changing in other files for my themes anyway, so I won't care, if there are a few more now.

I did a lot of changings now in my custom_light.css for 1.1.1 and my testfoum is nearly looking the same as before, but not as "pretty" as before. :-\  I am not satisfied with it at all until now.

It is not finished yet. A big problem is the mobile view of our main menue (specially the profile button) which I don't know to solve at all - but I am also really struggling for example with the headers and the box-shadows, that they will look nice again, whereever they are used.

In default the headers are all looking nearly the same, but in my much darker themes I had different background-colors and different border-radius for them. This seems no longer this much possible as before and some of the headers are now looking quite ugly. They have to much hight, a little misalignment about the shadows or anything else - or they are looking too dark.

In the profiles, h3 has gone? :'( .profileblock_left h3 and .profileblock_right h3 are no longer working for different styled headers, they are just the same as the category headers now. This will look awful in my themes.

I was not able to change this. It was looking much better before. :(



Last Edit: January 31, 2018, 07:10:04 am by Ruth

Re: Custom.css with 1.1.1.

Reply #3

In general what was possible with 1.0 is still possible with 1.1, just with different selectors. ;)
If you can give some more hints as to where you were adding shadows and so on we may be able to help you out. ;)

In .profileblock_left I guess the h3 has been replaced by an h2... it's not such a big difference... ;)
Bugs creator.
Features destroyer.
Template killer.

Re: Custom.css with 1.1.1.

Reply #4

Sometimes I feel so stupid O:-) and sometimes I just want to kiss you, Emanuele!

I did not know, that I can  change the h3-headers in the profiles to  .profileblock_left h2 and .profileblock_right h2 to get the same result as before.

This seems to solve a lot of my problems I had with all that bloody stuff about the headers and the shadows in other parts of the forum.

Thank you very much!

Re: Custom.css with 1.1.1.

Reply #5

Cool!
If you have any other issue just post about it. ;)
Bugs creator.
Features destroyer.
Template killer.

Re: Custom.css with 1.1.1.

Reply #6

Thank you, I will need your help at least for the main menue and the profile button, Emanuele... O:-)  (and for another thing, I can't explain at the moment) I think, that I can't figure it out by myself.  ::)

The headers and the shadows and anything else is almost done now, it was not easy for me to get a "nice result" in all browsers. I had to change nearly everything again for my themes , because my "old" custom_light.css was including too many parts, which have to be done in other css-files now.

The forum is looking a bit different now, maybe a little better. But the headers are very often higher than before, I had to resize the font-size there,  from 1.214em to 1.18em, otherwise it would have not worked at all to give them less hight. Those about the headers and the shadows was easier to handle before 1.1.1 for me.

Opera -  in my resolution - was breaking the styling in a lot of parts in forum (headers, buttons, linktree, etc.) a few months ago (or maybe it was the last update to 1.0.10) And with the 1.1.1 a lot of scrollbars apeared everywhere, where they should not be and are not needed ( for example in the quotes or somewhere, where the "content" is used, etc.). But things like this are all solved now:

recent.jpg blocklist.jpg

I have tried to change all those little misalignments and "bright lines" at the base of  the headers and the buttons in visible parts for the members as far as possible, but some are still there. It is just a problem with Opera ::)  on my little screen and in my resolution - not with the styling of ElkArte.

For example this one:

There are ugly bright lines in the headers if there is a warning box or a not-collapsed portalblock in forum. Without this the headers are looking good:

Header_1.jpg Header_2.jpg

I have tried to solve this issue for examle with some margin-top in the headers. It worked - but then the bright lines in the headers will appear, if the portalblock is collapsed or if no warning message is there.

Or that one:

Code: [Select]
input[type="checkbox"], input[type="radio"] {
    box-sizing: border-box;
    font-weight: normal;
    font-size: 1em;
    margin: -2px 2px 0;
    padding: 0;
    border: none;
    background: none;
    vertical-align: middle;
}

I have changed it to margin: 0; because it was looking like this before, if there was a warnig message in top of the forum or a not-collapsed portal-block:

checkbox.jpg

Now it is always looking like this:

checkbox2.jpg

But in some listing in the admin panel there is still a "break" in the lines (and a bright line in the header), not because of this checkboxes, it is the vertical-align: middle of the icon there.

checkbox3.jpg

It will look proper if I would change it to this:

Code: [Select]
.icon {
    display: inline-block;
    margin: 0 .25em;
    width: 1.25em;
    height: auto;
    vertical-align: top;
    line-height: 1.25em;
}

checkbox4.jpg

But this is not possible, because the icons should always be in the middle anywhere else in forum.

Such issues were nearly driving me mad ;)  but I will leave such tiny things  for now.
Last Edit: February 06, 2018, 08:49:48 pm by Ruth

Re: Custom.css with 1.1.1.

Reply #7

This week I'm away for work and I don't have access to my computer (only the phone and the company computer), so I can't do much.
The "opera" scrollbars are most likely a chrome bug (even gmail has them), if it is that one, then it's a general problem (there are other reports around) and tbh I wouldn't know how to fix it.

But it may also be something different, in which case I think I'd need to inspect the bit with chrome's inspection tool to understand where they come from.
Last Edit: February 06, 2018, 08:15:10 am by emanuele
Bugs creator.
Features destroyer.
Template killer.

Re: Custom.css with 1.1.1.

Reply #8

Thanks for your work you two. Whenever I will upgrade, I will be thankful for the knowledge and little hints you post here.  :)

Re: Custom.css with 1.1.1.

Reply #9

The issue about those scrollbars with opera seems to be okay now everywhere.  Instead of auto I have used hidden, visible or overflow-y: scroll where it was possible or necessary.

And the issue about the "broken lines" in listings with an icon and/or a checkbox is suddenly gone. I don't know why. I did no more changings about that.  Maybe it happend, because there is a second portalblock on the top of the forum now, which changed something about the height. Magic. ;)