Two weeks ago, I learned about some of the basic customizable CSS and HTML codes in WordPress in class. They were quite easy to learn, as long as we put them to practice.To be honest with you, I don’t possess any web design background in HTML nor CSS, so if you are still new to WordPress and coding like me – take some tips home today to play around! In this post, I just wanted to share some of the changes I made and see what your thoughts are. Be aware that I have combined some of the above together in one session in some examples. You will see that I have:

Created different types of list

      • Bullet list (unordered),
      • Numbered list (ordered)
      • Lists within a list

Used and edited tags:

      • Heading Text – H1, H2, H3
      • Make texts bold – <strong> & </strong>
      • Putt emphasis on texts – <em> & </em>

Created a couple of CSS classes 

List within a list | <em> & </em> | <strong> & </strong>

For my “Best Images sizes for Social Media Posts”, I shared some of the ideal image sizes from 5 widely used social media platforms.  It is listed like in the right way but looks super plain. Most importantly, there was no emphasis on the mentioned platforms and the hierarchy of information was not obvious.

How to improve?  On the “Text” mode of my post editor window, the HTML code originally looked like this:

Facebook:
Profile Image: 180*180 pixels
Shared Image: 1420*630 pixels
Cover Photo: 828*315 pixels
Instagram:
Profile Image: 110*110 pixels
Shared Image: 1080*1080 pixels
Twitter:
Profile Image: 400*400 pixels
Header Image: 1500*500 pixels
Ins-stream photo: 440*220 pixels
LinkedIn:
Profile Image: 400*400 pixels
Background Image: 1000*425
Pinterest:
Profile Image: 165*165 pixels
Board Display Image: 222*150 pixels
Pin Sizes: 238 width with any scaled height

I placed emphasis and bolded the names of each social media platform first. Then, created an unordered list of the platforms first and a sub-list of bullet points for their image sizes. The HTML code ended up looking like this:

<ul> <strong> <em> Facebook: </em> </strong>
<ul style=”margin-top:-10px;”>
<li style=”margin-top:-4px;”> Profile Image: 180*180 pixels </li>
<li style=”margin-top:-4px;”> Shared Image: 1420*630 pixels </li>
<li style=”margin-top:-4px;”> Cover Photo: 828*315 pixels </li>
</ul>
<strong> <em> Instagram:</em> </strong>
<ul style=”margin-top:-10px;”>
<li style=”margin-top:-4px;”> Profile Image: 110*110 pixels </li>
<li style=”margin-top:-4px;”> Shared Image: 1080*1080 pixels </li>
</ul><strong> <em> Twitter: </em> </strong>
<ul style=”margin-top:-10px;”>
<li style=”margin-top:-4px;”> Profile Image: 400*400 pixels </li>
<li style=”margin-top:-4px;”> Header Image: 1500*500 pixels </li>
<li style=”margin-top:-4px;”> Ins-stream photo: 440*220 pixels </li>
</ul>
<strong> <em> LinkedIn: </em> </strong>
<ul style=”margin-top:-10px;”>
<li style=”margin-top:-4px;”> Profile Image: 400*400 pixels </li>
<li style=”margin-top:-4px;”> Background Image: 1000*425 pixels </li>
</ul><strong> <em> Pinterest: </em> </strong>
<ul style=”margin-top:-10px;”>
<li style=”margin-top:-4px;”> Profile Image: 165*165 pixels </li>
<li style=”margin-top:-4px;”> Board Display Image: 222*150 pixels </li>
<li style=”margin-top:-4px;”> Pin Sizes: 238 width with any scaled height </li></ul>
</ul>

See the difference between before and after in the slide below:
previous arrow
next arrow
Blog Post - Before
Shadow
Slider
H1, H2 & H3 tags

For my “Brand Concept – Ontario Science Centre”, the post started with 3 different lines coming from 3 different tones. I took the chance to create my H1, H2, H3 tag to represents those voices.

How? On the “Text” mode of my post editor window, the HTML code originally looked like this:

Who loves going to science museums mostly?
Scientists?…Parents?…Oh, kids! Kids!
Wait a minute. Is that completely true?

By adding the heading tags to each line, I realized that the spacing was already by default higher than expected. In order to reduce the spacing between headings, I added extra properties to do so. The HTML code ended up looking like this:

h1 style=”margin-top: 35px; margin-bottom: 24px;”>
Who loves going to science museums mostly?
</h1>
<h2 style=”margin-top: -14px;”>
Scientists?…Parents?…Oh, kids! Kids!
</h2>
<h3 style=”margin-top: -16px;”>
Wait a minute. Is that completely true?
</h3>

See the difference between before and after in the slide below:
previous arrow
next arrow
Blog Post (Before)
Shadow
Slider
Creating a numbered list (ordered)

For my “How to use shared images online” post, you can see two sections of numbered lists. The first list depicts the reasons as to why people should source images found online for personal use; and the latter is the list of images that I found online.

However, we can’t really tell the lists apart from the whole text, so I decided to change the format and add <ol> & <ol/> tags to number the lists automatically instead.

How? On the “Text” mode of my post editor window, the HTML code originally looked like this:

Today, I will share a simple walkthrough on how we can avoid about that. Sharing, modifying or distributing images of any forms of media (videos, images, logos, texts, quotes, etc.) in social media platforms. <strong>must</strong> follow the copyrights rules licensed to the work for three main purposes:
1). To give credit and acknowledgement. As a courtesy, it is always safer to respect each other as you do in person. After all, the concept of ‘digital platforms’ is not really just a digital podium anymore;
2). If you are a well-known blogger, or social media manager for a brand or organization, surely will you not want to be fired. Most of all, it is the reputation that will be damaged;
3). Comply with legislation, and you will not get poorer.

To indent the numbered list, we can use <ol> & </ol> to help create a list that is in number order. For the list to be a dropped down list, we then add an additional <li> * </li> to indicate each sentence as a list property.

Today, I will share a simple walkthrough on how we can avoid about that.

</strong>
<h1 style=”margin-top: -2px;”>
Sharing, modifying or distributing images of any forms of media (videos, images, logos, texts, quotes, etc.) in social media platforms
<strong>must</strong> follow the copyrights rules licensed to the work for three main purposes:
</h1>
<ol>
<li style=”margin-bottom: 20px; margin-top: -25px;”>
To give credit and acknowledgement. As a courtesy, it is always safer to respect each other as you do in person. After all, the concept of ‘digital platforms’ is not really just a digital podium anymore;
</li>
<li style=”margin-bottom: 20px;”>
If you are a well-known blogger, or social media manager for a brand or organization, surely will you not want to be fired. Most of all, it is the reputation that will be damaged;
</li>
<li style=”margin-bottom: 50px;”>
Comply with legislation, and you will not get poorer.
</li>
</ol>

See the difference between before and after in the slide below:
previous arrow
next arrow
Blog Post (Before)
Shadow
Slider
Creating a CSS class

For my “Brand Concept – Ontario Science Centre” post, since the topic of the blog post was about recreating visually engaging images, it’d be a good idea to insert colourful texts. Something different to the original default text style.

Instead of changing the colours of a sentence from a post individually. We create “.class” to import a customized style so that we can apply it to text easily.

How do we do that? In our WordPress Dashboard > select “Appearance” > select “Customize” > select “Additional CSS”. In this CSS input bar, we are able to create our own classes without having to interrupt the original theme.

.mystyle{
color: #2DC690;
font-family: Futura;
font-size: 18px;
font-style: italic;
}
.secondstyle {
color: #ff3399;
font-family: Futura;
font-size: 16px;
font-style: light;
}
.thirdstyle {
color: #ff3399;
font-family: Futura;
font-size: 20px;
}

I created 3 different classes: “.mystyle”, “.secondstyle” and “thirdstyle”. And this is how I will be incorporating them into my blog post. How? On the “Text” mode of my post editor window, the HTML code originally looked like this:

<h1>
Brand Concept – “Find the Futuristic You”
</h1>
<strong> <em> Ontario Science Centre is ultimately the science and technology playfield for all ages that allow you to become the protagonist of an extraordinary out-of-space experience through exhibitions, the interactive game plays, and surprising film screenings because having fun in the unknown now is the future of happiness. Get ahead! Kids play science to learn, we learn science to play. </em> </strong>
</p>
<h2>
1.Image A – “Plasma Ball Sphere”
</h2>

And this is how all 3 classes have been applied to H1, H2 and the centred paragraph:

<h1 class=”thirdstyle”>
Brand Concept – “Find the Futuristic You”
</h1>
<p class=”mystyle”>
Ontario Science Centre is ultimately the science and technology playfield for all ages that allow you to become the protagonist of an extraordinary out-of-space experience through exhibitions, the interactive game plays, and surprising film screenings because having fun in the unknown now is the future of happiness. Get ahead! Kids play science to learn, we learn science to play.
</p>
<h2 class=”secondstyle” style=”margin-top: 40px;”>
1.Image A – “Plasma Ball Sphere”
</h2>

See the difference between before and after in the slide below:
previous arrow
next arrow
Blog Post (Before)
Shadow
Slider

 

I hope you found this useful and interesting! And that as a beginner like me, you’ll end up doing way better! Share your learning experiences and let me know what you think @carolinafchen.