I am having issues with creating a child theme for my

I am having issues with creating a child theme for my Salient theme. I have followed the designer's instructions and the page just became a big mess. I wonder what can cause it so I can fix it. I am aware that this is not your theme so before you just send me off, please note that this is a general question about WP and is directly affected by some of your plugins.

What I did is create a folder in the Themes folder, create CSS file with this code
/*
Theme Name: Salient child theme
Template: Salient
*/
@import url(“../Salient/style.css“);

I had to change the name of the template to lower case, before that the theme showed as broken on wp-admin.
I then activated the child theme.
The result is attached.

https://www.dropbox.com/s/5k0odwmnujfjbkv/Child%20Theme%20-%20style%20css%20MESS.pdf?dl=0

Luckily for me I was able to re-activate the main theme and hopefully all my pages are working now.
I am suspecting the original css code was not imported properly due to permissions or something like that. Did I do anything wrong? What could be the problem?

Thank you.

  • Predrag Dubajic

    Hey @more,

    Hope you're doing well today :slight_smile:

    We would never send off our users if the product is not developed by us, we always try to do as much as we can :slight_smile:

    Looking at the code you provided it looks like this is simply issue with wrong quotation marks used, this can happen when copy/pasting code from sites.

    Could you try replacing it with this code:

    /*
    Theme Name: Salient child theme
    Template: Salient
    */
    @import url("../Salient/style.css");

    See screenshot below to see the difference in formatting in text editor when using wrong quotation marks.

    Let us know if it's working after this change.

    Best regards,
    Predrag

  • more

    I copied the original text from their support but that was wrong, I dug deeper into the files that came with the theme and found this code

    /*
    Theme Name: Salient Child Theme
    Theme URI: http: //MySite
    Description: This is a custom child theme for Salient
    Author: Name
    Author URI: http: //MySite
    Template: salient
    Version: 0.1
    */

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

    I pasted it into my css file and it worked but an error showed up that said "no menu assigned". Is thIs that normal when activating a child theme? I have reverted back to the original theme in the meanwhile.

    Their child theme folder also contained an additional css folder (with dynamics-combined. css file) and a functions.php file (in the main folder, next to style.css).

    While you are looking into this, I really need to find a way to change the text and hover of the main menu line in the header, haven't been able to locate the files. The way the theme should work is you set light or dark text for each header so your menu will be visible on the bg you assign but something is overriding this in my website.

    Thank you

  • Predrag Dubajic

    Hey @more,

    Glad to hear you managed to find a solution, it looks like the capital S was the issue after all.

    No Menu Assigned could be because you don't have menu selected under Appearance > Menus panel, did you check that?

    I'm not familiar with Salient menu options or what is causing this but you can try adjusting the color by using this custom CSS code:

    body #header-outer.transparent header#top nav > ul > li > a {
        color: #efefef; /*Menu color*/
    }
    
    body #header-outer.transparent header#top nav .sf-menu > li.current_page_item > a,
    body #header-outer.transparent header#top nav > ul > li > a:hover {
        color: #efefef; /*Menu hover color*/
    }

    Let me know if that worked for you.

    Best regards,
    Predrag

  • more

    About the Menu. I did have a menu set up before, after I switched to the child theme, it said menu not assigned. I know how to assign a menu. I asked if it was normal because I was afraid the asign the menu and eliminate the option of going back to the main theme and have Navigation in case something goes wrong. you see, the website needs to be functional through all this. Please tell me if you recommend assigning the menu on the child theme or if you think it is a sign of trouble.

    In regards to to the css, I found this: https://themenectar.ticksy.com/article/2037/
    I think that the 2nd part goes into the child theme style.css or the custom css window in the admin panel. Where does the first part (at the top) go? What should I change? maybe the name of the slide? Anything you can make of this will be greatly appreciated.
    Thank you.

  • Adam Czajczyk

    Hey @more,

    I hope you're well today!

    Please tell me if you recommend assigning the menu on the child theme or if you think it is a sign of trouble.

    Menu's configuration in WordPress is saved on "per-theme" basis. Although based on an existing theme, the child theme is technically a "new theme" from WordPress point of view. That said, this isn't a sign of any trouble but a normal behavior.

    I think that the 2nd part goes into the child theme style.css or the custom css window in the admin panel. Where does the first part (at the top) go? What should I change? maybe the name of the slide? Anything you can make of this will be greatly appreciated.

    You're absolutely right about the 2nd part. The 1st part is an example of how to target particular slides so you need to apply this to a second part. Let me show you this.

    Below is a part of "2nd" CSS code:

    body #ajax-content-wrap .nectar-slider-wrap div.swiper-slide .content h2 {
            font-size: 24px!important;
            line-height: 51px!important;
            margin-bottom: 6px;
            letter-spacing: -0.5px;
        }

    This code changes the look of H2 header (I assume this is a slide's title) text. This particular code targets all slides at once. In case you'd like to change this for only the first slide, you'd want to modify the code (using an example - "1st" part). Furthermore, there's a serious bug in the "1st" code, it should look like this:

    body #ajax-content-wrap .nectar-slider-wrap .swiper-slide:nth-child(1) .content h2 { }

    That being said, below is an example of the same part of the "2nd" code modified to target only the 1st slide:

    body #ajax-content-wrap .nectar-slider-wrap div.swiper-slide:nth-child(1) .content h2 {
            font-size: 24px!important;
            line-height: 51px!important;
            margin-bottom: 6px;
            letter-spacing: -0.5px;
        }

    If you'd like to target only the 2nd slide, change the "nth-child(1)" part to "nth-child(2)" and so on.

    I hope that helps!

    Cheers,
    Adam

  • more

    Thank you for looking into this with me. To clarify, I am looking to change the navigation line in the header, it is a part of a slide, as the slide image becomes the background for the transparent image. There is however, a slide title and sub-header which I have not gotten to customizing yet at this point.
    1) Do I put the 1st part in the same style.css file in the child theme?
    2) will this code actually change the menu or the slide's title?
    3) Let us assume that would like to have the same menu style on all slides across the website (same text color, same hover color), can you please put the code into the style.css for me so I can see how to apply it properly in the right place. you can place the code here and I will copy and paste.

    The 2 pieces of code in the link I sent you actually came with this video, in case this may help in any way https://support.woothemes.com/hc/en-us/articles/203105957-Customizing-your-theme-with-Firebug
    Thank you.

  • Adam Czajczyk

    Hey @more!

    To clarify, I am looking to change the navigation line in the header, it is a part of a slide, as the slide image becomes the background for the transparent image. There is however, a slide title and sub-header which I have not gotten to customizing yet at this point.

    Actually, the fact that the navigation menu background is in form of a slider doesn't necessarily mean that the navigation itself is a part of a slider. I took a look at your page and the code we're talking about here doesn't apply to navigation.

    1) Do I put the 1st part in the same style.css file in the child theme?

    I assume you're still referring to this post of yours: https://premium.wpmudev.org/forums/topic/i-am-having-issues-with-creating-a-child-theme-for-my#post-923480

    The 1st part (at the top of the article) is a CSS rule and is an example of how to target the single, particular slide. In my recent post I gave you an example on how to use it:

    body #ajax-content-wrap .nectar-slider-wrap div.swiper-slide:nth-child(1) .content h2 {
            font-size: 24px!important;
            line-height: 51px!important;
            margin-bottom: 6px;
            letter-spacing: -0.5px;
        }

    You may put this in your child theme's style.css file.

    2) will this code actually change the menu or the slide's title?

    This code will affect the title of the slide. In this case this would be the "PROFESSIONAL NAIL CARE" text.

    3) Let us assume that would like to have the same menu style on all slides across the website (same text color, same hover color), can you please put the code into the style.css for me so I can see how to apply it properly in the right place. you can place the code here and I will copy and paste.

    To change the look of your navigation use CSS like this:

    .sf-menu li a {
    font-family:Arial;
    font-size:25px;
    font-weight:normal;
    color:#FFFFFF;}
    
    .sf-menu li a:hover {
    font-family:Arial;
    font-size:25px;
    font-weight:bold;
    color:#000000;}

    The first part of this code covers menu in "normal" state, the second (one including "a:hover") covers menu in "on hover"/"on mouse over" state. Of course you will want to adjust the rulse, e.g. color or font-size.

    This code should be added to your child theme's styles.css file.

    I hope that helps!

    Cheers,
    Adam

  • more

    Here is a good example of how the first line changes from light to dark based on the slide in the background
    http://themenectar.com/demo/salient-blog/

    The admin panel does have a place for selecting the text (light/dark) when you add a new slide
    (screenshot https://www.dropbox.com/s/ed3kjo2p5peg2xv/Slide%20font%20color.png?dl=0)
    Mine is set to dark but somehow the slide title and sub-header are dark (as I wanted) but the menu line is light. I am assuming that something is overriding this causing this behavior.

    So I had to change the start text color (screenshot https://www.dropbox.com/s/vtyw53qqd456xxz/Header%20starting%20color.png?dl=0)

    I thought the header settings page would be the best place to change the menu line but I could not get it to change, there is light, dark and custom, as you can see (screenshot https://www.dropbox.com/s/zw6phxc0begzr6l/header%20color%20scheme.png?dl=0)

    If I can't get the hover to work I would at least like the menu line to use the block letters as you can see in the example at the top of this message.

    Thank you

  • Adam Czajczyk

    Hey @more,

    Thanks for switching the theme. I can see that the drop-down menu (the one that's expanding once you hover over main menu item) keeps the colors settings as shown on the second screenshot of yours.This is good :slight_smile:

    As for navigation main menu. I'm not familiar with Salient theme and its code/config options but I'm pretty sure that this is defined with CSS. Let's then break this into smaller steps.

    1. Navigation menu - normal state

    I've slightly changed my previous CSS code:

    .sf-menu li a {
    font-family:Arial;
    font-size:25px!important;
    font-weight:normal;
    color:#FFFFFF;
    }

    I tested this and it does allow you to change:
    - font
    - font-size
    - font-weight

    It doesn't affect font color although it should. It turned out that there's an inline CSS style loaded by parent theme. "Inline" means that it's not a file included from a server but some rules printed directly to a site's source code. This stylesheet sets color using "!important" flag which prevents overriding it by both your child themes style.css and theme's settings.

    Have you added any CSS styles to your parent or child theme header.php directly? Please advise!

    2. Navigation menu - on hover state

    .sf-menu li a:hover {
    font-family:Arial;
    font-size:25px!important;
    font-weight:normal;
    color:#FFFFFF;
    }

    I have tested it and the same notes and issues applie here as in point 1.

    3. Slider's title ("PROFESSIONAL NAIL CARE")

    body #ajax-content-wrap .nectar-slider-wrap div.swiper-slide .content h2 {
            font-size: 24px!important;
            line-height: 51px!important;
            margin-bottom: 6px;
            letter-spacing: -0.5px;
            color:#FFF;
        }

    I have tested it again and it works. Hence it does not affect navigation, it's just for slide's title.

    As for the "changing navigation color" effect. I'm not sure if this is made with CSS or with JavaScript in case of your parent theme. I may say that after I've examined site's source code again I can confirm that the main menu is not inside the slider so changing slider's CSS will not affect it. These are two separate elements and to apply the "menu color change on slide change" you'll most likely need some JavaScript (jQuery) code to be added to your child theme.

    Cheers,
    Adam

  • more

    I have not made any changes to style.css or anywhere else, only via the admin panel as I showed you in the screenshots. Are you saying that adding a hover effect to the navigation line of the menu in the header will be too complicated? Can we at least get the bold capital letters font like in their demo? Do we have to locate the line in the original style.css that came with the theme (how?), or do we add some code to the child theme style.css?
    Thank you

  • Predrag Dubajic

    Hi @more,

    I think we should be able to cook up some CSS code for you to make different hover effect, however I would first like to have a look at your theme settings and see if there is something that can be done from there to make the change if you could grant us support access.

    To enable support access you can follow this guide here:
    https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/
    Please reply here after you grant access.

    Best regards,
    Predrag

  • Adam Czajczyk

    Hey @more!

    Let's then get through this step-by-step then, shall we?

    Can we at least get the bold capital letters font like in their demo?

    .sf-menu li a {
    font-weight:bold;
    text-transform:uppercase;
    }

    Please add this code to your child theme's style.css file. This will make your navigation menu all in capital and bold letters. Once this is working I'll happily assist you with all the further steps.

    Cheers,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.