#theme help: customization

[nonspace]

hi nonspace. i'm a long term fan of your stereo theme and i would like to add a sidebar image space between the search bar and the copyright ones. is there a way to do it? sorry if you already answered, couldn't find anything that worked. thanks!

Hi! That should work if you add an image in the code here:

You may have to add additional CSS styling to make sure your image is the correct size.

[nonspace]

Hello, is it possible to change the stereo theme so that it displays themes uploaded to the theme assets instead of google fonts?

Hi, yes this is possible but you'll need to add it manually.

You'll need to follow this to define a name for the font and point to the file: https://www.w3schools.com/css/css3_fonts.asp with the url being the URL to your font asset.

After that, you can change the "--fontFamily" variable from the google font placeholder to your font.

Hope this helps!

[nonspace]

Hi, love the stereo theme. Is it able to add a search bar/search function to it? Wasn't able to find the answer to my question on your page - but if it was there, I apologise for the inconvenience. Thank you in advance X

Hi! I'm glad you love the theme! I did never add search to the theme, I'm not even sure why.

I've added search as an optional feature to the theme now. You'll need to reinstall it from the Theme Garden and toggle the "Show Search" option. (You might have to reload the page and toggle the switch for it to work properly)

[nonspace]

Hi I'm been using your after image theme, it's an old but wonderful page theme that I love so much. I was wondering if there was a way to have only a single group appear when the page loads, instead of the default being every tile, I'm trying to figure out how to have only group 1 appear while keeping say group 2 and 3 hidden by default until their filters are picked.

Otherwise, thanks for making such a great theme!

Hi! That's definitely possible but I don't have the time to make this happen for you especially on such an old page theme.

Without remember how exactly the scripts look in that theme, you might need to slightly alter the javascript. Hide all other groups by default (should be doable with CSS) and then on click show other groups (which the script already does). I recommend having a look at the isotope documentation as I think that's what that theme uses.

There might also be some helpful things in this theme's help tag and the filtering help tag. Sorry I can't do more to help here!

[nonspace]

Hey! I just started using Stereo & am loving it, but with the background image I inserted, it's kind of hard to read the blog title/bio text. Is there a way to alter the code to include some kind of text box (box shadow? higlight? not sure the proper word, I've been browsing around code sites) to add some visual contrast?

Hey! I'm glad you do!

You could give the sidebar a background color:

aside { background: green; }

Or try something like text-shadow: https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow

[nonspace]

Hi! I've been trying to add Magnus' Isotope Combo Filter to your Succulent for the past couple of weeks with zero success. I've reached out to other people who know coding better than I do (I'm a wee novice), and they said that the filtering built into Succulent won't work with Magnus's combo. I'm very confused. Any guidance would be most appreciated (@ angieshenanigans). Hope you have a good week!

Hi! It does work it just needs some extra steps 😅

I made a version with combo filters for my MIRROR IMAGES theme which uses the same set up as SUCCULENT. You can have a look here: https://github.com/n0nspace/tumblr-themes/blob/main/sheet%20pages/mirror-images/mirror-images-sheets-combofilters.js

The main thing is that the combo filter script needs to be places within the buildLayout() function. That's where you can find isotope as well.

[nonspace]

Hello! I have two questions in regards to the spotlight template, the first one being about the social media icons. I have been trying to link my instagram, Tiktok and Pintrest and ig was the only one that took. I did go into the code and see that it's only sat up for ig, twitter and facebook. I'm not really sure if theres a solution or even how to proceed due to how the code is sat up. The second is if theres a possibility to add a photograph as the background to the sidebar/post background.

Hi! The icons used in the theme are Feather Icons. There's currently no Tiktok or Pinterest icons available but you may use other icons to represent them by entering the name of the icon into the icon field.

If you really wanted those icons you could use manually add FontAwesome to the them. Here's their getting started guide. You'll need a kit that will go within the <head></head> tag and then you'll have to replace the Feather Icons. Exchange:

<i data-feather="{text:social one icon}"></i>

With (using the pinterest icon as an example):

<i class="fa-brands fa-pinterest"></i>

Adding backgrounds:

I'm not sure where exactly you want to add the background, if you're looking to add the same image as a whole background but the principle is the same for all. Add the following to your Custom CSS.

You can find “Custom CSS” in the Customizer under “Advanced options” (at the very bottom).

#container { background-image: url(‘https://64.media.tumblr.com/aec3ac37addf5ed8968a495269bac308/bfeb7d27dfef6f75-90/s1280x1920/ba4f9969373604e8f403bacc8aade5c218a917f7.jpg’); background-position: center; background-repeat: no-repeat; background-size: cover; }

aside, #content_wrapper { background: transparent; }

If you want separate images, replace the selector (#container) with aside for the sidebar and #content_wrapper for the post container background.

Replace the image URL (under “background-image”) with your image’s URL. If you want it to repeat, remove “background-repeat”.

If you want to learn more about background images read on here.

Hope this helps!

[nonspace]

Hi there I am using your Excess theme, i was wondering how to change the solid color background to an image or repeating images?

Hi! You can add the following to your Custom CSS:

#container { background-image: url('https://64.media.tumblr.com/aec3ac37addf5ed8968a495269bac308/bfeb7d27dfef6f75-90/s1280x1920/ba4f9969373604e8f403bacc8aade5c218a917f7.jpg'); background-position: center; background-repeat: no-repeat; background-size: cover; }

aside, #aside_inner { background: none; }

Replace the image URL (under "background-image") with your image's URL. If you want it to repeat, remove "background-repeat".

You can find "Custom CSS" in the Customizer under "Advanced options" (at the very bottom).

If you want to learn more about background images read on here.

Hope this helps!