Free tumblr themes and resources

Making a featured tags section

A list of 3 featured tags. The art, text, and gif tags each have a small thumbnail of a recent post from that tag.

I’ve gotten a few questions about this, so I’m going to explain how I’m putting together the featured tags section on my (still in progress/yet to be released) dashboard inspired theme.

This uses JS with v1 of the API, the HasPages block in the theme HTML, and some CSS.

Instead of relying on text options for tags, this theme is grabbing pages based on if it is a tag url or not.

a list of links seen when editing a tumblr theme. There are 3 tag links for art, text, and gifs, and one regular link for an about page.

While I technically have 4 links here, /About is not a link to a tag, so it gets removed.

This uses the API similar to how @fukuo did featured posts, but with vanilla JS instead of jQuery.
How it works:

Select only the links in the featured tags container that include /tagged/ (using a CSS attribute selector for [href*=“/tagged”])
Grab the tag name from the url
Add that tag name to the API url
Use the returned data to add the text, total posts, and any images from the most recent result of that tag
Style/formatting with CSS

I have the JS and CSS here with some comments on what everything is doing so far. I will update this as I make more progress on the theme, so let me know if you run into anything that I need to update!

Posted on Dec 5, 2022 with 222 notes

#tutorials #blog #featured tags #egg tutorial #i definitely rushed this a bit so i will definitely be coming back to clean this up

How to show active pages

While I was redoing my base code, I wanted to have a better way of showing which page I was on in the theme’s navigation.

First make classes for each page type using their blocks. I put this in the class attribute for <body>:

<body class=“{block:HomePage}home{/block:HomePage}{block:AskPage}ask{/block:AskPage}{block:SubmitPage}submit{/block:SubmitPage}-page”>

Then select those classes in your theme’s CSS. In my base code I’m using .links for my navigation, so replace that with the selector for your links.

.home-page .links a[href=“/”], .ask-page .links a[href=“/ask”], .submit-page .links a[href=“/submit”]

Using those selectors, you can add whatever styling you want your active links to have. You can see how I styled it on @eggbasecode.

To do this for custom pages (the ones added with {block:HasPages}), I made a more in depth guide!

Posted on Aug 10, 2022 with 106 notes

#tutorials #blog #egg tutorials

How to automatically change icons based on user input

Adding icons to custom links (whether through text options or using {block:HasPages}) can be tricky when you can’t guarantee what users will want their links to be.

Using some attribute selectors, we can change the icon based on the content in the href attribute.

I’m using Font Awesome for this tutorial, but any icon font that uses unicodes in pseudo elements (:before or :after) will work!

My HTML:

{block:HasPages}

{Block:Pages}

<a href=“{URL}”><i class=“fa fa-link”></i> {Label}</a>

{/block:Pages}

</div>

{/block:HasPages}

By default, it will be the link icon. I can change this icon if a user is adding a tag as a link by selecting any link with “/tagged” in its url:

.links a[href*=“/tagged”] i:before {

content:’\f292’;

}

A breakdown of why/how this works and more examples:

Let’s start with the first part

.links a

This is selecting all of the anchor tags inside of our links container

.links a[href*=“/tagged”]

is selecting the href attribute that is inside of a link.

If I were to do

.links a[href=“/tagged”]

it would only select links with that exact match.

by adding the *, i’m selecting any link that contains /tagged somewhere in the link. this way we can select *all* tags, not just one tag at a time.

.links a[href*=“/tagged”] i

This is only selecting the i elements inside of links that contain /tagged. This is important because otherwise we would be selecting every i element, but we only want to change the tag links.

.links a[href*=“/tagged”] i:before

and lastly we are selecting the :before pseudo element that Font Awesome uses to add icons.

What else can I do with this?

You can do a lot with attribute selectors! You could repeat this process for other links like discord, twitch, about pages, faq, etc.

Here is how you would target external links:

a[href^=“https://”]:not([href*=“tumblr.com”])

or if you wanted to include the possibility of http:// you could do either of these:

:where(a[href^=“https://”], a[href^=“http://”]):not([href*=“tumblr.com”])

a[href*=“://”]:not([href*=“tumblr.com”])

Posted on Sep 4, 2021 with 151 notes

#tutorial #css #tutorials #custom pages #custom links #egg tutorials #blog

sidebar-options.css

Easy, customizable, and responsive layouts

Live Preview

Using this stylesheet you can:

Customize the margins, size, and order of your sidebars and posts
Reduce the amount of CSS you need to write
Automatically make your layout responsive
Add theme options for users to customize the theme’s layout without touching the code and keep it responsive

This is made with theme makers in mind, so some HTML and CSS knowledge is required, but you do not have to write CSS of your own.

How to install

Keep reading

Posted on Aug 22, 2021 with 180 notes

#tutorials #coding #theme-hunter #tumblr theme #custom themes #egg tutorials #blog

Anonymous asked:

Hello sorry to bother you but I was wondering what the CSS rules are for reblogged captions from tumblrs default theme/dashboard? For context I'm trying to make my own theme and blockquote styled reblogs are terrible for long reblog chains. I was just wondering if theres a way to replicate how tumblr styles reblogged posts on the dashboard. I'm just asking since I've been trying to make it but I'm having no luck. If you answer this then. Thank you and have a good day! :)

Hi! Yes there is! Basically instead of this:
{block:Caption}

{Caption}

{/block:Caption}

You’re going to separate it by original posts and reblogs. For original posts you’ll need to wrap your caption in {block:NotReblog} like this:

{block:NotReblog}

{Caption}

{/block:NotReblog}

And then for reblogs, wrap it with {block:Rebloggedfrom}.
This is like NotReblog which determines whether or not a post is an original post or a reblog.

From there we need to have the blocks for the *actual* reblogs, which is {block:Reblogs}.

If you want it to look like the dashboard, you will need to make a section for the usernames and/or icons, which you can do by using {Username}, {Permalink}, and {PortraitURL-64}.

For example, a basic way of doing this would be <a href=“{Permalink}”> <img src=“{PortraitURL-64}”> {Username} {block:isdeactivated}deactivated{/block:isdeactivated}</a>

And then lastly, you’ll need {Body} for the content.

All together, you’ll have something like this:

{block:Caption}

{block:NotReblog}

{Caption}

</div>

{/block:NotReblog}

{block:Rebloggedfrom}

{block:Reblogs}

<a href=“{Permalink}”> <img src=“{PortraitURL-64}”> {Username} {block:isdeactivated}deactivated{/block:isdeactivated}</a>

</div>

{Body}

</div>

{/block:Reblogs}

{block:Rebloggedfrom}

{/block:Caption}

Keep in mind you will need to do this for text posts too, just without {block:Caption}

Posted on Jun 14, 2021 with 26 notes

#answered #dashboard captions #tutorials #egg tutorial #tumblr themes #page theme #blog

Anonymous asked:

hello, i was wondering what you would gauge the difficulty for making your own base code for an html beginner would be? i've taken some computer science classes so i am familiar with coding processes. would using the tumblr page on making custom themes (/docs/en/custom_themes) be enough or do you generally advise people to start with other theme makers' base codes? thanks! i really appreciate your blog and it helped me get started learning html/css!

Hey! I think if you are familiar with code, html shouldn’t be too hard to pick up on. It’s very straightforward in my opinion (<header> is header, <footer> is footer, attributes are all attribute=“value”, etc). So as soon as you get familiar with the syntax, it will pretty much always follow the same format.

The official theme docs are a good place to start! But I don’t recommend using their example as a base. It works, but it doesn’t really fit how most people structure a theme and the people I know that have used it had more trouble than it’s worth compared to other base codes. I use the other parts of the base code all of the time for references, though.

Good luck with your first theme! Even if you don’t use my base, feel free to tag me. I love seeing new theme makers and want to support them however I can!

Posted on May 4, 2021 with 12 notes

#how to code #answered #tumblr themes #theme making #tips #egg tutorial #tutorials #blog #Anonymous

Anonymous asked:

do you have any good how to start coding themes tutorials? i really want to get into theme designing but i can’t find any —c anon

I recently released this as a part of my theme revamp yesterday: https://eggdocs.tumblr.com/eggucation. There is a ‘learn to code’ section which covers web design basics and my theme base code, which has in depth explanations on tumblr themes.

I also have a Common Theme Mistakes post for general theme making tips, and this follow up ask on classes vs ids (a lot of older theme tutorials used an id for posts, which is something you shouldn’t do).

There’s a lot out there besides mine, though! @theme-hunter has a tag for base codes in its sidebar.

It can be hard to sort between up to date and outdated ones, though. As a general rule for an old vs new base/tutorial, you wanna look for some that have dashboard captions (unless you want blockquotes, but I personally avoid them for readability purposes). Also keep an eye on the date the posts were made. If it’s from 2014, for example, it’s probably not up to date.

Dashboard captions will include things like this in the captions:

{block:NotReblog}, {Block:Reblogs}, {block:IsOriginalEntry}

While blockquote captions just have {Body} or {Caption} for captions.

I hope this helped, and good luck with your first theme!

Posted on May 4, 2021 with 39 notes

#answered #tips #how to code #tutorials #egg tutorials #blog #Anonymous #c anon

Anonymous asked:

Do you know of any tutorials that cover tricks people have discovered for manipulating the tumblr controls? For example, I swear I saw one once that covered how change the color of the 'online dot' on the messaging bubble, but I cannot find it again. I've been trying to manipulate these things for days!

The most in depth way I’ve seen is from @rachaelthemes https://rachaelthemes.com/post/629994202009419776/introducing-tumblrcontrolsjs-a-jquery-script

You can also just use css if you don’t want major changes. You can use any of the classes you find by inspecting the tumblr controls. I’ve used .tmblr-iframe and .iframe-controls-container before.

Changing the online dot is doable by using the same method as my how to change your ask box tutorial.

.tmblr-iframe {

filter: hue-rotate(_deg);

}

(replace _ with the number you want). Using 90deg would change your dot to blue, 210deg is a pinkish color, etc.

You could also try combining some filters like this

hue-rotate(70deg) invert(1);

Which would give you black tumblr controls with a red dot.

You could also do brightness for pastels:

hue-rotate(120deg) brightness(1.4);

This gives you a pastel purple!

Posted on Jan 2, 2021 with 15 notes

#answered #css #tutorials #tumblr controls #blog #Anonymous