Employer Website Updated 2021

Built with Blocs
1

I hope everyone is doing well and staying healthy. It’s been a while since I last shared some of my recent work.

If anyone can recall in 2019, I was hired by a small Technology Repair and Service Provider to redesign their old website and train to become a Technician. Today, I’m the Lead Technician, and my responsibilities include not only the website and repairs, but also marketing, branding, the majority of procedures, diagnostics tools, and much more. I consider myself extremely fortunate to have the opportunity to develop subdecent skillsets at this company.

Though I had planned to do a major website update a year after being hired, the ongoing pandemic put a halt to that and other web design projects. Now, I’m happy to say that I’ve spent some time polishing and reworking some things, and I’d appreciate honest feedback from some of the Blocs community’s professional web designers.

Below is the current Website with some ongoing changes from 2019:
https://datasyst.net/

Here is the new version with changes:
https://dev.datasyst.net/

My goal with this update was to encourage more activity from visitors rather than just going straight to the contact us page. The Navigation Bar has been replaced with a basic Mega Menu that displays the Service Page Links. This, in my opinion, is preferable to having to search through multiple pages to find the right information.
The stock Feature Blocs we had were changed to Large Blocs with Cards for a more immersive feel. Huge Thanks to @Eldar for his video tutorial.
From a design standpoint, I went a little overboard with the Display-4 and lead classes, but I believe the larger texts added more to the page than seeing lots of empty space. The Buttons and Alerts were also tweaked slightly.
Lastly, I’m now using @Jannis’ Volt CMS for the Resources and Documentation pages (Blog) so that my coworkers can make various changes and add their own procedures.

I’m planning to switch these sites on Friday, but there’s still a lot of work to be done. Please share your thoughts, concerns, and opinions with me.

Thanks,
Isiah Johnson

Update: Website Update has been Released!

1 Like
2

Hi @TMRJIJ, Well done! It’s always great to see how individuals develop their own skills and improve themselves. I like the gradient colours of your tooltip(s)! However, the tip of the tooltip is still black :roll_eyes:
If you add the code below to the project footer you can change this as well! Just chance the colour code.

<style>
.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {
  border-top-color: #39918C !important;
}
.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before {
  border-right-color: #39918C !important;
}
.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
  border-bottom-color: #39918C !important;
}
.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before {
  border-left-color: #39918C !important;
}
</style>
2 Likes
3

Thanks @Jerry! Yeah, this would be very helpful.

1 Like
4

On mobile device, the animations for text fade in coming a bit late. So you might have already scrolled down to much before it will appear.

1 Like
5

Jerry, how does this change with bootstrap 5? I tried the method above and I could not get it to work?
I did do some research and I tried a few things, but no luck.

Casey

6

Hi @casey1823. It works sweet for me on BS5. To change the colour of the inner tooltip you will need to add .tooltip-inner to the class manager.
2022-03-17_06-09-47

7

Yes I’m using the tooltip-inner and I can change the tooltip color using that class. It does not change the arrow? Are you still using the code in the footer?

Casey

8

Yes, I do…

2022-03-17_10-09-49
2022-03-17_10-09-491920×1177 91.4 KB

9

@Jerry Wow, I just don’t see why it’s not working? I’m trying to add the tooltips to the top menu icons. I’m just using the icons for a dropdown nav menu. I looked at the code from my site and the updated site from TMRJIJ and I just don’t see the error.

I’m trying to make the tooltip background the same color as the nav background so it looks like only a text tooltip helper. My problem is I cannot get the arrow to change from black. If you have time could you take a look?

CleanShot 2022-03-17 at 05.33.31@2x

Here’s the link to my blog.

Thanks,
Casey

10

@TMRJIJ I really like the updated site. I agree, from a design standpoint, it’s a little overboard but still very nice. To me, it’s a personal choice. A lot of good stuff, well done.

I do have a question, I was looking at your code and I see you used a Grammarly Desktop Integration? I’m a paid Grammarly user and was wondering why and what advantages to adding this?

Thanks,
Casey

1 Like
11

Try:

<style>
 .tooltip.bs-tooltip-top .tooltip-arrow::before {
      border-top-color: #00EA00;
    }
   .tooltip.bs-tooltip-bottom .tooltip-arrow::before {
      border-bottom-color: #00EA00;
    }
   .tooltip.bs-tooltip-start .tooltip-arrow::before {
      border-left-color: #00EA00;
    }
   .tooltip.bs-tooltip-end .tooltip-arrow::before {
      border-right-color: #00EA00;
    }
</style>

2022-03-17_15-19-28

12

PERFECT! That did it, thank you so much for taking the time to help figure this out. Now it just looks like a text helper.

Casey

1 Like
13

I do have a question, I was looking at your code and I see you used a Grammarly Desktop Integration? I’m a paid Grammarly user and was wondering why and what advantages to adding this?

I assumed that was just something the Grammarly Browser Extension added when loading any site. I don’t remember adding the API or script to this Blocs Project.
I use Grammarly quite a lot when having to do some copywriting for clients.

1 Like