Changes made in the css editor do not hold

magdanicola · Member · Aug 2, 2015 at 8:52 am
Copy link

Add topic to favorites
Hi, even though I make changes in the css editor to which my site responds while in the editor mode (like changing the font-weight), when I save and exit they don’t show anymore (only for a split second when the page is being loaded). I’d appreciate your help with it. Thanks!

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Aug 5, 2015 at 7:15 pm
Copy link
Hi there, can you let me know which CSS rules you are having issues with? It may be that we need to get a bit more specific with the CSS selectors.
magdanicola · Member · Aug 6, 2015 at 6:11 am
Copy link
Hi! I tried for instance to change the css for the links on the “Contact” page only and I’m putting this into the editor:

.page-id-334 .entry-content a {
color: #870052;
font-weight: bold;
}

.page-id-334 .entry-content a:hover {
color: #870052;
font-weight: normal;
}

When I paste it in the editor I immediately see these changes on the Contact page but when I save and exit it disappears.

The same goes for the site title:
.site-title a, .site-title a:focus, .site-description {
color: #000;
font-weight: 400;
}

When I change the font-weight I see the changes appearing but then the disappear.

Apart from that I have this problem that whenever I specify a font-family, all the other parameters stop working. For instance, in the HTML window I specify this for one paragraph:



Am I specifying it incorrectly?

Thank you!
thesacredpath · Member · Aug 6, 2015 at 7:07 am
Copy link
The links in the Contact page in the first paragraph I see you have set with style attributes within the HTML in the content of that page. Since that is an HTML level color setting, it cannot be overridden with CSS. Did you do that after you tried the CSS to get the colors you wanted?

If you wish to set the colors for the links for the contact page with CSS instead of using the HTML level style attributes, you will need to remove the style attributes you inserted into the editor on that page.

Since you are using custom fonts, we have to make the CSS for some font changes a little more specific. In the case of the site title and description, change your CSS selector to the following.
.wf-active .site-title a, .wf-active .site-title a:focus, .wf-active .site-description

If you wish to change the hover styling on the site title also, you will need to create a rule with this selector.
.wf-active .site-title a:hover

The only thing I see on this paragraph style attribute is the missing semicolon at the end of the font-family declaration.

Do you have a place I can look at where you have used the above and I can see if I can figure out why it isn’t working for you.
magdanicola · Member · Aug 7, 2015 at 7:32 am
Copy link
Hi, many thanks for your help.
I actually had already this description for the site title and again, even though I can see the changes while in the editor more, when I save and exit they disappear (I can only see them for a split second when the page is loading). Can it be that the styling for the title is specified in html and always overrides the css I’m putting?

I followed your advice for the Contact page and that works well, thanks for that!

Regarding the font-family, even when I have the semicolon, whenever I specify the font, all the styling stops working.

Here is the website I’m working on:

http://bienkocrosettolabs.org/

Thanks!
thesacredpath · Member · Aug 7, 2015 at 6:41 pm
Copy link
Unless you have added styling in the HTML of posts, pages or widget content, it wouldn’t be in the HTML generally. I’ve looked through the HTML on your site and don’t see any text/font stuff in the theme itself that is set in HTML.

Font weight, when using custom fonts, can be a bit limiting since not all fonts are capable of having different weights. You can generally always apply “bold” font weight, but numeric font weights will not always work.
thesacredpath · Member · Aug 7, 2015 at 6:44 pm
Copy link
I’ve looked in Safari and Firefox and I’m finding that your pages look the same in both.

Let’s start with a few locations that you are not seeing correctly and I’ll see what I can do to get those working for you. I do notice that you have some duplication on some declarations, and the one further down in the custom CSS will always take precedence over the ones that come before, so it could be we have some conflicts happening. If we can start with a few and get those corrected and then take a few more, it will make it easier.
magdanicola · Member · Aug 8, 2015 at 7:36 am
Copy link
Hi, many thanks for helping me!

Well, to begin with I just wanted the site title to be bold, and since there is no HTML editor for it (I think), the only place I’m specifying its font-weight is in the css editor, in a way you suggested. And when I do it I do see immediately that the font becomes bold when I insert your suggestions, but the moment I save and exit it just does not hold (independently of the browser). Though it is not a big deal so I guess I will just let it go.

Apart from that I tried to specify a font-family for my paragraphs, for instance here:

Bienko Lab

The html starts like this:

Our research interest lies in …

The moment I put font-family in
Our research interest lies in …

not only the font type does not change but everything else stops working, so it goes into a default paragraph, with no justification for example.

And this is the same for all my paragraphs, irrespectively of the page.

Thanks!
Magda
thesacredpath · Member · Aug 8, 2015 at 8:53 pm
Copy link
To make all headings bold, you can go to Appearance > Customize > Fonts and select “Bold from the left pulldown below the headings font setting.

To make the site title only bold, change the font-weight in your existing CSS rule to bold so it looks like this.
```
.wf-active .site-title a, .wf-active .site-title a:focus {
    color: #000;
    font-weight: bold;
}
```
thesacredpath · Member · Aug 8, 2015 at 8:57 pm
Copy link
On the HTML for the paragraph, you don’t need quote marks around the name of a fonts unless the name is two words separated by a space. I just tried this on your site and it changed the font to Helvetica.


Give the above a try and see if that doesn’t work for you.
thesacredpath · Member · Aug 8, 2015 at 9:09 pm
Copy link
If you are going to be using the font styling above a lot, I would suggest that we add the following to your CSS
```
.my-right {
text-align: right;
font-size: 10px;
line-height: 20%;
font-family: Helvetica, Arial, sans-serif;
}
```
For right aligned text with the above settings, you would then do this in your HTML in posts and pages
Your text here

You can then create rules for center and justify and do similarly in your HTML using the other classes you create.
magdanicola · Member · Aug 10, 2015 at 10:45 am
Copy link
Yes, I tried exactly that many times already and it just doesn’t work. I think I might just forget about it. It’s not that important.
magdanicola · Member · Aug 10, 2015 at 10:48 am
Copy link
That works now! Thank you!
magdanicola · Member · Aug 10, 2015 at 10:51 am
Copy link
Oh, I see that both my replies end up here, so just to be clear what worked and what didn’t, making the site title didn’t, while changing the font family did. I’ll try the “.my-right ” suggestion and I’ll let you know how that goes.
thesacredpath · Member · Aug 11, 2015 at 2:47 am
Copy link
You have this rule in your CSS twice. Take one of them out.
.wf-active .site-title a, .wf-active .site-title a:focus

No items found.