Skip to main content ↑ ↓
Topic: CSS Template (Read 11996 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

Re: CSS Template

Reply #30 –

ROFLMAO. Dead right. You have to have a certain amount of arrogance to do front end coding, otherwise you'll drive yourself nuts trying to please everyone. It's not humanly possible. Do something you like. If other people like it, good. If someone doesn't like it, that's their problem.
Last Edit: March 24, 2014, 02:00:54 am by Antechinus
Master of Expletives: Now with improved family f@&king friendliness! :D

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

Re: CSS Template

Reply #31 –

Quote from: scripple – Oh Aaron could you tell me what files need to be changed to create a new variant instead of modifying and existing one?
Take a look at the existing ones in the server (or install pack or whatever). If you copy one of the variant image folders and variant CSS folders and rename the copies to suit, you can then delete whatever CSS you don't want, or swap the existing files for blank ones and start from scratch.

To call the new variant you just have to add its name to the array at the top of index.template.php:

Code: [Select]
		// This is used for the color variants.
		'theme_variants' => array('light', 'besocial'),
Last Edit: March 24, 2014, 10:05:09 pm by Antechinus
Master of Expletives: Now with improved family f@&king friendliness! :D

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

Re: CSS Template

Reply #32 –

Cool.  Easy enough.  Thanks.

Re: CSS Template

Reply #33 –

Quote from: scripple – Oh Aaron could you tell me what files need to be changed to create a new variant instead of modifying and existing one?

Here is what I did ....

Go to Themes and Layouts>Manage and Install>Install a new theme:  Create a copy of default theme named:
Let us use ScrippleTheme; now click Install.

In the \themes folder you will now have a folder with your newly named theme. In that folder in the \css you will find two other folders named _besocial and _light. These two are the variants. What I do now is rename the _light folder to something else, to avoid confusion with the default  _light variant. Lets pick _scripple.

Now, in the _scripple folder you will see three .css file rename them to:

admin_scripple.css
index_scripple.css
rtl_scripple.css

Now go to the root of the ScrippleTheme and edit the index.template.php file. Around line 66 and 67 you will see this:

Code: [Select]
        // This is used for the color variants.

        'theme_variants' => array('light', 'besocial'),

Change it to look like this and save the file.

Code: [Select]
        // This is used for the color variants.

        'theme_variants' => array('scripple'),

Now, go to the ScrippleTheme directory root and create a sub dir\subdir. You want to create \languages\english. The same as you see in the Default theme. Into this newly created directory you want to copy from the \theme\default\languages\english  the file named ManageThemes.english.php into the ScrippleTheme\languages\english folder.

Once that is done, edit the ManageThemes.english.php file and add this at the bottom of the file and save the file.

Code: [Select]
// Strings for the variants

$txt['variant_scripple'] = 'Scripple Theme';


That should do it. Unless I forgot something.  :)  

Frankly, I think this will be a real challenge for the average user and the theme designer will have fits helping people install their themes.
Last Edit: March 24, 2014, 07:04:18 pm by AaronB

Re: CSS Template

Reply #34 –

That's for creating a whole new theme, not just a new variant of an existing theme. ;)

If a theme is only going to have one variant, it's hardly worth using the variant system at all.* You might as well just run the default index.css and tack your custom CSS onto the end of the file, which is what a lot of people tend to do anyway. Or, you could just use the custom.css file trick. Same meat, different gravy.

Installing new themes, once they're made, will be as simple as it has always been. The process hasn't changed since SMF 1.1.x. You're getting things mixed up.

*Important point here: the variant system is provided for cases where it is useful. It does not have to be used. It's still perfectly possible to run a  basic theme that only calls index.css, with no variant stuff at all.
Last Edit: March 24, 2014, 08:15:33 pm by Antechinus
Master of Expletives: Now with improved family f@&king friendliness! :D

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

Re: CSS Template

Reply #35 –

Yep, I sort of did the whole shebang there.  :D


For just the variant place the variant folder in the \default\css folder.

Rename the 3 .css files in the variant folder ( as shown above )

Make the change in index.template.php to identify the variant  ( as shown above )

If you want a 'proper name' for the variant to display then make the change in the default\languages\english\MangeThemes.english.php  ( as shown above )


While I still understand very little about this 'stuff', creating and installing a theme ala SMF will be the simplest way for someone to go.

Re: CSS Template

Reply #36 –

Which is what I told him.

My comments still apply. You should only be using the variant system if you actually want variants. If you don't want variants, don't use the variant system.
Master of Expletives: Now with improved family f@&king friendliness! :D

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

Re: CSS Template

Reply #37 –

Yes, you are correct and of course you insist on the last word. You may have the last word.

Re: CSS Template

Reply #38 –

Quote from: AaronB – I'm trying to have the last word while pretending I'm not.
Didn't work. :P
Master of Expletives: Now with improved family f@&king friendliness! :D

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

Re: CSS Template

Reply #39 –

Thanks for all the information from both of you.  I will be using the variants as I wish to have a light and a dark theme.

So I finally broke down and wrote a quick script to algorithmically convert all the non-gray color values.  The end results could use tuning (the one off odd colors like error one especially) but it's actually not too bad and lets me very quickly make major color shirts bringing all the gradients and such along.

Of course orange being a rather compressed color space before it turns to brown did require a bit of extra fiddling with the script but first look is definitely better than my manual attempt that consisted largely of replacing things with a single color.

Yes, I'm terrible. :P

Re: CSS Template

Reply #40 –

And went ahead and let if flip grays for the dark theme.  Definitely needs some tuning there like the now bright gradient but it's a great starting point to tune specific areas from.

I think this might work even better applied to a parts of the css at a time with some tweaks like setting a luminance to shift to for the buttons.

Re: CSS Template

Reply #41 –

Interesting approach. :) I sometimes open a screenshot of a theme in Photoshop and mess around with hue, saturation, etc to get ideas for variants. Usually they will still need some extra tweaking, but it's not a bad way to get ideas.
Master of Expletives: Now with improved family f@&king friendliness! :D

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

Re: CSS Template

Reply #42 –

Yeah I think this is a great quick way to get me in the ballpark of what I want.  Then I can make tweaks to the small elements that really need them in context of having things largely where I want them to be.

Also makes it very quick to explore whole color families for the general feel.