0

I am currently using a wordpress theme and am trying to amend some of the fields within using CSS. The CSS code I have written works fine when I try it out on JSfiddle.

What I am trying to achieve is: (1) Change "Address" to "Important Information" (2) Change "Our Address" to "Company address" (3) Hide the Telephone row (4) Hide the Email row

However, when I paste it into the CSS section of wordpress, somehow only the change related to the hiding of rows is implemented ie. 3 and 4

Is there a reason for this? I am applying the technique I found out in this thread (link)

Thank you.

JSFiddle demo

HTML code

<div class="address-container">
    <h2>Address</h2>




    <div class="content">
                <div class="address-row row-postal-address" itemscope="" itemtype="http://schema.org/PostalAddress">
            <div class="address-name"><h5>Our Address:</h5></div>
            <div class="address-data" itemprop="streetAddress"><p>52 Chesterfield Lane</p></div>
        </div>


                <div class="address-row row-telephone">
            <div class="address-name"><h5>Telephone:</h5></div>
            <div class="address-data">
                <p>-</p>

            </div>

        </div>

                <div class="address-row row-email hide-email">
                    <div class="address-name"><h5>Email:</h5></div>
                    <div class="address-data"><p>-</p></div>
                </div>

                <div class="address-row row-web">
            <div class="address-name"><h5>Web:</h5></div>
            <div class="address-data"><p><a href="www.google.com" target="_blank" itemprop="url">Click here</a></p></div>
        </div>
    </div>
</div>

CSS code

.address-container h2 {
  font-size: 0;
}

.address-container h2:after {
  content: "Important information";
  font-size: 15px;
}

.address-container .content .address-row.row-postal-address .address-name h5 {
  font-size: 0;
}

.address-container .content .address-row.row-postal-address .address-name h5:after {
  content: "Company address";
  font-size: 15px;
}


.address-row.row-telephone .address-name {
  Display: none;
}

.address-row.row-telephone .address-data {
  Display: none;
}

.address-row.row-email.hide-email .address-name {
  Display: none;
}

.address-row.row-email.hide-email .address-data {
  Display: none;
}
umek
  • 17
  • 6
  • 1
    Are you able to override the template in your child theme that is displaying the address information? It's better to do it that way then use CSS. – Andrew Schultz Oct 29 '17 at 10:34
  • Hi Andrew, may I am trying to do this right now. May I know if there is an easy way to locate the .php file I should be looking into? – umek Oct 29 '17 at 13:48
  • Hi Andrew, that worked! Many thanks. For those wondering how to locate the php I used this plug in called What The File (link: http://www.wpbeginner.com/plugins/how-to-find-which-files-to-edit-in-wordpress-theme/) – umek Oct 29 '17 at 15:46

0 Answers0