Elk Development => Theme development => Topic started by: darrenjcleaver on April 09, 2020, 12:40:59 pm
Title: Is it possible to replicate look created using DARK READER on Elk..
Post by: darrenjcleaver on April 09, 2020, 12:40:59 pm
Hi all
I am fairly new to ElkArte and had a few questions about themes and changing the look of the forum I am building.
Version Information: This version: ElkArte 1.1.6 (more detailed) Current version: 1.1.6 GD version: bundled (2.1.0 compatible) MySQL version: 10.2.31-MariaDB-cll-lve PHP: 7.1.33 (litespeed) Server version: Apache
Title: Re: Is it possible to replicate look created using DARK READER on Elk..
Post by: badmonkey on April 09, 2020, 01:52:37 pm
Hi Darren. Theme customization is easy. Well, perhaps that's a relative term. There are not settings to accomplish changes. Changes may he made manually in the themes/css folder by creating a file named custom.css, and adding the desired css rules. Anything added to this file will be evaluated last, therefore overriding any corresponding rules in the original css files. This is a nice feature! Subsequent software version updates will not overwrite your customizations as they would if altering the original files.
Obtaining your version is easy. Scroll to the bottom of your forum. You'll see Powered by Elkarte x.x.x, where x.x.x is the version number.
Title: Re: Is it possible to replicate look created using DARK READER on Elk..
Post by: Antechinus on April 10, 2020, 06:21:39 pm
It would certainly be possible, but obviously it would require some knowledge of how to use CSS.
I assume that add-on is only changing colours, which is not particularly difficult. These are already done separately in Elkarte, with the positioning and dimensions being handled in another file. The CSS files also have a good indexing system, so it's pretty easy to see where you are up to.
The easiest way of starting is probably to take a copy of the index_besocial.css or index_light.css, depending on which variant you want to start with. Rename the copy to custom.css, and place it directly in the theme's css folder. You can then edit this files for colours while leaving the default coding alone.
Title: Re: Is it possible to replicate look created using DARK READER on Elk..
Post by: darrenjcleaver on April 22, 2020, 12:51:52 pm
Hi
Thanks for the reply. I know next to nothing about CSS. Moreover I had a recent issue with some bad script from a source I did not think to question and created XSS-cross-script issue. No I think for now learning how to basically just modify some of the colours in the default theme would be a great place for me to start.
Is it possible I could post the theme script here and get some thoughts on how I might make a couple of small changes mainly just to colours.
Thanks for the help!
Best wises
Title: Re: Is it possible to replicate look created using DARK READER on Elk..
Post by: darrenjcleaver on April 22, 2020, 12:59:29 pm
Quote from: badmonkey – Hi Darren. Theme customization is easy. Well, perhaps that's a relative term. There are not settings to accomplish changes. Changes may he made manually in the themes/css folder by creating a file named custom.css, and adding the desired css rules. Anything added to this file will be evaluated last, therefore overriding any corresponding rules in the original css files. This is a nice feature! Subsequent software version updates will not overwrite your customizations as they would if altering the original files.
Obtaining your version is easy. Scroll to the bottom of your forum. You'll see Powered by Elkarte x.x.x, where x.x.x is the version number.
Thanks Bad Monkey ! Great name. Yes the version is Powered by ElkArte 1.1.6 . I would need more understanding how to do this. *creating a file named custom.css *adding the desired css rules ( I know nothing really about CSS )
A place to start . Thanks !
Title: Re: Is it possible to replicate look created using DARK READER on Elk..
Post by: darrenjcleaver on April 22, 2020, 01:52:21 pm
It would certainly be possible, but obviously it would require some knowledge of how to use CSS.
I assume that add-on is only changing colours, which is not particularly difficult. These are already done separately in Elkarte, with the positioning and dimensions being handled in another file. The CSS files also have a good indexing system, so it's pretty easy to see where you are up to.
The easiest way of starting is probably to take a copy of the index_besocial.css or index_light.css, depending on which variant you want to start with. Rename the copy to custom.css, and place it directly in the theme's css folder. You can then edit this files for colours while leaving the default coding alone.
Thanks for the info . CSS learning is on the to do list :)
Title: Re: Is it possible to replicate look created using DARK READER on Elk..
Post by: Antechinus on April 22, 2020, 07:22:10 pm
Do you know how to use a document inspector? They work the same in just about any browser. Instructions for Firefox are here: https://developer.mozilla.org/en-US/docs/Tools The only panel you have to worry about for this exercise is the Page Inspector (which happens to be the default anyway). You can use this to get classes and ID's for anything you want to change. It will tell you which CSS is running live.
Title: Re: Is it possible to replicate look created using DARK READER on Elk..
Post by: darrenjcleaver on April 23, 2020, 12:35:23 am
Quote from: Antechinus – Do you know how to use a document inspector? They work the same in just about any browser. Instructions for Firefox are here: https://developer.mozilla.org/en-US/docs/Tools The only panel you have to worry about for this exercise is the Page Inspector (which happens to be the default anyway). You can use this to get classes and ID's for anything you want to change. It will tell you which CSS is running live.
Thanks Antechinus. I am a little familiar with using the browser options of [view page source] and inspect element. Until I am more up to date on CSS, I am not so keen to make to many changes. I was thinking along the same line of thought, if I could view the page code I could work out what is creating the default back-ground color white and the main change I really want to make at this stage to to make the back-ground black.
Screen shots attached of this forum default and one with using the extension. The colour chart and hex info also very helpful. I am happy to share the code here if you had any advise. Might save me a few days :)
Thanks all for the great advise and help ! Thanks
Title: Re: Is it possible to replicate look created using DARK READER on Elk..
Post by: Antechinus on April 23, 2020, 03:19:23 am
Hi. Antechinus. Thanks for the info. I will look into that. In regards to your comment " since it's already dark ". Yes and no. It is Dark when using Dark Reader the site is Dark. But I learnt a hard lesson recently and installed a bad script which created some XSS cross-script errors and caused some large issues. Plus Dark Reader not long back was hacked for a lack of better words. There is something about it on their website.
I need to understand what scripts do before I install anything I am unsure of.
Ahh. I see what your saying, the Silence theme is already Dark. Yes I actually did try that, but it created some strange issues with how the content was displayed. I do not have a screen shot of that.
I think just making a change to current theme might be the way to go. But thanks very much, some very helpful information.