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.
https://unminify.com/
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.
Quote from: Shambles on May 19, 2020, 05:17:20 PM
https://unminify.com/
Or that, but it's not necessary to go through that rigmarole. ;)
Quote from: 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.
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. :-\
Quote from: 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.
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
Quote from: pocttopus on May 19, 2020, 05:21:52 PMBut 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.
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)
Where the hell is the inline rule coming from? It's not in the markup.
Link to site?
I'm on localhost testing 2.1rc2 for a new forum before going live.
That makes it awfully difficult for us to help you...
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)
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
If you are designing just disable the file compression as I have instructed in my previous post.
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.
So turn off minified files as suggested, meaning you get served the actual index.css file.
I'll try that.
One more question. Is there any changes of the 2.1 between these two links?
- https://github.com/SimpleMachines/SMF2.1
- https://download.simplemachines.org/
Thanks.
Yes.
The GitHub version is a year ahead of the published version on download.simplemachines.org.
I think there are over 1000 changes...
Quote from: 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.
Quote from: Kindred on May 20, 2020, 11:47:42 AM
I think there are over 1000 changes...
(https://media.giphy.com/media/3ofSBfxkp3fPTgANB6/giphy.gif)
What am I doing all this time? :-\
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.
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.
Did you move them into the root folder before trying to run them, like I said?
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)
As we said, you can turn off minifying in the admin panel so you get the real index.css shown to you...
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.
Quote from: SychO on May 19, 2020, 05:23:31 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
^^^^^^^
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?
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.
Open out <head>, what do you see?
Here is head section:
(https://i.postimg.cc/VSQnw39n/Screenshot-16.jpg) (https://postimg.cc/VSQnw39n)
I see a style tag there... what's in that?
You mean about LightPortal?
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...
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
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.
Yes, I am using Curve Colorizer mod
Should I remove it?
...it's the thing putting inline styles in, so... maybe?
Lol. :D
* eating popcorn * :)
We'll get there eventually. ;)
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.
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.
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
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.
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
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.
Alberlast, sorry, but you are just plain wrong
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.
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.
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)
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)
Right click, inspect element...? I think it's a class that's added to the tr in JavaScript to be fair.
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
On the html tab, tick the pseudoclass for "hover" on one of the
trs so it will show you the :hover css attributes.
Quote from: Arantor on May 27, 2020, 08:07:05 AM
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.
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. :-\
/* 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%);
It might be on the td instead. Let me check.
Nope, it's the tr. Check for
/* Add some hover on table rows */
tr.windowbg:hover {
background: #e2eef8;
}
Quote from: 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
/* Add some hover on table rows */
tr.windowbg:hover {
background: #e2eef8;
}
Thank you ;)
It works!
Cheers! :)
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.
What I was referring is that there was no displayed any attribute with hover option for any <tr> tag. :)
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.
Is it possible to add hover color and in Message index and Board index tables?
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...
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.