I've built a rails application and now want to change the look of it. Currently I was able to make the background color of the navbar white (how I want it), but currently the text is a light gray and when it is hovered over it becomes white, which mean invisible. How do I fix this?
Here is the massive file with my styling custom.css
https://raw.github.com/MarcusHSmith/BattleOfTheBands/master/app/assets/stylesheets/custom.css.scss
Any help would be appreciated.
I would like to change the text to default to black. thanks
In your custom.css try:
.navbar-inverse .navbar-nav>li>a:hover {
color: #707070;
}
.navbar-inverse .navbar-nav>li>a {
color: #000;
}
(P.S. It's a bit hard to determine what exactly will work because you haven't provided the HTML that this CSS is applied to. I had to look at your github repo views erbs to determine that you are using .navbar-inverse. if you had a working page to link to or a jsfiddle, that would be even better.)
Related
I'm designing a site using a simple worpress theme and customising a few elements with the Simple Custom CSS plugin.
I'm trying to change the colour of the footer and I've used
.site-footer {
background: #4E5754;
color: #f29e0f;
}
This is coming though as it is changing the text colour but not the background - the new background colour is showing up when I inspect the page source but not changing on the actual page.
What might be overriding the CSS?
You can use this style for this.
.site-footer {
background: #4E5754 !important;
color: #f29e0f;
}
Or put your style under the default stylesheet.
After a bit of trial and error I realised that the two colours were actually being controlled by different elements - site.footer and footer.inner
Thanks for the help everyone!
I'm working on a site for our clinic, here: www.markshoushadentistry.com
I am trying to change the background on the pages (not home page) from white to a textured image background. I've located using Inspect in Chrome the CSS is:
.site-content {
background: #FFF;
}
But I can't seem to find where it is to change it. There is an option in customizer that changes the color of the background, but I'm trying to change the background to an image.
Can anyone tell me where the code is to change the background color to an image?
Thanks so much in advance
Your .site-content is overriden by another top CSS
.home .site-content {
background: none;
}
if you change your CSS with:
.home .site-content {
background: #fff !important;
}
it should work
To change background color in a wordpress you can follow the following steps :
Login to wordpress and open dashboard
Go to Customizer (Appearance > Customize) -> Additional css
Enter the CSS to change the background color. Below is sample code:
site is the css class for the whole site.
XXXXXX is the hex code for the color you want to use.
you can choose your color code from here
Click Update File
And your background color will change . Hope this helps you
I'm using the Directory+ theme from ait themes on wordpress. I'm very bad at css and have only just started learning the basics.
There is a custom css section built into the theme to overwrite little bits and pieces. I have plenty in there and it's all working perfectly fine. However I'm struggling with changing something.
Why isn't this the correct way to change the colour? Can you please tell me how to write it the correct way and explain why this isn't working.
#elm-search-form-5-main a, #elm-search-form-5-main a:hover {
color: #ffffff;
}
Much appreciated.
This is because you use same color for default and hovered link
Try to do it like this
This css for default link
#elm-search-form-5-main a{
color: #ffffff;
}
And this css for hovered link
#elm-search-form-5-main a:hover {
color: #000000;
}
Look at this docs
your code is ok. Have you tested it in your web-browser developer tools to see if your element elm-search-form-5-main achange the color?
Firstly, the site is called, anarrayofstars.com/temp/.
So I am trying to change the background colour on Bar Isabel and the other portfolio items. I want them all to be different colours on idle state and hover state.
I have tried everything to change the background colour for just the one module
- I targeted just module i.e #module-1280, no luck.
- I targeted the all the modules, and it didn't change.
- So nowI'm stuck
Some of the code samples I tried are:
#module-1280{
background-color: #FF0000;
}
#module-1280:hover{
background-color: #FF0000;
}
I cannot seem to tell you why this isn't working. Maybe it has something to do with the background-color, I also tried to apply !important, but it still didn't work. I know its not a lot of information to go on but any help would be appreciated.
It is the a-tag that got the background-attribute.. Try this:
#module-1280 a{
background-color: #FF0000;
}
It should work.
I'm working with Twitter Bootstrap 3.2.0 and I need to change the color of the "navbar" from basic black to another color. I've tried everything and I can't get it to change in CSS.
I have gotten it to work properly in an add-in that calls a CDN yet I need to control it myself in CSS.
I have properly loaded the bootstrap files in the proper order.
Does anyone have a method that will let me change this - either with a style sheet or in-line command.
Thanks very much!!!
Just go here: http://getbootstrap.com/customize/ and customize the navbar then download the customized Boostrap.
As long as you use the default navbar, it's as simple as to target the .navbar-default class, like this:
.navbar-default {
background-color: #FC0;
border-color: #E7E7E7;
}
And onbiously you can play with screen sizes, use different colors based on which page you are and so on
I made a Bootply to show you