@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)
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 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)