ElkArte Community

Hello!

I would like to use a custom.css, like TE has shown here: Frozen Stars (http://www.ElkArte.net/community/index.php?topic=1103.msg8535#msg8535)

We prefer the styling of the Light-Theme much more than the BeSocial.
At the moment I am working with a copy of the Default to create a new theme.

I am changing two files, the index.css and the index_light.css.
How can I "put them together" in a single custom.css, wich could be a variant of the Light-Theme?

For more info on what @meetdilip said see http://www.elkarte.net/community/index.php?topic=1103.0

If it will work this way, I could use the modified index_light.css, adding there all the parts, wich I had to change in the index.css?

And afterwards I change the name from index_light.css to custom_light.css?

It would be better to ignore index.css and index_light.css while adding changes. If you plan to do, take a back up of original file. You can achieve your custom css needs by creating a custom_light.css in the directory for light variant.

I am not sure that I understood you properly, meetdilip, sorry. ( My english is too bad) O:-)

I would not change the two currend css-files, wich are in Default, they should stay as before.

But I would use a copy of the index_light.css (from my own theme), wich I had already started to change with different colors and so on. I need any "basic-file" to create a custom.css, because otherwise I would not know, how and where changes are neccesary.

This file will become the custom_light.css. And in this file I would add those parts, wich are in the index.css and should be changend.


@TE Hülfe! Hülfe! Kein Mensch kann verstehen, was ich da auf englisch radebreche. O:-) 

Ich bräuchte ja kein eigenes Theme mehr, wenn ich eine custom.css-Datei hätte. Könnte ich als Basis für die custom.css meine bereits bearbeitete index_light.css verwenden und dort auch alle weiteren Änderungen mit aufnehmen, die bei einem eigenen Theme üblicherweise in der index.css vorgenommen würden?

Oder ist das völliger Schmarren und die Vorgehensweise muß ganz anders sein?

If you have already started changing index_light.css, simply include that file in your theme. ie, add both modified files namely index_light.css and custom_light.css .

You can do that, but it's a fair amount of work and it's a bit pointless. The Light theme is itself a variant of default. That means it calls index.css anyway. You can't actually have a variant of a variant. Your new variant would actually be simply another variant of default.

Let's clear something up. Are you trying to make another variant of default? Or are you trying to make a new theme?

Why is it pointless, Antechinus?

There will be some changing of tiny parts in the index.css as well, if I create another styling of the Light theme. Not many, just a few.

If I can add those changes to my custom.css, they will be "safe" there, if there is an upgrade of the forum, because the custom.css will allways overwrite the index.css and the index_light.css, wich are in default.

Am I wrong with this?


Yes. But I think, this variant of a variant could be enough to create a complete different styling of the forum. I want to try it that way.

To create a custom.css I will use "my" index_light.css, delating all the parts wich I have not changed and adding a few parts from the index.css, wich I want to change.

I am not sure, if this will work.  ;) But I want to try it.

Yes, that will work. Use right click, inspect element to get a clear view of where styles are coming from.

No, that's fine. From the way your OP was worded I thought you wanted to get the whole of index.css and index_light.css and merge those into one file, before making your edits. That's what I thought was more work than needed, and a bit pointless.

Sorry, Antechinus,  :-[  my english is so poor. It is very difficult to me to write things exactly.

You should see my German. :D

Before I finished the theme we are using now, I made a try with a single file, with all the changes I wanted to do.

A custom.css would have been enough for our forum, if "our colors" would look nice together with white and gray, but they don't do. (And if we had not all those stupid smileys on our buttons) ;)

Therefore it was necessary to do a lot of changes in index.css and a few in jquery.sceditor.css (and also in the admin.css, which is less important to me).

I prefer warm and a bit darker colors, but it is not possible, to get a nice result with such colors in a single custom.css, because the colors of the editor and some parts in the profiles cannot be changed there. Also the lightgray shadows and some white lines in the background would look ugly, if they come together with darker colors. I will make another try with a custom.css, using colors which are a bit lighter for my other forum. (a green one)  Maybe it would be possible that way to use a custom.css.

I really like it to play with colors and I would like to create some other color-variants of our theme or would like to create some different custom.css-files.

Is there a possibility to include changing of colors which must be done in jquery.sceditor.css and admin.css in a custom.css?

Or would it be possible to get a "basic css-file" of the Light Theme without any colors and shadows in it, so that it can be filled with colors any way I would like them?

custom.css is the last loaded CSS-File, thus you can combine all your changes made to all the  CSS files (admin.css, index.css, jquery.sceditor.css) into a single file named custom_light.css. Since it's loaded last, the former stylings from other files (index.css, admin.css ...) can be redeclared and therefore will be overwritten.

Okay...I have to try this again...

I added some changes which should be done in jquery.sceditor.css in my index.light.css (wich should become the custom.css later) and it did not work. So I thought, those changes always have to be done in  jquery.sceditor.css.

Hm, I made some small changes in other CSS files too. Is there a solution?

It should be possible to add changes from other CSS-files there, as TE has written. The custom.css is the last file, which is loaded and it will overwrite the other files.

Yeah, I understood. But you said it's not working?

It was not working in the light-css. I did not change that file to a custom.css yet.