Customize CSS on a specific webpage to overwrite the default values set by the

We recently had a website redesigned by a company that also manages and hosts it, along with providing our CRM system. The issue at hand is that they include a backlink in the footer that I am unable to modify since it's not part of the page until the server generates it.

I would like to use On Page CSS to change this link color to white or completely remove it. Either solution works for me.

<span style="width: 100%; text-align: center; display: block; color: #999999; font-family: verdana; font-size: 10pt;margin-bottom:2px;">Powered by <a style="color: #999999;" href="http://www.prospectsoft.com/ecommerce" target="_blank">ProspectSoft eCommerce</a> and <a style="color: #999999;" href="http://www.prospectsoft.com/crm" target="_blank">CRM</a></span>

The code above is what appears when I inspect the source of the page using Firefox. I cannot see this code in the provided editor, but I can edit the CSS files.

Is there a way to use on-page CSS to handle this situation?

htmlcss

Answer №1

In my opinion, using pure CSS may not be the best solution as there is nothing unique to reference it by.

Another Approach:

If Jquery is an option, it could make things easier.

Add the following script in the head section:

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$().ready(function () {
$('footer').child().hide();
});
</script>

Depending on how the page is structured, you should be able to target that specific HTML element. For example, if the span is the only element within the

<footer>

tag, you can use:

$('footer').hide();

Please Note: If they are already using jquery, you can simply implement the code.

One More Tip:

$().ready(function () {
    $("a:contains('ProspectSoft eCommerce')").parent().hide();
});

This will hide all parent elements of anchor tags containing that text, so use with caution.

UPDATE:

$("span:contains('Powered by')").hide();

Answer №2

In-line CSS has the ability to override stylesheets that are declared in the document head.

If you notice that certain properties are not changing as expected, try incorporating the "!important" modifier.

For instance:

color: #ff0000 !important;

Without specific details about your issue, it's difficult to provide any further advice at this time.

Answer №3

Functional but lacking in aesthetics:

div span, span a { color: #FFF !important; }

The downside is that you must manually set the color for each similar nested combination of "div span" and "span a"

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

Issue with overriding font-family variable in Bootstrap 5 not resolving

I have configured Proxima+Nova font for my Angular application style.css @import url('https://fonts.googleapis.com/css?family=Proxima+Nova'); Attempting to change the root font using bootstrap variables as shown below $variable-prefix: ...

csstwitter-bootstrapbootstrap-4bootstrap-5

"Transforming the Website Background with a Splash of Color

I am trying to figure out how to change the color scheme of my website with a button click. Currently, when I select a different color, only the background of the webpage I'm on changes, not the entire website. I have applied CSS but it's not ref ...

javascriptjqueryhtml

Increase the padding at the top and bottom of the div border

I am facing a problem with CSS shrinkwrapping. Here is the simple code snippet... <!doctype html> <html lang="en-US"> <head> <title>Device Activation</title> <meta charset="utf-8"> <style ...

javascriptcsshtmlmargin

Ensure the content is optimized for all screen sizes, utilizing Bootstrap to adapt accordingly

I have a webpage with a header, a footer, and a container id="item" that contains a list of four items with their respective logos. I am attempting to make the item container responsive based on the screen size so the entire page fits the screen without re ...

javascripthtmlcsstwitter-bootstrap

What is the best way to display my index.html file while utilizing PHP Slim REST Api?

Recently I began diving into PHP Slim to create a REST API, and now I'm looking to integrate a client interface with it. One issue I've encountered is not being able to serve my index.html (the client's homepage) properly. Despite following ...

phphtmlrestweb-applicationsslim

Create a receipt by utilizing jQuery with dynamically generated inputs

Is there a way to insert the descriptions and amounts of invoice items into the receipt, similar to the due date? The input for this section is dynamic with multiple rows that can be added or deleted. I'm considering using a counter that increments e ...

javascripthtmljquery

Define CSS styles based on the content of a specific cell within a table

Is there a way to target a <td> in CSS based on its content value? <table> <tr> <td>Name</td> <td>John</td> <tr> </table> For instance, how can I apply the color:bl ...

javascriptjqueryhtmlcsshtml-table

Hiding the mobile footer: A step-by-step guide

Make sure the page footer is hidden when a user tries to enter information in the fields on mobile devices! Check out the live site here See the screenshot below: https://i.sstatic.net/Z0dgx.png I would really appreciate your assistance with this issue ...

htmlcsstextboxhidefooter

Adjusting color of fixed offcanvas navbar to become transparent while scrolling

After creating a navbar with a transparent background, I am now using JavaScript to attempt changing the navigation bar to a solid color once someone scrolls down. The issue is that when scrolling, the box-shadow at the bottom of the navbar changes inste ...

javascripthtmlcssbootstrap-5

Creating a header using pseudo elements

Check out a CodePen I created to demonstrate the issue. It would be easiest if you could take a look at it here. I am trying to figure out a way to include pseudo elements before and after a heading to display a 1px height line that extends from the sides ...

htmlcss

Is there a way to transfer a significant volume of data from one webpage to another without relying on the POST

Currently, I am utilizing a web server framework that exclusively operates with GET requests. Presently, my task involves transferring a substantial volume of data (specifically the text content in a textarea) inputted by users onto another page where it i ...

javascriptphpjqueryhtmlapache

Styling the arrow of a CSS select box

Is it possible to place a dropdown arrow inside a select box? I have tried, but the arrow always displays behind the select box. How can I modify the CSS code to position the arrow properly inside the select box? .form-item-custom-search-types::before { ...

htmlcss

Mobile application designed using HTML which allows for storing data offline without needing an

Looking to develop a mobile application using HTML5 that can function on both iOS devices (such as iPhones and iPads) and Android phones and tablets. The focus of the app will be on organizing grocery items, including various categories and images for eac ...

htmlcordovakendo-ui

Adjusting the size of a parent flexbox to expand or contract in relation to another flexbox

Within my parent div, I have implemented flexbox. Adjacent to the parent div is another flexbox. The flexbox on the right side can contain 1, 2, or 3 items that influence its growth/shrinkage. I expect the size of the parent div to adjust according to th ...

htmlcssflexbox

The functions .is("visible") and .is(":visible") seem to be behaving in distinct ways

While working with the jquery visible selector, I noticed a strange inconsistency when checking if a child element is visible or not. When using .is("visible") and .is(":visible") with the css visibility:hidden property, they produced different results. Wi ...

javascriptjquerycss

What are the steps to utilizing mattooltip effectively?

Can someone help me figure out how to successfully implement mattooltip in this code? It's not working as expected. <div class="btn-edit-nounderline" matTooltipClass="custom-tooltip" (click)="edit(row.widgetAccess)" ...

htmlangulartypescript

Tips for updating the class of a button upon clicking it

I have a dilemma with my two buttons - one is green and the other has no background. I want them to change appearance when clicked, from green to one with a dashed border-bottom style. Below is the HTML code for these buttons: <div class="btns"> ...

javascriptjquerycssbutton

Having trouble getting the Bootstrap toggle checkbox to function properly within Angular 2 components?

Working on an Angular 2 project with Bootstrap, I recently tried to integrate a bootstrap-toggle checkbox into the UI. Despite following the instructions from this site, the checkbox was displayed as a normal checkbox instead of toggled. The Index.html cod ...

jqueryhtmltwitter-bootstrapangular

Maintain consistent theme across various pages using javascript

So I successfully implemented a dark mode on the front page using the following script (sourced from W3schools) : <script> function darklightmode() { var element = document.body; element.classList.toggle("dmode"); } </script> ...

javascripthtmlcssdarkmode

Instructions for embedding a video in an HTML document with the help of Bootstrap 4

I'm currently developing a website and I'd like to embed a video in HTML using Bootstrap 4. The video file is in mp4 format. Here's the HTML code snippet that I've experimented with to insert the video: <header class="container ...

htmlcssvideobootstrap-4