Simple Machines Community Forum

SMF Support => SMF 2.1.x Support => Topic started by: pocttopus on May 19, 2020, 05:09:02 PM

Title: css styles
Post by: pocttopus on May 19, 2020, 05:09:02 PM
Hello,

I just want to insert background-image and I opened this file, but whole style is written in a single line.
I am using SublimeText3 and how can I solve this issue?

Thanks.
Title: Re: css styles
Post by: Shambles on May 19, 2020, 05:17:20 PM
https://unminify.com/
Title: Re: css styles
Post by: Antechinus on May 19, 2020, 05:18:56 PM
Use the uncompressed files inside Themes/default/css: index.css, etc. These are not minified and are much easier to work with.
Once you save a modified copy, SMF 2.1 will automatically make a new minified version.
Title: Re: css styles
Post by: Antechinus on May 19, 2020, 05:19:24 PM
https://unminify.com/

Or that, but it's not necessary to go through that rigmarole. ;)
Title: Re: css styles
Post by: pocttopus on May 19, 2020, 05:21:52 PM
Use the uncompressed files inside Themes/default/css: index.css, etc. These are not minified and are much easier to work with.
Once you save a modified copy, SMF 2.1 will automatically make a new minified version.
But I havent found the background class in regular index.css file which is working properly, it works only on minifield file and also important! rule is not solving the issues.  :-\
Title: Re: css styles
Post by: SychO on May 19, 2020, 05:23:31 PM
Use the uncompressed files inside Themes/default/css: index.css, etc. These are not minified and are much easier to work with.
Once you save a modified copy, SMF 2.1 will automatically make a new minified version.

Yup do this ^, don't ever modify the minified files if you do that your changes will be lost at some point in time.

And if you want to disable file compression even though it helps your forum's load speed, the setting is under Configuration > Features and Options > General > Minimize CSS and JavaScript files
Title: Re: css styles
Post by: Antechinus on May 19, 2020, 05:25:58 PM
But I havent found the background class in regular index.css file and also important! rule is not solving the issues.  :-\

Background is not a class as such. It's an attribute that is assigned to a class (or to a tag or an id). :)

Exactly which background are you trying to change? The best way to find the CSS for it is to right click > Inspect Element. That will tell you tag, class and/or id. You can then search for those in the CSS files.
Title: Re: css styles
Post by: pocttopus on May 19, 2020, 05:54:56 PM
I must disable the inline rule and then I can insert a background image from minified file:

(https://i.postimg.cc/nC6qCbZd/Screenshot-10.jpg) (https://postimg.cc/nC6qCbZd)
Title: Re: css styles
Post by: Antechinus on May 19, 2020, 06:12:15 PM
Where the hell is the inline rule coming from? It's not in the markup.
Title: Re: css styles
Post by: Arantor on May 19, 2020, 06:27:05 PM
Link to site?
Title: Re: css styles
Post by: pocttopus on May 20, 2020, 03:50:23 AM
I'm on localhost testing 2.1rc2 for a new forum before going live.
Title: Re: css styles
Post by: Arantor on May 20, 2020, 08:45:34 AM
That makes it awfully difficult for us to help you...
Title: Re: css styles
Post by: pocttopus on May 20, 2020, 09:08:56 AM
So I must go live with the forum?
Here is another example, almost on every search to change the background it gives me minified file.

(https://i.postimg.cc/bsSwhpHv/Screenshot-11.jpg) (https://postimg.cc/bsSwhpHv)
Title: Re: css styles
Post by: Kindred on May 20, 2020, 09:47:45 AM
yes... because you are looking at the GENERATED PAGE.

As you have already been told -- making changes to the ACTUAL file (e.g. index.css) will then be taken INTO the minified version after a short time.
Making changes directly to the minified version will be LOST the next time the system updates the minified file from the actual file
Title: Re: css styles
Post by: SychO on May 20, 2020, 09:51:53 AM
If you are designing just disable the file compression as I have instructed in my previous post.
Title: Re: css styles
Post by: pocttopus on May 20, 2020, 10:18:27 AM
Thanks to all for your response, you are very kind and I understand what are telling me about minified file, but searching directly into the index.css without Inspect Element is hard to find all those classes and attributes it's harder for me to change a single background or some other links colors. There are some attributes which I must disable, some to make them 50% transparent because of the image in the background.

Something similar like my other forum at http://mkreef.com but this will be a new forum about cars. 

Title: Re: css styles
Post by: Arantor on May 20, 2020, 11:03:47 AM
So turn off minified files as suggested, meaning you get served the actual index.css file.
Title: Re: css styles
Post by: pocttopus on May 20, 2020, 11:11:09 AM
I'll try that.
One more question. Is there any changes of the 2.1 between these two links?


Thanks.
Title: Re: css styles
Post by: Arantor on May 20, 2020, 11:36:03 AM
Yes.

The GitHub version is a year ahead of the published version on download.simplemachines.org.
Title: Re: css styles
Post by: Kindred on May 20, 2020, 11:47:42 AM
I think there are over 1000 changes...
Title: Re: css styles
Post by: pocttopus on May 20, 2020, 11:55:50 AM
Yes.

The GitHub version is a year ahead of the published version on download.simplemachines.org.
I think there are over 1000 changes...

(https://media.giphy.com/media/3ofSBfxkp3fPTgANB6/giphy.gif)

What am I doing all this time?  :-\
Title: Re: css styles
Post by: pocttopus on May 20, 2020, 12:14:01 PM
Basically I need to install 2.1rc2 from download.simplemachines.org link and then to overwrite the files from github?
Because there is no installation option from the github link.
Title: Re: css styles
Post by: Arantor on May 20, 2020, 01:25:44 PM
The install files are in the other/ folder, you move them into your foot and run them normally.

RC2 is a year old... we’re waiting on RC3.
Title: Re: css styles
Post by: Arantor on May 20, 2020, 01:40:10 PM
Did you move them into the root folder before trying to run them, like I said?
Title: Re: css styles
Post by: pocttopus on May 20, 2020, 02:00:45 PM
Yes... I have moved them and i have installed the forum from scratch.
Thanks!  ;)

But still in InspectElement I am seeing minified files, I don't see the index.css.  :(
How can I solve this issue with index.css on localhost? If I try to install 2.1rc2 on the server, can solve this?

(https://i.postimg.cc/PfCLNfqP/Screenshot-13.jpg)
Title: Re: css styles
Post by: Arantor on May 20, 2020, 02:08:14 PM
As we said, you can turn off minifying in the admin panel so you get the real index.css shown to you...
Title: Re: css styles
Post by: pocttopus on May 20, 2020, 02:17:00 PM
But I didn't understand how to turn off the minidfied file to display in InspectElement. :(
There is only a link to unminify but not how to turn off.
Title: Re: css styles
Post by: SychO on May 20, 2020, 02:17:54 PM
And if you want to disable file compression even though it helps your forum's load speed, the setting is under Configuration > Features and Options > General > Minimize CSS and JavaScript files

^^^^^^^
Title: Re: css styles
Post by: pocttopus on May 20, 2020, 02:27:56 PM
Thanks @Sycho, problem solved!  ;)
So, once I make the changes I want, is it better to enable again Minimize CSS and JavaScript files option? Or should I leave it disabled?
Title: Re: css styles
Post by: pocttopus on May 21, 2020, 03:11:28 PM
Sorry folks again I have another issue... maybe it looks easy but it's not simple to solve it.
I have managed to import background image but I want to make some transparency for the #wrapper and #body.

But still I cannot find the classes in index.css... I still see them as inline rule's.

Firstly I must disable the body color:

(https://i.postimg.cc/Zvz9SZFd/Screenshot-14.jpg) (https://postimg.cc/Zvz9SZFd)

And then to make the rest of the #wrapper around 50% transpareny:

(https://i.postimg.cc/0KGz53cH/Screenshot-15.jpg) (https://postimg.cc/0KGz53cH)

Both rules are inline, I cannot change anything through index.css.
Is there any way to solve this?
Thanks again.
Title: Re: css styles
Post by: Arantor on May 21, 2020, 03:31:19 PM
Open out <head>, what do you see?
Title: Re: css styles
Post by: pocttopus on May 21, 2020, 03:39:42 PM
Here is head section:

(https://i.postimg.cc/VSQnw39n/Screenshot-16.jpg) (https://postimg.cc/VSQnw39n)
Title: Re: css styles
Post by: Arantor on May 21, 2020, 03:54:36 PM
I see a style tag there... what's in that?
Title: Re: css styles
Post by: pocttopus on May 21, 2020, 04:05:51 PM
You mean about LightPortal?
Title: Re: css styles
Post by: Arantor on May 21, 2020, 04:25:03 PM
That's kind of my point, I don't know what is doing things in your page, and because I can't see it, I need you to go exploring - and I'm not a mindreader.

If I had to guess, I'd speculate you had a mod like the Curve Colorizer mod installed which is going to push some stuff into the <style> tag for styling purposes which would explain why things are tagged inline, because they're inline in the page in the <style> tag but since I can't see your code I can only guess...
Title: Re: css styles
Post by: Herman's Mixen on May 21, 2020, 04:53:12 PM
Therefore the questions asked should be a bit detailed so we know what you want to archive and so we can give proper support :D
Title: Re: css styles
Post by: Arantor on May 21, 2020, 04:57:46 PM
Oh, it's clear what the OP is trying to achieve, it's just there's a roadblock doing it and some investigation is needed - but the OP decided to second-guess the questions I'd be asking.
Title: Re: css styles
Post by: pocttopus on May 21, 2020, 05:06:46 PM
Yes, I am using Curve Colorizer mod
Should I remove it?
Title: Re: css styles
Post by: Arantor on May 21, 2020, 05:14:31 PM
...it's the thing putting inline styles in, so... maybe?
Title: Re: css styles
Post by: Antechinus on May 21, 2020, 05:56:35 PM
Lol. :D
Title: Re: css styles
Post by: Bloc on May 21, 2020, 07:19:14 PM
* eating popcorn * :)
Title: Re: css styles
Post by: Antechinus on May 21, 2020, 08:10:15 PM
We'll get there eventually. ;)
Title: Re: css styles
Post by: pocttopus on May 22, 2020, 03:36:10 AM
Ok... I didn't know that this mod was putting inline rules, If I knew I wouldn't even asking or bothering you with this because it was not my intention.
There are several .css files (including those minified) and also like you I am not able to read whole script and styles in just two days.  :(
2.1 is a lot different comparing to 2.0.x... this does not means that I don't like it, it is a lot better and faster.
I'll try to fix this without that modification.

Thanks again.
Title: Re: css styles
Post by: albertlast on May 22, 2020, 04:15:36 AM
The version number 2.1 is missleading,
general to see this version as 3.0 is a better point of view to had the right mind set.
Title: Re: css styles
Post by: Kindred on May 22, 2020, 09:26:38 PM
No. That is very wrong. The next version is clearly 2.1  not 3.0

3.0 will be a major redesign to code practices
Title: Re: css styles
Post by: albertlast on May 23, 2020, 12:07:30 AM
2.1 got a major redesign,
you notice that by none 2.0 is able to run in 2.1.
Because of massiv changes in the code,
database and front end.

So people expect by the version number a small changes,
but the different between 2.0 and 2.1 is huge --> 2.1 is internaly a complet new product = 3.0
what ever you like to call this version.
Title: Re: css styles
Post by: Kindred on May 23, 2020, 12:59:32 AM
No. You are incorrect in your assumption of what the versions mean.


X.y.z

Changes to z are minor, typically patch releases with compatibility between versions
Changes to y are typically visible, often including major functionality and design.  Changes to y MAY have some compatibility but typically not.
Changes to x are significant.  Updates at this level frequently include major structural, code design, coding practices.  Changes to x will rarely, if ever, be backward compatible

1.0.x
1.1.x
2.0.x
2.1.x
Eventually
3.0.x

2.1 is NOT a 3.0 change
Title: Re: css styles
Post by: albertlast on May 23, 2020, 02:34:13 AM
Since that non mod work any more with github version,
we got here a 3.0 version
like you defined in you x.y.z text.
You see this also in on sm.org since more than one year is rc2 out and sm.org is still running on 2.0.x instead of using rc2 version --> because the changes are huge.

So mod author and other guy how work with the code of smf should threat 2.1 as 3.0,
that they dont expected anything is still running.
Title: Re: css styles
Post by: Kindred on May 23, 2020, 08:47:10 PM
Alberlast, sorry, but you are just plain wrong
Title: Re: css styles
Post by: Arantor on May 24, 2020, 05:07:48 AM
It’s tough, because on some level he is right.

The code-level changes from 1.1 to 2.0 are probably on par, on some level, with the scale of changes from 2.0 to 2.1.
Title: Re: css styles
Post by: Gwenwyfar on May 24, 2020, 03:50:44 PM
If I'm honest, I also wonder if this doesn't deserve serious consideration. A lot had changed in 2.1 when I was working on it and I see that even more changed since then. None of the themes will work, a lot of things function differently, a lot of mods won't work, etc.

Perhaps checking how many popular mods break could give some idea of the damage.

If it is too far out from the expectations it might give a lot of support headache too.
Title: Re: css styles
Post by: Arantor on May 24, 2020, 03:52:58 PM
At this stage most modders are either waiting for RC3 or final, and anyone that is doing RC builds, probably won't see a lot of breakage from RC2 to current.

It's not like 2.0 RCs where the markup had to be changed every darn RC (e.g. the catbg markup)
Title: Re: css styles
Post by: pocttopus on May 27, 2020, 07:55:05 AM
Hello,

Where is this hover attribute for modifications in admin panel. I haven found it in index.css nor admin.css... it's white color or similar, I want to change it to a darker color.
Maybe I have disabled this rule somehow but I cannot find it to set a different color. :-[
Thanks.

(https://i.postimg.cc/fbTTtT12/Screenshot-8.jpg)
Title: Re: css styles
Post by: Arantor on May 27, 2020, 08:07:05 AM
Right click, inspect element...? I think it’s a class that’s added to the tr in JavaScript to be fair.
Title: Re: css styles
Post by: pocttopus on May 27, 2020, 08:13:21 AM
Here it is:

(https://i.postimg.cc/5HQFMxwV/Screenshot-9.jpg) (https://postimg.cc/5HQFMxwV)

btw the forum is live on the server.
you can visit at renaultclub.mk
Title: Re: css styles
Post by: Gwenwyfar on May 27, 2020, 11:46:45 AM
On the html tab, tick the pseudoclass for "hover" on one of the trs so it will show you the :hover css attributes.

Right click, inspect element...? I think it%u2019s a class that%u2019s added to the tr in JavaScript to be fair.
I added it as a :hover on css, dunno if that's still how it is.
Title: Re: css styles
Post by: pocttopus on May 27, 2020, 12:29:45 PM
No, I cannot find it... there is no hover attribute into those <tr> tags... I have selected all of them.
Maybe I have disabled those attributes and now I can't find it.
Is there any way to solve it?

I have modified those lines into two separate colors but there is no white or light color for hover. :-\

Code: [Select]
/* Those classes are sharing exact same gradient. */
/* Background of buttons */
/*.dropmenu li ul, .top_menu, .dropmenu li li:hover, .button,
.dropmenu li li:hover > a, .dropmenu li li a:focus, .dropmenu li li a:hover,*/
#top_section, #search_form .button, .quickbuttons li,
.quickbuttons li ul, .quickbuttons li ul li:hover, .quickbuttons ul li a:focus,
.popup_window, #inner_section {
background: #060624; /* fallback for some browsers */
background-image: linear-gradient(to bottom, #060624 0%, transparent 70%);
}

.dropmenu li ul, .top_menu, .dropmenu li li:hover, .button,
.dropmenu li li:hover > a, .dropmenu li li a:focus, .dropmenu li li a:hover {
background: #0a1c2f;
background-image: linear-gradient(to bottom, #2573c0 0%, transparent 70%);
Title: Re: css styles
Post by: Gwenwyfar on May 27, 2020, 12:42:29 PM
It might be on the td instead. Let me check.

Nope, it's the tr. Check for

Code: [Select]
/* Add some hover on table rows */
tr.windowbg:hover {
background: #e2eef8;
}
Title: Re: css styles
Post by: pocttopus on May 27, 2020, 12:53:13 PM
It might be on the td instead. Let me check.

Nope, it's the tr. Check for

Code: [Select]
/* Add some hover on table rows */
tr.windowbg:hover {
background: #e2eef8;
}
Thank you ;)
It works!
Title: Re: css styles
Post by: Gwenwyfar on May 27, 2020, 12:55:10 PM
Cheers! :)
Title: Re: css styles
Post by: Arantor on May 27, 2020, 01:11:39 PM
As for the confusion over :hover, it's not an attribute, it's a state. In your browser you have to toggle it on if you want to see it because there is no way a class makes sense for 'I am hovering over this element', but :hover isn't a class, and so is added/removed as needed.
Title: Re: css styles
Post by: pocttopus on May 27, 2020, 01:16:20 PM
What I was referring is that there was no displayed any attribute with hover option for any <tr> tag.  :)
Title: Re: css styles
Post by: Gwenwyfar on May 27, 2020, 01:20:43 PM
This is what I was talking about, to be sure we're on the same page:

By default, none of the states listed there will show up in the inspector. They are called pseudo-classes because they represent a state, they're not a class as such.
Title: Re: css styles
Post by: Hatshepsut on May 27, 2020, 01:21:25 PM
Is it possible to add hover color and in Message index and Board index tables?
Title: Re: css styles
Post by: Arantor on May 27, 2020, 01:23:56 PM
Sure, you just add a rule starting from those tables, then a tr:hover rule much as this one works. It's all just CSS...
Title: Re: css styles
Post by: Gwenwyfar on May 27, 2020, 01:34:48 PM
Hover can be added anywhere. The other pseudos can be added almost anywhere too (with some exceptions). You can find a list here (https://www.w3schools.com/css/css_pseudo_classes.asp).
(for the more adept, this (https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes#Index_of_standard_pseudo-classes) is a more complete list, but not everything is usable)

Css is all about selecting things and doing something to it.