I'm in need of some coding assistance! My goal is to change the background and hover colors for a specific section

I'm attempting to replicate a section of the menu, but I want the background and hover colors to be reversed. The CSS code for the website wasn't done by me and coding isn't my strong suit.

This page is still a work in progress:

However, I'd like the menu color to change for these two lines:
.squareboxarchery{background-color:#546734;}
.squareboxarchery:hover{background-color:#425227;}
.squarearcherytitle{color:#ffffff;}
and
.squarebox{background-color:#425227;}
.squarebox:hover{background-color:#546734;}
.squaretitle{color:#ffffff;}

I can't figure out how to make it a separate entity... Any assistance would be greatly appreciated!

htmlcss

Answer №1

After analyzing the DOM, my conclusion is:

The second div with the class "fixed_site layer_wrapper" should be relocated to be on the same level as the first fixed_site layer_wrapper. It makes sense for two similar structures to be at the same hierarchical level.

Once this adjustment is made, you can effectively organize your CSS by:

/* Style for the first line */
div.fixed_site layer_wrapper squarebox {}

and 

/* Style for the second line */
div.fixed_site layer_wrapper + div.fixed_site layer_wrapper squarebox {}

Answer №2

If you are using a WordPress theme and encountering issues, try logging into your CMS to make some selections and save the page. If that doesn't work, consider adding extra CSS for the page with the !important property to overwrite background colors, text colors, hover colors, etc.

Here is an example of what it could look like:

.squareboxarchery{background-color:#425227!important}
.squareboxarchery:hover{background-color:#546734!important}
.squarearcherytitle{color:#ffffff!important}

or

.squarebox{background-color:#546734!important}
.squarebox:hover{background-color:#425227!important}
.squaretitle{color:#ffffff!important}

You can choose from the above two sets or simply add these lines to your style.css file for resolution.

Answer №3

If you find yourself working with a CMS (Content Management System), chances are you've had to resort to using !important to override your styles. However, there is another method to achieve the same result without relying on !important. Simply download FileZilla, locate the main.css file of your website, manually edit the code, and then re-upload the file onto your site. Just remember to create backups by duplicating these files for added security. This way, if you make any mistakes, you'll always have the original files saved on your computer.

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

Chrome causing the vanishing act of floated iframes

I encountered an unexpected issue on my website recently. For the past three years, everything was working smoothly until I updated Chrome to version 60. Now, whenever I try to load iframes from Archive.org, they momentarily appear and then vanish instantl ...

htmlcssgoogle-chromeiframe

Step-by-step guide on embedding an HTML navigation menu into an index.html file and ensuring that the CSS styles are correctly applied to the loaded menu

Currently, I am in the process of studying Bootstrap, jQuery, and React with the aim of loading my navigation menu from a separate file called menu.html into my main file index.html. The script I am using for this task is: function codeAddress() { docum ...

jqueryhtmlcssreactjsbootstrap-4

The hidden absolute positioned div disappears once the sticky navbar becomes fixed on the page

Whenever my navbar reaches the top of the screen, the links in the dropdown menu disappear. I followed tutorials and examples from w3schools to build my webpage. Specifically: howto: js_navbar_sticky howto: css_dropdown_navbar This code snippet exempli ...

javascripthtmlcssmenusticky

Ensuring the correctness of a JSP form prior to submitting it

I am experiencing an issue with my form in JSP. The input fields are marked as "required", but when I submit the form, it still allows submission even if the required fields are empty. I am confused by this behavior and would greatly appreciate any help. ...

javascriptjavahtmljsp

Image positioned close to the border

Regrettably, I am encountering an issue while attempting to align the image to the edge of the screen. <section class="hero-main"> <div class="container"> <div class="row"> <div class="col-lg-6"> <div cla ...

cssbootstrap-4

"How can I make a dropdown open and close when a button is clicked, but also close when clicking outside of it at the same

One button click opens a dropdown, and it also closes when clicked outside. toggleAllCategories() { this.setState({ isOpenAllCategories: !this.state.isOpenAllCategories }); } The issue arises when attempting to open and close the dropdown by clic ...

javascripthtmlreactjs

Centering White in an Accordion with JQuery

Can anyone explain the mysterious presence of a large white space in the center of my accordion content? Despite having the correct .css settings, there seems to be an unexplainable white space disrupting the layout. #accordion .ui-accordion-content { ...

phpjqueryhtmlcssaccordion

Adjust speed on various HTML5 video players

I'm looking to slow down all the HTML5 video players on my page to 0.5x speed. Currently, I have a JavaScript snippet that only affects one video player at a time. <script type="text/javascript"> /* play video twice as fast */ document.quer ...

javascripthtmlvideohtml5-videoplayback

Dynamic content display using AJAX

Having already tried to find a solution through Google with no success, I am at a loss. I have articles where a paragraph is initially displayed, followed by a "read more" link which reveals more content using JavaScript. However, this approach may slow do ...

phpjavascripthtmlajax

Combine and store downloaded stylesheets in the browser into a single file

My task involves transforming a website page along with all its external stylesheets into a single HTML file with inline CSS. This is not for usage in emails, but rather to incorporate styled sections of that page into another website's page. After so ...

javascripthtmlcss

Offspring of the superior element resting above another element

I'm dealing with a unique situation involving the Z-INDEX property. Check out my HTML setup below. <div class="player"> <div class="player-line"> <div class="player-handle"></div> <!-- /.player-handle --> </d ...

htmlcssz-index

JavaScript popup is no more visible on the webpage

Recently, I implemented a pop-up on my website that used cookies to prevent it from appearing every time a user visited a page. However, after making this change, the pop-up stopped showing altogether. Despite my best efforts in testing, researching, and s ...

javascriptjqueryhtmlcss

Use setTimeout and setInterval with the initial input without parentheses or double quotation marks

<!DOCTYPE HTML> <html> <head> <script type="text/javascript"> var count=0; function increaseCount(){ document.getElementById('txt').value=count; count++; setTimeout(increaseCount(),1000); } </script> </head&g ...

javascriptjquerynode.jshtml

Sending information through the click of a button from various components

I need to trigger form submission when a button outside the form is clicked. I placed the button in my app component and followed an advice from this highly rated post: How to submit form from a button outside that component in React? However, following ...

htmlreactjs

Send Selected Input From Radio Button To Form Using a Function

Within the main php page titled tipComp.php, there is a script designed to submit a selected value from a radio button within a form: <script> $('input[type=radio]').on('change', function() { $(this).closest("form& ...

phphtmljquery

What is preventing HTML from triggering JavaScript when loaded inside a <div> with a script?

I'm working on creating a collapsible menu that I can easily customize on any page without the use of iframes. As someone new to web design, I have knowledge of CSS and HTML but I am currently learning JavaScript with limited experience in jQuery or A ...

javascripthtmlcss

Having trouble with the functionality of my JavaScript slider

After attempting to incorporate a slider into my website, I encountered an issue where the slider was not functioning as expected. The slider I tried to implement can be found here: https://codepen.io/amitasaurus/pen/OMbmPO The index of the site can be a ...

jqueryhtmlcss

Guide on displaying a list of images in a single line with rows and columns

I am in search of a solution to create the user interface depicted in the attached image using React. Additionally, this post includes a link to another post on the same site: How to add a single line image list that is horizontal scrollable (in react js). ...

javascripthtmlcssreactjsmaterial-ui

Dropzone JavaScript returns an 'undefined' error when attempting to add an 'error event'

When using Dropzone, there is a limit of 2 files that can be uploaded at once (maxFiles: 2). If the user attempts to drag and drop a third file into the Dropzone area, an error will be triggered. myDropzone.on("maxfilesexceeded", function(file){ a ...

javascriptphphtmldropzone.js

Having trouble updating the styles on my vuejs-datepicker

I am attempting to customize the appearance of a vuejs-datepicker component from https://www.npmjs.com/package/vuejs-datepicker <datepicker format="dd/MM/yyyy" calendar-class="my_calendar" input-class="textfield" name="my_date" /> Alth ...

cssvue.jsdatepickervuejs-datepicker