I am trying to change the background on the Blog page of my website. The current website is all black backgrounds, but I would like the Blog page to be white with black text. I need to have my own CSS as Squarespace does not support this as a custom setting.
I have already tried codes provided for things like this, but nothing has worked. For instance: https://answers.squarespace.com/questions/14800/how-can-i-change-the-content-background-color-on-only-one-page-using-css.html
#main { background-color: #ffffff; }
I would like the background color to change.
You may target the blog specifically via its collection ID, which Squarespace adds as a class for you, on the body element. From there, we must target the div that is its immediate child, .overflow-wrapper.
Insert the following CSS via the CSS Editor:
.collection-5d0a3c81de1f2b00012ccccc .overflow-wrapper {
background-color: white;
}
Because the text is white, it will appear invisible. You should be able to adjust the titles and other meta-information (author, date, tags, categories, etc.) using the Style Editor.
However, I don't believe the style editor will give you an option to alter the body text (p elements) on the blog separately from the rest of the site. Therefore you may also find the following CSS helpful for changing body text on blog pages to black:
.collection-5d0a3c81de1f2b00012ccccc p {
color: black;
}
In addition, you may need to add some CSS to address the header, which as a result of setting a white background will be unreadable.
.collection-5d0a3c81de1f2b00012ccccc.site-spacing-small .site-header, .site-spacing-small .site-page, .site-spacing-small .site-footer {
margin-top: 0;
margin-bottom: 0;
padding-top: 3vw;
padding-bottom: 3vw;
}
.collection-5d0a3c81de1f2b00012ccccc #header {
background-color: black;
}
And finally, the page title should also be set to black:
.collection-5d0a3c81de1f2b00012ccccc .page-text-wrapper .page-title {
color: black;
}
Related
i have the following website
http://cancersurvivorshipireland.com/cancersurvivorshipireland.com/wordpress/
and I'm trying to change the header menu color. I have previously changed the colour for the menu items themselves from code that someone provided here and it was very helpful however no matter what I do I can't change that dirty blue color to something nicer.
I have tried various types of code:
top-header {
background-color: white;
}
header {
background-color: white;
}
.sf-menu {
position: relative;
padding: 0;
width: 100%;
border-bottom: 3px solid #e9e9e9;
background: #ffffff !important;
}
It you visit the actual stylesheet that's doing the overriding, you'll see that it's a custom stylesheet that's being generated by theme options. It doesn't even exist on the server as an actual .css file. It's also the last styles being called on the page.
Rather than editing a different CSS stylesheet and using !important to override this, you're better off updating it (or even removing this, if possible) from the WP Admin theme options.
Also, as mentioned by the (now deleted?) other answer, you need to make sure you're prefixing the .top-header class with a .. Your question doesn't currently show this.
I've installed the Social Fixer plug-in to tinker with the CSS of Facebook. I've been doing a decent job and playing with the overall look of it except for one little detail that's been bothering me
I've reached the point where I've decided to change the Facebook logo to a gif I got online and modified. The change is made no problem except that clicking on the logo no longer takes you back to the Facebook homepage.
The change I made is the following:
#pageLogo
{
content: url('http://i.imgur.com/hrsJAJh.gif');
height: 82%;
width: auto;
position: relative;
left: -35px;
}
I've tried using background-image: url(...);, but it just puts my new logo behind Facebook's official logo. I realize that using content: url(...); is also changing (i.e. removing) the anchor to the homepage found in:
<h1 id="pageLogo">
<a data-gt="{"chrome_nav_item":"logo_chrome"}" href="https://www.facebook.com/?ref=logo">Facebook</a>
</h1>
I've tried changing the content of the anchor itself to add the link back to the homepage:
#pageLogo a
{
background-color: transparent;
content: url('http://www.facebook.com/');
}
#pageLogo a:link
{
background-color: transparent;
content: url('http://www.facebook.com/');
}
#pageLogo a:visited
{
background-color: transparent;
content: url('http://www.facebook.com/');
}
#pageLogo a:active
{
background-color: transparent;
content: url('http://www.facebook.com/');
}
#pageLogo a:hover
{
background-color: transparent;
content: url('http://www.facebook.com/');
}
But it doesn't work and I'm guessing that's because I'm changing the content of the anchor (i.e. the "Facebook" text) and not the actual "href" of that anchor.
I've looked here for anyone with a similar problem and most answers said to modify the HTML or use Javascript instead. With Social Fixer, I am only able to modify the CSS.
I've checked w3 for an attribute for "href" and "data-gt" just in case, but no luck.
Just to reiterate after all this text, I want to change Facebook's logo while keeping the link to the Facebook homepage only using CSS.
The Facebook logo is, at the time of this answer, a background-image of the a link inside the h1#pageLogo, not the background of the element itself. This is why your attempt at changing the background-image resulted in an image behind the logo.
You'd want to change the background-image of the link. Something like:
#pageLogo a {
background-image: url('http://i.imgur.com/hrsJAJh.gif');
background-position: top left; /* probably */
height: "your image height";
width: "your image width";
}
I'm trying to take away a white border that is appearing from behind an image on my sidebar. I can't figure out what is causing the white border. I thought it was the padding, and then I thought it was the border. If you visit our home page (http://noahsdad.com/) and look on the side bar under the "new normal" picture you will see a "Reece's Rainbow" image. I'm trying to remove that white around the image. I pasted in the code below, but it's not doing anything. Any thoughts as to what I'm doing wrong?
Thanks.
#text-23 { background: none}
the reason it's not working is the background: none is never getting to the img which has the background set on it (backgrounds don't cascade down they exist in the element and you can have multiple elements layered on top of each other much like a painting. Which has the effect of the background cascading)
#text-23 img { background: none; }
that should resolve your problems. I am assuming that when you call the class textwidget you still want it to append the white background, just not for this instance. So if you set the above it will cascade properly with the correct specificity while leaving the rest of your page alone.
This can also be done by
#text-23 .textwidget img { background: none; }
but that level of specificity is not required. However if you try to just do:
.textwidget img { background: none; }
this will override all of the instances where the background is set on an image in the textwidget container.
You have added the white border yourself by setting the following in line 884 of style.css:
.textwidget img {
background: #fff;
padding: 5px;
max-width: 290px;
}
Simply remove the background declaration. If you only want to remove this instance of a white border, add the following rule:
#text-23 .textwidget img {
background: none;
}
This seems to be the conflicting CSS class.
.textwidget img {
background: white;
padding: 5px;
max-width: 290px;
}
If you want to debug css you should really look into Firebug(a plugin for Firefox) or Opera and use builtin dragonfly
These allow you to rightclick on your HTML page and inspect it.
Go to your style.css file and search for .textwidget img and change the background-color property to none. It is currently set to #FFFFFF which is the hex color code for white and is resulting in the white border or background (precisely).
.textwidget img {
background-color: none;
}
I'm using Disqus external comment system with Wordpress (as a WP plugin) and I'm trying to customize it with my custom CSS.
Everything works great, but I have problems with replacing the default text color in the form textarea.
I tried it with:
#dsq-content .dsq-textarea .dsq-textarea-wrapper, #dsq-content .dsq-input-wrapper { color: red !important }
but I was not successful, even when I targetet just "textarea" it not worked.
It seems that javascript is playing together because there are 2 events: when the textarea is focused and blurred. When there is a "blur" then .placeholder-grey CSS class is added to the textarea, but targeting that with CSS not worked as well.
Disqus has very poor documentation, so I figured out all this with code inspection.
Any ideas would be really appreciated.
P.S. I don't have a working example online, you can see it on any blog/website where Disqus is used, for example on their own blog at: http://blog.disqus.com/post/974280725/achievement-unlocked-merging-profiles#disqus_thread
Depending on how the theme is laid out, Disqus may inherit a different text color which may be the same as the background. You can change it using the following override:
#dsq-content { color: #ffffff !important; }
If the text color still does not change, you will need to target comments more directly. This can be done with the following CSS:
.dsq-full-comment { color: #ffffff !important; } /*for Narcissus theme users*/
.dsq-comment-body { color: #ffffff !important; } /*for Houdini theme users*/
If you didn't solve it yet I found a solution that worked for me. Just a bit after the body{} tag in the style sheet of wordpress, you will find the ul{} in there change the color:#FFFFFF to color:#000000 (or what ever color you like). It worked for me and I hope it will work for you to.
body{
text-decoration: none;
background-color: #000000;
}
a:hover{
color: #FFFFFF;
}
a {
color: #CCCCCC;
text-decoration: none;
font-size: 14px;
}
li {
padding: 10px 10px 0px 10px;
}
ul {
list-style:none;
>>> color: #000000;
margin-left: 25px;
}
The site you link to has a css style block just before the textarea, if you edit this to add color: #f90; it'll change the color from the usual black to orange (in this example). Presumably you could also add this in the head of the document instead.
If you use something like Chrome's developer tools or, I imagine, Firebug for Firefox you can edit the html/css in place to see the effect live (although it won't persist) to see what changes you can, or need to, make.
The website you weblink to has a css design prevent just before the textarea, if you modify this to add color: #f90; it'll modify along with from the regular dark to lemon (in this example). Presumably you could also add this in the go of the papers instead.
Spybubble Free
I've a blog hosted on WordPress.com, and i purchased the "Custom CSS" update to modify CSS. Now I want to change some CSS options of Syntax Highlighting provided by Wordpress.com. For example, i want that
[code lang="C"] int main() { } [/code]
will be displayed with a black background instead of standard white one. I've added in Wordpress.com Appareance > Modify CSS the following code:
.syntaxhighlighter
{
background-color: black !important;
}
As explained here, but it doesn't works.
Any idea?
The solution is to not only change the background of the whole syntaxhighlighter, but also of each line, similar to this:
.syntaxhighlighter
{
background-color: black !important;
}
.syntaxhighlighter .line .number
{
color: white !important;
background-color: black !important;
}
/* First line */
.syntaxhighlighter .line.alt1
{
background-color: black !important;
}
/* Second line */
.syntaxhighlighter .line.alt2
{
background-color: black !important;
}
As you're using black as a background-color, i advise you to ensure that color has enough contrast compared to it.
Also, using the firebug plugin for firefox you can see exactly which CSS rule gets applied where, and which classes are availble for styling. (a must when working on hosted systems.)
BTW: I found the soluion at the second link you gave