Although I'm not a graphics designer or an image-oriented person on Hive Social, I make my own cover images for most* posts I publish. For good or ill, I make them using text editors, then MS Paint to save the edited screen capture. They're made using HTML and CSS. Some images components come from screen captures, existing assets on the blockchain, or public images which are sourced. Usually the CSS used produces basic effects, but over time I want to incorporate more sophisticated looks. For this post, I want to discuss a cover image I made for a recent post at LeoFinance titled "At Hive Blog, SEX Finds You!"
* -- Occasionally I publish posts as part of the 
A Few Notes
The HTML and CSS I use is quick-and-dirty. While best practices for both are encouraged, for what I'm doing I just use inline CSS with "style=" and "class=" attributes within the recycled HTML file. When the CSS gets extremely crazy or lengthy, then I'll shift it to where it should be for best practices.
Much trial and error is used as I design the cover image, which itself is a screen capture of the rendered HTML and CSS. To save time readers time, I'll just discuss the final HTML and CSS I used.
Because of the way MS Paint handles screen captures from my laptop, the CSS I need uses dimensions of 472px wide by 267px tall.When the screen capture is pasted into MS Paint and cleaned of excess space, the edited image ends up being 600x340. These numbers are based on the the 150x85 cover image thumbnail used by the @Ecency blogging front end.
Filenames and URLs can be long, so for post purposes I will use these aliases for them:
- _hive-blog-logo.svg_ -- The Hive Blog logo was made as a scalable vector graphic file;
- _sex-token-logo.png_
Inventory Needed
Once I figured out how I want the cover image to look, I gather the elements I need. For the post "At Hive Blog, SEX Finds You!" this is what I needed:
- HTML text elements:
- 1 x Banner title same or similar to the post title;
- 1 x HTML character entity for the down-pointing triangle;
- 1 x HTML character entity for the up-pointing triangle;
- Image elements:
- 1 x logo for Hive Blog;
- 1 x logo for the SEX token on Hive Engine.
HTML Structure
Unlike the cover images I've been using for posts in my "Notes from a Novice Trader" series (which rely in part on nested DIV elements and a more rigid HTML structure), this cover image just uses free-floating images positioned where I need them.
Here is a pseudo-code fragment showing the HTML structure:
<div><!-- Banner Title --></div>
<div><!-- Hive Blog logo --></div>
<div><!-- SEX token logo --></div>
<div><!-- Down-pointing triangle --></div>
<div><!-- Up-pointing triangle --></div>
The CSS Used
Recycled CSS
This is CSS I use often enough to be moved into a class either in the style subsection of the HEAD section of an HTML file, or it goes into a dedicated ".css" file.
In this case, only the Banner Title uses recycled CSS for 2 classes:
<style>
.stroke /* Define standard text appearance */
{
color:ivory;
font-family:Impact;
font-size:1.5rem;
/\* color scheme is derived in part from LeoFinance \*/
text-shadow:
-0.1rem -0.1rem 0 orange,
0.1rem -0.1rem 0 rgb(37,27,4),
-0.1rem 0.1rem 0 rgb(37,27,4),
0.1rem 0.1rem 0 gold;
}
.bar /* Define the background style for the Banner */
{
background-color:black;
border:0.25rem inset gold;
border-color:orange gold gold orange;
text-align:center;
}
</style>
The CSS of the Day
This is the CSS I add inline to achieve the effects I want. This is where most of the trial and error occurs, and even then it's usually related to positioning or colors.
1. The Banner Text
Inside this DIV element are 2 classes (stroke and bar) used to render banner text in typical "@"magnacarta style. Adjustments are made to make the text as large as possible while occupying just 1 line of text.
Normally the text care of itself as cosmetic font size changes are made. For this cover image, the banner text had 4 problems to be solved:
| # | Problem | Solution |
|---|---|---|
| 1 | Token name needs to be set apart | Enclose token name within SPAN element for font change |
| 2 | Text for token name shrinks with font change | Add font size change to span |
| 3 | Separate double underline for "YOU" from "!" | Add <non-breaking space> after <space> before "!" |
| 4 | Spacing looks odd after solving Problem 3 | Replace each single space with the 3 character sequence <space><non-breaking space><space> |
Usually the hardest part of making banner text is sizing it to my liking. In this case, I had extra concerns to handle.
Here is the banner text DIV element which I used:
<div class="stroke bar" style="font-size:2rem; width:472px;">AT HIVE BLOG, <span style="font-family:'Courier New'; font-size:2.75rem;">SEX</span> FINDS <span style="text-decoration:underline double;">YOU </span> !</div><br />
2. Positioning the Hive Blog img Element
My intention was to use just the logo for the <HIVE> token along with the other token symbol and have arrows indicating their relationships. It was ending up too abstract for me, so I settled for the text of "HIVE BLOG" along with the logo for the other token.
Given the text used for the banner text, I thought it made sense to align the text from the image with the text from the banner text. As shown by the visual inventory above, that's not how the Hive Blog logo appears.
So I needed shift the Hive Blog logo to the left in order to align (more or less) the logo text with the banner text.
In addition to including the attributes "src=" and "width=" and "height=" for the IMG element used for the Hive Blog logo, I added a "style=" attribute for the CSS needed to shift the image to the left. This is the inline stylesheet I used:
style="margin-left:-190px;"
This shifting would put the HIVE symbol off screen, so the left margin needed to be negative.
Here is the Hive Blog IMG element which I used:
<img src="_hive-blog-logo.svg_" width="467" height="138" style="margin-left:-190px;" />
3. Positioning and Resizing the Token img Element
This is handled the same as the IMG element for the Hive Blog logo: add the "style=" attribute to use an inline stylesheet
While all I had to do was shift the Hive Blog logo left, the token symbol needs to be shifted to the right edge. This is the inline stylesheet I used for the token symbol:
style="margin-left:62px;"
This extra space was added so that the token logo would align (more or less) with the double-underlined "YOU " in the banner text.
Even after being shifted to the right, it needed to be resized so that it is in proportion to the "HIVE BLOG" portion of that image. The attributes "width=" and "height=" for this IMG element needed tobe reduced as needed.
After a few iterations of margin adjustments inline stylesheet and size changes within the IMG element, here is the token logo IMG element which I used:
<img src="_sex-token-logo.png_" width="145" height="145" style="margin-left:62px;" />
4. Styling and Positioning the Down-Pointing Triangle
While the triangles could have been created as graphics or as CSS-modified elements to look like triangles, the easiest thing to do was use HTML character entities. Unlike standard characters such as "greater than" (>) and "less than" (<), these less common characters need hexedecimal codes to be rendered properly. Below is a table showing the 2 triangle characters:
| Triangle | Character | Hex Code | HTML Entity |
|---|---|---|---|
| Down | ▼ | 25bc | ▼ |
| Up | ▲ | 25b2 | ▲ |
If either triangle were to be used within a line of text, it would be contained in a SPAN element so that CSS canbe applied to it. Since they need to be positioned and moved, each will be contained in a DIV element instead.
To maintain consistency with the banner text, the 2 triangles will use both recycled CSS and inline CSS. The recycled CSS (in the form of a CSS class) will define the overall look, and the inline CSS will position the triangle as well as override the class color definition.
The down-pointing triangle will be positioned between the words "HIVE BLOG" in the banner text and the words "HIVE BLOG" from the shifted Hive Blog logo. Additionally, the down-pointing triangle will break the border defined by the banner to give an overlay effect.
The red used by the down-pointing triangle is the same red used by the Hive Blog logo and the HIVE token logo. However, this is red is not 100% red. Based on what the color editor from MS Paint showed me, this is the color portion of the inline stylesheet:
style="color:rgb(227,19,55); ...
A bit of green was included, as was nearly 3 times that amount for blue.
Since both recycled CSS and inline stylesheets were used for the down-pointing triangle, this is the div I used for it:
<div class="stroke" style="color:rgb(227,19,55); font-size:75px; margin-top:-215px; margin-left:87px;">▼</div>
5. Styling and Positioning the Up-Pointing Triangle
The div for the up-pointing triangle looks very, very similar to the div for the down-pointing triangle; only the numbers changed. After much trial and error, this is the div I used for this character:
<div class="stroke" style="color:#880088; font-size:75px; margin-top:-90px; margin-left:392px;">▲</div>
I was thinking of using the color of the token logo as the color for the up-pointing arrow, but this triangle didn't look right to me with the matching color. The color I ended using, #880088, was just a matter of personal preference.
The HTML Structure
Below is the quick-and-dirty HTML I ended using to make this cover image:
<div class="stroke bar"
style="font-size:2rem; width:472px; margin-top:20rem;">AT
HIVE BLOG, <span style="font-family:'Courier New';
font-size:2.75rem;">SEX</span> FINDS <span
style="text-decoration:underline double;">YOU </span> !</div><br />
<img src="_hive-blog-logo.svg_" width="467" height="138" style="margin-top:25px; margin-left:-190px;" /><img
src="_sex-token-logo_.png"
width="145" height="145" style="margin-left:57px;" />
<div class="stroke" style="color:rgb(227,19,55); font-size:75px;
margin-top:-215px; margin-left:87px;">▼</div><div
class="stroke" style="color:#880088; font-size:75px;
margin-top:-90px; margin-left:392px;">▲</div>
The BR element is included to separate the banner text div from the remaining img and DIV elements.
Same HTML Structure, Cleaned up CSS and HTML
Since this HTML is not part of a web page meant for distribution even to select private individuals, the next thing was to take a screen caputre of the rendered content and use MS Paint to crop the image away from the excess. Had this been needed for a web page that's online oroffline for distribution, then I would have needed to clean it up.
Below is the cleaned up HTML structure, and below that the section of the STYLE element to where the CSS would be offloaded.
Cleaned up HTML
<div class="stroke bar banner">AT HIVE BLOG,
<span class="token">SEX</span> FINDS
<span class="you">YOU </span> !</div><br />
<img class="hive-blog-logo" src="_hive-blog-logo.svg_" width="467" height="138" />
<img class="sex-token-logo" src="_sex-token-logo.png_" width="145" height="145" />
<div class="stroke down-triangle">▼</div>
<div class="stroke up-triangle" >▲</div>
Offloaded CSS
<style>
/* 2 Recycled CSS classes */
.stroke
{
color:ivory;
font-family:Impact;
font-size:1.5rem;
/\* color scheme is derived in part from LeoFinance \*/
text-shadow:
-0.1rem -0.1rem 0 orange,
0.1rem -0.1rem 0 rgb(37,27,4),
-0.1rem 0.1rem 0 rgb(37,27,4),
0.1rem 0.1rem 0 gold;
}
.bar
{
background-color:black;
border:0.25rem inset gold;
border-color:orange gold gold orange;
text-align:center;
}
/* 7 classes which were originally inline CSS */
.banner
{
font-size:2rem;
margin-top:20rem;
width:472px;
}
.token
{
font-family:"Courier New";
font-size:2.75rem;
}
.you
{
text-decoration:underline double;
}
.hive-blog-logo
{
margin-top:25px;
margin-left:-190px;
}
.sex-token-logo
{
margin-left:57px;
}
.up-triangle, .down-triangle
{
font-size:75px;
}
.down-triangle
{
color:rgb(227,19,55);
margin-top:-215px;
margin-left:87px;"
}
.up-triangle
{
color:#880088;
margin-top:-90px;
margin-left:392px;
}
</style>
Further Optimizations?
The CSS could have been rewritten so that the HTML doesn't use "class=" attributes. For quick-and-dirty HTML with CSS, that would have been overkill. For a web site, it is expected and even required.
Image dimensions could have been offloaded with the CSS, this removing the need for the width=" and "height=" attributes used by the IMG elements
Relative or absolute positioning could have been done. For quick-and-dirty HTML and CSS, I'm in the habot of using margins and passing to move or position content. With more time, such as for a web page online, I would have used relative or absolute positioning.
| ● If you liked this post, please give it an upvote. ● If you liked this post but it's past the 7-day payout window, please tip using PIZZA, BEER, or the engagement token of your choice (or just send something from your account to mine). ● Please reblog or re-Hive this post if you found it useful. ● If there are corrections or clarifications I need to make concerning post content, let me know in a comment so I can update the post and give you credit for the correction. ● As I am neither a certified professional accountant nor a licensed broker, posts concerning cryptocurrency, commodities, securities, and money are presented for informational purposes only; DYOR. |
|---|
| ● If you're new to cryptocurrency and want to know what people think, feel free to drop by the Daily Crypto Markets Live Blog at LeoFinance. It's a free-wheeling text conversation comment thread that takes place in (more or less) real-time. ● Although I've learned a lot about Hive and its ecosystem of dApps, there's much more I don't know. Where can Hivers new and old learn more? Visit TheTerminal for FAQs, tips, references, and terrific how-to content. ● If your voting power is beneath dusting threshold, follow and use  and  to boost your voting power. Authors you upvote will be glad you did, and you'll be happy to start claiming curation rewards. |
 ~~~~~ |
|---|
| Sometimes I discover posts way after the initial earnings period. It's too late for me to upvote posts then, so to make up for the lost upvote I send a slice of PIZZA instead. My main focus is cryptocurrencies from a number of angles (educational, commentary, observations, even pop culture). A secondary focus is sharing my discoveries about the world of Hive Social. Most of my posts can be found at these two locations: ● LeoFinance : @magnacarta ● Proof of Brain : @magnacarta Follow me at this D.Buzz-only account : ● D.Buzz : https://blog.d.buzz/#/@magnacarta.buzz-- note the ".buzz" at the end! If you follow me at  , please follow me at this account as wellI expect 2022 to be the year I go from being crazy or weird to being eccentric. If that doesn't happen, then Festivus will last longer than I can stand. |