About Child Theme

  • Resolved satimis

    (@satimis)


    11 years, 5 months ago

    Hi all,

    Cimy Header Image Rotator plugin

    URL – piano-03.satimis.com

    I’m following doc;
    https://codex.www.ads-software.com/Child_Themes

    to create Child Theme with only;
    /piano-02/wp-content/themes/twentyeleven-child/style.css

    created and style.css is an empty file;

    I’m stuck here;
    Template Files
    If you want to change more than just the stylesheet, your child theme can overwrite any file in the parent theme: simply include a file of the same name in the child theme directory ….

    1)
    If I need Child Theme overwrite header.php, whether I create an empty file named /piano-02/wp-content/themes/twentyeleven-child/header.php ?

    2)
    If I need Child Theme overwrite plugin.css, whether I create an empty file named /piano-02/wp-content/themes/twentyeleven-child/plugin.css ?

    and make all editings on them?

    3)
    The website looks a little bid strange to me. How to fix it

    Please advise. Thanks

    Rdgs
    satimis

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

  • You are missing the @import line in your style.css file:

    /*
Theme Name:     Twenty Eleven Child
Theme URI:      https://piano-02.satimis.com/
Description:    Child theme for the Twenty Eleven theme
Template:       twentyeleven
Version:        0.1.0
*/
@import url("../twentyeleven/style.css");

    Fix that first.

    To change the header.php file, make a copy of that file from the parent theme and put the copy in the child theme – and make any changes in the copy in the child theme – so your child theme would then have

    wp-content
   themes
      twentyeleven
      twentyeleven-child (whatever name you used)
          style.css
          header.php (modified copy)

    To make changes to the plugin’s CSS – you just use a browser tool like Firebug to find the CSS you want to change – and COPY it to the child theme style.css file – and make the change there.

    Thread Starter satimis

    (@satimis)

    Hi WPyogi,

    I have following line added;
    @import url(“../twentyeleven/style.css”);

    Thanks.

    What will be the next steps;

    If I expect making following changes

    1) on plugin css

    #cimy_div_id_0 {
    border: 0 solid #000000;
    float: left;
    height: 288px;
    margin: 1em auto;
    width: 1000px;
}

    and change the width set in px to % as

    #cimy_div_id_0 {
    border: 0 solid #000000;
    float: left;
    height: 288px;
    margin: 1em auto;
    width: 100%;
}

    2) on header.php
    Delete following line;
    <img src=”<?php header_image(); ?>” width=”<?php echo $header_image_width; ?>” height=”<?php echo $header_image_height; ?>” alt=”” />

    Replace the line with follows;

    <div id="cimy_div_id_0">Loading images...</div>
<div class="cimy_div_id_0_caption"></div>
<style type="text/css">
	#cimy_div_id_0 {
		float: left;
		margin: 1em auto;
		border: 1px solid #000000;
		width: 1000px;
		height: 288px;
	}
	div.cimy_div_id_0_caption {
		position: absolute;
		margin-top: 175px;
		margin-left: -75px;
		width: 150px;
		text-align: center;
		left: 50%;
		padding: 5px 10px;
		background: black;
		color: white;
		font-family: sans-serif;
		border-radius: 10px;
		display: none;
		z-index: 2;
	}
</style>
<noscript>
	<div id="cimy_div_id_0_nojs">
		<img id="cimy_img_id" src="https://piano-01.satimis.com/wp-content/Cimy_Header_Images/0/beautiful-pink-flowers_1000x288.jpg" alt="" />
	</div>
</noscript>

    3) Again on header.php
    Add following lines immediate after <head>

    <?php
if ( is_home() ) {
?>
<embed autostart="true" height="0" loop="true" src="https://piano-01.satimis.com/wp-content/uploads/2013/06/kanon_Matsuda_von_Weber_Invitation_to_dance.mp4" width="0"/>
}
<?php } ?>

    Thanks

    Rgds
    satimis

    Copy the CSS changes to the style.css file under the @import line.

    For the other, like I said, make a copy of the header.php file from the parent theme – put the copy in the child theme folder and make the changes there.

    Thread Starter satimis

    (@satimis)

    Hi WPyogi,

    URL cuisine.satimis.com

    I exect to make following changes on twentyeleven/style.css ;

    1)
    Line 518

    #branding {
	border-top: 2px solid #bbb;
	padding-bottom: 10px;
	position: relative;
	z-index: 9999;
}

    Change to;

    #branding {
	border-top: 2px solid #bbb;
	padding-bottom: 10px;
	position: relative;
	z-index: 9999;
	background: #B37F7F;
}

    2)
    line 540

    #site-description {
	color: #7a7a7a;
	font-size: 14px;
	margin: 0 270px 3.65625em 0;
}

    change to;

    #site-description {
	color: #ffffff;
	font-size: 14px;
	margin: 0 270px 3.65625em 0;
}

    So I add follows on twentyeleven-child/styls.css

    #branding {
	border-top: 2px solid #bbb;
	padding-bottom: 10px;
	position: relative;
	z-index: 9999;
	background: #B37F7F;
}
#site-description {
	color: #ffffff;
	font-size: 14px;
	margin: 0 270px 3.65625em 0;
}

    Both work for me.

    But I couldn’t make;

    #cimy_div_id_0 {
    border: 0 solid #000000;
    float: left;
    height: 288px;
    margin: 1em auto;
    width: 100%;
}

    to work.

    Please help. Thanks

    Rgds
    satimis

    That’s being overridden by internal CSS (in the head of your site) – this:

    #cimy_div_id_0 {
    border: 0 solid #000000;
    float: left;
    height: 288px;
    margin: 1em auto;
    width: 1000px;
}

    It looks like that’s a setting in the plugin ?

    Thread Starter satimis

    (@satimis)

    Yes, you’re right.

    On twentyeleven-child/header.php

    change;
    width: 1000px;

    as;
    width: 100%;

    That fixed my problem. Thanks

    satimis

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘About Child Theme’ is closed to new replies.