#topbar

Theme 11 customization

Regarding the simpler fields:

"Secondary title" refers to the title just above the posts, under the header and navigation. This defaults to "[Total posts] Works in [Username]" when the field is left empty.

"Filtered tags" takes a comma-separated list of tags, entered exactly as they'd be written in the Tumblr post editor but without the hashtag. E.g. the tags #politics, #red and blue, and #green would be entered as "politics, red and blue, green" (make sure there's spaces, and no comma after the last item!). The filtering plugin will then put a warning message over any posts with those tags, along with a button letting you show the post.

"[Section] title" act as the headers for the corresponding section, if provided. "Custom links title" defaults to "Pages" if nothing is entered, and is used when the custom links are displayed on the navbar.

"Featured tags" takes a comma-separated list of tags, in the same format as Filtered tags. This field will display links to those tags, along with the number of posts in that tag on your blog, in the left sidebar.

The Recent posts section displays the 5 most recently posted/reblogged posts on your entire blog, displaying in the left sidebar. If you enter a tag under "Recent posts tag", it'll instead display the 5 most recent posts in that tag on your blog. Only 1 tag is allowed.

Rules and FAQ

Both these sections work the same way. Each new item, a rule or a question, consists either of one statement, or a statement and some more text, usually as an answer or additional note. E.g. the screenshot below shows three rules, where the last one has more text in the dropdown.

To create an item, prefix it with <li> . To add more text, create a <li> item and add a [more] label underneath, then write your extra text after that. To illustrate, here's the Customize page code for the above:

Updates

This section is similar to Rules/FAQ, though it flips the order around. After each <li>, first list the date, then add the [label] marker, then add your actual update. Again, here's an example:

And here's the Customize page code that created that:

Toggles

This section displays checked/crossed-out items, and uses a simpler version of the formatting for the above sections. Use <li> for each new item, then add [on] or [off] at the end, depending on whether you want it checked or crossed off. Here's an example:

And here's the corresponding Customize code:

Progress bars

This section also uses <li> items, where each item has two parts: the text label, and the number(s) for the progress percentages, put inside square brackets like with the other sections. Here's an example (note how the top two use fraction values while the bottom one uses a percentage):

And here's the code that made these. In short, the format is <li> Text here [##/##], or <li> Text here [##%], where ## refers to any number.

Social links in footer

The footer links, aside from the email and personal website fields, take usernames or user IDs for various websites. Be sure to check you're not entering a username in a user ID field!

The Email address field takes a standard email in the format [email protected] and adds a link to let people mail that address.

The Personal website fields will generate a link in the footer's Follow section. Personal website name is the human-readable text label for the generated link, and Personal website URL is the URL that will open when the generated link is clicked. Make sure to add https:// to the start of the personal website URL so the generated link doesn't just redirect you to a different part of your blog.

Credits

Layout and design by Archive of Our Own

Style My Tooltips by malihu

Phosphor Icons

Expanded Tumblr localization and NPF photosets plugin by codematurgy

Custom audio posts by annasthms

Tag filtering by glenthemes

Palette toggle by eggdesign

NOTE THAT ALL SECTIONS ARE DISABLED BY DEFAULT, TO AVOID HAVING EMPTY/UNEDITED SECTIONS. If you want a particular section to display, make sure you enable it in the Customize menu before making any changes, so that you can see it as it's being edited.

All of the below instructions assume that you've gone to your Customize page, then opened the "Edit HTML" menu.

Again, if you have trouble making your edits work, feel free to send me an ask or a DM for help.

Note for HTML beginners

Every bit of text or code is wrapped inside "tags", which have arrow brackets on either side. For example, a paragraph is placed inside <p> tags.

Every element has an "opening" and "closing" tag; the closing tag looks just like the opening tag, with a / after the opening bracket. The content inside one section is bracketed by these; for example, a paragraph would look like this:

<p>Text here!</p>

In the above line, <p> is the opening tag, and </p> is the closing tag. Tags of this sort can be placed inside each other:

<p>Some <span>special</span> text.</p>

Note that the "span" tags, both opening and closing, are both inside the "p" tags. You don't want a misordered set, like "<p>Some <span>special text.</p></span>". The opening tag nearest to the start should also have its closing tag nearest to the end.

It is extremely important that while editing the HTML for your theme, you make sure all opening tags have a matching closing tag. If you have a <div> tag, but no matching </div> tag, this might break the theme.

Featured posts

This section fetches the 3 most recent posts from a chosen tag on your blog. To select the tag:

Ctrl+F to "EDIT YOUR TAG HERE".

On that line, there will be a link inside quotation marks, ending in "tagged=featured".

Change featured to the tag of your choice; for example, "tagged=photo". This tag can include spaces, such as "tagged=my writing".

Save and ensure your posts show up as intended.

By default, the tagged posts are fetched from your blog, but you can change this so that the featured posts are from a different blog:

Ctrl+F to "EDIT YOUR TAG HERE".

On that line, there will be a link inside quotation marks, starting with "https://{Name}.tumblr.com".

Change {Name} to the blog username of your choice; for example, "https://starlightthemes.tumblr.com".

Save and ensure your posts show up as intended.

Be careful not to change any other parts of that section. The code for fetching the posts from blogs is easy to break.

Updates section

The updates section has two editable parts: the title, and the actual updates.

To edit the title:

Ctrl+F to "EDIT HERE: UPDATES".

Scroll a few lines down, until you find the line reading "Latest updates".

Change "Latest updates" to say whatever you want. Make sure the text stays inside the ... tags. For example, if you want the heading to read "My activity", that line of code should read "My activity".

To edit updates:

Ctrl+F to "EDIT HERE: UPDATES".

A little under this line, you'll see a template, with the outermost tags reading <div class="update">...<;/div>. If you're adding a new update, copy this template.

Scroll a few lines down, until you find the line reading "".

Now, for each update, paste the template once over (two updates are present for you to start with), and edit three things:

-> "3-LETTER MONTH HERE": The first three letters of the update month, e.g. "Jan".

-> "2-DIGIT DATE HERE": The two-digit version of the update date, e.g. "01" or "31".

-> "UPDATE TEXT HERE": The actual text that'll show up as the update.

Make sure that all the updates are separate- the starting and the ending of two updates shouldn't overlap.

Make sure all your updates are above the line reading """.

Save and make sure things look how you want them to.

Members list

To change the title of the members section:

Ctrl+F to "EDIT HERE: MEMBERS LIST".

Scroll a few lines down, until you find the line reading "Blog members".

Change "Blog members" to say whatever you want. Make sure the text stays inside the ... tags. For example, if you want the heading to read "The gang", that line of code should read "The gang".

Scroll further down, until you find the line that reads "{lang:Group members}". Again, change this to your chosen title, such as "The gang".

The actual members list can be customized in two ways. One, for group blogs, you can have it automatically fetch the blog members' main blog names/titles/icons. To do this, turn on "Members list" and turn off "Custom members list" in the main theme settings.

The other option is to manually add any group members and their icons/links. This will also allow you to add customized names and descriptions for each member. To use this option, turn on BOTH "Members list" and "Custom members list". Then:

Ctrl+F to "EDIT HERE: MEMBERS LIST".

A little under that, you'll see a template with the outermost tags reading <a class="member" href="//BLOGNAME.tumblr.com">.... If you're adding members, copy this template.

Scroll a few lines down, until you find the line reading "".

Now, for each member, paste the template (two members are present for you to start with) and edit three things:

-> "BLOGNAME": Next to "href" in the tag, and next to "src" in the tag. Change this to your member's username, such as "starlightthemes".

-> "MEMBER NAME": Takes the place of the username. This will show up in bold at the top.

-> "MEMBER DESCRIPTION": Takes the place of the blog title. This will show up at the bottom.

Make sure that all the members are separate- the starting and the ending of two members shouldn't overlap.

Make sure all your members are above the line reading """.

Save and make sure things look how you want them to.

Theme credits: Layout/design/icons by Tumblr, Style My Tooltips by malihu, featured posts by Fukuo, NPF photosets plugin by codematurgy, dark/light mode toggle by eggdesign, custom audio posts by annasthms, scroll to top script by Fabian Lins

Credits:

Tippy.js tooltips by atomiks

Cappuccicons by Suiomi

Dark/light mode toggle by eggdesign

Scroll to top by Fabian Lins