ElkArte Community

Extending Elk => Custom Themes => Topic started by: TE on February 24, 2014, 08:59:26 am

Title: [custom.css] Elk frozen stars
Post by: TE on February 24, 2014, 08:59:26 am
Yet antoher example to show you the styling power of Elk.

With PR #1409 it is possible to place a custom css file inside the variant in order to "overwrite" parts of the default files. That file is not part of Elk itself, therefore you don't have to worry about upgrading your Elk (it won't be overwritten).

Here's a quickly made example called "frozen stars", you can upload that file in the variant folder ( made for the "Be Social!" variant) and your Elk will change it's styling. A screenshot and the related file is attached.

Note: The pull request was made after Beta2 release, therefore it does not work with a B2.




Title: Re: [custom.css] Elk frozen stars
Post by: Dr. Deejay on February 24, 2014, 10:13:38 am
Nice, it looks great. :)
Title: Re: [custom.css] Elk frozen stars
Post by: scripple on February 24, 2014, 03:58:19 pm
It's nice how you're setting Elk up to be easy to style.  It will be great having it persist across updates.
Title: Re: [custom.css] Elk frozen stars
Post by: Antechinus on March 24, 2014, 11:50:26 pm
Hey to make it even easier you should code Elk so it can have a customcustom.css to override custom.css too. :D
Title: Re: [custom.css] Elk frozen stars
Post by: Lars on January 04, 2015, 01:22:36 pm
Hi TE,

please check the download link here: http://themes.elkarte.net/2015/01/Frozen%20Stars (http://themes.elkarte.net/2015/01/Frozen%20Stars)
At the moment it only leads to the code view of a page.
Title: Re: [custom.css] Elk frozen stars
Post by: radu81 on January 04, 2015, 01:32:57 pm
Thank TE, I used this on my forum skodaclub.it. I did just some small modifications
Title: Re: [custom.css] Elk frozen stars
Post by: TE on January 05, 2015, 12:02:35 am
Hi TE,

please check the download link here: http://themes.elkarte.net/2015/01/Frozen%20Stars (http://themes.elkarte.net/2015/01/Frozen%20Stars)
At the moment it only leads to the code view of a page.
Yep, I know.. that's intended.. there's just this single file which needs to be downloaded (right click - then save as ..)
Thank TE, I used this on my forum skodaclub.it. I did just some small modifications
:)  :)  :)
Title: Re: [custom.css] Elk frozen stars
Post by: Lars on January 05, 2015, 08:28:51 pm
Yep, I know.. that's intended.. there's just this single file which needs to be downloaded (right click - then save as ..)

Oh. ;)  I saw that it is a custom theme but I didn't know that this one page is enough.
Title: Re: [custom.css] Elk frozen stars
Post by: nwsw on January 24, 2015, 11:40:32 pm
I just want to say that this is a great feature. Very much appreciated...
Title: Re: [custom.css] Elk frozen stars
Post by: cjazz on April 11, 2015, 03:41:30 pm
I have just installed a new Elkarte board and I do not have a folder named "css_besocial" in the following location  themes\default\css_besocial\, what am I missing?
Title: Re: [custom.css] Elk frozen stars
Post by: emanuele on April 11, 2015, 04:27:30 pm
It's a small typo in the description.
/me blames @Spuds :P

It's /css/_besocial (see the slash between "css" and "_besocial"). ;)
Title: Re: [custom.css] Elk frozen stars
Post by: Spuds on April 11, 2015, 04:35:17 pm
LOL ... typing never was my strong point, nor spelling, or grammar really :P
Title: Re: [custom.css] Elk frozen stars
Post by: cjazz on April 11, 2015, 08:29:11 pm
I have uploaded the "custom_besocial.css" file into themes/default/css/_besocial folder and there is no change to the forum's template, which remains the same layout as the default template. Any idea what I am doing wrong?
Title: Re: [custom.css] Elk frozen stars
Post by: emanuele on April 11, 2015, 08:52:35 pm
Is the forum accessible?
I just tried on my local testing forum and works fine (but you can never know what happens on my testing forums LOL).

Just to be sure, you are using the BeSocial! variant? (It's not the default one, that's why I'm asking.)
Title: Re: [custom.css] Elk frozen stars
Post by: cjazz on April 11, 2015, 09:32:12 pm
Forum is accessible.
Not sure what you mean by "you are using the BeSocial! variant"?  There is only one default template available on the new installation, which is the Elkarte Default Theme.  Sorry if these questions sound a bit stupid, but this setup is very different from my SMF board..

Just to be sure, you are using the BeSocial! variant? (It's not the default one, that's why I'm asking.)

Update:
I can now get the Elkeare Be Social theme to work by selecting this theme from "My Account/Look and Layout" where there is an option to change the Current Theme to the Elkeart Be Social theme .  However, the problem is that The Elkeart Be Social theme cannot be set to be the default theme for all users through the administration section/Theme Management and Options.
Title: Re: [custom.css] Elk frozen stars
Post by: emanuele on April 11, 2015, 10:18:01 pm
Ahh... then you are probably using the Light variant.
No worries, we are here to help out (as well as coding :P) with any issue and try to clear any doubt. ;D

Okay, let me explain: each theme can come in different variants (of colors in the default theme) and you can see the variants for example in your profile at:
http://www.elkarte.net/community/index.php?action=theme;sa=pick
you see the dropdown with "Select Variant".
On this forum, this setting should have value "ElkArte Be Social!", on your it should have "ElkArte Light".

The same goes for the admin panel, when you go to admin > configuration > current theme, in the "Theme Variants" section you will see a dropdown that allows you to pick from Light and Be Social.

Hope that helps, if not feel free to ask for more details. ;)
Title: Re: [custom.css] Elk frozen stars
Post by: radu81 on April 11, 2015, 10:58:23 pm
However, the problem is that The Elkeart Be Social theme cannot be set to be the default theme for all users through the administration section/Theme Management and Options.
use this link on your forum to set the template for user and guests
/index.php?action=admin;area=theme;sa=reset
Title: Re: [custom.css] Elk frozen stars
Post by: cjazz on December 12, 2018, 05:46:05 pm
I have decided to have another go of using the Elkarte board instead of my current SMF board. I am still having problems setting up the frozen stars theme. Everything is indicating that the default board should be Elkarte Be Social Theme, which also shows in the preview. But the board remains in the default theme.  Any ideas please?
Title: Re: [custom.css] Elk frozen stars
Post by: Spuds on December 13, 2018, 02:35:37 pm
Are you trying this on ElkArte 1.1 or the older 1.0 version? 

FYI that preview image is just a screen capture thumbnail of whatever the theme designer chose, its not really a preview :\
Title: Re: [custom.css] Elk frozen stars
Post by: Spuds on December 13, 2018, 03:19:11 pm
For 1.1, here is the file to use., place it in your themes->default->css->_besocial directory. 

Also for 1.1 and this is *very* important, you will need to edit the index_template.php which is in your themes->default directory.  In that file find at around line 53
Code: [Select]
		'require_font-awesome' => false,
change the false to true
Code: [Select]
		'require_font-awesome' => true,
Title: Re: [custom.css] Elk frozen stars
Post by: cjazz on December 16, 2018, 03:01:43 pm
I have now managed to get the be-social/frozen stars template operational :)  Next problem I cannot get the header logo to display correctly, the only option that displays the logo is the "Only logo" option which places the logo in the centre of the header. If I select the "Logo on the left option" (the option that I require) the logo does not display.  Any ideas please?
Title: Re: [custom.css] Elk frozen stars
Post by: radu81 on December 16, 2018, 07:25:30 pm
I guess in custom_besocial.css you need to remove these lines:
Code: [Select]
#logo {
 display: none;
}

if it's not working set the logo to left then post a link to your forum
Title: Re: [custom.css] Elk frozen stars
Post by: cjazz on December 16, 2018, 08:45:40 pm
Seems to be working now.  Looks like it was a cache issue with Google Chrome.