CSS changes revert to default when dashboard change made WordPress
- SOLVED
Complete newbie to WordPress and WordPress Questions.
I am using a theme entitled Flexibility3 on WordPress. When I make changes to the CSS they render correctly on my site. If I subsequently make a change using the Flexibility3 dashboard it appears that the CSS reverts to the original default, all changes lost.
Is this normal? Is there something I am doing wrong? Do all WordPress themes do this?
thank you for any guidance,
zoe
Answers (4)
Ivaylo Draganov answers:
Hello,
when using complex themes (such as this one, which employs some dashboard of its own) it's better to set up a child theme off of the base theme. Then you could safely make changes to the CSS or templates without touching any of the base theme's files. That way you are preserving functionality and not breaking updates. For details on child themes, refer to the Codex:
[[LINK href="http://codex.wordpress.org/Child_Themes"]]http://codex.wordpress.org/Child_Themes[[/LINK]]
To set up a child theme you'd have to:
1) create a new folder inside <em>wp-content/themes</em>; the name is arbitrary - for example 'my-theme'
2) create a file named <em>style.css</em> in your new folder with these lines at the top:
/*
Theme Name: My first child theme
Template: flexibility
*/
<strong>* the template line is the most important - it has to match the name of the folder where the parent theme resides</strong>
3) You should import the styles from the parent theme into your new theme as they won't be inherited (unlike .php files). Put something like that in your new <em>style.css</em>:
@import url('../flexibility/style.css');
* this step may require some more thinkering as the parent theme might be loading its CSS not using the style.css file
Good luck with Wordperss and I hope that I've shed some light on WP themes :)
Christianto answers:
The css is overwrite by the theme once you edit the css on theme admin panel.
While most theme designer use to create custom.css, chlid theme, it is normal that theme designer directly edit style.css.
If you want to edit css without being afraid the css will be overwrite, the simple way is to create custom.css and place it on the same directory as style.css
Open header.php with texteditor like notepad++
find on line 9 (notepad++)
<link href="<?php bloginfo('template_directory'); ?>/style.css" rel="stylesheet" type="text/css" />
add below it this code
<link href="<?php bloginfo('template_directory'); ?>/custom.css" rel="stylesheet" type="text/css" />
then you can add/edit style by editing custom.css or go to editor below appearance menu and find custom.css
hope this help
zoe hawk comments:
If I use this solution, will the changes I make survive an update to the theme? Is it a more durable solution to make a child theme?
thank you for your advice!
Christianto comments:
<blockquote>If I use this solution, will the changes I make survive an update to the theme?</blockquote>
Yes, just re-editing header.php, if your update replace the header.php... and keep custom.css in case your theme developer decided to create similar files so it wont be overwrite.
iv.draganov explanation of creating child theme surely recommend if you want to create your site in different style, this only another quick solution if you don't want to create child theme...
Hope this help
Sébastien | French WordpressDesigner answers:
could you make a test ?
paste this code where you modify your css (style.css i suppose)
h1,h2,h3,h4,a,a:hover {color:red;background:red;border:2px solid red;}
when you have do this, tell me and i look at your site (i need the url of your site of course)
Denzel Chia answers:
Hi,
Open up header.php and find </head>
add your css in <style> tags above </head> but below <?php wp_head(); ?>
example
<style type='text/css'>
.your_class{
color:#000;
}
</style>
This way you can ensure that your style gets loaded after theme generated styles.
Make sure your style codes completely overwrites the element in style.css and theme generated style codes, where you want to see the changes.
Do not attempt to change anything in style.css or your function or php style file, unless you know what you are doing.
This will ensure that your style gets loaded permanently.
Thanks.
Denzel