Skip to main content ↑ ↓
Topic: Making a Theme (Read 4374 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

Making a Theme

Okay, I'm attempting to make a theme, based off the Elk default, using the Be Social variant.

However, I'm at a loss on how to disable the variants, and make the theme be just the one, without a choice.

Also, how would I set the header part, to not be a choice, since I'm recoding the header area?
Quote Header layout: (This setting allows you to select one of three layouts for the header.)

Default:
    The logo is placed on the right and the name of the community on the left.
Only logo:
    Only the logo is displayed, in a centered position.
Logo on the left:
    Similar to Default, but with logo and name inverted (i.e. name on the right, logo on the left).

My theme would basically be "Only Logo" selection.

Re: Making a Theme

Reply #1 –

Regarding variants:
remove in index.template.php
Code: [Select]
// This is used for the color variants.
'theme_variants' => array('light', 'besocial'),
and merge the besocial css files and images to the parent folders.
Thorsten "TE" Eurich
------------------------

Re: Making a Theme

Reply #2 –

@TE
The besocial css file has some of the same parts as main css file, so,  I'll have to edit them both, and replace the reg with the besocial css file's contents. That, can be done via WinMerge, right?

Re: Making a Theme

Reply #3 –

Not really @Burke Knight . You dont really need to adjust index.css in main default css. Enough by doing it in the variant css. It will ovverride the main default css.

I already proposed so that other than adding theme, we should be able to add only variant in the future. I believe this has been tracked, right @emanuele ?

Re: Making a Theme

Reply #4 –

@ahrasis
That would be good, if all I was doing, was a variation.
However, I'm doing a whole complete theme.
Edited files, and added features in theme.
But, I think there's some css in the main, that also needs to be kept, that is not changed with the _besocial variant.
That's why I asked TE on that.

When started to make theme, I did via Admin, to make copy of default theme.
That added main and variant.
I'd like to edit using the _bsocial, so yes, I'd need that css more than the default.

Re: Making a Theme

Reply #5 –

If I got it right, probably a little explanation of how the theme is organized could clarify a bit more.
The "main" css (index.css) contains the structure of the theme (i.e. shapes, positions, sizes, etc.), the variants css (e.g. index_besocial.css) contain the "aesthetic" part of the theme (colors, shadows, gradients, etc.... and a little positioning in some cases).

If you remove index.css you'll get a nicely colored mess.
If you remove index_besocia.css you'll get a boring (mostly black and white) but structured page.

If you are brave enough you can remove one or both of the files and recreate it, otherwise if you want to merge them you have two ways: 1) the hard one, where you pick each tiny bit from the variant css and put it in the right spot in index.css, or 2) the easy one where you take index_besocial.css and put everything at the end of index.css.

Does it make sense?
Bugs creator.
Features destroyer.
Template killer.

Re: Making a Theme

Reply #6 –

That's right... I had forgotten the golden rule of CSS...

The lower it is, the more priority it is.

Thanks, @emanuele for reminding me! :)

Re: Making a Theme

Reply #7 –

Site Slogan....

I know it replaces the ElkArte logo, but what I'd like to know, is how to replace the default image if that setting is not filled.
I made a logo for my theme, which also includes logo_elk.png (Wider with my theme logo to left) and would like to change the call to use that, with it's file name, instead of uploading the image with the same logo_elk.png name.

Re: Making a Theme

Reply #8 –

Okay, I'm remaking the header, as stated above.
We have worked out this code, but if no image is set, it shows the Elk Logo, instead of the forum name, as the if is set to show:

Code: [Select]
			<div id="logobox">'; if (!empty($context['header_logo_url_html_safe'])) 
			{
			  if (isset($context['header_logo_url_html_safe']))
			echo '
			    <a href="', $scripturl, '"><img id="logo" src="', $context['header_logo_url_html_safe'], '" alt="', $context['forum_name_html_safe'], '" title="', $context['forum_name_html_safe'], '" /></a>';

			 
 			elseif (empty($context['header_logo_url_html_safe']))
 			
 			echo '
   			<h1 id="forumtitle">
    			<a href="', $scripturl, '">', $context['forum_name'], '</a>
   			</h1>';
 			}
	echo '
		</div>', empty($settings['site_slogan']) ? '' : '';
			  echo '
			    <div id="siteslogan" class="bluelkslogan">' . $settings['site_slogan'] . '<br /></div>', '
			   </div>';

What I want, is to show the set image, if one is set, then the slogan below it.
If no image, then the forum name.
However, the ElkArte logo keeps popping in, when there's no set image in Current Theme.

Re: Making a Theme

Reply #9 –

@emanuele or @Spuds or @TE
Any ideas on how to get the code above, to do what I want?

What I want, is to show the set image, if one is set, then the slogan below it.
If no image, then the forum name.
However, the ElkArte logo keeps popping in, when there's no set image in Current Theme.

The slogan is working fine, and appears as I want it.
It's just the image/forum title part that is not working as should.
It appears that it's not doing the elseif the way it should.

Re: Making a Theme

Reply #10 –

Quote from: Burke Knight – I know it replaces the ElkArte logo, but what I'd like to know, is how to replace the default image if that setting is not filled.
I made a logo for my theme, which also includes logo_elk.png (Wider with my theme logo to left) and would like to change the call to use that, with it's file name, instead of uploading the image with the same logo_elk.png name.
Replace the file named logo_elk.png if the way. There is nothing wrong with it.

Code: [Select]
<div id="logobox">';
			if (!empty($context['header_logo_url_html_safe'])) 
			{
				echo '
			<h1 id="forumtitle">
			    <a href="', $scripturl, '"><img id="logo" src="', $context['header_logo_url_html_safe'], '" alt="', $context['forum_name_html_safe'], '" title="', $context['forum_name_html_safe'], '" /></a>
			</h1>';
			}
			else
			{
				echo '
			<h1 id="forumtitle">
				<a href="', $scripturl, '">', $context['forum_name'], '</a>
			</h1>';
			}
	echo '
		</div>', empty($settings['site_slogan']) ? '' : '';
			  echo '
			    <div id="siteslogan" class="bluelkslogan">' . $settings['site_slogan'] . '<br /></div>', '
			   </div>';

If I got it right.
Bugs creator.
Features destroyer.
Template killer.

Re: Making a Theme

Reply #11 –

@emanuele

Thank you, but now, instead of it showing the logo, when one is not set, I'd like to have it just show the forum name.

If logo box in current theme is set: Shows the image the admin put in.
If logo box is empty: Shows forum title.
Slogan: Shows if text entered, hidden if not.

Re: Making a Theme

Reply #12 –

It really looks like what is written in the code...
Bugs creator.
Features destroyer.
Template killer.

Re: Making a Theme

Reply #13 –

Yet, for some odd reason, it's not doing the elseif
It just does the Elk logo, instead of displaying the forum title, if no image is inserted into the field.
And yes, I am sure Settings.template.php is set correctly. :)

Re: Making a Theme

Reply #14 –

Ah yeah.
Instead of:
Code: [Select]
if (!empty($context['header_logo_url_html_safe']))
use:
Code: [Select]
if (!empty($settings['header_logo_url']))
Bugs creator.
Features destroyer.
Template killer.