#egg tutorial

[eggdesign]

Making a featured tags section

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.

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!

[gingerreggg]

Ok so I was watching Battle Tendency and Joseph's hair spikes keep switching from side to side when he turns his head? How do you draw him when he's facing straight ahead?

I didn’t actually really think about this until now, but, after going through an episode and watching Joseph’s hair, I realized that if he’s facing straight ahead, his bangs will always be on the left side of his head (well, our left, his right)! Check out my drawing in comparison to his (crunchy image) nendoroid:

They point to the left!

By default I always draw Joseph’s hair to the left, it just felt more natural. But now I know why, cause that’s how its portrayed!

[eggdesign]

How to change your ask box colors part 2

In part one of this series, I covered some simple changes like black/white and using hue-rotate to change the colors. With some extra steps, we can change way more than just that.

This is aimed at FAQ pages and anything else where you’re putting your own ask box somewhere, but I will make a tutorial for themes as well!

So first you’ll need 3 things:

A container

A wrapper for your iframe

The ask box iframe

This is how my HTML is set up:

<div class="ask-container"> <div class="ask-wrapper">    <iframe frameborder="0" scrolling="no"height="190" src="https://www.tumblr.com/ask_form/{name}.tumblr.com" style="background-color: transparent; overflow: hidden; height: 190px;" id="ask_form" contenteditable="true" data-text="Enter text here"></iframe>    </div> </div>

Here’s the CSS:

.ask-container {    background:linear-gradient(to left, red, orange, goldenrod, green, blue, purple);    padding:2px; } .ask-wrapper {    mix-blend-mode:hard-light; }    

What I’m doing here is making our container have whatever background I want, then making the wrapper with the iframe inside of it essentially act as an overlay that picks up the color behind it. 

Here is the result:

Using some of the methods I covered in part one, we can also make semi-transparent ask boxes to go over images, like this:

I changed my background for my container to an image instead of a gradient and added some more padding.

Then for the iframe, I applied the filters like in part one:

#ask_form { filter: invert(84%); }

You can also do this with a white semi-transparent background by going for a lower percentage.

If you play around with mix-blend-mode, you get results like this too:

Please let me know if you have any questions or if you want me to add anything to this tutorial series!

[eggdesign]

Free tutorials: Web Design Basics

Since I’m no longer teaching, I wanted to share the resources I provided for my students. I put everything in a google drive account and added it to my ko-fi page (you can click on the source of this post to take you directly to the post, or visit ko-fi.com/egg)!

While donations are very appreciated, this resource is 100% free to access! 

[eggdesign]

How to change your ask box color

This idea was first mentioned by seraphymns several years ago, but they have since deleted their blog. Since it was hidden behind a read more, the tutorial is gone. 

I was able to find some pieces of what they did, so I’m going to share some variations and similar methods! Keep in mind this will also mess with the icon image, but I don’t think that takes away from the ask box function.

Black/white:

#ask_form {     filter: grayscale(100%)!important; }

result:

black:

#ask_form { filter: invert(100%) grayscale(100%)!important; }

result:

Other colors:

by using hue-rotate, you can edit the degrees here to create basically whatever color button you want. Here are some examples:

filter: hue-rotate(60deg); - turns it purple

hue-rotate(200deg)  - orange

Other methods:

You can also try mix-blend-mode for similar results. However, you will need to apply this to your container, not the ask box itself. This is trickier on regular themes, but can work well with FAQ pages or other pages where you’re making your own ask box.

mix-blend-mode: difference;

will give you this:

If I come up with any other examples I’ll make a part 2!

[eggdesign]

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}

<div class="caption">

{Caption}

</div>

{/block:NotReblog}

{block:Rebloggedfrom}

{block:Reblogs}

<div class="reblog-header">

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

</div>

<div class="caption">

{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}

[eggdesign]

Hi! I hope you're doing great. I just wanted to make a suggestion? Can you have a link to your tutorials / tutorials you wrote on your blog? Yesterday I had been looking for this specific tutorial that I only knew the subject of and it took me some time to find it on my blog. It turns out it was authored by you! My code resource blog back then was ultimate chaos and tag systems are a failure... I've been learning to code on and off for the past few years and just taking my sweet time to learn what I can. This might not really be on you (since I'm the one with a messed up directory) but can you also suggest good ways/practices to manage tags and content?

Hey! I do have a tag for my tutorials! It's in the header of my desktop theme, but #egg tutorial and #egg tutorials is what I use. I also have a general #tutorials tag

For tagging systems I pretty much just include egg + the subject for my own stuff. egg design, egg themes, etc. And then for everyone else's things I have just art, recs, design, tutorials, etc. Nothing fancy. But I think making a list of all the types of content you want to post about and be able to reference later. That might help determine how specific or long your tag list needs to be.

[eggdesign]

Common theme mistakes

When I was first starting, there were several things I missed and that impacted the functioning of my earlier themes. 

Using an ID for posts instead of classes

Why this is important: IDs can only be used once on a page. Adding the same IDs for posts could cause issues for your theme, though you can use something like {PostID} that generates a unique ID for each post. If you’re unsure, it’s safer to use a class.

Forgetting to add {block:Date} or {block:NoteCount} around your post info

Why this is important: these blocks have an important purpose. It makes sure that this info will only show if your post has a date or note count to display. If you don’t have these blocks, this info will (incorrectly) display on any extra page you on your blog, including your ask and submit pages. 

Not checking all post types

Why this is important: It could potentially break your theme. I still make this mistake sometimes. While you don’t have to feature every post type in your preview, you should still try it out before releasing your theme. Though your theme doesn’t have to support all post types either (unless you want it to be in the theme garden), you might get a lot of support questions about this.

Forgetting {PhotoAlt} to your photo posts

Why this is important: This is required for the theme garden, but it’s also important for accessibility! This is a smaller thing in comparison to the others, though, and won’t necessarily break your theme to most users.

Not checking multiple browsers or screen sizes

Why this is important: Obviously responsive design is important on its own, but even if you don’t plan on making your theme fully responsive, your font sizes and containers can be very inaccessible on smaller screens. You can opt for percents, em, vh, and vw instead of px to help prevent this a bit if you’re not confident in using media queries yet. 

You don’t have to do all of these to have a theme that people can enjoy and use, but keep in mind that not doing these can break the theme for some users, or otherwise give people a hard time using them.