ElkArte Community

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

Title: [Theme] Separation
Post by: Spuds on December 26, 2014, 07: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, 08:55:14 pm
/me sees lotsa awesomeness here
Title: Re: [Theme] Separation
Post by: CrimeS on December 26, 2014, 10: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: phantom on December 27, 2014, 12:01:22 am
Nice :)

Really like what you have done with topic and menu look.
Title: Re: [Theme] Separation
Post by: radu81 on December 27, 2014, 12:21:16 am
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 27, 2014, 03:17:03 am
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 27, 2014, 05:43:53 am
Love it :)

Thanks to you @Spuds
Title: Re: [Theme] Separation
Post by: radu81 on December 27, 2014, 03:43:57 pm
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, 04:31:18 pm
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 27, 2015, 12:23:19 am
It looks great but I can't find a way to download it :/
Title: Re: [Theme] Separation
Post by: radu81 on January 27, 2015, 08:26:34 am
http://themes.elkarte.net/creative/Seperation.html
Title: Re: [Theme] Separation
Post by: Ziggy on January 27, 2015, 12:36:30 pm
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, 06: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, 07: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, 07: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, 10: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 15, 2017, 02:58:15 am
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, 01:43:05 pm
Yes, that fixed it. :)
Thank you!
Title: Re: [Theme] Separation
Post by: Mrs. Chaos on April 21, 2018, 10: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, 11: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, 11: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 05, 2019, 03:23:03 am
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