CSS Property Becomes Inaccessible in Dreamweaver when Trying to Create Custom T (6 posts)

  1. diamo
    Posted 3 years ago #

    I have recently started to learn how to integrate WordPress into Dreamweaver CS5. I have been following the Lynda.com video on the exact topic. There is a problem that arises as I try to follow the exercise files pertaining to the css of the <body> tag in the index.php file. The CSS is AUTOMATICALLY rewritten and becomes inaccessible to edit when you try and change a theme. This is what happens:
    1. In WordPress, I activate the Twenty Ten theme.
    2. In Dreamweaver, I open the main index.php file, click on Live Code and find the <body> tag and its CSS style. The following link shows the code in the index.php file: Jpeg 1
    3. With the <body> tag selected, the CSS rules in the CSS Panel are editable and I can change the background color. The following Image shows this: Jpeg 2
    4. Then I want to create a custom theme from the Twenty Ten theme, so in Dreamweaver, I find the Twenty Ten folder in wp-content/themes and I Duplicate it. Dreamweaver creates a copy of the folder and I rename it to a name I want for my custom theme. I also rename the style.css file comments so I can identify my new theme.
    5. I go into WordPress and activate the new custom them I just created by simply duplicating the Twenty Ten theme.
    6. I go into Dreamweaver to open up the index.php, and turn on Live Code so I can make changes to the CSS for the body tag, BUT I can't!!! Somehow, a new css style has been created called body.custom-background and I have no idea where it came from and it is completely inaccessable to me. Here you can see the new css code that has been created and I cannot find anywhere in the files associated with index.php (It is not in style.css): Jpeg 3
    7. So not only I can;t find where this CSS code came from or where it lives, I simply cannot change this css rule at all as seen in this jpeg: Jpeg 4

    I have searched through all the code associated with index.php and I cannot find where this body.custom-background css style has come from. It was not in the original theme folder and I merely copied that folder and all of a sudden, somehow, it has appeared. Like it was automatically generated or it is hidden somewhere but I have no idea how to find it. Has anyone had a similar issue or can someone explain to me how to get to the bottom of this? I have already spent over 4 hours trying to figure out from where this code comes from and how in the world do I edit it!!

  2. potentweb
    Posted 3 years ago #

    What is your sites URL? Use google chrome console tool to see where it is coming from.
    Google Console Instructions

  3. diamo
    Posted 3 years ago #

    I am running a testing server through MAMP. So the site isn't live. I am not familiar with google chrome and how it could solve my problem, but I'll look into your suggestion. Cheers.

  4. potentweb
    Posted 3 years ago #

    Read the article I sent you. You can modify the css and see what file the css is coming from by using the console tool.

  5. diamo
    Posted 3 years ago #

    Cool. Google Chrome Console lets me see the code, but now how do I figure out where on my computer that code actually is? I right-click on the background element because I am interested in changing the background-color css rule, and I choose Inspect Element. And I see the <body> tag and the related css on the right panel as in this Jpeg A

    I am after the culprit css rule body.custom-background. This is the code I want to find in my files and change, but I cannot as I described in my first post. I see this body.custom-background css on rule on the right, I can change the property of the rule, which is cool. But then how do I know where that piece of code actually is in my files? I see there is a link next to the rule /explore_ca/blog/:15 so I click on it and it takes me to the CSS rule in some code, see Jpeg B, which looks exactly like the code I see when I view the page in Dreamweaver using Live Code (Jpeg 3). So how can I understand Google Console to tell me exactly which file I will be able to open up and see that css rule and it is not hidden inside some php code where I need Live Code to view?
    Thanks for helping me with this potentweb.

  6. diamo
    Posted 3 years ago #

    To follow up my issue in case anyone else has this problem, I have at least identified where the body.custom-background exists and how it appears embedded into the index.php code. The custom background is actually defined as PHP code in a file called theme.php. It is located within the wordpress/wp-includes/ folder. In this file you will find a section of code at the bottom of this post that deals with the custom background. At the very bottom of the code below you will see the CSS rule in question defined as body.custom-background { <?php echo trim( $style ); ?> }. I don't know how to write PHP code but I assume this is a function that is calling information from another file to define the background color.

    Ideally, I'd like to know where this function is grabbing its information so I have a better understanding of changing the body.custom-background CSS rule, so if anyone cares to elaborate on this, it would be helpful in having a more complete answer to this problem.

    But in my case, I was just frustrated that I could not get to the body.custom-background on the Dreamweaver Live Code view and did not know where the code was coming from. Well I have identified where the code is (as said above) and a fix is just to delete the body.custom-background style from the code. It fixes having to deal with it when customizing your site, but there are some things still left confused:
    1. How is the PHP function code creating the CSS rule? (a matter of learning PHP)
    2. Why, if you copy the twentyten theme folder to create a new custom theme folder, then activate this new custom theme folder, does wordpress ignore the style.css file and use the php embedded css rule in theme.php???? This happens even if you make a copy of the twentyten folder and do not modify any content with it!!

    The culprit code in theme.php:

    * Default custom background callback.
    * @since 3.0.0
    * @access protected
    function _custom_background_cb() {
    // $background is the saved custom image, or the default image.
    $background = get_background_image();

    // $color is the saved custom color.
    // A default has to be specified in style.css. It will not be printed here.
    $color = get_theme_mod( 'background_color' );

    if ( ! $background && ! $color )

    $style = $color ? "background-color: #$color;" : '';

    if ( $background ) {
    $image = " background-image: url('$background');";

    $repeat = get_theme_mod( 'background_repeat', 'repeat' );
    if ( ! in_array( $repeat, array( 'no-repeat', 'repeat-x', 'repeat-y', 'repeat' ) ) )
    $repeat = 'repeat';
    $repeat = " background-repeat: $repeat;";

    $position = get_theme_mod( 'background_position_x', 'left' );
    if ( ! in_array( $position, array( 'center', 'right', 'left' ) ) )
    $position = 'left';
    $position = " background-position: top $position;";

    $attachment = get_theme_mod( 'background_attachment', 'scroll' );
    if ( ! in_array( $attachment, array( 'fixed', 'scroll' ) ) )
    $attachment = 'scroll';
    $attachment = " background-attachment: $attachment;";

    $style .= $image . $repeat . $position . $attachment;
    <style type="text/css" id="custom-background-css">
    body.custom-background { <?php echo trim( $style ); ?> }

Topic Closed

This topic has been closed to new replies.

About this Topic