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!
Related
I am trying to change the background colour of a menu in Wordpress.
The background is transparent for all other pages which is good, but for the homepage where the first element on the page below is a slider the menu remains grey and I cannot seem to change it without making it opaque for the whole site?
The page/site in question is http://nudda.com/new/home-2
I think you are using Wordpress for development, so you can add a specific ID to your home page, then you can use it to change the menu background just for home page,, you should do something like this:
#Your_ID #top-wrapper {
background-color: rgba(0,0,0,0.1);
background-image: none;
}
simple fix is
.page-id-2700 #top-wrapper{
// your background color here
}
page-id-2700 is the wordpress generated page class for home
First add custom CSS and JS plugin in case you don't have a place to add custom CSS.
Then, add this line of CSS code:
#top-wrapper {
background-color: #050505 !important;
}
I can see that you might have already have written that but without the !important.
What is happening is that the default style is overwriting the new style.
The !important will allow you to force overwrite it.
Example template:
https://eamon-demo.squarespace.com/#overview-eamon
Is there any possible way to change the background color of a single white section with text in the Ethan / Eamon theme? I've had no luck with
<style>
.body {
background-color: lightblue;
}
</style>
in the Advanced section of the page editor. I am looking to change only one of the section's background colors, I do not want to change them all. Thanks.
Solution!
I was able to make it work on a section called "titles" adding the following to the CSS Editor:
section#titles {
background-color: lightblue !important;
}
Yes, it is possible by targeting via the CSS attribute selector. For example:
[data-url-id='titles-eamon'] .content, [data-url-id='titles-eamon'] .content-inner {
background-color: lightblue !important;
}
The above code would be inserted via the CSS Editor. The data-url-id value corresponds the URL Slug of the index page section (see image).
You can inspect the code of the page user your browser's developer tools (often by hitting F12 or CTRL+SHIFT+I). That will help you explore the code of the page for this and other similar issues/customization.
I'm working on an Unbounce project and I can't get the stylesheets to work.
I wanted to change the font-size of the labels of an option on the form. I saw (using inspect element) that the following CSS created affects the size: #lp-pom-form-55 .lp-pom-form-field .option label
So I created a stylesheet in Unbounce like this:
<style>
#lp-pom-form-55 .lp-pom-form-field .option label {
font-size: 16px !important;
}
</style>
And it just doesn't work. I also tried it without the style tag like this:
#lp-pom-form-55 .lp-pom-form-field .option label {
font-size: 16px !important;
}
It still didn't work. I even tried basic things like setting the background color of normal text field id's to black !important with no solution.
What is the correct way to apply styles to Unbounce pages?
I've realized that the code within the <style> tags is the correct way to do it. The problem was that the custom CSS doesn't display in the designer view, it only shows on the live page.
I'm trying to get a different background color for each different main content block on the pages on this website: http://www.amachielsenadvies.nl .
So far I have found out that this line in css can control the background color:
.sidebarwidth .box.one { background-color: #f8dffc;}
but I want a different color on different pages. A page ID i have found is 18 (or post ID), but it is unclear what has to be added in css to accomplish
Can anyone help me with that?
Each page can be uniquely identified through the page-id-* class on the body.
So to change the background color on the home page, e.g.
.page-id-45 .sidebarwidth .box.one { background-color: #f8dffc;}
If the page has an ID of 18...perhaps ID="post-18" I would assume that this has been applied to the body
<body ID="post-18">
then the CSS would be
#post-18 .sidebarwidth .box.one { background-color: #f8dffc;}
Just use the body classes
example
body.page-id-18 .sidebarwidth .box.one { background-color: #f8dffc;}
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