Bostonian Adam

Tag: Quick How To

  • How to add a circle border around a Bootstrap icon

    I previously blogged about how to add a circle border around a Font Awesome icon back in 2019, but since then things have changed and Bootstrap now has their own icons, Bootstrap Icons. Can that same code be used today for Bootstrap 5 and their icons?

    The answer is pretty much, yes! The HTML and CSS code is identical with a few small edits. I made a few notes further down below about some changes to the CSS you can make. Please note that the below code is using Bootstrap 5.2.3 and Bootstrap Icons 1.10.3, and it displays a blue building icon with a red circle around it. Obviously, you can change the colors to your liking.

    CSS Code

    <!--Copy and paste inside the <head> tag-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">

<style>
.icon-flex, .icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}
.icon-wrapper {
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid red;
    font-size: 5rem;
    width: 8rem;
    height: 8rem;
}
.icon-wrapper .bi {
    color: blue;
}
</style>

    HTML Code

    <!--Copy and paste inside the <body> tag-->
<div class="icon-flex">
  <div class="icon-wrapper"><i class="bi bi-building"></i></div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

    A few notes about my CSS code

    • In the “.icon-wrapper” class…
      • You can change the color and thickness of the border by editing the “border”
      • You can change the size of the icon by editing the “font-size”
      • You can change the size of the circle by editing the “width” and “height”
    • In the “.icon-wrapper .bi” class…
      • You can change the color of the icon by editing the “color”

    Please let me know your thoughts about this code and if you have a better or more efficient way to do this. Always feel free to share your knowledge and thank you for reading this blog post.

  • How to zoom in using CSS transitions

    Ever mouse over an image on a website and it zooms in subtly and then you move your mouse pointer off the image, and it goes back to normal? Well, they are most likely using a CSS transition to make that effect.

    Below is some CSS and HTML code to use to make that effect. Yes, that is all the code you need. Check out the transition and transform pages on Mozilla’s MDN Web Docs for more information.

    CSS Code

    <style>
.img{
  transition: all 1.1s ease;
}
.img:hover{
  transform: scale(1.1);
}
</style>

    HTML Code

    <img src="path to your image file" class="img">

  • New Edge browser feature saves resources when gaming

    In June, the Microsoft Edge web browser had an update where it released a new feature called “Efficiency Mode,” which helps improve power usage by saving computer resources (CPU usage). This is especially useful when running high resource applications on your PC such as playing a video game or even when you’re running applications that hog resources, such as Adobe Photoshop.

    How to turn on Efficiency Mode

    Follow the below steps to turn on “Efficiency Mode” in the Microsoft Edge web browser:

    1. Go to the browser settings (click the three dots icon in the upper right) and click “Settings” which is near the bottom of the vertical menu that appears
    2. Now on the “Settings” page, on the left side, find “System and performance” and click it
    3. On the right side, under “Optimize Performance” you can turn on “Efficiency Mode” by enabling the first two settings as in the screenshot below, and you’re done

    Screenshot

    Screenshot of Edge's settings, Optimize Performance section

    A competitor to Opera GX?

    If you didn’t know, the Opera web browser has their own separate version specifically for gamers, named Opera GX, which lets you set limits on CPU, RAM, and network usage. I do wonder if the Edge web browser, with this new feature, will challenge the Opera GX browser specifically for use during gaming? Opera/Opera GX are also based on Chromium, as Edge is. I’ll have to try out both for myself when I game, but if you use one or the other web browser while gaming, let me know how it goes.

  • WordPress 5.9: How to easily change blog posts list layout

    So with WordPress 5.9, the theme customizer is gone (don’t worry it is still there for past themes, but not for new Block Themes) and we have the new Block Editor (for Block Themes), which has a lot of promise but needs some polishing. The “Twenty Twenty-Two” theme that comes with WordPress 5.9, is a Block Theme and is now being used on this website as of this posting.

    The default style that the “Twenty Twenty-Two” theme’s homepage uses to list the blog posts is one-by-one in a vertical list. For me, I felt this wasted a lot of space and I wanted blog posts to be listed with two or three side-by-side in rows. So here are the steps to do just that. Don’t worry, no coding is needed to do make this change.

    From list view to grid view

    1. When you’re in the “Admin” section of your WordPress website, on the left-side navigation go to Appearance > Editor (beta).
    2. In the upper left corner click the WordPress logo and the Editor navigation will expand. In the list under “Editor” click “Templates”
    3. On the right-side is a list of templates you can edit. Click the “Home” template.
    4. In the top navigation, click the “List View” icon (the one with three horizontal lines), which will open up a panel on the left-side. You may see a lot of items listed but don’t panic, this is just showing your homepage’s structure (showing which blocks you are using).
    5. In the “List View” column on the left side, find “Query Loop” and click it.
    6. In the center column, above your posts you’ll see a horizontal bar similar to the image below this text. You will want to click the “Grid view” icon as in the image. This will order your posts in a grid format.
    7. On the far right side are the Query Loop settings. If you don’t see the Query Loop settings, make sure you select “Query Loop” in the first column on the left side.
    8. In the Query Loop settings, go down to “Columns” and you can use the slider to change how many columns you want your posts to appear in.
    9. When you’re done making changes, make sure to click the “Save” button in the top right area, and you’re done.

    In conclusion

    That was easy, right? No coding, just using the UI to make your changes. This is huge for WordPress and I’m excited to see what they do in future updates. I think the UI still needs more work but this is a good start.

    What are your thoughts about WordPress 5.9? Are you finding it easier to use than past WordPress versions? Did this quick how-to help you or just confuse you? Please let me know what you think.

  • Disabling tab hover cards in MS Edge

    In a previous blog post I listed the steps for disabling tab hover cards in Chrome but now I must share how to do the same in the Microsoft Edge web browser. If you’re using MS Edge and not sure what a tab hover card is, move your mouse cursor to a tab, leave it there for a second and a rectangular box will appear displaying the website’s “title” and then below that will be the website’s favicon and domain name. See the below screenshot of what a tab hover card looks like for this website’s homepage.

    Screenshot of a Tab Hover Card in the Microsoft Edge browser
    Screenshot of a Tab Hover Card in the Microsoft Edge browser

    Steps to turn off tab hover cards in MS Edge

    1. In Edge’s address bar, type in (or copy/paste): edge://flags/#tab-hover-cards
    2. On the right side, change the drop-down from “Default” to “Disabled”
    3. You will have to click the “Restart” button at the bottom in order for this change to take effect and you’re done

    If you ever need to turn it back on in the future, just follow the same steps above and change the drop-down.

  • How to stop showing box that appears when mousing over Chrome tabs

    A recent Chrome browser update brought “tab hover cards” which are small boxes that appear when you put your mouse on a tab. These boxes display the website’s “title” tag and domain name, as shown in the screenshot below.

    Screenshot of Tab Hover Cards in Chrome
    Screenshot of Tab Hover Cards in Chrome

    For me, these tab hover cards started to annoy me, as they block part of the address bar, so I disabled them. See down below for steps on how to disable tab hover cards.

    Steps to turn off tab hover cards in Chrome

    1. In the address bar, type in: chrome://flags/
    2. Do a CTRL + F to bring up the “Find” search box and type in: Tab Hover Cards
    3. When you find “Tab Hover Cards”, on the right there is a drop-down, change it from “Default” or “Enabled” to “Disabled”, and you are done

  • How to add a circle border around a Font Awesome icon

    I was recently working on building a webpage and I ran into an issue where I wanted to add a circular border around an icon. I was using Bootstrap 4 for the page’s layout and Font Awesome for the icons. I tried a few things with Bootstrap’s border utilities but it couldn’t do what I wanted, so I searched online.

    I was able to find this CodePen solution to my problem. I made some edits to the code for my webpage, which I have provided below.

    HTML Code

    <div class="icon-flex">
  <div class="icon-wrapper"><i class="far fa-user"></i></div>
</div>

    CSS Code

    .icon-flex, .icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}
.icon-wrapper {
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid blue;
    font-size: 3rem;
    width: 80px;
    height: 80px;
}
.icon-wrapper i {
    color: blue;
}

    Few notes about my CSS code

    • If you increase or decrease the “font-size” value in the “icon-wrapper” class, it will make the icon larger or smaller.
    • If you increase or decrease the “width” and “height” values in the “icon-wrapper” class, it will make the circular border larger or smaller.

    Let me know your thoughts about this solution. If you know of a better way to do this, please leave a comment and share your knowledge.