Skip to main content ↑ ↓
Is it possible to replicate look created using DARK READER on Elk.. Started by darrenjcleaver · · Read 6757 times 0 Members and 1 Guest are viewing this topic. previous topic - next topic

Is it possible to replicate look created using DARK READER on Elk..

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

At the moment, I have not made any theme changes in the settings. That said, I am currently using the Browser extension called DARK READER to create a look that I find appealing to the eye.
 I would like to get any feedback on how I might be able to replicate this look that DARK READER on my install or be told dont even bother.  Any tips on how and if this is possible would be great!

My IT skill set is very limited, and I suspect my wish to replicate this look using DARK-READER is probably well beyond my skill set.

My second question, if the replication of the DARK READER look not viable. I have been looking at https://themes.elkarte.net/ and have found a theme is one that I do also like the look of. But I am unsure if my version of ElkArte and setup etc would allow me to use this theme ? Plus I would like to make a few tweaks to it.

I have read over some of the previous threads on this website on theme development etc. However based on my limited skill set and level of understanding so far. I was hoping someone might be able to give me a link or some very simple advise on where to maybe get started without breaking things.

Any advise would be really appreciated.
Kindest Regards
Darren J Cleaver
Darren J Cleaver

Re: Is it possible to replicate look created using DARK READER on Elk..

Reply #1 –

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.

Re: Is it possible to replicate look created using DARK READER on Elk..

Reply #2 –

Quote from: darrenjcleaver – At the moment, I have not made any theme changes in the settings. That said, I am currently using the Browser extension called DARK READER to create a look that I find appealing to the eye.
 I would like to get any feedback on how I might be able to replicate this look that DARK READER on my install or be told dont even bother.  Any tips on how and if this is possible would be great!
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.
Master of Expletives: Now with improved family f@&king friendliness! :D

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

Re: Is it possible to replicate look created using DARK READER on Elk..

Reply #3 –

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
Darren J Cleaver

Re: Is it possible to replicate look created using DARK READER on Elk..

Reply #4 –

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 !
Darren J Cleaver

Re: Is it possible to replicate look created using DARK READER on Elk..

Reply #5 –

Quote from: Antechinus –
Quote from: darrenjcleaver – At the moment, I have not made any theme changes in the settings. That said, I am currently using the Browser extension called DARK READER to create a look that I find appealing to the eye.
 I would like to get any feedback on how I might be able to replicate this look that DARK READER on my install or be told dont even bother.  Any tips on how and if this is possible would be great!
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 :)
Darren J Cleaver

Re: Is it possible to replicate look created using DARK READER on Elk..

Reply #6 –

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.

You'll probably also want a handy color picker, like Colorzilla or similar.
You can find charts of colours here if you want: https://www.color-hex.com/
Just drop any colour hex code into the search box at upper left, and it'll give you a stack of info.
Master of Expletives: Now with improved family f@&king friendliness! :D

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

Re: Is it possible to replicate look created using DARK READER on Elk..

Reply #7 –

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.

You'll probably also want a handy color picker, like Colorzilla or similar.
You can find charts of colours here if you want: https://www.color-hex.com/
Just drop any colour hex code into the search box at upper left, and it'll give you a stack of info.

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

Re: Is it possible to replicate look created using DARK READER on Elk..

Reply #8 –

Have you thought about using Spuds' Silence theme as a base? That's probably the easiest way for you to start, since it's already dark. You could just adjust bits to suit yourself, as you want to, but it'd work straight away.

Another thing I find handy is a browser extension like Stylus: https://add0n.com/stylus.html

This lets you drop in custom CSS as an override, which makes it easy to try out ideas without having to worry about FTP/cPanel, etc for the file changes. You can mess around with ideas quickly and easily, then incorporate them into the actual theme files once you're satisfied with the result.

You can do this with the standard document inspector too, but the advantage of Stylus is that you can save the custom code as a named style. This means you can work on it as it suits you, without losing anything. You can also run several different styles on the same base theme, and just switch them on and off when you want to. I do this quite a lot for trying out different ideas on test sites.
Master of Expletives: Now with improved family f@&king friendliness! :D

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

Re: Is it possible to replicate look created using DARK READER on Elk..

Reply #9 –

Quote from: Antechinus – Have you thought about using Spuds' Silence theme as a base? That's probably the easiest way for you to start, since it's already dark. You could just adjust bits to suit yourself, as you want to, but it'd work straight away.

Another thing I find handy is a browser extension like Stylus: https://add0n.com/stylus.html

This lets you drop in custom CSS as an override, which makes it easy to try out ideas without having to worry about FTP/cPanel, etc for the file changes. You can mess around with ideas quickly and easily, then incorporate them into the actual theme files once you're satisfied with the result.

You can do this with the standard document inspector too, but the advantage of Stylus is that you can save the custom code as a named style. This means you can work on it as it suits you, without losing anything. You can also run several different styles on the same base theme, and just switch them on and off when you want to. I do this quite a lot for trying out different ideas on test sites.


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.

Thanks !
Darren J Cleaver