I’ve made a tutorial for @javitrulovesims on how to create a custom Tumblr page, specifically on how to create a Sims downloads page using the Cayla page theme by @ikilledtherpc.
If anyone else is looking to do something similar, this may help you as well. 😊
Lots of pictures and text under the cut! This is a very long post.
Disclaimer: all of this I’ve learned through trial and error, so my HTML skills are certainly not perfect, but it’s enough to get a functional page.
Step 1: Creating a New Page
Go to “Edit Appearence” for your blog.
Step 2:
Scroll down and select “Edit Theme”.
Step 3:
Scroll to the bottom of the sidebar with the editing options. Select “Add a Page”.
Step 4:
Once on the new editing page, go to the bar that says “Standard Layout”. Select the drop-down menu and select “Custom Layout”.
Where it says “yourblog.tumblr.com/url”, enter a ending for the url. For example, I wanted the link to my downloads page to be “emy-the-gamer.tumblr.com/ts4-downloads”, so I simply entered “ts4-downloads”.
If you have the default Tumblr page theme, if you select “Show a link to this page”, it will automatically create a link on your blog to this custom page. If you use a custom blog theme, you will have to edit the theme so that there is a link on your blog that leads to the url you’ve just set up.
Step 5: Retrieving the HTML code for the page
Go to this link to find the html code for the page. You can click on the “Preview” links to see an example of how this theme will look. Then, click on one of the links (underlined in red) for the theme you prefer (for my blog I chose the one without the header).
Step 6:
The link will take you to a page like this. Copy all of the text in the box (there is a lot).
Step 7:
Paste that text in the grey box on the editing page. Hit the “Update Preview” button. You’ll need to hit this button every time you make a change to the code to see the change come into effect.
Step 8:
After hitting update preview, your page should look like this. Now you can start editing the page to make it your own.
Look out for comments like these in the text, @ikilledtherpc has put instructions in the text that are very helpful and will help to show you how the code should look after you’ve edited it. In this particular instance, this line of code changes the title of the page (which comes up at the top of the browser window, on the tab).
Step 9: Editing the Top Bar
Scroll down until you find this section (it is a fair way down the page):
This section is where you edit the top bar. This has the title of your page (which can be whatever you’d like), an optional subtitle, and a link back to your blog’s home page.
Here you can see where I’ve made changes and how it affects the page after I hit “Update Preview”. Where I’ve made changes is where you need to write what you want your title to be, your subtitle, and your home link, as well as where to put your blog url so that the home link works.
If you don’t want a subtitle, all you have to do is delete the text that says “TIP: You can use combinations of filters to narrow down your character search.” and leave that area blank. If you later decide that you want to add in a subtitle, simply type whatever text you want in between <span> and </span>.
Step 10: Editing the Side Bar
Now we’ll move on to editing the side bar. This is a really cool feature of this page, there are filters that can be used to find a specific type of CC, depending on what you set as your filters.
Pay attention to this comment! This comment outlines important things to remember (such as not deleting the code for the “All” button, which would result in the filters being unable to reset), and shows you how the code for the filters should look.
Here you can see how I’ve changed the code, and how it changes on the page after hitting “update”.
To change the title of a category, type what you would like it to be called between <h1> and </h1>. As I note in the picture, I also change the data-filter-groups=“(text)” to match the heading of the category, mainly for simplicity’s sake. It doesn’t seem to actually affect anything (this is where I feel like my passing knowledge of HTML is apparent 😅. Hey, as long as the page works, that’s all that matters 😉)
The second part is changing the filter names and filter tags. The tags will be used later, so make it something that is easily remembered and that you associate with the filter name (for example, for CC that I’ve made for toddlers, it’s tagged with “.todd”). The tag does not have to match the filter name. The tags are in green, while the filter name is in white.
Here you can see an example from my downloads page:
Step 11: Editing the “Grid”
This will be the main content of the page. These squares will contain links to your cc and pictures of it, and these squares will disappear and pop up again with the selection of the tags in the side bar.
Again, pay attention to @ikilledtherpc’s comments! This will help keep the page functional and looking nice.
Here you can see how I’ve edited the code.
The title of the square goes between
(the white text).
The subtext of the square goes between
. You can leave this section blank if you choose.
After <a href= put a link to your download in between the quotation marks. This will create a link to the download through the user clicking on the circular picture.
You can also see after <div class=“grid-item that I’ve put in some example tags. Say you’ve uploaded a dress for female Sims, you might tag it with something like .dress and .fem if you’ve set those tags up in the filters during Step 10.
Step 12: Putting Pictures in the “Grid”
In order to have pictures in the squares, you will need somewhere to upload those pictures to. I have a Blogger account that I upload to, but you could also make private posts on Tumblr to upload the pictures.
The pictures need a resolution of 360 pixels by 360 pixels. You can use a photo editing program to set the size of your photos.
Once you have the picture uploaded, right click on it and select “Copy image address”.
This will give you a link that is ready to be pasted into the code.
After <img source= paste the link between the quotation marks. The picture should appear after you hit “Update Preview”. Remember, if the post or blog on which the original picture is posted gets deleted, the picture will no longer show on this page either.
Here is what the code for my downloads page looks like after I’ve edited it.
Step 13: Changing the Colours
Finally, we come to the final part; choosing the colours of the various elements on your page.
First, you will need to Google “colour hex picker”. Through this you can choose whatever colour you prefer, and it will tell you the hexadecimal code for that colour. You’ll need to put this hex code into the HTML for that colour to show up.
You’ll need to scroll up to the top of the HTML code. From there we can work our way through and I’ll show you where to put the hex codes to changes certain parts of the theme.
Scroll Bar
This section changes the colour of the scroll bar.
(Removed a picture of the scroll bar because the scroll bar is very thin and the picture ended up looking very strange on mobile. The scroll bar consists of a thick line that scrolls down a thinner line on a different coloured background, default grey scroll bar on a white background)
The top part of the code changes the colour of the thin line at the back, while the bottom part changes the colour of the thicker part. These don’t have to be the same colour.
Top Bar/Side Bar Headings
(Note: in the pictures I refer to the top bar as the header. While writing I realised that this may be confusing as the other page theme option has a floating header in addition to the top bar. In all of my pictures, where I say “header”, I mean “top bar”)
This part changes the colour of your top bar and the text in it, as well as the colour of the headings in the side bar.
.toptitle refers the title.
Under #top, background refers to the colour of the top bar, and color refers to the colour of the subtitle text.
h1 refers to the headings in the side bar.
Home Link
.return refers to the link back to your home page.
Under #top a:hover you can select a different colour, so that when the mouse hovers over the link, the colour of the text changes.
The Grid
Here is where you can change the colours of the squares in the grid.
“background” is the colour of the box (I’ve chosen aqua blue in my case). “colour” will change the colour of the text.
Side Bar
Under .sidebar, you can change the colour of the background of the side bar.
Mine is still the default white (which the colour that the code #fff refers to. Black is #000).
Page Background
I’ve been more or less going in order through the code, but I skipped the colour of the page background (which is near the top) because this one requires an extra step.
Under “body”, you will have to enter a new line of code. Hit “enter” to make a new line, and type “background:”. After this type in your hex code of choice as with all of the previous colour changes.
Done! 😄
That is the basics of using this page theme to create a Sims downloads page.
Apologies for not covering the option with the header, as I stated before, I chose the page theme without the header, however @ikilledtherpc has included comments in the code for the header theme as to how to edit the header.
I also apologise for not going over how to set an image as a background like I have on my page. That was a little more difficult, as I had to write new code for that to work, and it was a painful process getting it to work properly, and would probably be too much in a tutorial like this which already has a lot of information to take in.
(Extra little disclaimer – I was writing this between midnight and 2am so if there are spelling mistakes or misplaced words, that’s why 😅)
Good luck! I hope this helps. 😊
Emy The Gamer 