neospring is kil
@PIXEL'S LIST OF NEOSPRING'S SELECTORS
★ Please check out F00FC7C8's rentry for a much more comprehensive guide on css editing and neospring as a whole!
- This details and sorts most neospring profile selectors. Please let me know if I'm missing any.
- I will not include css selectors for other parts of the site unless I think they'd be useful.
- Feel free to message me on my neospring if you have questions or if this is outdated/obsolete at any point!
- Neospring's "layout" update allows you to add your own css class names to certain flexboxes, such as the profile or question boxes - take advantage of that feature to make css editing more reliable for you :-)
PS: w3schools is awesome for learning csshtml + stackoverflow also has an answer for just about any css question you might have.
basics
body - The entire page
* - Universal selector, effects all elements individually
input - Elements that can be interacted with (checkboxes, text forms, buttons, etc)
navigation bar selectors
nav - The entire navigation bar
nav .content_container - The content of the navigation bar, including buttons
#title-img - Neospring's logo in the top left
nav button, nav a.button - Buttons on the navigation bar
nav .notifcation - Notifications in the navigation bar
.dropdown - Navigation dropdown (where your icon is located on the nav bar)
.dropdown button - Button to open the dropdown menu
.dropdown .inner - Inside the dropdown menu
profile box selectors
#profile_box - The entire profile card (display name, username, biography, side bar, action buttons)
.avatar - All avatars
.profile_avatar - The avatar in your profile box
.profile_avatar_container - The container around the avatar
.banner - Profile banner
.status_note - Profile status
#names - Username container
.username - The individual usernames (applies to both display and username)
h3.username - Display name
h4.username - Username
#biography - Profile biography
#sidebar - Profile sidebar
#links - Links table
table tr - Odd-numbered rows of the links table
table tr:nth-child(2n) - Even-numbered rows of the links table
#links tr - Individual links in the links table
.profile_social - Followers/following/friends bar
questions box selectors
#question_box - The entire questions box (motivational header, question form, question card)
.motivational_header - Motivational header
#question_form - Text area, character counter, anonymous label, ask button
#content - Where you write the question
.checkbox_container - Anonymous checkbox
label.normal - "Hide your name"
button.primary.bold - "Ask" button
pillmenu
.pillmenu - The feed/questions menu
.pillmenu a:first-child - The feed button
.pillmenu a:last-child - The questions button
.notifcation - The number of responses/questions (APPLIES TO ALL NOTIFICATION NUMBERS; This includes comment, like, and notifcation nunbers. Also includes the "follows you" notifcation on others profiles)
response and post selectors
.response - The entire response. Includes both answered questions and posts
.question_content - The questioners text
.response_content - The responders text
.comment_content - The commentors text
.question_title - Username and date of a question
.response_title - Username, date, and buttons of a response or post
.comment_title - Username and date of a comment
.date.item - All dates on a response / question
.response_body - The response part of the response card (or, the section containing your answer/post)
.comment_body - The entire comment
.response_tags - Tags of the response
.response_warning - Warning of the response
.actions_bar - The buttons for replying, liking, etc (applies to both comments and answers/posts)
.camo - Individual buttons on the action bar
misc selectors
.fade - All faded text (e.g text with lowered opacity)
button.floating - The buttons that float at the bottom of the page (search and back to top buttons)
footer - The footer (actions, services, site, etc)
footer .content_container - Content container of the footer
.markdown-alert-xyz - This is not an individual class, but you can replace "xyz" with note, tip, warning, important, or caution to change those specific markdown warnings
A little extra: #css_editor - The css editor (might not be notable, but the colors tend to blend in, so it might be worth it to change the background color to one more visible)