Changing the appearance of a webpage using awk or gawk

Looking to make modifications to specific CSS styles using awk/gawk. For instance, how can I alter the right property of the cta_grad style?:

.cta_grad {
    cursor: pointer; 
    cursor: hand;
    position: absolute; 
    bottom: 38px;
    right: 34px;
    width: 77px;
    height: 29px;
    overflow: hidden;
    background-image: url("images/cta_grad.png");
}

Here's an example in bash that I am after:

gawk -i inplace 'EDIT right VALUE OF cta_grad TO 14px' style.css

this command should produce:

right: 14px;

I would also like to change the actual property name itself, such as changing right to left. Maybe something like this:

gawk -i inplace 'CHANGE right PROPERTY OF cta_grad TO left' style.css

which would yield:

left: 34px;

Thank you

Answer №1

There is a less robust method of achieving this using awk:

$ awk -v k="right:" '$1==k{sub(k,"left:")}1' file

.cta_grad {
    cursor: pointer;
    cursor: hand;
    position: absolute;
    bottom: 38px;
    left: 34px;
    width: 77px;
    height: 29px;
    overflow: hidden;
    background-image: url("images/cta_grad.png");
}

$ awk -v k="right:" '$1==k{sub($2,"14px;")}1' file

.cta_grad {
    cursor: pointer;
    cursor: hand;
    position: absolute;
    bottom: 38px;
    right: 14px;
    width: 77px;
    height: 29px;
    overflow: hidden;
    background-image: url("images/cta_grad.png");
}

However, it is recommended to use tools that are more equipped to handle CSS.

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

Modal overlays should consistently appear behind the loading animation

When processing something and using overlays for loading, everything works fine until I use it for a modal. The issue arises when the overlays appear behind the modal instead of in front. Is there a way to bring the overlays to the front of the modal? Bel ...

iOS reveals often have a foundation modal that appears behind the background

I am currently working on implementing a confirmation modal that pops up when a button is clicked. Although the modal appears, it seems to be positioned behind the background that darkens the rest of the page. Relevant CSS: .reveal-modal-bg { background ...

Would it be practical to use a 1kb .png image on repeat as a background image?

I recently created a PNG image from the website . This image is only 1kb in size and I am currently using it as the background-image on the body tag of my webpage. Now, I am contemplating using another image that is significantly larger at 500kb (with dim ...

Tailwind CSS not applying styles to my Next.js project on Ubuntu operating system

I'm experiencing a strange issue where Tailwind CSS is not applying any styles to my project on Ubuntu 20.04. Interestingly, the project works perfectly fine on Windows but for some reason, it's not styling at all on Ubuntu. https://i.sstatic.n ...

Unable to manipulate JQuery lightSlider slides using element index

I've been working on a new page design at this link: The code is still a work in progress, so bear with me as I test out some functions and scripts. At the end of the first section, there are 4 logos that, when clicked, will trigger a modal to pop u ...

Enhance your visual content by incorporating text onto images with CSS/Bootstrap5

I'm having trouble getting my rows and columns to display on top of my background image. I've been struggling with this issue for a while now. Any assistance on this matter would be greatly appreciated! I'm fairly new to this, so if it&apos ...

What is the process for creating a List Grid View utilizing this particular code?

I attempted to modify the stylesheet extensively and also created a small function in JavaScript, but unfortunately it did not yield the desired results. <div class="row featured portfolio-items"> <div class="item col-lg-5 col-md-12 col-xs ...

Distribute divs of equal width evenly within a grid

I'm facing a unique challenge at the moment. I'm attempting to create a grid system where all elements have a fixed width of 200px each. What I envision is a clever grid setup using only CSS, where each "row" will strive to accommodate as many el ...

Utilizing CSS flex to perfectly align buttons

Struggling to master the art of aligning buttons using flex. On desktop, everything looks perfect: https://i.sstatic.net/vpdXn.png Even in portrait mode on mobile: https://i.sstatic.net/jAAAk.png But when it comes to landscape view, things get a littl ...

view multiple HTML documents simultaneously in a single browser tab

Currently, I am in the process of building a wiki and have included tables in various sections. I want to showcase these tables on the main page as well. Rather than constantly copying and pasting them, I'm looking for a way to have the main page auto ...

Switch up the appearance of a button by altering its image depending on the value it holds

There are two buttons generated dynamically (not within my control) that I would like to customize with different images. Since I can't actually change the button code, I believe I will need to utilize CSS to achieve this based on the CSS values. The ...

Align an image vertically beside a paragraph

I've been attempting to align an image, which is typically shorter in height than the paragraph next to it, in the middle vertically but just can't seem to figure it out. <div class="element"> <img src="http://dummyimage.com/75" /& ...

Element with absolute position does not expand along with scrollable content (over 100%)

In my popup window, the fade element is supposed to stretch to the full width of the screen. However, when the content exceeds 100% of the browser window height, the element does not extend to the full page height. If I set html, body { height: 100%; over ...

Incorporating marker tags to different sections of text within a contenteditable div

The main objective of this feature is to enable users to select placeholders within message templates (variable names enclosed in %). Inspired by Dribbble The API provides strings in the following format: "Hello %First_Name% %Middle_Name% %Last_Name% ...

Table for maximizing space within a cell (Internet Explorer 8)

I am attempting to make the "innerTable" fill up all available space within another table. The issue is with IE8 (no compatibility mode, IE8 browser mode, Doc mode IE8 Standards). The table does not expand to fit the containing TD. I tried enclosing the ta ...

When the class name is identical, the click event appears to be malfunctioning

Why isn't the click event working in this code? What am I doing wrong? $(document).ready(function() { $('.dashboardList').click(function() { alert("hello"); }); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1. ...

Creating captivating animations using CSS and HTML input

I am currently in the process of building a website and I am interested in adding an animated search feature to it. I came across this animation that has caught my attention: https://videohive.net/item/search-logo-reveal/19279469?s_rank=149. I was wonderin ...

Ways to troubleshoot Contact Form not progressing to the following validation step

The validation for the first two inputs, title and name, is functioning correctly. However, there is an issue with the page refreshing every time validation occurs. After validating the name field, the email field, as well as other fields such as dropbox, ...

The collapsible toggle feature is currently not working as intended

I have tried looking for solutions but have not been successful. My apologies for asking what may seem like a simple question. The toggle button is not expanding to show the menu items when clicked. It works fine on the "home" page but not on the linked pa ...

Flexbox won't align child elements of parent vertically

I am currently facing an issue with my parent container div and its child elements. Even though one child element is being vertically centered, the other two child elements remain at the top of the page. I have been trying to troubleshoot this problem but ...