Need help finding stylesheets for customization. WordPress
- SOLVED
Hello.
I am pretty new to WP and this sort of thing. I am finding that it is hard to customize the child theme I am using (Neutica+) because there are so many WP and Theme files. I recognize where the Style.css and color-settings.php are and that I can edit some things from those files, but not all. When I search things to edit in my browser's element inspector I can find what I need to fix, but I cannot find the actual files in wp-content. I need help being told where to find the main files I should be editing from, including: inline style sheet, where to edit plugin appearances, etc.
I think I would be ok once I knew where these locations were. I just can't find them.
[ An example would be me trying to fix the FOUT during loading. I need to place this code:
.wf-loading h1 {
font-family: 'Droid Sans';
visibility: hidden;
}
.wf-active h1 {
visibility: visible;
}
in my Style.css, but nothing in my Style.css looks like this, and it doesn't work when I attempt it. ]
Another thing is I have a plugin for Yahoo! Media Player, but in the #ymp-player table there is a border issue I need to fix and can't find "#ymp-player table" anywhere.
Can someone please help?
Thanks!
Rick
Answers (4)
derekshirk answers:
Hi Rick,
From what you are describing it sounds like some of the .css files could be inside the specific plugin folders they are associated with. For Example inside your wp-contents folder you have a plugins folder. Each plugin will have its own folder within this folder and should contain a stylesheet as well.
These files often get called in your header after your main style.css file so the css updates you want to make will need to be made in stylesheets for the specific plugin.
What is the URL of your site you are working on?
----
Note: Sometimes plugins do not include stylesheets and plugin developers actually use inline styles with the plugin.php files so you may have to search for the .class identifiers that you want to edit with those.
----
Also, check to make sure you do not have an assets folder or another sub directory inside your theme folder which contains additional stylesheets other than style.css
(I'm sure you've already checked this)
----
A quick and dirty way to test a style update (can't promise this will work) would be to place an inline style into your footer.php
for example:
A quick way to test
<style type="text/css">
<!--
.wf-loading h1 {
font-family: 'Droid Sans';
visibility: hidden !important;
}
.wf-active h1 {
visibility: visible !important;
}
//-->
</script>
Since the footer.php gets called after all of your stylesheets this might be override the plugin stylesheets (I think).
If that does work I do not recommend that as a permanent solution. As you should really locate the style sheets within the plugins folders themselves.
----
As, another member just mentioned, the !important; could help override the existing style settings as well.
Have you tried to place your updated style attribute at the very bottom of your style.css file?
----
Hey,
Sorry for the supper long response her, but I am re-reading over your question and I'm wondering if you are referring to your fonts flashing temporarily due the browser loading the default font first and then replacing it with your new font.
Maybe these two posts might help you out?
http://www.html5rocks.com/tutorials/webfonts/quick/#toc-fout
http://paulirish.com/2009/fighting-the-font-face-fout/
----
Rick Carruth comments:
Thanks. I found the plugins folder in the wp-content, but there are no styles in the php file. I think it may be something in my style.css that is carrying over into the table on the player...not sure why though, because the player isn't supposed to have the 2 1px lines in the meta part of the player.
Also, do you know where I would place the code to fix the FOUT I was asking about? Or where to possibly find my inline stylesheet? It isn't in my style.css.
The URL is www.thesenior.net it is a blog I am working on that is still being prepped and not yet "live"
Rick Carruth comments:
You are correct. That is exactly what I was talking about :)
I will check those out. Thanks.
The other suggests didn't quite help though. Thanks anyway!
Dan | gteh answers:
Hi,
You should try to avoid editing any of the css files that come with plugins because when the plugin has an update, your changes will get overwritten.
You should be able to add it to your theme's style.css, if the changes you are trying to make are not showing up, try adding the !important tag to the end of it.
ie.
#ymp-player-table {margin:25px !important;}
Rick Carruth comments:
Thanks for the suggestion. I tried, but no luck. I used:
#ymp-player table {border-collapse: separate; !important;}
but didn't work. I think it may be where I am placing it, but I am having no luck anywhere in the style.css...weird.
Dan | gteh comments:
The !important needs to go before the ;
so
#ymp-player table {border-collapse: separate !important;}
remove the semi-colon after "separate" and only have one after !important
Duncan O'Neill answers:
Hi Rick,
Below is a list of suggestions, which I hope you find useful;
1)
a) Switch to firefox if you're not already using it.
b) Get firebug. It lets you see all the applied styles on hover, and gives you links to the stylesheet, and where in the stylesheet the applied rule is;
http://getfirebug.com/
2) You'll find some info, and a demo, of Neutica here;
http://allancole.com/wordpress/themes/neutica/
3) Some of the colours, for example, are controlled from this file;
/wp-content/themes/neutica-110/colors.php
which I'm guessing come from the netica settings in the WP backend.
Others are coming from /wp-content/themes/netica/colors.css
4) There are a bunch of stylesheets in folder
/wp-content/themes/neutcia/css
But with firebug you can see which files, and css declarations, are being applied to which element.
Hope this helps. Please ask if you need further help.
best,
Duncan
Denzel Chia answers:
Hi,
The styles are generated by a php file, no point finding it if you do not know php.
Just add your styles in <style> tags right above your </head> tag to block those that you want to change. add !important rule to it.
Thanks.
Denzel
Rick Carruth comments:
That is what I am looking for, </head> tag. I can't find any of that in my style.css. It looks to be set-up differently. It is just a long list of things separated by organizational comments that group together like:
/* =Global Elements
-------------------------------------------------------------- */
/* =Header
-------------------------------------------------------------- */
/* =Content
-------------------------------------------------------------- */
/* Single posts */
/* Full posts */
/* Extras */
etc....
Denzel Chia comments:
Never mind,
Just put the below function into your functions.php file.
And change the css that you want. This function will automatically add your css styles as the last element before </head> in header.php
Add the below function on the top of functions.php, do not leave any blank space above the <?php and below the ?>
<?php
function nt_add_styles(){
?>
<style type='text/css'>
.wf-loading h1 {
font-family: 'Droid Sans';
visibility: hidden;
}
.wf-active h1 {
visibility: visible;
}
</style>
<?php
}
add_action('wp_head','nt_add_styles');
?>
You can add or change any styles with the <style></style> tags, but do not touch anything else.
Thanks.
Denzel
Denzel Chia comments:
Sorry, use this instead, I forgotten to add the priority to action.
<?php
function nt_add_styles(){
?>
<style type='text/css'>
.wf-loading h1 {
font-family: 'Droid Sans';
visibility: hidden;
}
.wf-active h1 {
visibility: visible;
}
</style>
<?php
}
add_action('wp_head','nt_add_styles',90);
?>
Thanks.
Denzel
Rick Carruth comments:
I think this helped! Thanks!