Skip to main content ↑ ↓
Topic: How to create a custom.css? (Read 4765 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

How to create a custom.css?

Hello!

I would like to use a custom.css, like TE has shown here: Frozen Stars

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?
Last Edit: April 09, 2016, 08:02:11 am by Ruth

Re: How to create a custom.css?

Reply #1 –

I guess you can create a custom css file in the variant you wish to modify. After finished select the variant and you will have the modified theme. As for combining index.css and it's variant extension, I guess custom_light.css will be the one that will be fetched first overriding the entries in index.css ( if any ).

This is just what I feel will happen. Try and see.

Re: How to create a custom.css?

Reply #3 –

Quote from: meetdilip – I guess custom_light.css will be the one that will be fetched first over riding the entries in index.css ( if any ).

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?

Re: How to create a custom.css?

Reply #4 –

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.

Re: How to create a custom.css?

Reply #5 –

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?

Re: How to create a custom.css?

Reply #6 –

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 .

Re: How to create a custom.css?

Reply #7 –

Quote from: Ruth – Hello!

I would like to use a custom.css, like TE has shown here: Frozen Stars

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?
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?
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: How to create a custom.css?

Reply #8 –

 emanuele feels there are so many options people are becoming confused. xD

A couple of points for thought.
1) When do you need to create a new theme? When you want to change the HTML mark up for any reason.
2) When do you need to create a new variant? When you want to change for example the colors or few "details" only touching CSS and at worst images, but keeping everything "self-contained" in its own directory, letting your members to pick another variant if they want.
3) When you may want to create a custom.css? When you are too lazy (or just don't want to be bothered by having) to create an entire new variant and you only need to tweak few details with CSS (or some image) without the need to let your members pick another variant.

The biggest and most tangible difference between create a variant and use a custom.css (or custom_{variant}.css) is that: creating a variant allows you to maintain the original one and give your members the possibility to use it, using a custom.css "forces" your changes over your users that will be able to use just that custom theme/variant.

I don't know if this will help you or make you even more confused. If the latter, sorry, just ignore everything I wrote. ;)
Bugs creator.
Features destroyer.
Template killer.

Re: How to create a custom.css?

Reply #9 –

Thank you all ... and sorry for my bad english.  O:-) It is not easy for me to ask and explain in a way, that I will be understood.

TE wrote a PM to me (in german) ;) , wich has answerd my question.

I think, I also want to change very few things (HTML-Stuff), wich are not possible to be done in a CSS-file, so for my first forum a new theme, based on the default would be much better.

But I have got another forum, in wich a custom.css could be a very good opinion, instead of creating a new theme.

I like the idea, that the styling of a forum needs not completely  to be done again, when there is an upgrade. Its a very clever solution, when you just want to change some colors and other things, wich can be made in a CSS-File.

Re: How to create a custom.css?

Reply #10 –

Quote from: Antechinus – 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.

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?

Quote from: Antechinus – Your new variant would actually be simply another variant of default.

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.

Re: How to create a custom.css?

Reply #11 –

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

Re: How to create a custom.css?

Reply #12 –

Quote from: Ruth –
Quote from: Antechinus – 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.

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?
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.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: How to create a custom.css?

Reply #13 –

Quote from: Antechinus – From the way your OP was worded...

Sorry, Antechinus,  :-[  my english is so poor. It is very difficult to me to write things exactly.
Last Edit: April 10, 2016, 04:11:34 pm by Ruth

Re: How to create a custom.css?

Reply #14 –

You should see my German. :D
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P