Hi , i'm a beginner and I tried some ideas from this website or on
google but I can't make it work. I have differents pages and in the
"about" page I would like to change the border around my picture but
i can't find out how to , because in my css there is a border for
all pictures. So my question is what to write in css so that i'll be
able to modify every single element of each page ? I tried "id" but
it doesn't change anything :/ thank you :)
Best practice would be to add a class to the image you want to style differently like this
<img class="about-page-image" src="...">
and then define the css like this
img {
border: 3px solid green; // applies to all images
}
img.about-page-image {
border-color: red; // overrides rule above
}
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.
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 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 trying to style a views-slideshow on my Drupal site, once I know how to style one part of the slideshow I can then style the rest. I have this div on the view that i want to style and I'm having trouble even putting a border color on it? the div is ...
<div class="views-field views-field-field-slide-image">
If anyone can help as to how to style it and where that would be great
Thanks
This is a old link, but I'm sure that it's useful for you:
http://www.group42.ca/theming_views_2_the_basics
Basically you have to create new files and put it in your theme.
The name of your files depends on the view. And the module recomends names.
On the other hand, you can add the border using CSS, add this for example:
.views-field-field-slide-image {
border: solid 1px #000000;
}
Regards.
I've been customizing a one-page-design wordpress template (see http://ggc.inductiveplay.com) - it pulls up a floating button on the home page that :should: scroll down to the next section (#menu), but for some reason it keeps pointing to the 3rd section (#location).
I'd like to just override the link in CSS where I'm customizing the button size/appearance and assume I just have bad syntax here:
.a-btn {
padding: 2px 12px !important;
margin-bottom: 5px !important;
opacity: .8;
z-index: 1;
href="#menu";
}
If there's a quick fix for this I'd love to know, otherwise I'd love any insights on where the link is being set/computed on the site.
You can add things before and after a HTML element in css. But you can't change a link using CSS.
The below is bad CSS syntax:
href="#menu";
To add things before something in CSS you can have a HTML element like:
<div class="sample-text"></div>
Then using the following CSS:
.sample-text:before {
content:"blah blah";
}
Instead of "blah blah" you can have something else.
You can't use HTML in the CSS so you can't do what you want, but this is the closest you can get to it.
However you can change links using javascript.
Also you can only use z-index if you specify a position:relative, position:absolute or position:fixed.