Personalize the color scheme of your HTML template

I recently downloaded a template from html5up.net, specifically the one located here.

My intention was to add my own touch by changing the blue color to orange. I managed to do so by tweaking the main.css file and it worked like a charm.

However, the result ended up looking different than what I had in mind: https://i.sstatic.net/la2wQ.png Instead of what I actually wanted to achieve: https://i.sstatic.net/1k5Nc.png I must admit, I'm quite lost on how this all works. Any ideas on how I can change the entire shape as intended?

htmlcss

Answer №1

It is likely that the elements above and below the area where you adjusted the color are SVGs. To modify the color, locate these two SVG elements in the HTML file and update their fill attributes accordingly. Here is an example of an SVG element:

<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

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

What is causing a scroll bar to appear at the bottom even though my content is not overflowing?

Here is the situation I am trying to describe: http://jsfiddle.net/CvgFS/1/ My English skills are not strong enough to explain it clearly, but I hope you can see why I am getting a scroll bar even though the content fits the page. This issue is happening o ...

htmlcss

Interactive CSS animation with a single click

I am in the process of developing a website and have incorporated CSS animations for dropdowns. However, I am looking to change it so that the dropdowns appear on click rather than hover in the submenu. I am struggling to make this adjustment with the curr ...

javascriptjqueryhtmlcssdrop-down-menu

Is it possible to load a specific section of a webpage?

Take a look at the image below first. We currently have a sidebar navigation using an ajax accordion control in ASP.NET. Now, whenever a user clicks on a link inside the sidebar, the related page content should display in the Content goes here region. A ...

asp.netajaxvisual-studiohtml

Is there a way for the React select component to adjust its width automatically based on the label size?

After defining a React select component, it looks like this: <FormControl> <InputLabel id="demo-simple-select-label">Age</InputLabel> <Select labelId="demo-simple-select-label" id=&quo ...

javascripthtmlcssreactjsmaterial-ui

What steps can be taken to resolve the issue of the Cannot POST /index.html error?

Here is an example of a calculator app created using HTML and Javascript. Upon running the program with nodemon and accessing localhost:3000, pressing the submit button triggers an error on Google Chrome. [nodemon] starting `node calculator.js` Server sta ...

javascripthtmlnode.js

Is it possible to align a CSS table row with its corresponding table header even when the table row is deeply nested within the table structure?

I am looking to keep the structure of my HTML code consistent and unaltered. However, this has resulted in a form tag being nested inside a table row before the table cells can begin. The information I need to display is tabulated data, which makes CSS t ...

htmlcss

Skeleton page CSS sub-navigation menu for Internet Explorer 7

I created a webpage using the Skeleton Framework and added a CSS menu with a submenu. While the menu works well in most browsers, I encountered issues with the submenu when using IE7 and lower versions. Instead of appearing below the parent menu item, the ...

htmlcssinternet-explorerskeleton-css-boilerplate

Retrieving the specific value of an input from a group of inputs sharing a common class

After extensive research, I have not found a suitable solution to my specific issue. I am creating a block of HTML elements such as <div>, <span>, <i>, and <input> multiple times using a for loop (the number of times depends on the ...

javascripthtmlajaxtwig

Clicking on multiple external links will open them in separate tabs simultaneously

My attempts to find a solution on Google have been fruitless. I am in the process of creating a content aggregator, which is essentially a list of links to external websites. I want each link clicked to open in a new tab. Currently, I am using target="bl ...

html

[Web Development]:

Having an issue with my HTML file where a JavaScript function named "CheckCaptcha" is not being executed when an image is clicked. I've been working on the code for hours, trying different tweaks and modifications, but it still can't seem to find ...

javascripthtml

`Exploring the magic of CSS image overlay feature`

I would appreciate it if you could walk me through the implementation of this overlay code... .overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .5s ...

css

Use the "webkit-keyframes" exclusively within the specified id

Is there a way to exclusively apply the "webkit-keyframes" within the #progress1 id? I have another progress bar (#progress2) on the same page with a different webkit-keyframes, which is why I need this distinction. #progress1 { background: white; / ...

htmlcss

Textbox textchange event triggers Javascript function when Checked=True

$('.LblQTY').on('input', function () { var currentRow = $(this).closest('tr'); var rate = parseFloat(currentRow.find('.LblRate').text()); var quantity = parseFloat($(this).val() == '' ? '0& ...

javascriptjqueryhtml

methods for adjusting the transparency of the background image while keeping the foreground image visible

I am using Twitter Bootstrap to create a carousel on my website. Currently, I have set the foreground image as the current image and the background image as the next one. However, I want to adjust the opacity of just the background image. Can someone pleas ...

jquerycssruby-on-railsrubytwitter-bootstrap

script to pause video using jQuery

I have a script that works perfectly, but currently it only stops an instance of a playing video if a new video is started. I want to modify the script so that ALL instances of playing videos are stopped when the function stopAllButMe(); is called. Can s ...

javascriptjqueryhtmlvideo

What is the best way to emphasize this specific section of text?

Looking for help with my tumblr template. I have the following block of code: {block:IfNotEndlessScroll}{block:Pagination}{block:PreviousPage}Previous Page{/block:PreviousPage} {block:NextPage}Next Page{/block:NextPage}{/block:Pagination}{/block:IfN ...

htmlcss

Insert a new row into a table using tablesorter jQuery

Is it possible to add a row to a table built with the jQuery library "Tablesorter" by simply clicking on a button? I have tried this approach, but unfortunately, the new row does not inherit the CSS properties of Tablesorter. As a result, I am unable to se ...

jquerycssrowtablesorter

Excess gap detected in dual-column design

Exploring HTML once again, I'm currently working on creating a 2 column layout that doesn't rely on floats in order to maintain the natural document flow. Most solutions I've come across involve floats or tables, which I want to avoid. I als ...

htmlcss

Can someone assist me in creating a clickable link that opens a menu in HTML when clicked?

I have been attempting for the past few days to open the megamenu by clicking on a link, but despite my efforts, I have not been successful. After reviewing some code, I discovered a clue in the CSS. It seems that setting the visibility value to visible wi ...

javascripthtmlcss

Using CSS Grid to dynamically size based on content inside a div element

We are in the process of adding tags to our website, and we want them to be dynamically generated from our CMS. Currently, all the tags render on the page and we can use them, but we would like the divs to adjust their width automatically based on the leng ...

csscss-gridstyled-components