Need a lttle clarification on custom css in Wordpress theme

markh · 2016-10-19 21:06:35

What is the sequence of events I should follow after editing my custom css file. File resides in /backlight/custom/css/myfile.css. I edit it locally then ftp it to my site server. Do I then need to re-edit the BL page template that uses it? and then re-export the WP theme? Or is there some other step I'm missing. Reason I'm asking is because my custom css additions/changes are not showing up on the page in question.
Mark

rod barbee · 2016-10-19 21:17:19

If the page template being used for the theme is using custom CSS, then simply updating the CSS file should produce results.
Have you tried clearing browser cache?
Have you checked the inspector to see if the CSS is trying to be applied?
Can you post a link to your blog along with the CSS code you expect should be applied?

markh · 2016-10-19 21:38:24

Hi Rod,
Whoops. Forgot the link. Blog is at http://blog.photophart.com
Have been trying to add a single pixel border to the top and bottom of the nav with variations on this:
.page__body > nav {
border-bottom:1px solid black;
border-top:1px solid black;
}
OR this:
ul#primary-menu {
border-top: 1px solid black;
border-bottom: 1px solid black;
}
Or this:
nav ul {
border-top: 1px solid black;
border-bottom: 1px solid black;
}
Or this:
nav.spinal__column {
border-bottom:1px solid black;
border-top:1px solid black;
}
nav {
border-top: 1px solid black;
border-bottom: 1px solid black;
}

Now that I look at this a little more closely it seems the custom css is actually getting seen because my page color gradient is there. Soooooo...I apparently don't have the correct selector in any of the above code. Maybe there isn't a selector for what I'm trying to do, yes/no?
Thanks Mark
Hold the phone...just switched browsers. Now I've got borders all over the place. So, yes Rod, seems to be a browser cache clearing thing. Or, in other words, OPERATOR ERROR!
Duh...

markh · 2016-10-19 22:13:30

Well, doggonnit, Got my nav borders top and bottom but now my column color gradient is gone.

rod barbee · 2016-10-19 22:35:54

you've got some broken css. You're missing the closing curly brace after this bit:

/*To place a border above and below navigation, try adding this to your custom css file:*/
nav.spinal__column {
	border-bottom:1px solid black;
	border-top:1px solid black;

this makes any css after that inoperative.

markh · 2016-10-19 22:39:05

Criminy, my synapses ain't synapsing this morning.

rod barbee · 2016-10-19 22:47:03

If you look at your custom css in a browser's inspector (I'm using the one in Firefox), you'll see selectors in blue and the properties in red. If you see any selectors in red, somethings wrong. Look at the rule with the last blue selector, that's usually where the problem will be.

markh · 2016-10-19 22:55:36

Thanks a million Rod. Always nice to start the day learning something new. Didn't know about the colors in inspector. Now all I need is a desktop code editor that will check my code for the troublesome typos as I go along. Something like a spell-checker only a code-checker.
In your debt, Mark

Daniel Leu · 2016-10-19 23:28:29

markh wrote:

Now all I need is a desktop code editor that will check my code for the troublesome typos as I go along. Something like a spell-checker only a code-checker.
In your debt, Mark

Look for editors that are done for programmers. They should provide syntax highlighting for CSS. Then there are language sensitive editors that understand the syntax and help you write your code.

I am working on a Mac. For text editing I used TextMate. But I have CSSedit as well that provides many features to help me write proper CSS.

Matthew · 2016-10-20 01:06:34

I work almost entirely in Panic's Coda, but it's somewhat costly. Sublime Text is also pretty great, and can be used for free. I think there are versions available for both Mac and Windows.

rod barbee · 2016-10-20 01:09:01

Notepad++ is also good. It's Windows and free.

markh · 2016-10-20 01:19:03

Thanks guys. Checking out your suggestions since I'm sure you've got better things to do than check my code for typos.
Mark

gwlco · 2016-10-20 02:34:56

UltraEdit is a good one also. http://www.ultraedit.com/

Community @ The Turning Gate

#1 2016-10-19 21:06:35

Need a lttle clarification on custom css in Wordpress theme

#2 2016-10-19 21:17:19

Re: Need a lttle clarification on custom css in Wordpress theme

#3 2016-10-19 21:38:24

Re: Need a lttle clarification on custom css in Wordpress theme

#4 2016-10-19 22:13:30

Re: Need a lttle clarification on custom css in Wordpress theme

#5 2016-10-19 22:35:54

Re: Need a lttle clarification on custom css in Wordpress theme

#6 2016-10-19 22:39:05

Re: Need a lttle clarification on custom css in Wordpress theme

#7 2016-10-19 22:47:03

Re: Need a lttle clarification on custom css in Wordpress theme

#8 2016-10-19 22:55:36

Re: Need a lttle clarification on custom css in Wordpress theme

#9 2016-10-19 23:28:29

Re: Need a lttle clarification on custom css in Wordpress theme

#10 2016-10-20 01:06:34

Re: Need a lttle clarification on custom css in Wordpress theme

#11 2016-10-20 01:09:01

Re: Need a lttle clarification on custom css in Wordpress theme

#12 2016-10-20 01:19:03

Re: Need a lttle clarification on custom css in Wordpress theme

#13 2016-10-20 02:34:56

Re: Need a lttle clarification on custom css in Wordpress theme

Board footer