Sick of having to edit, crop and tint images to fake a nice post only for it to look a bit shitty in a single wide white abyss. The lines of text flowing one after the other like wet hair.
Want your pooch to be fluffy and not look like a rat?
I am not a fan of markdown, and even less of a wysiwyg so it is natural for me to create my posts just using html tags like a mad person. Maybe I like the control. Anyway I noticed everyone had colourful rainbow text, and figured that is nice everyone is puking on their screen.
It was nice though, because apart from allowing me to paint my text with rainbow sharts the Uptrennd editor also allows me to use inline styling.
We have to admit although blockchain social blogging is all the rage, for the most part it looks dreary. Which is fair enough, considering you can't go and make "designer" posts on Medium or Facebook. It all has to look the same because equality and shit... Ok maybe not for those reasons but for something I guess.
I only wrote all of the above so the text can wrap around the title text on the right. The point is on Uptrennd we have the ability to use css, although only inline but css nonetheless and that means with a little effort every post can look pretty nifty. If you are so inclined, also I am totally ignoring the fact that I am not the first one to make a post about this.
Cascading Style Sheets - CSS
"CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and repetition in the structural content.
A post is a post.
So you may think what does it matter. You can easily change your text colour using the buttons in the wysiwyg, scale images to make the text flow next to it. In the end it is just a blog post and for fancy things you can use "banners" and "dividers". Which is fair enough, it most likely does not matter at all. It is just nice.
CSS is used to allow your text to wrap around images, the colour to change and the font size to be different. In combination with the HTML it provides structure, hierarchy and transforms a wall of text into a...nicer wall of text.
The other part to not really caring about all the fancyness is because most people seem to be on mobile so multi-columns and galleries etc. really have no use. Since everything on mobile is in a straight line to death.
If you are on a pc however a person quickly notices a lack of layout and structure to content, this is even more evident on a platform that showcases long-form content. The lack of justification, grid-lines and visual hierarchy can be a real eyesore.
From being on Hive and Whaleshares I know a person does not need a lot to make a post look good - on those platforms we only have a
pull-left, pull-right style which is allowed and with that alone you can then at least bring some simple variance to pages.
Here however you have seemingly all the power of raw CSS to use, albeit inline. It would be a shame to not see better use and support for that.
With use, I mean people should fiddle around and see what they can make things do and by support I mean an official framework of styles that Uptrennd will support and bug fix so people can know there content will look the same in the future and across devices.
For example: currently you are able to use the bootsrap grid styles which Uptrennd is built upon but this does not mean it will work in the app which will break your posts layout. So an official framework would allow you to trust that your content will display the best it can even if it is displayed through the browser or a nativescript app.
Just get on with it!
Hey, this is hard. Well not hard just confusing. Well not confusing just a lot. Where to even begin...
To start you add the
style="(your fancy stuff goes here)" to an HTML element you want to be changed. That would be the ones with brackets such as
<p></p> <h1></h1> <div></div>
You change them to look like this
<p style="css goes here"></p>
So the simplest might be to show examples using this post. That is why I tried to add as many elements as is reasonable. It is worth noting that I did not use the Uptrennd - Twitter Bootsrap Grid System for the reasons I mention above. If they ever change it then my post will break. So here is hoping they don't remove styling altogether. Maybe we must ask Jeffafa to make an official framework for posts.
The header text that is aligned to the right with the content wrapping around it uses a
float, this is one of the most useful and quick styles you can use on images or text to shift them left or right on a page and have other things take up space around them. The code for the heading title looks like this:
<h2 style="float:right;max-width:40%;min-width:250px;font-size:3em;margin:0;padding:0.5em;color:#32936f">Want your pooch to be fluffy and not look like a rat?</h2>
You see the
font-size:3em those are the main parts that tell the text what it should do. I am telling it that it should position to the right side of the screen, it cannot be wider than 40% of available space and should be 3 times the normal text size. Everything else is just tweaking.
Ok, this one seems like it has a lot going on but is just a few elements working together by reducing space used and their position on the page.
The main parts are the background image, the title and then custom styling the blockquote element.For the background to stay in position I used an image background instead of a colour. When you use an image background you have properties that can be changed. For example the repeat property is used to repeat a pattern - usually a small image - that then creates a texture, they are best used with seamless textures. In this case I just used an oversized image and set the position to fixed so the image will stay in place even if the page scrolls. This is the code for it with the additional rotation I added:
<div style="height:100px; background-image:url('https://yourimageurl'); min-height:5em;background-repeat:no-repeat; background-attachment: fixed; background-position: center;background-size: cover; display:block; transform: rotate(3deg); margin-top:-50px; z-index:0;"></div>
The part you can easily reuse without really thinking about it is this
background-image:url('https://yourimageurl');background-repeat:no-repeat; background-attachment: fixed; background-position: center;background-size: cover;
The background image says use my image, do not repeat it, make it fixed to the page and center it in the box then make sure it fills the whole area. If you use this on an element that has content inside then you won't have to worry about adding height and space so the image is actually visible. That is why mine has a
min-height because it has no contents and I want it to show the background. Else it would be 0 high and show nothing.
has the following added to it:
<h1 style="text-shadow:2px 2px 3px rgba(0,0,0,0.8);color:#090E0F;">The title</h1>
That if read means - shift the title 20px up, add a shadow whose RGB colours are black with an opacity of 0.8 and make the text color this hex:090E0F or you could use the RGB values.
A lot of the effects in CSS can easily be generated for you, even HTML templates are freely available one of the sites with a lot of generator options that will provide you the code for text-shadows, image/box shadows and gradients html-css-js.com. You just need to copy the code they give into the style tag and that will work in most browsers.
I think this is getting quite long-winded and I am even to tired to fucking swear so the last style that is very sueful is the border style. All of this is very easy to find information on if you want so there is no point going into detail on every single item. I hope this post sparks a little interest in some to maybe experiment with what is possible and the rest well, meh.
The code for the box border and for almost all the borders I used through this post is mainly the same, you just change it between whether it must be solid or dashed. Clearly I like dashed and then what size and colour you want it to be. For the box I added a corner radius to get the rounded effect and I think it looks simple but nice so suck it.
<div style="background:#090E0F;padding:1em;margin-top:2em;border-top:dashed 2px white;border-left:dashed 2px white;border-radius:40px 0 0 0;margin-left:1em;color:#32936f">
So to step through the above, as it reads. I am telling it make my background that Hex colour, then put 1 font-size worth of space inside, then move it down 2 font-sizes from the top. That just positions it and makes so the text does not touch the inside of the box. Then I tell it
border-top:, you can also use the short version which is just border and set all four sides but I chose to do each explicitly. So I tell it the top and left borders must be dashed and 2px thick and colour them white. Then the
border-radius says the corner must have a radius of 40px which causes it to start rounding and finally I move it 1 font-size to the right - away from the left.
It might be evident that I am now super lazy so instead here are some pics of my cats when they were little and a final tip: Use your browser console and inspect elements to easily see what styles are applied to something you might like.
Has a very nice free tier for image hosting and management. You can easily change an images colour, effects and scale just by using a url.
Tell Jeffafa an official post CSS framework would be nice.
A platform designed to redistribute wealth from corporations to individuals. A site that empowers content creators to thrive through creating digital content.