Modifying Next Theme

Skinning and designing Serendipity (CSS, HTML, Smarty)
Post Reply
Imajica
Regular
Posts: 57
Joined: Mon Dec 05, 2016 6:26 pm
Location: Racine
Contact:

Modifying Next Theme

Post by Imajica » Tue Jan 03, 2017 5:36 am

Evening Folks

I'm spending the evening modifying the next theme to get the look I want
Couple questions...

is there a way to remove the rss link and icon from categories?
is there a way to change the background color on the mobile theme?
Can I add a custom footer?

John

User avatar
yellowled
Regular
Posts: 7017
Joined: Fri Jan 13, 2006 12:46 pm
Location: Eutin, Germany
Contact:

Re: Modifying Next Theme

Post by yellowled » Tue Jan 03, 2017 10:51 am

Imajica wrote:is there a way to remove the rss link and icon from categories?
Go to Settings/Plugins → Sidebar Plugins → Categories and set

1. „XML Button“ to none
2. „Enable Smarty-Templates?“ to „No“
Imajica wrote:is there a way to change the background color on the mobile theme?
Technically, there is no “mobile theme”, but you can adapt the background color for different screen resolutions. You can do so using CSS in your user.css. If you haven't already, you'll need to create a /templates/next/user.css and edit said file with a text editor to contain for example:

Code: Select all

body {
    background-color: #aaa;
}

@media screen and (min-width: 480px) {
    body {
        background-color: #fff;
    }
}
That will set the background color to a grey tone on device with a display less wide than 480px, but switch it to white on devices with a display wider than that. Of course, you'll have to adapt the colors and maybe the device width to your preferences.
Imajica wrote:Can I add a custom footer?
Technically yes, but no that easily. In order to do so you'd need to edit Next's template files (namely the index.tpl), but those changes would be overwritten with the next s9y update because Next is part of s9y's core. So you would need to create a copy of Next (copy /templates/next/ to i.e. /templates/imajica/ and change the name of the theme in /templates/imajica/info.txt), but that would mean that you would miss future updates to the Next theme or have to backport them yourselves.

It might be a better solution to use the plugin “HTML Nugget on Page” (serendipity_event_page_nugget), but that would (as far as I remember) not replace Next's footer, just give you the ability to add stuff to it.

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

Imajica
Regular
Posts: 57
Joined: Mon Dec 05, 2016 6:26 pm
Location: Racine
Contact:

Re: Modifying Next Theme

Post by Imajica » Tue Jan 03, 2017 4:16 pm

excellent tips yellowled

thank you

Imajica
Regular
Posts: 57
Joined: Mon Dec 05, 2016 6:26 pm
Location: Racine
Contact:

Re: Modifying Next Theme

Post by Imajica » Fri Jan 06, 2017 4:53 pm

yellowled wrote:
Imajica wrote:Can I add a custom footer?
Technically yes, but no that easily. In order to do so you'd need to edit Next's template files (namely the index.tpl), but those changes would be overwritten with the next s9y update because Next is part of s9y's core. So you would need to create a copy of Next (copy /templates/next/ to i.e. /templates/imajica/ and change the name of the theme in /templates/imajica/info.txt), but that would mean that you would miss future updates to the Next theme or have to backport them yourselves.

It might be a better solution to use the plugin “HTML Nugget on Page” (serendipity_event_page_nugget), but that would (as far as I remember) not replace Next's footer, just give you the ability to add stuff to it.

YL
yellowled
I did take a look at that and it isn't quite what I'm aiming for
It will add info above the footer but not into the existing footer

I'm either going to have to add it to the template and diff the changes every time or mod the theme itself, I'm an infrastructure guy not a developer so that might take me forever :)

Imajica
Regular
Posts: 57
Joined: Mon Dec 05, 2016 6:26 pm
Location: Racine
Contact:

Re: Modifying Next Theme

Post by Imajica » Fri Jan 06, 2017 5:04 pm

yellowled wrote:...
You can do so using CSS in your user.css. If you haven't already, you'll need to create a /templates/next/user.css and edit said file with a text editor to contain for example:


YL
I'm also finding spots where user.css does not override the default css, not just in Next but in Bulletproof as well
I know it's in there properly because if I look at firebug I can see the css I put in redlined but it's not displaying it

Question is would be is this expected behavior or am I doing it wrong
when you create user.css do you just copy the default css to it and modify it or just put the pieces you need into user.css

John

thh
Regular
Posts: 305
Joined: Thu Oct 26, 2006 2:38 pm
Location: Stuttgart, Germany
Contact:

Re: Modifying Next Theme

Post by thh » Fri Jan 06, 2017 5:10 pm

Imajica wrote:I'm also finding spots where user.css does not override the default css, not just in Next but in Bulletproof as well
I know it's in there properly because if I look at firebug I can see the css I put in redlined but it's not displaying it
That may be due to another, more specific CSS style with higher priority. You may need to use "!important" - but see https://css-tricks.com/when-using-impor ... ht-choice/.
Imajica wrote:when you create user.css do you just copy the default css to it and modify it or just put the pieces you need into user.css
The latter.

User avatar
yellowled
Regular
Posts: 7017
Joined: Fri Jan 13, 2006 12:46 pm
Location: Eutin, Germany
Contact:

Re: Modifying Next Theme

Post by yellowled » Fri Jan 06, 2017 7:01 pm

Imajica wrote:I'm either going to have to add it to the template and diff the changes every time or mod the theme itself, I'm an infrastructure guy not a developer so that might take me forever :)
Probably the best idea would be to create a copy of Next as described before and edit that copy to your needs. Yes, you might have to “backport” changes made to the original Next in the future, but those will be few and far between compared to having to edit your changes back in every time s9y is updated.

For some changes, that's just the way it has to be. Some things can be adapted easily with CSS or JS, but at some point, wanting to adapt a theme will always mean you have to get your hands dirty. :)

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

User avatar
yellowled
Regular
Posts: 7017
Joined: Fri Jan 13, 2006 12:46 pm
Location: Eutin, Germany
Contact:

Re: Modifying Next Theme

Post by yellowled » Fri Jan 06, 2017 7:05 pm

Imajica wrote:I know it's in there properly because if I look at firebug I can see the css I put in redlined but it's not displaying it
Most likely an issue with CSS specifity. Hard to explain in a few sentences, but as thh already explained – you can override anything in the user.css if you use the proper selector; please do not start using !important as a silver bullet.
Imajica wrote:when you create user.css do you just copy the default css to it and modify it or just put the pieces you need into user.css
Just override the pieces you need or add things that are not in the theme's CSS.

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

Imajica
Regular
Posts: 57
Joined: Mon Dec 05, 2016 6:26 pm
Location: Racine
Contact:

Re: Modifying Next Theme

Post by Imajica » Fri Jan 06, 2017 8:52 pm

thank you both for your help

I'll work on it over the weekend

Post Reply