Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
  1. #1
    Junior Member
    Join Date
    Nov 2015
    Posts
    27
    Member #
    52626

    Changing the colour of a form banner/box, and other sections of index.

    Hi everyone,

    I only know rudimentary CSS, and am looking to make several simple amendments to my site, for split testing purposes.

    This is my site:

    Private Health Insurance Comparison UK - Best FREE Quotes - 45% Off!

    The changes I wish to make are the following:

    -I want to change the colour of the main form - where it says "GET MY QUOTE NOW TO COMPARE
    THE HEALTH INSURANCE MARKET!" and the ribbon- banner inside it to a shade of blue. Looking at the inspect element, I cannot see where the colour has been set in CSS code?

    I've looked at the element and looking down from <div class="free-quote-form"> cannot see where the colour is set?

    -I wish to change the colour of the lower main landing page Index- this is where the testimonial is placed- likewise I cannot identify where the colour is set.

    "Health insurance was a great decision! I have a condition which is not so well catered for by the NHS. I decided to go private and was getting confused looking at all the different options and it was taking a lot of time. I filled in this form and got a call and it was so simple, he gave me a price ( much better than I found before ) and he described the policy in extreme detail. I now have Health cover. Thanks! Steven"

    Grateful for your advice!!

  2.  

  3. #2
    Senior Member brandMatt's Avatar
    Join Date
    Oct 2015
    Location
    St .Catharines Ontario
    Posts
    240
    Member #
    52164
    Liked
    51 times
    You don't need to find it to override it. Just add !important after the CSS value, but before the semicolon. Eg:
    color:#000000 !important;

    Update:

    After looking at it on my desktop computer, I see the ribbon is an image. You cannot change the colour of an image with css.
    You have two choices, make a new image with your desired colour, or ditch the banner altogether.
    Last edited by brandMatt; Dec 02nd, 2015 at 02:15 PM.

  4. #3
    Junior Member
    Join Date
    Nov 2015
    Posts
    27
    Member #
    52626
    The strange thing is I cannot locate which part of the index file, or indeed which file refers to the form- for example the bit I identified via inspect element cannot be found in my CSS editor.

    Any idea how to locate the bit I need to add it to?!

    Quote Originally Posted by brandMatt View Post
    You don't need to find it to override it. Just add !important after the CSS value, but before the semicolon. Eg:
    color:#000000 !important;

  5. #4
    Senior Member brandMatt's Avatar
    Join Date
    Oct 2015
    Location
    St .Catharines Ontario
    Posts
    240
    Member #
    52164
    Liked
    51 times
    Look at template.css around line 214 for the form background-color. The the ribbon image is set as a background-image at around line 504.
    Quote Originally Posted by gazzafat View Post
    Any idea how to locate the bit I need to add it to?!
    Why yes I do, do you understand how css selectors work?

    My Web Site:
    brandwebdesign.ca
    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link. Some of us are really insecure and need those likes so that we feel important and smart, so come on, help us out, huh?

  6. #5
    Junior Member
    Join Date
    Nov 2015
    Posts
    27
    Member #
    52626
    I didn't, but I I've just found a guide via w3schools which explains it.. so yeah grateful fi you could point me in the right direction!

    The confusion is that the element I identified <div class="free-quote-form"> seems to be part of free-qoute-form when looking at the elements pane, but there is no such file in any of my folders

    Quote Originally Posted by brandMatt View Post
    Look at template.css around line 214 for the form background-color. The the ribbon image is set as a background-image at around line 504.

    Why yes I do, do you understand how css selectors work?

  7. #6
    Junior Member
    Join Date
    Nov 2015
    Posts
    27
    Member #
    52626
    Freat thanks, yes I found the exact element I was looking for!

    I had no idea template.css was some sort of style control file....

    Quote Originally Posted by brandMatt View Post
    Look at template.css around line 214 for the form background-color. The the ribbon image is set as a background-image at around line 504.

    Why yes I do, do you understand how css selectors work?

  8. #7
    Junior Member
    Join Date
    Oct 2015
    Posts
    2
    Member #
    52339
    Also Useful To me

    Thanks


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 06:20 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com