Customizer CSS changes not working

  • I am new to WordPress. I come from a hand-coded background, building sites from scratch using HTML, CSS, JS (no PHP). Right now, I am trying to apply a linear gradient to the body on my site’s About page. I have tried to add the custom css below in my theme customizer, but the change hasn’t taken effect. Can I (and should I) edit the appropriate css file in my wordpress folder? Is there a global “styles.css” file or how would I know which css file to add the code to?

    In other words, how do I accomplish the below in WordPress?

    //index.html
<head>
  <link rel="stylesheet" href="./styles.css">
</head>
<body>
<nav>
      <ul class="main-nav">
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
      </ul>
</nav>
</body>

/*styles.css*/
 body{
background: linear-gradient(rgb(0, 0, 0), rgb(109, 2, 82));
}
    • This topic was modified 5 years, 2 months ago by Steven Stern (sterndata).
    • This topic was modified 5 years, 2 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Developing with WordPress topic

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

  • In WordPress, the theme controls the HTML, CSS, and JS of the front end. Plugins can also load CSS and JS, and influence the HTML.
    WordPress has a function body_class() which themes call for the <body> tag. WordPress adds classes by default, the theme usually adds some more classes, and plugins can also. There will be a class with a post ID at the very least, that is specific to each page. The theme may put other unique classes per page.
    You can use your browser Developer Tools to examine the classes that are on the body tag, so you can target your CSS to affect that one page. Your CSS would be put into the Customizer > Additional CSS, which is output last of all the CSS.

    Or, you can enter a <style> tag in the content of your page (in the editor, in code mode), so it will work regardless of theme. This works, but is “against the grain” of having all the styles in the <head> section.

    Or, you can make a child theme, and put the CSS into its style.css file. With a child theme, you can make template files named to match your pages, if you want to do something different. (page-about.php would be loaded for a Page with a slug of about)

    Hi Roy
    If you plan on making lots of CSS customizations, I do recommend implementing a child theme. If you want to make any PHP changes, you’ll need it as well. This would become the active theme on your site, and would reference the parent theme (or the original theme you were working with), which also needs to be installed on your site.

    If you haven’t created a child theme before, you can try something like https://childtheme-generator.com/ to help you out. It will give you the bare bones you need to get started: style.css and functions.php. You can add any other files you may need down the road.

    Once you have that child theme installed and activated, you can add any customizations you want to the style.css file and they will override those in the parent theme.

    You can access this file in a couple of ways:

    1. from the wp-admin dashboard: Appearance > Theme Editor, then choose the file you want to edit
    2. via ftp or cpanel (file manager): from whereever your WordPress installation is, wp-content > themes > your-child-theme-slug

    Hope that helps!

    Sidenote: the link you provided is local to your computer, so we aren’t able to reference it.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Customizer CSS changes not working’ is closed to new replies.