user.css - how to start? (especially for next theme)

Skinning and designing Serendipity (CSS, HTML, Smarty)
Post Reply
aisberg
Regular
Posts: 43
Joined: Tue Apr 28, 2020 9:23 pm
Location: Berlin

user.css - how to start? (especially for next theme)

Post by aisberg » Fri May 08, 2020 4:16 pm

When I started to use s9y I used the "2k11" theme because this was "suggested" by the installation and it looks like some default. And I found this "2k11 user.css generator"
http://yellowled.github.io/
The generator worked fine, I can set the required colors, OK.

But now I am suggested to use the newer "next" theme because the dropdown list on small displays works different from 2k11. When I use the user.css I created for "2k11" on "next" I get my colors on wrong places. So I can't us as generated for 2k11.

I can't find a documentation how to start in general when I want to create my user.css to get my required colors, what should be included, why it works different from 2k11. I can read that it is possible to use, but not, how.

How can I know what can / should be used in user.css?
How to start?
Should I explore the code of the theme?
How other users create their user.css?

aisberg
Regular
Posts: 43
Joined: Tue Apr 28, 2020 9:23 pm
Location: Berlin

Re: user.css - how to start? (especially for next theme)

Post by aisberg » Sat May 09, 2020 3:05 pm

I found out that I need to explore the "style.css" file of the template and that I need to overwrite required elements with my settings in "user.css"

Some more comments in this "style.css" file would be very helpful to understand what entries are related to which elements! Especially for non-Web-Developers who are very seldom in contact with CSS.

So I have to use trial and error to understand which section could be related to which graphical element and then to comment in my user.css like this part:

Code: Select all

/* Das scheint der Text unter der Unterschrift sein */
#identity span {
  color: #1e4586;
}

/* Überschriften in den Seiten-Plugins */
.widget h3 {
  color: #1e4586;
  font-weight: bolder;
}

Be@t
Regular
Posts: 100
Joined: Sun Dec 18, 2005 5:24 pm
Location: switzerland
Contact:

Re: user.css - how to start? (especially for next theme)

Post by Be@t » Sat May 09, 2020 7:07 pm

aisberg wrote:
Sat May 09, 2020 3:05 pm
I found out that I need to explore the "style.css" file of the template and that I need to overwrite required elements with my settings in "user.css"
Correct!
aisberg wrote:
Sat May 09, 2020 3:05 pm
Some more comments in this "style.css" file would be very helpful to understand what entries are related to which elements! Especially for non-Web-Developers who are very seldom in contact with CSS.
Sometimes we have to learn something new to understand the context :wink: . Otherwise we have to take what's offered.

Do you know the "investigate" feature of your browser?
Visit your site, move your cursor to the place you would like to change, click right, choose "investigate"... study... find the related CSS-entry and add this class to your user.css with your desired values. Than test again... That's the way we "non-Web-Developers" learned to customize our themes. :wink: welcome to the club. 8)

aisberg
Regular
Posts: 43
Joined: Tue Apr 28, 2020 9:23 pm
Location: Berlin

Re: user.css - how to start? (especially for next theme)

Post by aisberg » Sun May 10, 2020 7:39 am

Be@t wrote:
Sat May 09, 2020 7:07 pm
Do you know the "investigate" feature of your browser?
No, I didn't know. What a great feature! Very helpful!!

aisberg
Regular
Posts: 43
Joined: Tue Apr 28, 2020 9:23 pm
Location: Berlin

Re: user.css - how to start? (especially for next theme)

Post by aisberg » Sun May 10, 2020 7:51 am

I think this hint is very important and could be included in the s9y documentation, for example here:
https://docs.s9y.org/docs/users/using/themes.html
And a little bit more ideas, what to do to change the theme.

Who manages the s9y documentation? Can users contribute?

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

Re: user.css - how to start? (especially for next theme)

Post by thh » Sun May 10, 2020 9:10 am

aisberg wrote:
Sun May 10, 2020 7:51 am
Who manages the s9y documentation? Can users contribute?
Yes, of course! That would be wonderful - the documentation needs lot of love.

The whole website (including the documentation) is generated by Github pages and kept in a git repository at https://github.com/s9y/s9y.github.io. The pages are just markdown files (Github flavored markdown, I think).

If you're familiar with git or Github you can just send a pull request; if not, we will work something out.

Post Reply