ElkArte Community

Extending Elk => Custom Themes => Topic started by: Spuds on December 26, 2014, 01:19:52 pm

Title: [Theme] Separation
Post by: Spuds on December 26, 2014, 01:19:52 pm
I have no idea why I'm calling it that :P  Another experiment to understand how difficult, or not, it is to update the message index and topic page.  Overall not to bad, mostly limited by my clumsy css :P

This is a light theme with a nav style menu layout where the first drop down is done horizontally, like was done with the borderworld theme.  Its just a superfish variation but has a more compact feeling.

The message index was rearranged to have a larger avatar first and the topic page navigation / last post was consolidated to a single area.  The topic icon is also in line with the subject, and a few other tweaks.

The topic display has an updated poster area where certain items that were normally hidden in the drop down have been exposed.

Also has a slider quick login bar and a expanding search menu to snaz things up a bit.

Couple of shots below, demo / download links on the theme site ;)

Get your copy here!
http://themes.elkarte.net/creative/Seperation.html
Title: Re: [Theme] Separation
Post by: emanuele on December 26, 2014, 02:55:14 pm
/me sees lotsa awesomeness here
Title: Re: [Theme] Separation
Post by: CrimeS on December 26, 2014, 04:31:21 pm
Oh yeah,  it's definitely a great help for users that want to customise their topic look.
Title: Re: [Theme] Separation
Post by: Adrek on December 26, 2014, 06:01:22 pm
Nice :)

Really like what you have done with topic and menu look.
Title: Re: [Theme] Separation
Post by: radu81 on December 26, 2014, 06:21:16 pm
I just take a quick look from my tablet, I like it but I found this ;)
Title: Re: [Theme] Separation
Post by: Spuds on December 26, 2014, 09:17:03 pm
LOL ... thats pretty funny.  Amazing the damage that bad markup can cause.  Guest only issue with a missing
Code: [Select]
"></i>

Thanks for reporting, should be fixed.
Title: Re: [Theme] Separation
Post by: meetdilip on December 26, 2014, 11:43:53 pm
Love it :)

Thanks to you @Spuds
Title: Re: [Theme] Separation
Post by: radu81 on December 27, 2014, 09:43:57 am
Is looking better now but I think it can be improved... Imo the username, avatar and icons are taking too much space. I attach a screenshot made with my Nexus 5 and chrome browser
Title: Re: [Theme] Separation
Post by: Spuds on December 27, 2014, 10:31:18 am
No surprise there are issues in the responsive area since I did not look at that at all ... I'll try to take a look later.

ETA: made a few tweaks to help, I'm sure it needs more in the responsive area !
Title: Re: [Theme] Separation
Post by: Ziggy on January 26, 2015, 06:23:19 pm
It looks great but I can't find a way to download it :/
Title: Re: [Theme] Separation
Post by: radu81 on January 27, 2015, 02:26:34 am
http://themes.elkarte.net/creative/Seperation.html
Title: Re: [Theme] Separation
Post by: Ziggy on January 27, 2015, 06:36:30 am
Thank you!

Edit #1: Hmmm. I installed this theme, set it as the default but it doesn't happen. The default theme is still the er... default theme and Seperation isn't showing up. It's as though no theme has been installed - even though it's right there in my admin center.

Edit #2: I just installed another theme and that displays just fine.
Title: Re: [Theme] Separation
Post by: Mrs. Chaos on September 11, 2017, 12:44:06 pm
Hello!
For my forum I've chosen this theme, which doesn't contain the go top/go down buttons. But I would like to have these.
The index.css contains the same code-parts as the original ElkArte index.css. In the blue_index.css the following code part was missing, which is existing in the light_index.css. Therefore I added it blue_index.css.

Code: [Select]
/* Globally accessible top/bottom links. */
#gotop, #gobottom {
border: 1px solid #222;
border-bottom: none;
border-radius: 0 20px 0 0;
background: #eee;
color: #eee;
opacity: 0.2;
}
#gobottom {
border-top: none;
border-radius: 0 0 20px 0;
}
#gotop:hover, #gobottom:hover {
color: #444;
text-decoration: none;
opacity: 1;
}

But the buttons are still not visible. What is still missing? What do I have to do now?
Title: Re: [Theme] Separation
Post by: emanuele on September 11, 2017, 01:16:43 pm
I think Spuds removed the top/bottom buttons from this theme entirely...
You may have to edit index.template.php and add:
Code: [Select]
	<a href="#top" id="gotop" title="', $txt['go_up'], '">↑</a>
<a href="#bot" id="gobottom" title="', $txt['go_down'], '">↓</a>
after:
Code: [Select]
	<a id="top" href="#skipnav">', $txt['skip_nav'], '</a>
Title: Re: [Theme] Separation
Post by: Mrs. Chaos on September 11, 2017, 01:46:49 pm
Thank you, that helped!
The arrows are now there and it works. :)
Title: Re: [Theme] Separation
Post by: Mrs. Chaos on September 14, 2017, 04:50:19 pm
Hi Spuds!
As I have noticed, the text of a post slides left into the profile, if I visit the forum with my smartphone (Samsung Galaxy S7 edge).
At first I thought it's because I did some changes in the post profile, but it also happens if I visit the original Separation forum on your themes page.
I tried to enlarge the width of the profile column or to narrow the post area, but after this the changes were only visible on my PC. On my smartphone nothing has changed.
What can I do now? Here I did changes in the index.css:

Instead of 13.5em I tried it with 14.2em
Code: [Select]
.postarea {
    display: block;
    margin: 0 0 0 13.5em;
    padding: 0 1em 0 1.5em;
    max-width: 100%;

Instead of 15em I tried it with 16em
Code: [Select]
.poster_container {
    float: left;
    width: 15em;

Instead of 2px on the far right I tried it with 12px.
Code: [Select]
inner {
    margin: 0;
    padding: 7px 8px 2px 2px;
Title: Re: [Theme] Separation
Post by: Spuds on September 14, 2017, 08:58:15 pm
In the index.css file ... on  approx line 5333, which is inside the media section of @media screen and (max-width: 50em)
Code: (find) [Select]
	.postarea {
margin: 0 0 0 6em;
}
change that to
Code: (replace) [Select]
	.postarea {
margin: 0 0 0 12em;
}
and see if that fixes the issue for you.
Title: Re: [Theme] Separation
Post by: Mrs. Chaos on September 15, 2017, 07:43:05 am
Yes, that fixed it. :)
Thank you!
Title: Re: [Theme] Separation
Post by: Mrs. Chaos on April 21, 2018, 04:00:15 pm
Hi!
Not everything of this theme is displayed correctly in EA version 1.1.3. Will it be updated soon to 1.1.x ? That would be great.
The same applies to the theme "Storm Cloud". But this works much better with the 1.1.3 than the "Separation".
Title: Re: [Theme] Separation
Post by: Spuds on April 21, 2018, 05:21:30 pm
Getting my themes updated is on my list :D .... I'll try to get it done in the next few weeks.
Title: Re: [Theme] Separation
Post by: Mrs. Chaos on April 22, 2018, 05:35:30 am
That sounds good, I'm looking forward to it. :)
The design of Storm Cloud looks very elegant - although I prefer it when the statistics on the index page are at the bottom.
Title: Re: [Theme] Separation
Post by: Spuds on August 04, 2019, 09:23:03 pm
And ... updated for ElkArte V1.1 (download the version for Elk V1.1) https://themes.elkarte.net/creative/Seperation.html

Bugs .. yes of course :D
Title: Re: [Theme] Separation
Post by: DeadMan on March 11, 2022, 04:44:04 pm
Is there a way to move the menu to top of forum, and make it stick there?
Like on besocial. I'd love to have it that way.
Title: Re: [Theme] Separation
Post by: Spuds on March 11, 2022, 09:37:38 pm
I'm sure there is ... I'll take a look this weekend or early next week and let you know.  I've not looked at this theme in a bit :D
Title: Re: [Theme] Separation
Post by: DeadMan on March 11, 2022, 11:09:57 pm
Thank you, my friend, and good to see you again! :)

Also, I'd like to find out why the logo is not showing on phones.

https://www.allpointswh.com/
Title: Re: [Theme] Separation
Post by: Spuds on March 12, 2022, 02:04:12 pm
Here is an update that adds in the fixed menu header functionality.   There are a few things to change / note.

Since you have done some custom changes, at least colors, the specific changes for this are as follows:

Replace your theme.js file in the separation/scripts directory with the one in the attached archive.  This adds the scroll detection function.  You may need to tweak the value in it to specify the scroll distance before the menu becomes fixed.  This is basically the height of your logo area or the distance from the top of the screen to the top of the menu.  In the theme.js file the value is set in shrinkOn = 110; <-change 110 to what you need.

If you did not make any changes to the index.css in separation/css then just replace that with the one in this archive.  If you made changes then you will need to add in
Code: (find) [Select]
#menu_nav_1 {
border-radius: 0 0 6px 6px;
}
Code: (addafter) [Select]
.menu_nav_scroll {
position: fixed;
z-index: 100;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
width: 95%;
}

and in that same file in the
Code: (find) [Select]
	#menu_nav, #menu_nav_1 {
height: 48px;
}
Code: (addafter) [Select]
	.menu_nav_scroll {
width: 98%;
}
There were a couple of other minor tweaks in that file for changes in 1.1.8 but nothing to worry about.

Last change will be in your color file seperation/css/_blue/index_blue.css

Code: (find) [Select]
 #menu_wrapper {
  border-color: #CCCCCC;
 }
Code: (replace) [Select]
 #menu_wrapper {
  border-color: #CCCCCC;
background-color: #FEFEFE;
}
That is just the color in the padding area of the menu and just prevents seeing a tiny sliver of the page background as you scroll the page.

Title: Re: [Theme] Separation
Post by: DeadMan on March 12, 2022, 02:38:14 pm
Looks awesome, my friend!
Love how it stays the width of the forum, instead of the old full screen width of most fixed menus. :)
Thank you!
Title: Re: [Theme] Separation
Post by: DeadMan on March 12, 2022, 04:47:30 pm
Sorry for the double post, but:
@Spuds
I do need to figure out why my custom profile fields will not show on message view.
I have tried every setting, and they don't show.
I have 2 fields that have to be displayed.
Title: Re: [Theme] Separation
Post by: Spuds on March 12, 2022, 05:53:25 pm
I'll have to take a look and see if where I borked something up in the theme. 
Title: Re: [Theme] Separation
Post by: DeadMan on March 15, 2022, 11:31:20 pm
@Spuds
I've got a couple of errors showing about the GenericMessages.template.php file:

Spoiler (click to show/hide)

Also, since I think it could be connected, for some reason, on even a new 1.1.8 install, the gender icon for admin account will not show. And yes, it is set to display, and the admin is set to a gender.
Title: Re: [Theme] Separation
Post by: Spuds on March 18, 2022, 06:08:25 pm
I believe that is now fixed on my local ...  The errors were created when we moved those items (blurb, gender) to be custom fields and not standard fields.  Something I simply overlooked when I update the theme for 1.1.

I noticed at least one other error so I'll post an update in a bit,  just looking to see if I find moar !
Title: Re: [Theme] Separation
Post by: ' Tzs , on November 15, 2022, 05:40:34 pm
I like the colours and this theme, I would use it in real life. Is it possible? Should I copy these last 2 files?
Title: Re: [Theme] Separation
Post by: Spuds on November 15, 2022, 09:40:47 pm
Those should be the latest ...

TBH I'm not sure if those changes are in the "official" package file on the themes site.  I'd download / install the main package and then use the above two files to replace the ones the package installs.

I hope to get through most of my themes soon-ish as they will need some more updates to fully use the capabilities that are coming in 1.1.9
Title: Re: [Theme] Separation
Post by: ' Tzs , on November 16, 2022, 04:32:18 am
I look forward to it! :smiley:
Title: Re: [Theme] Separation
Post by: DeadMan on December 03, 2022, 11:55:44 am
Quote from: Spuds – I believe that is now fixed on my local ...  The errors were created when we moved those items (blurb, gender) to be custom fields and not standard fields.  Something I simply overlooked when I update the theme for 1.1.

I noticed at least one other error so I'll post an update in a bit,  just looking to see if I find moar !

They are still not showing on my sites.
Not sure why not. The coding is all there, maybe something in the display template that might be wrong?
Title: Re: [Theme] Separation
Post by: Spuds on December 03, 2022, 06:43:48 pm
I just tried the current version (which is not updated for 1.1.9, but I'm almost done) ... and it seemed to work fine.

Make sure you have "checked" the "show on topic view" option for those specific profile fields you want to show on the users profile.  This is what will enable them to show on the avatar hover on the display page.
Title: Re: [Theme] Separation
Post by: DeadMan on December 03, 2022, 07:07:12 pm
I have done so, and they do not show, and found out the online/offline setting also does not display.
It also appears that the pre-made ones, like Facebook, also do not show on topic view when selected to do so.
Custom text also not showing.

Here's a link to a post in the forum: (Forum Post) (https://www.burkeknight.cc.nf/index.php?topic=701.0)

(Link-10175) (Link-10177) (Link-10179)
Title: Re: [Theme] Separation
Post by: Spuds on December 03, 2022, 08:42:16 pm
Can't deny they are not showing on your site ... I tried both of the ones you posted above on my basic site and they are appearing as expected. 

Those custom fields are rendered in GenericMessages.tempalte.php so be :100: that you are using the one I posted here: https://www.elkarte.net/community/index.php?topic=2343.msg43378#msg43378 and that it is installed in your themes/elk_theme_separation_11 directory.

The only other reasons that I can think of for why they would not appear are 1) they are empty in the users profile, 2) the custom field is not set as active, 3) the specific custom field "show permission" is set to admin only ...

I'll look around some more and try it with some addons installed as well.
Title: Re: [Theme] Separation
Post by: DeadMan on December 03, 2022, 10:04:33 pm
Files are the current ones. Placed in correct place.

1. Not empty, my profile has them filled, and not showing.
2. All are set to active, double checked that.
3. All set for everyone to be able to see.
Title: Re: [Theme] Separation
Post by: Spuds on December 04, 2022, 07:54:10 am
:man_shrugging: Try toggling off and then back on the core feature (advanced profile) in case something did not get set right.   Also, do they show up when you use the default theme?
Title: Re: [Theme] Separation
Post by: DeadMan on December 04, 2022, 10:50:15 am
Quote from: Spuds – :man_shrugging: Try toggling off and then back on the core feature (advanced profile) in case something did not get set right.   Also, do they show up when you use the default theme?

It appears to also be a thing on the default theme on at least one site.
Very strange indeed, but it's nothing I'm going to be losing any sleep about.
If they don't show in topic view, they don't show. On 2 of the sites, it's more likely best they don't, really.
The other site, well, I might be making a nice SP block where people can get to the links that would be shown, which might look nice. :)
Thank you for the help, though. If I inadvertently fix it, I'll reply back with what did....  :laugh:
Title: Re: [Theme] Separation
Post by: DeadMan on February 11, 2023, 09:41:33 pm
@Spuds
Is there a way to fix the menu so it's more responsive?
Right now, the drop-down goes left to right, where most gets cut off on mobile.
Is there a way to make it up-down instead?
(Link-10248)
Title: Re: [Theme] Separation
Post by: Spuds on February 14, 2023, 10:11:30 am
Let me take a look ... I did do some updates to the theme for 1.1.9 support and to fix some mobile issues, but don't recall if I addressed that issue.
Title: Re: [Theme] Separation
Post by: Burke Knight on November 25, 2023, 06:44:44 am
@Spuds
Is there a way to fix the menu so it's more responsive?
Right now, the drop-down goes left to right, where most gets cut off on mobile.
Is there a way to make it up-down instead?
(Link-10650)
Title: Re: [Theme] Separation
Post by: Spuds on December 07, 2023, 02:34:38 pm
Here is an update which should address several of the issues and have better compatibility with 1.1.9  If you have made modifications to the theme, you will have to manually merge those back.

Title: Re: [Theme] Separation
Post by: Burke Knight on December 07, 2023, 06:25:37 pm
Quote from: Spuds – Here is an update which should address several of the issues and have better compatibility with 1.1.9  If you have made modifications to the theme, you will have to manually merge those back.

It appears to have fixed the issues, including the inline attachments issue.
However, when running SP, it seems to give some errors in the log, when in the admin panel,
but only when on the Current Theme page. (I also notice, all blocks that are visible "Everywhere" are duplicated on this page only.

Code: [Select]
Type of error: General
Notice: Constant SPORTAL_VERSION already defined
/index.php?action=admin;area=theme;sa=list;th=3
File: /sources/subs/Portal.subs.php
Line: 61

Code: [Select]
Type of error: General
Notice: Constant SPORTAL_STALE already defined
/index.php?action=admin;area=theme;sa=list;th=3
File: /sources/subs/Portal.subs.php
Line: 62

Portal.subs.php - Lines 61 & 62:
Code: [Select]
	define('SPORTAL_VERSION', '1.0.1');
define('SPORTAL_STALE', 'sp101');

Errors and duplications were not an issue before.
Title: Re: [Theme] Separation
Post by: Spuds on December 07, 2023, 07:01:31 pm
Off to look .... I think I know what I did this time  :shocked:   Thanks for the feedback
Title: Re: [Theme] Separation
Post by: Spuds on December 07, 2023, 09:08:00 pm
Looking at my "current" SP version which will be SP 1.0.2, I had already changed lines 61/62 to be:

Code: [Select]
	defined('SPORTAL_VERSION') || define('SPORTAL_VERSION', '1.0.1');
defined('SPORTAL_STALE') || define('SPORTAL_STALE', 'sp101');

To prevent that error.  There are a few things in motion when you add/change themes, so the above change simply helps prevent the error.  Of course my version is 1.0.2 but just use the above line until I release it.
Title: Re: [Theme] Separation
Post by: Burke Knight on December 07, 2023, 09:39:40 pm
Quote from: Spuds – Looking at my "current" SP version which will be SP 1.0.2, I had already changed lines 61/62 to be:

Code: [Select]
	defined('SPORTAL_VERSION') || define('SPORTAL_VERSION', '1.0.1');
defined('SPORTAL_STALE') || define('SPORTAL_STALE', 'sp101');

To prevent that error.  There are a few things in motion when you add/change themes, so the above change simply helps prevent the error.  Of course my version is 1.0.2 but just use the above line until I release it.


That solved the errors. However, not the duplicate blocks on the Current Theme page.