[go: up one dir, main page]

image
image

[3] Skyfall by sheathemes

preview | code

Features

  • full support for NPF posts
  • responsive to all screen sizes
  • post sizes between 350px - 540px
  • up to 6 custom links
  • like and reblog buttons

Optional

  • header image
  • sidebar image
  • tags always on display or by toggle
  • search bar

Important

  • full credits are here
  • sidebar image is a minimum of 350px width
  • you will use google fonts to change the main font. Search for the font of your choosing and copy/paste the title of said font into the appropriate text field

Screen recording of a navigation menu that slides in from the left of the screen.ALT

CSS-only Sliding Menu

base code / simple preview

Aside from some built in transitions and CSS variables, this is a blank template to build your own menu content. To showcase what you can do with it, I've also made a customized preview.

This is made possible with :focus-within, which lets us select a parent element based on the (focused) state of its children, similar to :has(). Using :has(:focus) could have accomplished something like this, but this selector is specialized for this purpose.

Let me know if there's anything I should add!

image
image

strawberry (revamped) | theme by sage

get the code: preview version 1 / version 2
a sidebar (left or right) theme with sticky buttons for permalink & reblog
— free til october 2025!

features (more info below the cut):

  • toggle: tags on click, music player*, updates, right or left sidebar
  • headerbar includes blog icon/home link & search bar // (optional) music player & updates buttons // day/night & tumblr controls buttons
  • sidebar includes links for home, ask, archive, & up to 5 extras, an uploadable image, and custom description
  • customizable: blog title, description, colors, body & title fonts, and font size
  • responsive design, jumpination, scroll to top, 4 corner options, 3 post margin options, phosphor icons

nothing needs to be changed in the code, everything can be changed in the customize panel!

terms:

Keep reading

Banner that reads "CSS Popups: written by glenthemes" stylized in all uppercase.ALT
Screen recording GIF of the user interacting with the demo page for CSS popups. There are four sentences present, each of which has several words emphasized in blue and underlined. When the user clicks the emphasized phrase, a popup appears with content associated with said trigger. Clicking outside of the box closes the popup.ALT

✨ CSS popups (no JavaScript)

Some basic CSS popups I put together by utilizing <⁠l⁠a⁠b⁠e⁠l⁠ ⁠f⁠o⁠r⁠=⁠"⁠.⁠.⁠.⁠"⁠> and <⁠i⁠n⁠p⁠u⁠t⁠ ⁠t⁠y⁠p⁠e⁠=⁠"⁠r⁠a⁠d⁠i⁠o⁠"⁠> combinations together with its :checked state to mimic a <⁠d⁠i⁠a⁠l⁠o⁠g⁠> in its open/showModal() state.

  • Unlimited popups
  • Only 1 popup can be open/active at a time
  • Clicking outside the popup box will close all popups.

🔗 github.com/glenthemes/css-popups

A screenshot of a speech bubble themed FAQ page with a sunset color paletteALT
A screenshot of a blue, speech bubble themed FAQ pageALT

Starlight

preview + code

A remake of my old Sunset FAQ page from 2017. Same color palette, but actually readable.

  • This page's navigation is done with only CSS! You don't need to go through the approval process for scripts.
  • This page is not tumblr specific and can be used on any platform that supports HTML and CSS.

image
image
image
image
image

theme - you go your way

preview | download: payhip for $10 (or patreon access)

this is a premium theme.

features: 852x350px header image, 260x300px sidebar image, blog title, blog subtitle, three 30x30px main admins section**, events section**, about information section**, 500px text posts

notes: npf posts friendly! ask and submit button will automatically show if allowed (please check your settings). ** you have to go directly to the code to edit this part. for the main admins section, the three images are fixed. thank you @/glenthemes for the griddery script. credits link to the resources, tutorials and scripts used to make this theme possible is found on the bottom right corner of the theme. 

not what you’re looking for? consider commissioning me. | say thank you buy buying me a coffee.