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:

1. A container
2. A wrapper for your iframe
3. 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!

CSS scrollbar tutorial

as requested, here’s quick tutorial on how to make custom scrollbars.

So, a custom scrollbar is only available in webkit browsers (Chrome, Safari, and Opera). This means that any other browser will not display the scrollbar and will just use the default.

In your css, you’ll need, you’ll need to add the pseudo-element ::webkit-scollbar.

A pseudo element is used to style parts of an element. It essentially allows you to create a new type of element that you wouldn’t be able to use normally. this is different from a pseudo class, which adds styling to a specific conditions of an element (like :hover and :nth-child).

So, for a custom scrollbar, you’ll need to include ::webkit-scrollbar to set the width of the scrollbar you’re making. You can also set the height if you want to style a horizontal scrollbar.

 Please do not make your scrollbar tiny. While it’s a common aesthetic in some themes, this makes it very hard to use. You don’t want your users struggling to navigate your theme.

Then you can use ::webkit-track . the track is the background/area that your scrollbar can go up and down.

::webkit-thumb is the part of the scrollbar you click and drag.

With ::webkit-thumb, you can add pseudo classes to it to style it whenever someone hovers over it and/or selects it.

Examples under the cut!

Keep reading