So, I have mentioned before that Uptrennd allows inline-css basically what that means is it allows you to use styling attributes inside your HTML. Now the Froala editor Uptrennd uses is nifty, and considering the price tag it better be. It still sucks in some areas. It is not that it sucks at doing what it is intended for. It sucks at dealing with what it was maybe not intended for.
Skip to how to add background colour
Whenever you change the color or font-size in the editor it adds these rules in the background. Whenever you upload an image and you see it is scaled already it has a rule that dictates that images scale.
Every new line, link and left, middle or right alignment adds a rule in the background. This is inline-css. Some of it can be done via pure HTML attributes such as the width and height of an image, but for real control you use CSS. To see an example of what I mean you need to click the code view button.
Since I am on a desktop the geniuses may have provided me with some options such as image upload which you do not have in your editor. Honestly, if you are suffering from the consequences of that in the Uptrennd editor I pity you and maybe everyone should finally make a post about why it is stupid to not have image upload on mobile?
What does this look like in code view and
what does that have to do with CSS?
The above image shows what the blue headline looks like in code view. The important part is the
These instruct the H2 tag which is a header element that it should be centered and the colour should be that specific blue which is represented as a RGB value.
With CSS you can represent colours in a few ways, the RGB() method more useful when using it with opacity, making it the RGBA() method. Mostly you can opt for the Hex colour value that is one where the colour is represented in a hexadecimal fashion the blue of the title looks like this in hex: #1C7A90 and if you are using a pc you can add the colorzilla plugin to grab colours from any webpage, most design software will also provide this colour code, or use a colour picker
So, the Uptrennd editor is nice. It nice for straightforward text and things that require no structure whatsoever. If you need anything more slap a Gif in and call it a day. If you still need more then you better get Googling or Duckduckgoing to find some generators, page builders and the likes.
Adding a background colour or image.
Resources you can use:
- Gradient Generator
- Background Image Generator
- Random Image Generator
- CSS Stripes Generator
- Article about CSS Background Image
- HTML & CSS Course (Free)
- Some cool CSS only background Patterns
- SVG Background Patterns
- Background Textures
Random Picture from Lorem Flickr
Where to start. Almost all elements can have a background colour or image applied to it. For the most part, you want a background colour to cover a large area and for that reason, you want to wrap a bunch of elements inside a single element that then has that background.
If you look at the editor in code view you will notice that there are main
<p></p>, <br>, <img/> and <span></span> elements for our own sanity we will introduce a new element one that is not visible, like
<span></span> but is also a structural element for the document. We will be wrapping ALL contents inside one global
<div></div> tag. For example's sake I have though added background and border styling to this paragraph tag
<p></p> and the code for it looks like this:
<p style="background:#E4E5E3;padding:0.5em;margin:1em;color:rgb(51,51,51)">Content here</p>
To explain:We use the attribute on the element to instruct it that we wish to change something with CSS. Uptrennd does this also as we saw with font-size, font-family, colours etc. Then we add the background: property and a Hexadecimal colour code. Then we add some padding all around to keep the contents away from the edges. Then we add margin all around the element to keep it way from other elements and change the font color to RGB(51,51,51) or to another hexadecimal colour code but because the 333333 repeats it can be simplified to only 333. Both the RGB() and Hexadecimal will translate into the same colour. The RGB if written out means out of a maximum value of 255 make Red - 51, Green - 51 and Blue - 51 this would translate to a dark grey because 000 means black and 255,255,255 is white. If all the values are equal you get grey tones.
To try and keep it all succinct I will just show an example of a background type with the CSS/HTML code used to accomplish it. Many of the examples will just use the easy to use generators I have linked above and the most basic styling which you can easily Google.
Solid Background Colour
As I showed above, the most basic is to just add a background colour. Choose wisely if you make it too dark and your text is dark it will not have enough contrast to be visible. If you do make a dark background you also need to then use a light colour for your text.
<div style="padding:0.5em;background-color:rgb(51,51,51)">Your content here</div>
The same principle of adding contrast counts for images if you intend to have text over that image, if it is a generic texture type image you might need to change very little. Many though like to use images of scenes and this is not a good idea unless you then separate the content from the background with a secondary background or text styling. The simplest is to just blur the image. You can use this background image generator site to quickly get the code to add and align your own images as background: Background Image Generator. If you do not have an image url, first upload an image to uptrennd and copy the SRC of the image from the code view or by selecting the image and copying the URL (image address).
<div style="padding:0.5em;background:url(https://loremflickr.com/600/600) no-repeat center center; background-size:cover;">Your content here</div>
Gradient Background Colour
This background gradient was generated by CSSGradient.io, for many of these styles you can easily find a website or tool to assist with the task of creating backgrounds using a visual interface. They will usuall provide you with CSS code which you then can copy and use as I show below:
<div style="padding:0.5em;background: linear-gradient(110deg, rgba(109,180,212,1) 0%, rgba(121,228,232,1) 27%, rgba(121,232,175,1) 69%, rgba(124,212,144,1) 100%);">Your content here</div>
Gradient over Image Background
Background styling can be stacked, this means from left to right you can have a solid colour, or gradient colour and a image background ontop of each other. For this example we use the exact gradient from before over the image background. The only parts that change is the RGBA(0,0,0,1) value. This means Reg, Green, Black and Alpha. From the code the Gradient generator gave you, you only need to change the last value RGBA(121,228,232,0.2) to below 0. This is a % value and 0.2 would mean 20% opacity. The more colours you have in the gradient you can adjust each to be more or less transparent by changing each Alpha value in the RGBA() method.
<div style="padding:0.5em; background:linear-gradient(110deg, rgba(109,180,212,0.2) 0%, rgba(121,228,232,0.2) 27%, rgba(121,232,175,0.3) 69%, rgba(124,212,144,0.6) 100%), url(https://loremflickr.com/600/600) no-repeat center center; background-size:cover;">Your content here</div>
<div style="background-image: linear-gradient(14deg, #8ac1cc 23.81%, #c5e3e8 23.81%, #c5e3e8 47.62%, #80b8bd 47.62%, #80b8bd 50%, #8ac1cc 50%, #8ac1cc 73.81%, #c5e3e8 73.81%, #c5e3e8 97.62%, #80b8bd 97.62%, #80b8bd 100%);background-size: 173.61px 43.29px;"">Your Content Here</div>
<div style="background:linear-gradient(63deg, #999 23%, transparent 23%) 7px 0,linear-gradient(63deg, transparent 74%, #999 78%),linear-gradient(63deg, transparent 34%, #999 38%, #999 58%, transparent 62%),#444;background-size: 16px 48px;">Your Content Here</div>
*Not all of these patterns will work with Uptrennds editor
<div style="background:url(https://s3.us-east-2.amazonaws.com/uptrend/posts/1600372435-91661.png),#eee;background-size:cover;background-position:center;">Your Content Here</div>
This method would be similar to the image background, and the only difference is that the texture has transparancy which then causes the bottom chosen colour, in this case, a light grey (#eee) to show through. The transparent texture works best when it is grayscale and merely serves to add dark and light areas over a chosen colour. Again if you do not host images and textures yourself try uploading them to Uptrennd then using the image address of that image in the required code.
If all else fails. Then Google it.
A platform designed to redistribute wealth from corporations to individuals. A site that empowers content creators to thrive through creating digital content.