WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] HTML or CSS editing in Child Theme (4 posts)

  1. RSARA
    Member
    Posted 1 year ago #

    I have published a website and using the WordPress Visula Editor I have changed such things as font colour and paragraph styles.

    The template is Twenty Ten.

    Various plugins and widgets have been included in the site.

    The site is http://www.rsara.asn.au

    I would like to create a child theme using the One Click Child Theme plugin so I can further refine the formatting but I have read some blogs that say creating a child theme with this plugin broke their website.

    I understand that the CSS of a theme should not be edited because theme updates would lose the editing.

    Am I right in assuming that the formatting in my website is in the HTML markup and this formatting has not changed the CSS? Therefore the formatting would be retained in a child theme and the formatting, widgets and links would still be on the page when the child theme is created.

    I am proceeding cautiously because it would be a disaster if I have to recreate the site from scratch.
    FJM

  2. paulwpxp
    Font hero
    Posted 1 year ago #

    The way you did it is wrong, it works but it's wrong.

    Inline format via WYSIWYG ( or Visual ) nullifies the concept of Cascading Style Sheet. The point of having CSS is that so you can change the styling easily and systematically.

    The way it is right now, no matter how you change the style sheet, the formatting will retain, it's kept inside the database as a part of post's content.

    Inline style is so powerful, it wins all other styles, it should be avoided and used as a last resort.

    Good news is your site is not complicated, the inline style you used is just a text color, so you can move that inline style out to the child theme's CSS.

  3. RSARA
    Member
    Posted 1 year ago #

    Thanks for your help paulwpxp.

  4. RSARA
    Member
    Posted 1 year ago #

    I'm sure there are other novice website developers like me who wasted time using IE9 Developer Tools(F12) to identify the code to change the color of text in a website based on a Twentyten child theme.

    I strongly ecommend you follow the advice in some of the posts elsewhere in this forum and use Firefox with Firebug add-on.

    Personally, I have nothing against IE9 as a browser, and I still use it as a browser, but if you download and install Firefox, with Firebug add-on, you will save yourself a lot of trouble when trying to add code to a child theme.

    The "Click an element on the page to inspect" facility in Firebug makes it so much easier.

    Initially, being novice website developer, I thought the colors could be changed by one or two lines of code. Wrong! It turned out there were a lot of different areas where I had to change the color (site-title, site-description, links, widgets, page-title, page text, styles h1 .... h6, menu bar).

    Firebug made it relatively easy to identify the code that had to be added to the Child them. It was nowhere near as daunting as I thought it would be.

    Here is the coplete code for my Twentyten child theme that did the job.

    /* ---------
    Theme Name: Twentyten-Child
    Description: Child theme for the twentyten theme
    Author: XXXXXXXXXX
    Template: twentyten
    Version: XXX
    ------------
    */
    
    @import url("../twentyten/style.css");
    
    /*
     ---------- Change site title color from black hex #000 to to maroon hex #800000
    -----------------------------------------------*/
    
    #site-title a {
    	color: #800000;
    }
    
    /* ---------- site-description (info for members etc . . . .) add color #80000
    ---------------------------------- */
    
    #site-description {
    	color: #800000;
    }
    
    /* -------- page-title -- change color from black #00000 to maroon #800000 -- line 575 ----------------
    ------------------------------------------*/ 
    
    #content .entry-title {
        color: #800000;
    }
    
    /* ------ Page text color (Content input textarea - line 475) -- color changed from grey #000000 to maroon #800000 ----------
    ------------------------------------------------ */
    
    #content,
    #content input,
    #content textarea
    {
    	color: #800000;
    
    }
    
    /* -------- Page text color for headings h1 h2 h3 etc - lines 506-519 -- color changed from #000 to #800000 ----------
    ------------------------------------------------- */
    
    #content dt,
    #content th {
    	color: #800000;
    }
    #content h1,
    #content h2,
    #content h3,
    #content h4,
    #content h5,
    #content h6 {
    	color: #800000;
    }
    
    /* --------- change widget title from black to grey (#ebebeb) on green background (#7f8000) ---------
    --------------------------------------------------------*/
    
    .widget-title {
        font-family: Georgia, "Bitstream Charter", serif;
        color: #ebebeb;
        font-weight: normal;
        background: #7f8000;
    
    }
    
    /* -------- change link color from blue to maroon #80000 and change visited link from blue to light maroon #cd0000 ----------
    -----------------------------------------------------*/
    
    a:link {
        color: #800000;
    }
    a:visited {
    	color: #cd0000;
    }
    
    /* -------- change menu bar color from black (#000000) to green (#7f8000) ----------
    -------------------------------------------------------*/
    
    #access {
        background: none repeat scroll 0 0 #7f8000;

Topic Closed

This topic has been closed to new replies.

About this Topic