Customization of HTML code of a wordpress website

  • Resolved bensonbongh

    (@bensonbongh)


    2 years, 1 month ago

    Hello

I have a very interesting request that I will describe below, if someone can give me a hint that will help me I am very grateful.

I have created a website and I am more or less satisfied with it. However, on the blog page still a small problem occurred:

https://benjibo.ch/blog/

The font of the widgets in the sidebar (white background) are addressed with the same general color as some font parts in the footer (blue background). I chose white for the general color and so you can't see the font in the sidebar finaly.

So I tried to address the text parts of the sidebar separately via CSS. In the upper of the two widget-blocks on the right side I could implement it this way, because there was already a specific class added to the <a> paragraph. Here the CSS answer with which I was successful:

a.wp-block-latest-posts__post-title {
color: #0e3170 !important;
}

For the lower block, however, to my knowledge I would now have to create new class or ID in the HTML which I can then address with a(class/id) via css.

Even after a long search on the Internet I have not found out how I can customize the HTML of a WordPress page. All write that goes about the editor, where I find only CSS and Java Script to change. Am I completely wrong with my assumption that I have to change the HTML code, or are there workarounds I can use?

Greetings
benjibo

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

Viewing 4 replies - 1 through 4 (of 4 total)

  • Are you referring to the the colour of the links in the “Kategorien” block? If so you can use the following to taget them:

    ul.wp-block-categories-list.wp-block-categories a?{
color: #0e3170;
}
    Andry

    (@blackstar1991)

    .widget .wp-block-categories-list a { color: #000; }

    Or you can find in Elementor Editor where is you can change color in your template. *This would be a better solution

    Moderator bcworkz

    (@bcworkz)

    Every widget’s outer container typically is a div with a unique ID attribute you can use to style that one specific widget. For example:

    #block-10 a {
    color: #0e3170;
}

    for the Kategorien widget’s links. If for some reason there are no suitable class or ID attributes you can use, in some cases using the :nth-child() pseudo selector will let you target a specific item within a list of items.

    Thread Starter bensonbongh

    (@bensonbongh)

    ul.wp-block-categories-list.wp-block-categories a?{ color: #0e3170; }

    This snippet does work fine. So I learned something more with this request! Thank you for the numerous and very fast answers!

    Cheers, benjibo

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Customization of HTML code of a wordpress website’ is closed to new replies.

Tags