[SOLVED] Blocs 6: Replaced Twitter Bird with X (SVG) but there's a PROBLEM

I Need Help
1

Blocs 6 make it a snap for me to FINALLY swap out that old Twitter bird icon with the X icon! I got my class setup so a mouseover makes it change color on mouseover. I have one placed in the footer and another in my mega menu in the header, on every page in my site.

PROBLEM: Within my mega menu, if I mouseover the X logo, the associated text to the right properly changes color (to WHITE). :+1: But if I mouseover the text, the X icon doesn’t also change color. :-1: That is the problem.

Here’s a link to my website so you can try it yourself:

To pull down the mega menu, open the URL above and then click once on the menu that looks like this:
image

Here’s an animated GIF screenshot of where the X logo is used on the right side of my Mega Menu:

MegaMenu

You can see that the 4 items at the bottom each have icons: Instagram, X, FaceBook and YouTube.

In Blocs, each of those are Code Widgets:

image
image408×766 47.5 KB

The icon for Instagram, FaceBook and YouTube all come from FontAwesome. There is no X logo in FontAwesome used by Blocs 6, which is why I needed to resort to using an SVG.

What I did was to add the “X” SVG into my footer first. I then previewed in Safari and examined the page code. I then used that code inside my Code Widget for the Mega Menu:

<a href="https://x.com/Kiramek_Inc" class="a-btn a-block dropdown-links">
<blocsicon class="img-fluid x-svg-icon-header-menu">
  <svg width="16" height="16" class="bi bi-twitter-x" viewBox="0 0 16 16">
    <path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z"></path>
  </svg>
</blocsicon>
 (旧ツイッター)</a>

If you examine the code above, you will see a class named “x-svg-icon-header-menu”. That class was created by me to set the Size, Normal SVG Fill Color, and Hover SVG Fill Color of the “X” icon.

QUESTION: How do I change my Code Widget code to make the X logo (SVG) change color when I mouseover the text to the right of it? (Both are inside the “a” tag now, as you can see from my code above.)

Thank you.

3

Being the impatient person I am who likes quick fixes without waiting around for days, I consulted ChatGPT for advice. It suggested that I add a class named “hover-wht” into line-1 of my code, as follows:

<a href="https://x.com/Kiramek_Inc" class="a-btn a-block dropdown-links hover-wht">
<blocsicon class="img-fluid x-svg-icon-header-menu">
  <svg width="16" height="16" class="bi bi-twitter-x" viewBox="0 0 16 16">
    <path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z"></path>
  </svg>
</blocsicon>
 (旧ツイッター)</a>

I then proceeded to create that hover-wht class like this (sets SVG Fill to WHT only on hover):

image
image1174×1018 84.3 KB

I then Previewed and tested, but doing a mouseover on the “(旧ツイッター)” text still doesn’t cause the “X” logo icon to also turn WHITE. But I now know why: “svg” is missing in the CSS!

When I preview in Blocs and then right-click to Inspect the menu command, then choose “style.css” we see the problem code “.hover-wht”…

image
image1268×1046 215 KB

No “svg” appears in the following, which is why my “X” SVG icon doesn’t turn white:

.hover-wht:hover{
	fill:#FEFFFF;
}

But I can modify the code directly in Blocs Preview (to add “svg”) in order to see what will happen, and here’s how I modded it:

.hover-wht:hover svg {
	fill:#FEFFFF;
}

That solves the problem, making my “X” SVG icon turn white along with the text at right, like this:
image

But!! That was a direct code manipulation by me within Preview.
How in THE world do I add that “svg” selector into the code using Blocs?
Blocs “Class Editor” doesn’t allow me to add “svg”. At least, not that I can see.

This raises the question as to why Blocs doesn’t automatically insert the “svg” selector into the CSS code whenever you manipulate the SVG settings here:

image
image936×774 35.2 KB

In other words, if I set SVG Fill or SVG Stroke within the image tab of Class Editor, shouldn’t Blocs automatically add “SVG” to the CSS code for that class? If the answer is “no”, then shouldn’t it at least give me a checkbox option within that tab to put “svg” into the CSS code for that class? Because I don’t see how I can manually add “svg” into the CSS code using Blocs right now. It’s a problem.

4

THE SOLUTION

Sometimes the obvious isn’t so obvious to my feeble brain, but hopefully this helps the rest of you reading this.

I deleted my “hover-wht” class from the Class Editor.

I then opened the Code Editor window and chose Project-Header from the popup so the code would appear on every page in my site (since this is a navigation menu). I then typed in the following code:

.hover-wht:hover svg {
	fill:#FFFFFF;
}

It works because I referenced that “hover-wht” class in the first line of my Code Widget code inside my navigation menu:

<a href="https://x.com/Kiramek_Inc" class="a-btn a-block dropdown-links hover-wht">
<blocsicon class="img-fluid x-svg-icon-header-menu">
  <svg width="16" height="16" class="bi bi-twitter-x" viewBox="0 0 16 16">
    <path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z"></path>
  </svg>
</blocsicon>
 (旧ツイッター)</a>

Now I can mouseover either the “X” icon or the text to the right of it, and the whole line will turn WHITE, which is the expected behavior. Whew!

Even so, it still would be convenient to have a GUI solution, allowing people to add the “svg” selector from within the Class Editor.

1 Like