Suggestion: Editable template CSS

What would you like to see on Smack Jeeves? What are we doing well? Could we improve? Let us know!
Forum rules
Suggestions & Feedback Posting Guidelines
The purpose of this board is to allow community members to suggest new features or changes to be added to Smack Jeeves. Even if you aren't sure of a specific solution, but you recognize the need for an improvement, point it out!

Before Posting
Please browse/search the forum to make sure your suggestion hasn't already been made by someone else. If you find an idea similar to yours, post your contributing thoughts to that thread. Don't start a new thread unless your idea is significantly different from existing suggestions.

Rules

    1) Use a descriptive title when making a suggestion or pointing out the need for improvement.

    2) Describe the problem / solution in detail. First, explain why there is a problem or a need for a new feature to begin with. Then, describe your proposed solution (if you have one) clearly and effectively.

    3) Respect others' ideas. If you disagree with someone else's ideas or suggestions, respectfully and factually state why. While debate over different solutions is fine, insults or personal attacks will not be tolerated.

Sticky System
Suggestions that have been approved and chosen for implementation by the development team will be stickied. When development begins on an idea, that topic will be moved to the New Features & Changes in Progress board.

Suggestion: Editable template CSS

Postby eishiya » June 10th, 2017, 8:34 pm

There have always been a lot of questions in the Help Desk about how people can't find where to edit the CSS, since most people don't know how overrides work and expect to just edit code. Ever since CSS was moved from being an @import within a <style> element to being linked (a good change overall), there have been even more such threads than before.

In addition to being confusing, it also means that any custom CSS must be a part of the Overall Template, where it can't easily be cached (it's cached as part of every page, rather than as a separate file), defeating the purpose of having the CSS in a separate file. In addition, all those overrides are probably a waste of CPU cycles.

I propose a very simple solution: Have each template's CSS as an editable "template section". Each default template's CSS would populate this section the same way all the other sections are populated when you load a default template, instead of being an inaccessible file.
I am not sure how the template stuff works, but perhaps the CSS can be generated just once as a fixed (and cacheable!) file (templateID.css) every time it's saved, instead of being generated dynamically from the database at page load time like the other template sections are.

Linking to it within other templates (most likely the Overall Template) can be done with a new template variable, e.g. {CSS_URL}. Sample usage:
Code: Select all
<link href="{CSS_URL}" rel="stylesheet" />

(Or, perhaps there can just be {CSS} which adds the entire link element.)

Some mock-ups, just to clarify what I mean:
Spoiler! :
Image
Image
I don't expect there to be CSS variables, just put that in the mockup because it wasn't any extra work. However, they could one day be added to allow code-free minor editing of templates by having a page where a few basic variables used by the CSS can be set. These could be colours and URLs of banner images, nothing fancy.
Image
User avatar
eishiya
 
Posts: 9723
Joined: December 5th, 2009, 11:17 am

Custom CSS in Page Design/Appearance

Postby haganekitsune » December 20th, 2018, 12:20 pm

Starting this off with:
Yes, I know you can insert CSS in your template's overall page. Depending on the size of your stylesheet, this can increase each individual page size by a not-insignificant amount. On an archive binge, this can slow load time, and may produce additional unnecessary overhead because each comic page being served up is larger.

Free users are already granted the ability to modify and create templates. If they want to use a singular stylesheet, then they either need to:
Override the template stylesheet in their overall template
Host their stylesheet elsewhere
Purchase a subscription to upload additional files

While the last two options are certainly feasible, it would just be really nice to be able to just have a "Custom CSS" page as part of the Page Design/Appearance section.
Just enter in your CSS, and use a variable to call that stylesheet if so desired. EG: {SITE_CUSTOM_CSS}

Since users are already entering it in as part of the template, this would help out with reducing individual webpage sizes, which, with the size of some comic archives, can significantly reduce load time and bandwidth usage, since you'd be loading one CSS file that could be cached, rather than the same set of css for pages comics/$comic_id1 and comics/$comic_id2, etc due to its inclusion in the template.
User avatar
haganekitsune
 
Posts: 21
Joined: March 11th, 2009, 8:08 am

Re: Custom CSS in Page Design/Appearance

Postby eishiya » December 20th, 2018, 1:20 pm

I already suggested this here. Shall I merge the two threads?
Image
User avatar
eishiya
 
Posts: 9723
Joined: December 5th, 2009, 11:17 am

Re: Custom CSS in Page Design/Appearance

Postby haganekitsune » December 20th, 2018, 1:31 pm

eishiya wrote:I already suggested this here. Shall I merge the two threads?

Yes, please! I'd somehow missed that in my search before making the suggestion.

Thanks kindly! :)
User avatar
haganekitsune
 
Posts: 21
Joined: March 11th, 2009, 8:08 am

Re: Suggestion: Editable template CSS

Postby eishiya » December 20th, 2018, 1:38 pm

Done! That we came up with identical solutions to this issue is probably a good sign.
Image
User avatar
eishiya
 
Posts: 9723
Joined: December 5th, 2009, 11:17 am

Re: Suggestion: Editable template CSS

Postby Respheal » April 11th, 2019, 12:18 pm

Voicing my support for this! I'm currently hosting my CSS off site because it's easier to be able to edit it directly where I have the CSS hosted, rather than uploading a new file manually for every change.
Image
User avatar
Respheal
 
Posts: 51
Joined: April 16th, 2015, 11:39 am

Re: Suggestion: Editable template CSS

Postby Darkhalo4321 » April 11th, 2019, 12:21 pm

Something like this would make life easier for the person I have helping me with my site stuff. Even if it were like a subscriber feature, it would give more incentive to subscribe to have that ease of use and not have to outsource CSS.

Just some food for thought :)
User avatar
Darkhalo4321
 
Posts: 2
Joined: February 5th, 2009, 7:10 pm

Re: Suggestion: Editable template CSS

Postby eishiya » April 11th, 2019, 1:06 pm

Darkhalo4321 wrote:Something like this would make life easier for the person I have helping me with my site stuff. Even if it were like a subscriber feature, it would give more incentive to subscribe to have that ease of use and not have to outsource CSS.

Just some food for thought :)

You can currently use inline CSS by placing it in a <style> tag in your Overall Layout, so you don't need to use external CSS.
Image
User avatar
eishiya
 
Posts: 9723
Joined: December 5th, 2009, 11:17 am


Return to Suggestions & Feedback

Who is online

Users browsing this forum: No registered users and 5 guests