2

I am having an issue as I cannot override the styles of the elements on my website with my custom stylesheet. The issue is because of the foundation.css file as well as the normalize.css possibly. For some odd reason though the styles do override while being in a mobile resolution which has me completely lost. For example in my custom stylesheet (app.css) I have the following line:

li a {background-color: orange;}

Just for testing measures obviously. As the code above is shown you should be able to tell that any list with a link should have an orange background color. When viewing the website in my native resolution (1920px x 1080px) none of them are shown with an orange background. You can view an image of what I have explained.

As you can see the blue button shown with "Right Button Active" inside of it is the default color that the foundation.css stylesheet makes it. Now when I change my Google Chrome window to a thin window and take a look at the "Right Button Active" button it actually turns the button orange as you can see at the following picture.

I have looked at the other question mentioned on stack overflow: How do I get my @import stylesheet to override the main stylesheet? and tried to follow that solution but that didn't work for me in solving my issue. What makes me confused about my situation is the fact that my stylesheet will work on the mobile dimesion window but when I am in my native resolution and have the window showing on fullscreen it does not show up as I have it styled in my custom stylesheet.

Here is my head.php file to show you how my stylesheets are sorted and / or arranged:

<!DOCTYPE html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation example</title>
    <link rel="stylesheet" href="foundation/css/normalize.css">
    <link rel="stylesheet" href="foundation/css/foundation.css">
    <link rel="stylesheet" href="includes/app.css">
    <script src="foundation/js/vendor/modernizr.js"></script>
  </head>
  <?php
    include 'header.php';
  ?>

Any ideas?

Community
  • 1
  • 1
Codi Bezouka-Smith
  • 23
  • 1
  • 5
  • I think the issue isn't whether it is mobile or full width, but whether the elements are in line or stacked. When the width is reduced, the elements move to a new position - probably where the lower ones' background isn't overridden by the background from another element on the line. Try putting a line break between each element, and see how that affects the styling. – ReggieB Nov 11 '15 at 09:15

3 Answers3

1

The Proper Selector

You need more specific selector to make it work like you need.

The better way is to set up variables in Foundation's settings.scss file. However, SCSS compilation is needed in this case and if you don't want to do it (or if you simply can't) these lines will be enough:

.top-bar-section li.active:not(.has-form) a:not(.button) {
  background-color: #FFA500; /* orange color */
}

.top-bar-section li.active:not(.has-form) a:hover:not(.button) {
  background-color: #F09600; /* darker orange, lightness -6% is Foundation's default */
}

Note: You don't need using !important if you include app.css style file after the Foundation's one. It is better to avoid of usage of this keyword.

CodePen working example

Note: If you don't use the proper selector then you take a risk than some other stuff change their color too which shouldn't be the correct behaviour. However, if you want to change blue color to the orange one in general you should use SCSS distribution of Foundation, change $primary-color variable and then compile your own CSS.

How To Find Proper Selector

You need some web development tool, e.g. Firebug, which is abailable for all modern browsers. Then use it as is described below:

enter image description here

  1. Select inspect element tool.
  2. Click on the element which you want to inspect.
  3. Search for the attribute which you want to change - in your case, you are looking for attribute background-color. Then you can see the selector and you are also able to redefine color in the Firebug tool in place to see results immediately.
Knut Holm
  • 3,988
  • 4
  • 32
  • 54
  • This worked thank you very much! How did you get that *specific selector*? If I was to style those buttons personally I would have used ```.top-bar-section li.active a``` or something simple like that, but obviously using that does not work. Just asking how can I get to know how to get these more specific selectors!? – Codi Bezouka-Smith Nov 12 '15 at 02:31
  • @Codi Bezouka-Smith I added information how to find the proper selector into my answer. – Knut Holm Nov 12 '15 at 08:36
  • I appreciate your help - Thank you! :) – Codi Bezouka-Smith Nov 13 '15 at 07:12
  • @Codi Bezouka-Smith No problem, glad I could help. :) – Knut Holm Nov 13 '15 at 08:40
0

You have set the orange colour here in app.css

ul.dropdown>li>a{background-color: orange !important;}

This is only pointing to the drop down list for styling, not the button you hover/click to get there. Add this to your app.css style sheet and I am confident it will fix it.

ul .has-dropdown a:hover {
    background-color: orange;
}
Jamie Clark
  • 252
  • 1
  • 13
  • Unfortunately that is not the case. My css that I developed is the *app.css* file. – Codi Bezouka-Smith Nov 11 '15 at 08:56
  • Can you provide some more workable code please? Currently there isn't a lot to work on without seeing the code in action. All you have provided is a link to an image. – Jamie Clark Nov 11 '15 at 08:58
  • Sure, sorry about that. Also, I can't add any sort of code via a coding playground like *codepen.io* or *JSFiddle* because there are no external links to link the stylesheets to the site. Instead I have just pushed the code I currently have live to http://www.heartfx.org/ - perhaps you can use the *Google Chrome developer tools* to look at the code? – Codi Bezouka-Smith Nov 11 '15 at 09:26
  • @Jamie Clark [normalize.css](https://github.com/necolas/normalize.css) is a customisable CSS file that makes browsers render all elements more consistently and in line with modern standards. – Knut Holm Nov 11 '15 at 11:29
  • I have updated my answer now that I better understand the issue. – Jamie Clark Nov 11 '15 at 12:04
  • @Jamie Clark This is better answer, I am taking back my downvote. However, your selector isn't as specific as it should be and it can cause color change in cases which aren't required or, what is more important, it can stop working on mobile devices when menu is rendered by JavaScript and selectors are a little bit different. – Knut Holm Nov 11 '15 at 12:08
0

If your foundation.css has more specific rules to what you are trying to change, they could override your code done in app.css. One way to try this is to put the !important at the end of your CSS-statement, before the ; of the row.

In a case if that changes something, you should inspect your website via your browser's inspector in order to figure how it is being styled and what overrides what.

Please refer to this question for more information about load order and rule priorities.

Community
  • 1
  • 1
Pepelius
  • 1,576
  • 20
  • 34