Personalized CSS for Modifying Highlight Color of Main Menu when Selected on WEN Associate Theme

I am currently working on customizing the appearance of my website's main menu. Specifically, I want to modify the small highlighted bar that appears under the selected item to better align with our brand colors. The default color in the WEN Associate theme is orange, but I would like it to be white instead. Additionally, I also aim to change the background color of the block button to a beige shade (#a58263) similar to the "Recruitment Services" block on this site: .

In an attempt to achieve this, I utilized the following CSS code for the block button:

.wp-block-button_link {
    background-color: #a58263
!important
}

Unfortunately, the desired changes did not take effect and the button still defaulted to the orange color.

csswordpress-theming

Answer №1

The initial part of your question may have been a bit unclear, but here is the code that controls the hover color of the border:

#site-navigation li a:hover,
#site-navigation li:hover > a,
#site-navigation li.current-menu-item > a,
#site-navigation li.current_page_item > a {
border-bottom: 3px solid #ff794c;
opacity: 1;
}

For the second part, the solution can be found in the following code snippet:

.wp-block-file .wp-block-file__button,
.wp-block-button__link{
background-color: #a58263 !important;}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize the body tag to divide elements in ReactJS

Is there a way to assign different body tags to specific components? For example, I want to apply one body tag to the dashboard component and a different one for the sign up page component. ...

javascripthtmlcssreactjs

Position is at the highest & leftmost point, with a rotation created by the

I need help with JavaScript code that can arrange playing card images in a specific layout, as shown in the attached image. I've been trying to use CSS transform rotate with a 7-degree angle, but I'm having trouble calculating the correct left an ...

javascripthtmlcss

Tips for utilizing string interpolation in the style tag of an Angular component

@Component({ selector: 'app-style', template: ` <style> .test { color: {{ textColor }} } </style> ` }) export class StyleComponent { textColor = "red"; } The current method doesn't appear to b ...

cssstringangularstylesinterpolation

The table populated by Ajax is blank

I am facing an issue while trying to display a table using AJAX and PHP. The table is not appearing in the designated div. Since I am new to AJAX, I have limited knowledge about its functionalities. Below is the HTML code for my div: <div class="body" ...

phpjqueryhtmlcssajax

Challenges with Nginx URL redirection

When a page request is made, it goes through the "check.php" process: rewrite ^/(.*)$ http://localhost/check.php?page=$1 The "check.php" file carries out security checks before loading the requested page: <?php // ... security measures requi ...

phpjavascripthtmlcssnginx

Experiencing an issue where the canvas element fails to render on mobile Chrome browser,

I've encountered an issue with a script that draws a canvas based on the background color of an image. The image is loaded dynamically from a database using PHP. The responsive functionality works fine on mobile Safari, but not on Chrome. When the re ...

javascriptjquerycsshtmlcanvas

Java Spring - The on-page styling is out of control

Currently, I am in the process of developing a taxi web application using Java Spring. After successfully creating the website with the help of a template, I encountered an issue when trying to integrate the login functionality. Strangely, the styling on ...

javahtmlcssspringweb

Google maps not functioning properly with fixed position

Having trouble with including Google Maps within my webpage. I want it to be fixed in place as I have a long list on the left of the map. However, when I add position: fixed; to the map's CSS, it stops scrolling and just shows a white area underneath: ...

htmlcss

What is the best way to make the buttons on my website shift downwards?

I'm currently working on making my website mobile-friendly. I've managed to stack the buttons on top of each other when the width reaches 700, but now I'm struggling to make them move down the screen. Some resources suggest using absolute po ...

jqueryhtmlcss

I'm having trouble with my align-items code - can anyone help me figure out what

I have been attempting to vertically align the image and text without success using the "align-items" property. My website is based on a Bootstrap template. After inspecting the section, I noticed it says "display: block." Could that be causing the issue? ...

htmlcssbootstrap-4vertical-alignment

Tips for distinguishing the beginning and ending points of wrapped text in the Firefox browser

Within my work, I am utilizing a contentEditable span where I aim to position an element with position: absolute on the same line as the cursor. However, issues arise when text wrapping occurs - causing abnormal behavior at the start and end of wrapped lin ...

javascripthtmlcss

Remove the color gradient for the column headers in the Google Visualization table

Whenever I attempt to change the colors of the column headers using the method demonstrated in this insightful source, a rather generic gradient is applied. Interestingly, the example code provided also demonstrates the same default gradient on the secon ...

cssgoogle-apps-scriptgoogle-visualization

Guide to automatically select an option in a dropdown menu using a URL

I am currently working on implementing a dropdown select menu that helps filter an HTML table based on the user's choice. My goal is to utilize the URL of the page to automatically pre-select an option in the dropdown. For instance, if the URL looks l ...

javascripthtmljquerycss

You are unable to align a paragraph with a specific width in the center

I adjusted the width of a paragraph to make it less stretched out horizontally and more compact. However, when I attempted to center align the text within the paragraph using text-align: center;, only the direction of the paragraph was centered. The chall ...

htmlcss

Change the absolute positioning of a div element to be applied globally

When trying to get the position of an element using jQuery's .offset(), I then set the div to have a position:absolute; and adjust its left and top based on the information obtained from offset(). This method works well when all the element's pa ...

jqueryhtmlcsspositioncss-position

Arranging two <ul> elements within an angular template

I need assistance with aligning two ul blocks. Currently, they are displaying next to each other, but their alignment is starting from the bottom instead of the top: <div class="ingredients-container"> <div style="display: inline-block; width: ...

htmlcssangularjs

Is there a way to utilize either css3 or css in order to change the icon displayed on a button

Currently, I am working on a button that contains a span element. I am interested in finding a way to change the background of the span when the button is clicked and have it remain changed. Is there a way to achieve this using CSS only? I am aware that ...

htmlcss

Modifying .vue files within Laravel seems to unexpectedly impact unrelated CSS styles

I've been working on a Laravel project that involves building Vue components. Strangely, every time I update a .vue file and add it for a commit, modifications are also made to the app.css and app.js files. These changes seem to be undoing a particula ...

javascriptcsslaravelvue.jsnpm-run

What is the best way to dynamically pass props to the styles hook in Material UI?

Looking for a way to dynamically add background images to div elements? I'm currently iterating over an array of objects and returning divs, but I'm not sure how to set the background image based on the image URL in each object. Can anyone help m ...

javascriptcssreactjsmaterial-uifrontend

Apply styling on hover with an additional class

I am attempting to apply a border to an input element when its pseudo class :hover is activated, while also adding the same border to the button next to it. I have read that using the selector class:hover + class should achieve this effect. However, in my ...

htmlcssclasshoverpseudo-class