@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 selectors. Please let me know if I'm missing any.
  • Feel free to message me on my neospring if you have questions or if this is outdated or obsolete at any point!
  • Neospring's "layout" update allows you to add your own css class names to certain flexboxes, such as the profile section - 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)

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 test (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)

Edit
Pub: 09 Nov 2024 22:03 UTC
Edit: 24 Feb 2025 03:11 UTC
Views: 982