Your gateway to endless inspiration
Css - Blog Posts
ON THE GRIND
I'm currently relearning HTML to
a) make my own website
b) have the ability to edit my blog and other profiles that allow for html customization
and most importantly
c) to be as cool as the person that sat in front of me in one of my art lectures who had made their entire canvas page set with a very cool 2000's black and red theme
As a kid who grow up listening 2000/2010 rock indie alternative bands this song is soo 2010 coded
/// Team Fortress: Source Main Menu ///
Coming October 7, 2004.
Ahhh my first code! I hope you enjoy it as much as I am enjoying it!
Used one of @aurumcodes PT codes as a basis of how to code the elements, but tried to figure out different things without using the complete code! If it bears too much semblance to their codes, I'll take it down immediately!
CSS is usually one of the first programming languages that people who are aspiring to become programmers are learning. Learn CSS with the best courses that internet has to offer! These courses give the best learning experience in the topic of CSS coding language according to ratings and reviews from other learners š So click the link to find Top 5 CSS Courses According To Reviews š
Learn Frontend Coding with the best courses that internet has to offer! According to ratings and reviews from other learners these courses give the best learning experience in frontend coding š So click the link to find Top 5 Frontend Bundles Courses According To Reviews š
This post is so helpful. It covers the basic of CSS coding in order make a good, responsive website. š I actually applied the newly acquired knowledge to my Tumblr blog and it worksā¼Ā š
How To Make Tumblr Themes: Part I
Introduction
What we will cover in this tutorial:
HTML review (bare minimum you need to make a basic theme)
CSS review (bare minimum you need to make a basic theme)
Meta Tags
Other <Head> codesĀ
Documents and websites we will consult regularly in this tutorial (keep these open in a tab):
W3Schools HTML
W3Schools CSS
Tumblr Theme document
HTML Review
Before making a theme, you should know that HTML consists of tags (keywords surrounded by angular brackets like <html>) and that they come in pairs (opening and closing like <html> and </html>).
You should also already know basic HTML elements such as links, headings, paragraphs, lists, formatting and images. If not, please learn it at the website I provided.Ā
The most common way to group and position things in a website layout is to use div layers or tables. In this basic theme tutorial, I will cover div layers first since it is easiest to understand.Ā
Here is a coding for text that is NOT inside a div layer:
[click for larger view]
Here is a coding for text that is inside a div layer:
[click for larger view]
Also notice that I used CSS to dictate the width and background of the div layer. That is how CSS and HTMl is connected; you can use CSS to demand HTML elements to look and be positioned a certain way. So in order to make columns in tumblr themes, you use CSS to position and ādecorateā the div layer which will wrap your columns (ie: posts, sidebar etc).
CSS Review
In relation to what weāve discussed above, CSS commands HTML elements. So you need to be very familiar with CSS. CSS is the codes between the <style type=ātext/cssā> and </style> tags (as can be seen in the previous image). In this tutorial, I will use the following terminology:
Now, div layers can either be id-ed or class-ed. The id selector is generally used for a single unique element while the class selector is used for a group of elements. Ā While there is that difference, I discovered it doesnāt matter. You can use id selectors for multiple/repeated layers.Ā
[click for larger view]
In the above, the selector for id is preceded by a ā#ā (outlined in pink) and the selector for the class is preceded by a ā.ā (outline in blue). Now, you can use basic CSS properties to specify the position, dimension and style of the layer.Ā
You will need to know 90% of the properties described onĀ this site; particularly background, color, fonts, links, text, margin, padding, z-index, position, display, dimensions and borders. Since it is too much for me to cover them all, please review/learn them before proceeding.Ā
Getting started
Now weāve gone over the idea of how HTML and CSS will be needed, we can apply it to tumblr themes. So, we start with our basic HTML tags for any basic webpage:
<title></title> is where you specify the title of the blog which will show up on the browser tabs. Looking at the basic variables section of theĀ custom tumblr theme document, you can see {Title} and {block:PostTitle}{PostTitle}{/block:PostTitle}.
{Title}Ā is a āvariableā which corresponds to the blog title (which you customize in the customization page). For example, my theme blog title is āettudisāā¦
{block:PostTitle}{PostTitle}{/block:PostTitle} corresponds to the title of the post (of the individual posts). The āblocksā, {block:PostTitle} and {/block:PostTitle}, renders so that the post title shows up only when there is a post title (in other words, when you go to the individual post page. For example, the title of my āterms of useā postā¦
Generally, it is set up so the itās the {title} followed by a dash, then {block:PostTitle}{PostTitle}{/block:PostTitle}. So, it will look something like this:
<title>{Title} - {block:PostTitle}{PostTitle}{/block:PostTitle}</title>
We also can add in favicons. To make the favicon the same as the bloggerās userpic/profile icon, we can just link toĀ {Favicon}, like so:
<link rel="shortcut icon" href="{Favicon}" />Ā
Meta Tags
The meta tags in tumblr themes are what allows the bloggers to customize the themes colours, upload images, select options, add links etc, as described in the appearance options. Then, you can line up the meta tags to the HTML or CSS.
For colours, it will look something like this:
[click for larger view]
As you can see, the colours in the meta tags can correspond to the HTML or CSS. So the default colours (indicated in the meta tags, ie: #FFFFFF, #000000 etc) are what the colours are if the blogger reset to defaults. If the blogger decides to customize to his/her own colours, the colour he/she chooses will correspond and fill into the HTML or CSS in the live preview.Ā
For custom fonts, it will look similar to:
[click for larger view]
Similar to colours, the meta tags correspond to CSS (or HTML). However, tumblr only provides a few custom fonts (ex: arial, georgia, impact, courier new, helvetica, tahoma, trebuchet ms, times new roman etc) that are selected via a drop-down menu on the customization page.
Now booleans are rather important in tumblr themes. These meta tags allow the bloggers to select an option.
[click for larger view]
In this, the option is whether or not āif infinite scrollingā should be on the blog. The meta content is ā1ā if there is infinite scrolling as default. If infinite scrolling is not default, it meta content should be ā0ā.
Outlined in orange, {block:ifinfinitescrolling} and {/block:ifinfinitescrolling} wraps around the HTML (or CSS) that will be activated if the blogger decides to select the infinite scrolling option. If not, then the HTML (or CSS) in {block:ifnotinfinitescrolling} and {/block:ifnotinfinitescrolling} will be activated.Ā
Booleans can apply to anything, such as whether or not to show tags on index page, size of post, number of columns, show side image ~ whatever your imagination allows you!
On this note, this sort-of gives you the idea of how tumblr codes work. The āblocksā act as activators for a certain code that it contains. Remember they always come in pairs as well, an open and closed one.
In the above example, you can see that there are the blocks, {block:Pagination} and {/block:Pagination}. This means that the codes inside these blocks will only show if there are actual pages; so in an individual post page, the pages will not show up.
Another meta tags are text. You can allow bloggers to enter their custom text into a theme. You can do a lot with text, you can also use it as an input for CSS hex numbers, dimensions (they would enter pixels), labels etc etc.Ā
In this particular example, Iāve used custom text as a way for bloggers to enter links. The blocks (in pink), as Iāve explained previously, act as activators for when the bloggers do enter a URL in the ālink 1ā meta tag (outlined in blue).Ā
Tumblr also allows bloggers to upload images. So bloggers can upload their own background or other images they want (that you specify) into their theme.Ā
[click for larger view]
Shown here, you can see that the meta tag for the background image dictates the CSS body selector (outlined in orange). Ā In the content, you can insert an image (āhttp://static.tumblr.com/ā¦ā) as a default image.Ā
As for the sidebar image meta tag, it uploads the image into the HTML. Blocks (shown in pink) can also be used in case the blogger does not want to upload an image (or if an image is not uploaded, an alternate coding can be shown).Ā
Other <head> codes
You can also insert aĀ {CustomCSS} block at the bottom of the themeās CSS style block (before </style>) so that bloggers can insert their own CSS if they want to.Ā
There is also a meta tag that is involved in search engines.Ā
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
This allows the description of the blog to show up if the blog is searched on the a search engine (such as google).Ā
And thatās all I have to say about meta tags which is crucial if you plan to make themes for the public use.Ā
Key Points
To clarify and emphasize, the terms, āvariableā and āblocksā are what makes up the tumblr theme.Ā Variables are used to insert dynamic data. As weāve seen in previous example, {Title} is a variable and so are {Image:Sidebar}, {Color:Background}, {Text:Link 1} and so forth. They come in singles, meaning, you do not need to close them.Ā
Blocks are used to render (activate) a block of HTML, CSS, or a set of data. As weāve seen in previous examples, {block:Title} and {/block:Title} are blocks, and so are {block:ifinfinitescrolling} and {/block:ifinfinitescrolling}, {block:iflink1} and {/block:iflink1}, and {block:ifnotsidebarimage} and {/block:ifnotsidebarimage}. These come in pairs, meaning, you do need to close them similar as to you would close a HTML tag.
The meta tags allow users to customize the theme without editing the HTML/CSS themselves. They only have to customize via the Appearance section on the customization page.Ā Weāve covered all the meta tags that tumblr has: colours, fonts, booleans, text and images. Every meta tag can correspond to a HTML/CSS component. So using HTML and CSS, you can specify the look of a certain variable and meta tags can give customization options for the HTML and CSS.
The End
I think Iāve covered all the basic ideas of what tumblr themes need in order to work. Though this tutorial was more of introduction on just the fundamental foundations of what weāre going to build, next tutorial will get into constructing the tumblr theme using variables, blocks, CSS and HTML.
I hope I was clear, concise and thorough in my explanations. If I missed anything or if something wasnāt clear, please let me know as all of this sort-of comes to me naturally now so I wouldnāt know if I was being abstruse or convoluted.Ā
ā§ļ½„ļ¾: Customize your highlight color! :ļ½„ļ¾ā§
I recently came across a blog where when I went to highlight some text I noticed it was a unique color!!! (ćĀ°ćĀ°)ć
AND IT'S SO SIMPLE TO DO
all you do is go to your css file and add this:
::selection { background: <hexcolor> }
Enjoy!! ā”āø(Ė¶Ė įµ ĖĖ¶)āøā”
My 365-Days-Streak On SoloLearn ...
I have been learning programming with SoloLearn every day for 1 year or 365 days now: Python, C#, HTML, CSS and JavaScript. For me, SoloLearn is one of the best providers for learning coding on the go using a tablet or smartphone.
Post #117: SoloLearn, My 365 Days Streak, 2024.
SoloLearn was one of my favourite learning platforms for programming languages on the internet in 2023. I think my power, endurance and success time were awesome.
Post #109: My Progress on SoloLearn 2023, 2024
Post #83: Tumblr Opinion Poll by Python-Programming-Language, Question: Which programming resp. script language do you prefer?, 2023.
MIMO - A nice programming app for Android ...
Post #12: My account and progress on MIMO. I'm studying Python, SQL, Javascript and HTML there. I can recommend MIMO, because of the method and real fun to learn various programming and script languages, 2023.
Music player added!!
Holy moly!! After two or three hours of struggling, Iāve finally gotten a music player on my blog! I donāt think itās on mobile but on desktop it seems to be working fine.
Iāve loaded a few songs that I like into it, but itās pretty far from my actual music taste. Whatever, though- anything for aesthetics, right?
Anyways it should be right here on the top of my blog page! Unfortunately I was too lazy to make my own so I used a generator- but I feel like that was a little more trouble than it was worth since SCMās method of using youtube links doesnāt seem to work anymore. I had to overhaul through discord, so that was a little time consuming figuring things out. :T
Glad it works now, though! Really adds atmosphere, I think.Ā
Now how will I get the rest of my old blog plans done..? I remember wanting to implement a guestbook and a little gallery on the sidebar. Might have to ask for help on those.
For now, though, itās way too late to be thinking about all of that- Iāve got school tomorrow!! I should probably head to bed soon, otherwise Iāll pass out in precalculus again.
Goodnight~
<3Caramel
āI Need Your Support to Continue My Studies and Build My Future from Gazašš
My name is Mahmoud Naeem Abu Hatab, from Gaza.
I am a university student majoring in Software and Databases at Al-Azhar University. Since the beginning of my academic journey, I have been passionate about User Experience (UX) and User Interface (UI) design, as well as website development. These fields inspire me, and I dream of advancing my skills and building a professional career in them.
Unfortunately, during the recent war, I lost my laptop, which was essential for both my studies and work. I was forced to flee my home and relocate to southern Gaza due to the difficult circumstances. Despite my efforts to replace my laptop, the financial situation has made it impossible to afford a new one.
Without a laptop, continuing my studies or seeking job opportunities in programming and design has become extremely challenging. This directly affects my academic progress and future career.
Today, I am reaching out to ask for your support to help me purchase a new laptop. Having a laptop would allow me to resume my studies and work on programming and design projects that are crucial for improving my skills. It is a vital step towards completing my education and pursuing my dream of becoming a professional in programming and UX/UI design.
I know that the situation in Gaza is difficult, but I believe education is the only path to building a better future for myself and my family. If you are able to contribute any amount to help me get a new laptop, it would be a real opportunity for me to get back on track academically and professionally.
I am determined to keep learning and working despite the challenges, but I need your support to achieve this goal. Every donation or act of help, no matter how small, will make a significant difference in my life.
If youād like to support me, you can donate through:
GoFundMe
OR
USDT
If you can assist in any way, please donāt hesitate to reach out to me.
Thank you for your support and kindness! šæ
@gaza-evacuation-funds @appsa @nabulsi27 @palestinegenocide @orblesbian @palebluebutler @pallasisme @fallahifag-deactivated20240722 @vakarians-babe @sayruq @ @plomegranate @riding-with-the-wild-hunt @queerstudiesnatural @tamamita @apollos-boyfriend @riding-with-the-wild-hunt @queerstudiesnatural @palestinegenocide @sar-soor @akajustmerry @annoyingloudmicrowavecultist @feluka @marnosc @flower-tea-fairies @flower-tea-fairies @tsaricides @tsaricides @belleandsaintsebastian @ear-motif @brutaliakent @raelyn-dreams @troythecatfish @4ft10tvlandfangirl @90-ghost @paper-mario-wiki @nabulsi @prisonhannibal @beepiesheepie @walcutt @schoolhater98 @commissions4aid-international @sar-soor @zigcarnivorous@tododeku-or-bust@turtletoria @brutaliakhoa @flower-tea-fairies @schoolhater @baby-girl-aaron-dessner @sayruq @omiteo777 @malcriada @neptunerings @bat-luun @kaneverse @nightowlssleep @staretes @friendshapedplant @soon-palestine @aria-ashryver @heritageposts @magnus-rhymes-with-swagness-blog @khangerinedreams @kordeliiius @mazzikah @feluka @dlxxv-vetted-donations @girlinafairytale @a-shade-of-blue @vakarians-babe @babygoatsandfriends @self-hating-zionist @mangocheesecakes @dlxxv-vetted-donations @gazaboovintage @gazavetters @wellwaterhysteria @sar-soor @applebunch @irhabiya @sayruq @xxx-sparkydemon-xxx @junglejim4322 @reptilianspecies @dr-lapdance @tamamita @cantsayidont @fairweathermyth @dear-indies @eruthiawenluin @katealot @lenasai @stalinistqueens @ayeshjourney @gaza-evacuation-funda @el-shab-hussein @irhabiya @nabulsi @ibtisams @dlxxv-vetted-donations @tododeku @a-shade-of-blue @gaza-relief-fund @catnapdreams @northgazaupdates @buttercuparry @stuckinapril
ao3 skin that i made!! (copy code under "keep reading")
it's a messy combination of pieces of code from other people's skins and my own changes
the header image is NOT MINE! it is "Pattern Galaxy Space Planets Vibrant Linear Universe" by Arncil on Redbubble, which i just used as an example for an image you could use!
here are some of the skins that i can remember using as part of this, but i've been building it for years so forgive me if i forget some:
Shortening long tag fields by Xparrot (on ao3)
Slim Shaded by AO3 (on ao3)
Lily Garden by tealtiam (on Tumblr)
AO3 Tag category coloring! by ao3css (on Tumblr)
come back here to my tips or leave a comment if you need some help customizing the code!
Background color: #26303C
Text color: #CBC6C3
Header color: #46626D
Accent color: #993F33
steps to create a new skin using this code:
log into ao3 account
go to dashboard >> skins
click "create site skin"
make sure TYPE is "site skin"
add a unique title
copy all code below
paste into field 'CSS'
click on "use wizard" at the top
copy and paste the four colors written above into their corresponding boxes
click SUBMIT
click USE
how to customize this skin:
FONT SIZE: at the very top of the code, change the "90%" to be bigger or smaller to change the font size within a fic
MAIN COLORS: to change the main colors, select "use wizard" when editing the skin and replace any of the four hex codes under "Background color:", "Text color:", "Header color:", and "Accent color:"
SECONDARY COLORS: find all hex codes within the code and change those numbers as you like! i changed all colors to match with the color palette of the header photo that i chose to make it feel cohesive
TAG COLORS: towards the end, the "relationship", "character", and "freeform" tags alternate three colors to make them easy to separate. in this skin they are all very similar, so you can change those to be whatever colors you like!
HEADER PHOTO: find the link towards the end of the code right before the warning tags and replace it with a link to any photo you like! it loops, so you don't have to worry about sizing or anything
FONT: i'm unsure how exactly to do this, but the in-fic font is currently set to Georgia Serif, so i suppose just go find that and replace it with your preferred font!
BORDER STYLES: wherever you see the code "border-style:", replace the word that comes after it with one of these options: none, solid, dashed, dotted, double, groove, ridge, inset, outset, or hidden
WARNING TAGS: at the very end of the code is a list of words or phrases that, when they appear in the tags of a fic, are highlighted in a contrasting color so that they are easy to avoid if necessary. you can add or remove those tags however you like, or change the warning color!
COPY AND PASTE ALL CODE BELOW
#workskin { font-size: 90%; } li.blurb .tags { max-height: 7.5em; overflow-y: auto; } #header { min-height: 0; } #header a, #header fieldset, #header ul.primary, #header ul.primary .current { border: 0; background: 0; } h1 a img { height: 50px; border: 0; } #header .landmark { clear: none; } #header ul.primary { background: rgba(0,0,0,0.65); border-bottom: 1px solid rgba(0,0,0,0.75); } #header ul.primary, #header ul.primary .current, ul.primary.actions a, #header ul.primary .current { color: #CBC6C3; } #header ul.primary .current, #header #search input, #header #search input:focus { background: rgba(0,0,0,0.25); color: #CBC6C3; box-shadow: inset 0 0 3px #131A2A; border-color: #131A2A; } .actions, .actions input { text-transform: lowercase; } blockquote.userstuff { font-family: "Mido", "AUdimat", "Ostrich Sans Rounded","Lucida Grande", sans-serif !important; position: relative; background: rgba(0,0,0,0.1); padding: 2%; border: 1px solid rgba(0,0,0,0.15); box-shadow: 0 0 2px rgba(0,0,0,0.4); } blockquote.userstuff:after { content: "\201D"; right: 0; top: auto; left: auto; } body, .userstuff { font-family: Mido, Georgia, serif; } .heading, .userstuff h3, .userstuff h4 { font-family: "CabinSketch", Georgia,serif; } #main .heading { color: #CBC6C3; } #inner .group, #inner .heading, fieldset, .verbose legend, table, table th, col.name, span.unread, span.replied { outline: none; background: transparent; border-color: #131A2A; border-style: double; box-shadow: none; border-radius: 2em; border-bottom-right-radius: 0; border-top-left-radius: 0; } #inner .group .group .group, col.name { border-style: double; border-color: #CBC6C3; box-shadow: 0 0 2px #000; } #inner .bookmark .user.module, #inner .wrapper { border: 0; border-radius: 0; border-top: 3px double #bbb; box-shadow: none; } .filters { font-size: 90%; } .toggled form, .dynamic form, .secondary, .dropdown { background: #fff url("/images/skins/textures/tiles/white-handmade-paper.jpg"); } a.tag, a.tag:visited, a.tag:link { display: inline-block; padding: 1px 3px; margin: 2px 0px; border: 2px solid #46626D; border-radius: 5px; } .commas li:after { content: ""; } h5.fandoms.heading { color: transparent; } .favorite a.tag { border: none; } .tags li.relationships:nth-of-type(3n+1) a.tag { background-color: #1d3954; } .tags li.relationships:nth-of-type(3n+2) a.tag { background-color: #264663; } .tags li.relationships:nth-of-type(3n+3) a.tag { background-color: #305475; } .tags li.characters:nth-of-type(3n+1) a.tag { background-color: #214154; } .tags li.characters:nth-of-type(3n+2) a.tag { background-color: #294c61; } .tags li.characters:nth-of-type(3n+3) a.tag { background-color: #31576e; } .tags li.freeforms:nth-of-type(3n+1) a.tag { background-color: #234e54; } .tags li.freeforms:nth-of-type(3n+2) a.tag { background-color: #2a585e; } .tags li.freeforms:nth-of-type(3n+3) a.tag { background-color: #316269; } .tags li.freeforms a.tag:hover, .tags li.characters a.tag:hover, .tags li.relationships a.tag:hover { background-color: #26303C; color: white; } #header .logo { display: none; } #header ul.primary { box-shadow: none; padding-top: 30px; padding-bottom: 30px; background: #FCC191 url(https://i.pinimg.com/564x/8c/bc/ae/8cbcae1760dc88ae8730566337a5d2eb.jpg); background-attachment: fixed; } li.blurb a.tag[href*="suicid"], [href*="suicide"], [href*="Suicide"], [href*="rape"], [href*="Rape"], [href*="consentual"], [href*="Consentual"], [href*="non-con"], [href*="consent issues"], [href*="Kidnapping"], [href*="kidnapping"], [href*="Canibalism"], [href*="cannibalism"], [href*="Cannibalism"], [href*="Dove"], [href*="dead dove do not eat"], [href*="murder"], [href*="Murder"], [href*="harm"], [href*="self harm"], [href*="Harm"], [href*="Torture"], [href*="abduction"], [href*="asphyxiation"], [href*="blood"], [href*="Blood"], [href*="death"], [href*="Death"], [href*="gore"], [href*="Gore"], [href*="incest"], [href*="Incest"], [href*="trauma"], [href*="Trauma"], [href*="torture"] { color: #000000; font-weight: bold; background-color: #993F33; }
100 likes!
#ThankYou #tumblr