Problem with child theme css

  • Resolved jksastrology

    (@jksastrology)


    10 years, 2 months ago

    Hello,

    For some reason my child theme style.css file does not seem to work as it should. Any changes I make to the child css does not affect my website. The theme I am using is a purchased theme called Maya Shop. This theme already had a child theme set-up. I also checked on how child themes are made to ensure I had the correct file types.

    This is what my current styles.css file looks like in my maya-child folder.

    [ Moderator note: code fixed. Please wrap code in the backtick character or use the code button. ]

    /*
Theme name: Maya Shop Child
Description: The start base for easy theme wordpress development.
Version: 2.6.0
Author: Your Inspiration Themes
Author URI: https://yithemes.com/
License: GNU General Public License version 3.0
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: black, red, white, light, one-column, two-columns, left-sidebar, right-sidebar, fixed-width, custom-colors, custom-header, custom-background, custom-menu, editor-style, theme-options, threaded-comments, sticky-post, translation-ready
template: maya
*/

@import url("../maya/style.css");

/* Below you can write your style */

#header {
background: url('https://jksastrology.com/wp-content/uploads/2014/08/Astrology-element-header4.jpg') no-repeat center;
background-size: 100%;
padding-bottom: 190px;
}
#nav {
position: absolute;
margin-top: 160px;
width: 100%;
}
#content {
margin-top: 30px;
}

    I have been trying to troubleshoot this myself for a few days now, even looking on many forums, but with no luck. My main theme is located in the folder maya. My child theme is in the folder maya-child.

    Here are things I have tried so far:
    – Cleared browser cache.
    – Made sure there are no cache related plugins.
    – Tried the full import url address.
    – Checked to see if the parent css file was changed due to changes on the child css. Nothing happened.

    I really would appropriate any help.

    Kind regards,

    Jamie

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

  • Unfortunately there are only themes and child-themes, there are no “grand-child themes”.
    Your only effective option is to put your customisations into their child theme, not ideal. But if you keep a copy of the original child theme, and keep copies of your customised theme, then if and when the theme gets updated, you will be in a very good position to publish your updates again.

    Thread Starter jksastrology

    (@jksastrology)

    Hello rossmitchell,

    Thanks for your response. Sorry but I am not quite understanding what you mean.

    Where do you think my styles.css file should go? are you saying I should not have this in my child theme?

    regards,

    Jamie

    You have purchased maya theme, it is itself a child theme (whatever the parent is is not important). You cannot yourself make a child of maya, this would make it a grandchild which is not supported. Instead you have to make your changes in the maya theme, add your css customisations onto the END of the style.css in the maya folder.

    Be sure to keep a copy of the original maya theme directory, also keep a copy of your style.css and other files you change, you will need to use these backups when the maya theme is updated and you need to customise it again.

    Thread Starter jksastrology

    (@jksastrology)

    Oh, I did not realize that the maya theme itself is classed as a child theme. What is confusing, is that the maya theme itself already comes with a maya child folder. That is why I thought I could use this folder as the child version (which you call the grand-child).

    I do now understand that I can use the stlyes.css within the main maya theme to make changes. And that it will have to be added at the end, so I know what new code I have put it.

    Thank you, I will try what you said.

    Jamie

    Sorry, I misunderstood you.
    You should be customising “maya child folder”

    Thread Starter jksastrology

    (@jksastrology)

    ok, I tried what you said, but I am still having issues.

    I removed the child folder.

    I went back to the original maya theme, and activated it.

    I then decided to put my code at the bottom of the style.css file. I would have assumed any css changes could go here, and my website would reflect those changes. However, I see no change.

    I know I could use a custom CSS plugin. However, what I want to achieve is a way of modifying my websites header.php and style.css file, whilst being able to update easily. I do not mind putting my changes at the end of these files, but it does not seem to work. Any ideas?

    I appreciate your time.

    Jamie

    Thread Starter jksastrology

    (@jksastrology)

    oh, just read your latest post. Yeh I did try customizing the ‘maya child’ folder. It seems like the correct method is to edit the style.css file within the child folder. That file would have an import command linked to the original style.css. However, I did not have much luck doing this. I see no change in my website.

    I went back to the original maya theme, and activated it.

    You need to activate: “maya child theme”

    The idea of using a customising CSS plugin is also good.

    Thread Starter jksastrology

    (@jksastrology)

    I have activated the ‘maya child theme’, within my WordPress. It even says it is activated.

    The correct way to customize a child theme is to do it via the child themes css (style.css file within the child theme FTP directory). The link below explains this:

    https://code.tutsplus.com/articles/how-to-customize-your-wordpress-theme-with-a-child-theme–wp-32354

    This is what I have done, but it does not work, I need to know why. My first post shows the coding I have used. Any changes within the child theme CSS is meant to override the original CSS coding (parents coding). In my case, this does not happen.

    The reason I want to do it this way instead of a css plugin, is because I would also like to modify other files such as header.php. A custom CSS plugin can not modify php code

    Have you tried viewing your website from a different computer ? Different browser ? Or CTRL + refresh ?

    Thread Starter jksastrology

    (@jksastrology)

    No I have not tried from different computer. But I have tried clearing browser cache, And refreshed page.

    I will try different computer and get back to you

    Thread Starter jksastrology

    (@jksastrology)

    Thank you CTRL + refresh (CTRL + F5) seems to solve my problem. Before I was refreshing the page by clicking on the address bar and pressing enter. To my surprise there is a difference. It now seems to be acknowledging my changes. As I am new to this forum, how do I thank you? is there a like button?

    Thanks,

    Jamie

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    All you have to do is say Thanks and that keeps the helpers happy. Thank you RossMitchell ??

    You can also mark the thread as RESOLVED, that is helpful to everyone.

    Thread Starter jksastrology

    (@jksastrology)

    Thanks ??

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘Problem with child theme css’ is closed to new replies.