Home Forums Product Support Novella How to override style.php with a child theme

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #4728

    Hi, I need to override the style.php which is included in the functions.php. Can you tell how the functions.php in my child theme have to look like when I want to override the single_styles() function?

    Jenny @ Aesop

    Hi Navarra.

    You should always put custom CSS in an external plugin. When an Aesop theme is updated, any CSS you add/edit in the core files will be erased, and we certainly don’t want that! 😉 Please use a plugin such as Simple Custom CSS (https://wordpress.org/plugins/simple-custom-css/) and add your custom CSS there instead.


    Hi Jenny,

    thank you for your answer!

    I created a child-theme of novella because I didn’t want to override the parent-theme (core). It works fine to override different files like files from the “content” folder or the footer.php. But it doesn’t work to override the files from the “inc” folder, because these files are included in the functions.php.

    And Simple Custom CSS doesn’t solve my problem completely, because I have to change the dynamic css based on the story accent color, actually the “single_styles” functions from the style.php:

    function single_styles(){
    	$id = get_the_ID();
    	// individual story design
    	$story_accent = get_post_meta( $id, 'novella_story_accent_color', true );
    	$story_link	  = get_post_meta( $id, 'novella_story_link_color', true );
    	// bail if no color
    	if ( empty ( $story_accent ) && empty( $story_link ) )
    	$css = '';
    	$postid = sprintf('.postid-%s', $id);
    	if ( $story_accent ) {
    		// comments
    		$css .= $postid.' ol.commentlist li.comment-author-admin .comment-body {border-left:5px solid '.$story_accent.'} ';
    		$css .= ''.$postid.' .novella-entry .novella-entry-mast .novella-entry-mast-img:after{background:'.$story_accent.';}';
    		$css .= ''.$postid.' .novella-entry .novella-entry-mast .novella-entry-mast-inner-wrap .novella-entry-mast-inner {background:'.$story_accent.';}';
    		$css .= ''.$postid.' .novella-post-adjacent:after {background:'.$story_accent.';}';
    		// components
    		$css .= $postid.' .aesop-documument-component a span:before {color:'.$story_accent.'}';
    		$css .= $postid.' .lead.dropcap:first-letter {color:'.$story_accent.'}';
    		$css .= $postid.' .aesop-quote-component {background-color:'.$story_accent.'}';
    		$css .= $postid.' .novella-rcp-restricted .btn {background:'.$story_accent.'}';
    		$css .= $postid.' .aesop-content-component .aesop-content-img .aesop-content-comp-inner {background:'.$story_accent.'}';
    		$css .= $postid.' .aesop-sequence-img-wrap .aesop-sequence-caption:before {background:'.$story_accent.'}';
    		$css .= $postid.' .aesop-stacked-gallery-wrap .aesop-stacked-img .aesop-stacked-caption {background:'.$story_accent.'}';
    		$css .= $postid.' .aesop-grid-gallery .aesop-grid-gallery-caption {background:'.$story_accent.'}';
    		$css .= $postid.' .aesop-video-component .aesop-video-component-caption {border-top:5px solid '.$story_accent.'}';
    		$css .= $postid.' .aesop-image-component .aesop-image-component-caption {border-top:5px solid '.$story_accent.'}';
    		// progress bar
    		$css .= $postid.' progress::-webkit-progress-value {background-color:'.$story_accent.';}';
    		$css .= $postid.' progress::-moz-progress-bar {background-color:'.$story_accent.';}';
    	if ( $story_link ) {
    		$css .= $postid.' a {color:'.$story_link.'} ';
    	wp_add_inline_style('novella-style', $css);

    As an example:

    I want to change the following line from
    $css .= $postid.' .aesop-quote-component {background-color:'.$story_accent.';}';
    $css .= $postid.' .aesop-quote-component {background-color:transparent!important;}';
    (This works with Simple Custom CSS.)

    and e.g. I want to add this line
    $css .= $postid.' .aesop-quote-component.aesop-component-align-center blockquote {color:'.$story_accent.';}';
    (This doesn’t work with Simple Custom CSS!)

    So, do you have any idea to solve this problem?

    Thank you in advance!

    • This reply was modified 7 years ago by Navarra.
    Jenny @ Aesop

    Hi Navarra.

    Can you try changing the second one to:

    .aesop-quote-component .aesop-component-align-center blockquote

    It needs a space between the classes for sure.

    Jenny @ Aesop

    Please let me know if you still need assistance with this topic otherwise I will close it in a few days. Thanks!

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.