Change Hyperlink Color Gutenberg Code Editing

  • I want to change the colors for links that are in a column on a webpage. The column was made from the block editor. My problem is that I don’t know how to write in Gutenberg’s altered code, because it looks so different from what I’m used to. The code:

    <!– wp:columns –>
    <div class=”wp-block-columns”><!– wp:column {“style”:{“color”:{“background”:”#f4f4f4″,”text”:”#2062ce”}}} –>
    <div class=”wp-block-column has-text-color has-background” style=”background-color:#f4f4f4;color:#2062ce”><!– wp:columns –>
    <div class=”wp-block-columns”><!– wp:column –>
    <div class=”wp-block-column”><!– wp:paragraph –>
    – – – – – –

    Where in that code above would I slip in the a{color:blue} reference, and how is the code written? And would you only change a to a:hover when writing the code for the hover over link portion, or is there are special way to write “:” also? Thanks for any help.

    • This topic was modified 2 years, 10 months ago by wpanonymous.
    • This topic was modified 2 years, 10 months ago by wpanonymous.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    You don’t do it that way. Please provide a link to a page on your site where we can see this. Thanks.

    Thread Starter wpanonymous

    (@wpanonymous)

    [ redundant link removed ] is the page I want to change. For now, it is changed through me going to my wordpress dashboard -> appearance -> custom css and changing link info that way, but that is going to likely mess up other pages on my site. I want to be able to say “All links in this section of my page…” or “All links in this section of my paragraph…”. That’s what I’m looking for help with as far as html and Gutenberg block changes go.

    • This reply was modified 2 years, 9 months ago by Jan Dembowski.
    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    When create the block, give it a class (over on the right, under “advanced”). You can then use the block’s class to style the “a” element via custom CSS for all blocks with that block class.

    Thread Starter wpanonymous

    (@wpanonymous)

    Would you (or anyone) be willing to give an example of what that would look like? It looks like assigning a class isn’t that hard, but coding the rest on the dashboard’s custom css section I’m having a little trouble with.

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    simulating adding that class here

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Change Hyperlink Color Gutenberg Code Editing’ is closed to new replies.