News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

Main Menu

[Preview]My first SMF theme since 2.1.0 hit [Orangey Theme]

Started by TwitchisMental, February 12, 2022, 04:09:12 PM

Previous topic - Next topic

TwitchisMental

Well I have started on a new theme in celebration of 2.1.0 being released. I figured since I was so anti orange with my Bend SMF theme, I would go pro orange with this theme.

I am just getting my base colors picked out and doodling with Gimp.

This will also be the first SMF theme that I make using variables in my CSS.(Gotta get with the times right haha)

Here is an early preview -

You cannot view this attachment.
My SMF Themes - Remixed Breadcrumb Tutorial
Need a Custom SMF Theme? Send me a message.

Mick.

Lol I'm behind in times. I don't use variables on my themes but I use it on my site. ;)

TwitchisMental

Quote from: Mick. on February 12, 2022, 04:29:55 PMLol I'm behind in times. I don't use variables on my themes but I use it on my site. ;)

Better late than never right :) ?
My SMF Themes - Remixed Breadcrumb Tutorial
Need a Custom SMF Theme? Send me a message.

Mick.

I use variables for dark mode. I think one of the next themes i roll out will use variables for a multi color option ;)


Diego Andrés

I made a ******ty frankenstein of a theme because of @SychO and @TwitchisMental and I'm afraid of uploading it  :laugh:

Edit: I forgot to mention, nice progress on the colors it reminds me of some good old themes from the past.

SMF Tricks - Free & Premium Responsive Themes for SMF.

Antechinus

The Theme Site needs a theme named ******ty Frankenstein. :D :D :D

TwitchisMental

My SMF Themes - Remixed Breadcrumb Tutorial
Need a Custom SMF Theme? Send me a message.

TwitchisMental

I am starting to make some progress on the layout.

You cannot view this attachment.
My SMF Themes - Remixed Breadcrumb Tutorial
Need a Custom SMF Theme? Send me a message.

TwitchisMental

I have another small update for this theme. Changed the search bar placement, added logo, added font-awesome icons, and fixed up the board stats how I like them lol.

You cannot view this attachment.
My SMF Themes - Remixed Breadcrumb Tutorial
Need a Custom SMF Theme? Send me a message.

TwitchisMental

I keep tinkering around with the board index hehehehe.. Also changed up some colors for the menus. Added social icons.


You cannot view this attachment.

You cannot view this attachment.
My SMF Themes - Remixed Breadcrumb Tutorial
Need a Custom SMF Theme? Send me a message.

TwitchisMental

#11
So I have been trying to add an optional part of the footer. This optional part of would just be a set of lists with customizable links. (Much like the feather theme) I have a screenshot attached aswell. I only want this to show when the option is enabled under the theme settings.

Screen Shot -

 You cannot view this attachment.

I figured this would be pretty easy, but it seems I am missing something lol.

    // Footer Top Custom Links
if (!empty($settings['footer_menu_enabled']))
{
    echo '
   
    <div class="footer_top">
        <div class="footer_top_inner_wrap">
        <div class="row">
       
       
        <div class="column">
        <div class="footer_menu">
        <ul>
            <li><h3>Lorem Ispum</h3></li>
            <li><a href="http://google.com">Lorem Ipsum</a></li>
            <li><a href="http://google.com">Lorem Ipsum</a></li>
            <li><a href="http://google.com">Lorem Ipsum</a></li>
        </ul>
        </div>
        </div>
       
        <div class="column">
        <div class="footer_menu">
        <ul>
            <li><h3>Lorem Ipsum</h3></li>
            <li><a href="http://google.com">Lorem Ipsum</a></li>
            <li><a href="http://google.com">Lorem Ipsum</a></li>
            <li><a href="http://google.com">Lorem Ipsum</a></li>
        </ul>
        </div>
        </div>
       
        <div class="column">
        <div class="footer_menu">
        <ul>
            <li><h3>Lorem Ipsum</h3></li>
            <li><a href="http://google.com">Lorem Ipsum</a></li>
            <li><a href="http://google.com">Lorem Ipsum</a></li>
            <li><a href="http://google.com">Lorem Ipsum</a></li>
        </ul>
        </div>
        </div>
       
        <div class="column">
        <div class="footer_menu">
        <ul>
            <li><h3>Lorem Ipsum</h3></li>
            <li><a href="http://google.com">Lorem Ipsum</a></li>
            <li><a href="http://google.com">Lorem Ipsum</a></li>
            <li><a href="http://google.com">Lorem Ipsum</a></li>
        </ul>
        </div>
        </div>

        </div>
        </div>
    </div>';
   
}

I have the settings made in the settings.template.php. I have disabled and re-enabled the option in theme settings... yet it will now show up..  I cleared cache... I am 100% it is something basic that I am just overlooking.  Any help would be appreciated XD.
My SMF Themes - Remixed Breadcrumb Tutorial
Need a Custom SMF Theme? Send me a message.

Antechinus

I have had problems before when trying to add settings to an existing theme that is already installed. I would try copying what you have to a new theme zip, ditch the currently installed one, then install again from the zip. Might work.

TwitchisMental

Quote from: Antechinus on February 19, 2022, 05:48:36 PMI have had problems before when trying to add settings to an existing theme that is already installed. I would try copying what you have to a new theme zip, ditch the currently installed one, then install again from the zip. Might work.
Worth a try .

Edit: No go :(..
My SMF Themes - Remixed Breadcrumb Tutorial
Need a Custom SMF Theme? Send me a message.

Mick.

Make sure $modSettings is in globals

function template_body_below()
{
global $context, $txt, $settings, $scripturl, $modSettings;

TwitchisMental

Quote from: Mick. on February 19, 2022, 05:52:44 PMMake sure $modSettings is in globals

function template_body_below()
{
global $context, $txt, $settings, $scripturl, $modSettings;
This is what I have in mine aswell. I should note that the social icons are working just fine.
My SMF Themes - Remixed Breadcrumb Tutorial
Need a Custom SMF Theme? Send me a message.

Mick.

Did you add the settings in Settings.template.php correctly? Typos?

TwitchisMental

Quote from: Mick. on February 19, 2022, 05:58:30 PMDid you add the settings in Settings.template.php correctly? Typos?
Doesn't hurt to triple check with my bad eyes lol.

Settings.template.php
'',
        array(
'id' => 'footer_menu_enabled',
'label' => $txt['footer_menu_enabled'],
'description' => $txt['footer_menu_enabled_desc'],
        ),
 
'',

My SMF Themes - Remixed Breadcrumb Tutorial
Need a Custom SMF Theme? Send me a message.

TwitchisMental

Quote from: TwitchisMental on February 19, 2022, 06:03:05 PM
Quote from: Mick. on February 19, 2022, 05:58:30 PMDid you add the settings in Settings.template.php correctly? Typos?
Doesn't hurt to triple check with my bad eyes lol.

Settings.template.php
'',
        array(
'id' => 'footer_menu_enabled',
'label' => $txt['footer_menu_enabled'],
'description' => $txt['footer_menu_enabled_desc'],
        ),
 
'',


I found the issue..

I was looking at the wrong one eariler...

Had this at html body below -
function template_body_below()
{
global $context, $txt, $scripturl, $modSettings;


changed to

function template_body_below()
{
global $context, $txt, $settings, $scripturl, $modSettings;


BIG DERP on me... Thank you Mick. XD.
My SMF Themes - Remixed Breadcrumb Tutorial
Need a Custom SMF Theme? Send me a message.

Antechinus


TwitchisMental

Quote from: Antechinus on February 19, 2022, 06:25:29 PMIt's usually something DERP :D
Truth

With that out of the way now... lol  How does this look for the footer menu area?

You cannot view this attachment.
My SMF Themes - Remixed Breadcrumb Tutorial
Need a Custom SMF Theme? Send me a message.

Antechinus

Looks like a footer menu. :) How does it look if they don't want to fill up all those options?

Diego Andrés


SMF Tricks - Free & Premium Responsive Themes for SMF.

TwitchisMental

Quote from: Antechinus on February 19, 2022, 07:12:38 PMLooks like a footer menu. :) How does it look if they don't want to fill up all those options?
Looks like a standard SMF footer.

You cannot view this attachment. 

Quote from: Diego Andrés on February 19, 2022, 07:16:01 PMI looks good I bet because we haz flexbox mate

You know it :).
My SMF Themes - Remixed Breadcrumb Tutorial
Need a Custom SMF Theme? Send me a message.

Antechinus

I mean the template code is all hard-coded at the moment. :P

Diego Andrés

Who says so, you guys put spam in your settings, I put bad words in my inputs to test them  :laugh:

SMF Tricks - Free & Premium Responsive Themes for SMF.

Mick.


TwitchisMental

My SMF Themes - Remixed Breadcrumb Tutorial
Need a Custom SMF Theme? Send me a message.

TwitchisMental

Quote from: TwitchisMental on February 19, 2022, 08:09:19 PM
Quote from: Antechinus on February 19, 2022, 07:26:27 PMI mean the template code is all hard-coded at the moment. :P

One step at a time :P.

Alright got this all done.

With just 1 and 2 enabled.

You cannot view this attachment.

2 and 4 enabled.

You cannot view this attachment.
My SMF Themes - Remixed Breadcrumb Tutorial
Need a Custom SMF Theme? Send me a message.


TwitchisMental

Alright I feel like I am getting close to done with this.

Board Index -

You cannot view this attachment.

Message Index -

You cannot view this attachment.

Post -

You cannot view this attachment.
 
My SMF Themes - Remixed Breadcrumb Tutorial
Need a Custom SMF Theme? Send me a message.

Mick.


TwitchisMental

My SMF Themes - Remixed Breadcrumb Tutorial
Need a Custom SMF Theme? Send me a message.

TwitchisMental

Alright I have the post area matching the theme colors.

You cannot view this attachment.
My SMF Themes - Remixed Breadcrumb Tutorial
Need a Custom SMF Theme? Send me a message.

TwitchisMental

Alright I am about to package this one up and submit it to the theme site.

I have added alot of little css3 effect goodies(most you won't be able to see until the theme is ready for download)

I have tweaked a few colors.

I have got all the mobile stuff dealt with.

Last Set of Previews -

Board Index -

You cannot view this attachment.

Message Index -

You cannot view this attachment.

Post -

You cannot view this attachment.

Tablet View -

You cannot view this attachment. 

SmartPhone View -

You cannot view this attachment.


My SMF Themes - Remixed Breadcrumb Tutorial
Need a Custom SMF Theme? Send me a message.

Shades.

if i may suggest only one thing is to change the color of the quick reply box or anything else on a dark theme to be other than #fff. Just my opinion of course but it bugs me on my own dark themes and trying to find a neutral color scheme. Other than that I love it! Just my measley 2 cents! ;)
ShadesWeb.com - Custom Logos - My Themes on SMF | My Themes on ShadesWeb
https://shadesweb.com

BikerHound.com - Sniffing out the road ahead
https://bikerhound.com

Dream as if you'll live forever; Live as if you'll die today. - James Dean

Advertisement: