Return to previous page

How to change Footer Title/Heading color

This topic has 13 replies, 3 voices, and was last updated 6 years, 9 months ago ago by Rose Tyler

ajgamecave

Participant

July 31, 2018 at 03:21

I have a wordpress text element in my static block for our website’s footer. The widget title is in white, which is the same color as the background.

What is the css reference to change the color of the widget title/header color? Is there another location where I can do this?

#197505 Copied

12 Answers

Rose Tyler

Support staff

July 31, 2018 at 07:51

Hello,

Thanks for contacting us.
Please try to change Footer text color in Theme Options > Footer. If this won’t help, provide your site URL and temporary wp-admin access so we can take a closer look.

Regards

#197514 Copied

ajgamecave

Participant

August 1, 2018 at 01:47

Hello,

Changing the Footer text color does not provide a solution. None of the options affect the color of the text element’s title.

The site is provided in the private content section.

Our footers have titles that are white. You can highlight these (right above the line breaks) to see them.

I would just like to know what CSS div to use. When viewing the page source there are many and despite my attempts, none affect the title color.

Thank you for your help.

Please, contact administrator
for this information.

#197547 Copied
Rose Tyler

Support staff

August 1, 2018 at 08:24
Hello,

Please try to use this custom css code (Theme Options > Custom css or style.css file of child theme):

.main-footer .widgettitle { color: black !important; }

http://prntscr.com/kd8e3b
Feel free to ask if you have any other questions.

Regards
#197556 Copied
ajgamecave

Participant

August 2, 2018 at 02:48
Thank you Rose. That worked perfectly.

On a side note, is there an easier way to see the names of the different elements?

It looks like you are using a tool for that purpose. I generally just crawl through the page source trying various pieces until I find what I am looking for.

For example, I would love to find how to remove the small white bar that is above the copyright section. Currently I have just moved the section itself to hide this bar (imperfectly I might add). I am using the following, but it would be better to remove the bar itself.

.copyright{ padding: 0px 0px; margin-bottom: -25px; }
#197594 Copied
Rose Tyler

Support staff

August 2, 2018 at 07:32
Hello,

You can inspect code on site using inspector tools. To access it, open a web page or web app in Google Chrome. Either:
-Select the Chrome menu Chrome Menu at the top-right of your browser window, then select Tools > Developer Tools.
-Right-click on any page element and select Inspect Element.
The DevTools window will open at the bottom of your Chrome browser.

There is the border, that can be removed using this custom css:

.copyright-1 .container .row-copyrights { border: none; }

http://prntscr.com/kdo8i0

Feel free to ask if you have any other questions.

Regards
#197596 Copied
ajgamecave

Participant

August 4, 2018 at 04:54

Thank you, Rose! What an excellent tool, right under my nose.

I have a tough one for you. On the single product pages there is a header that reads “Product Description” located above the single-product page title. Please see the reference here: https://prnt.sc/keiebw

I wish to change this text to read “Game Description.”

I have used PHP code to change the woocommerce_product_description_heading element, but that seems limited to the Description tab.

Thank you for your assistance.

#197677 Copied
ajgamecave

Participant

August 5, 2018 at 03:23
Just an update on this issue.

I’ve put together enough hack CSS to make the element in the screen shot above look as I want it to on my browser, however I’m concerned it won’t operate in the correct manner on all screen sizes. To change the title “PRODUCT DESCRIPTION” to “GAME DESCRIPTION”, I’ve used the following CSS code:

.product-navigation .meta-title span{ visibility: hidden; } .product-navigation .meta-title:before{ font-weight: 600; content:"Game Description"; } .product-navigation .meta-title:after{ position: relative; top: -8px; left: 175px; width: 45%; }

Do you have a suggestion to improve this? Is there an easier or better way to accomplish what I am hoping to accomplish here?

I cannot simply change the text in the SPAN element. And for some reason, despite setting the SPAN’s visibility to hidden, the bar does not resize itself. Rather, it just crosses through the BEFORE text. I tried moving the position of the bar, but nothing seemed to work. This fix adjusts the size of the bar, which I feel may lose the responsive functionality.

Thank you again for your consideration.
#197703 Copied
Olga Barlow

Participant

August 6, 2018 at 15:57

Hello,

The easiest way to change that string will be using translation. Install and activate Loco Translate plugin. Then go to Loco translate > Themes > WooPress and press “create translation” > choose your default language to create translation and instead of real translation just find Product Description and in the translation add Game Description. Save and voilà, check the frontend.

Regards

#197742 Copied

ajgamecave

Participant

August 9, 2018 at 04:26

Excellent, thank you!

#197856 Copied

Olga Barlow

Participant

August 9, 2018 at 10:19

You are welcome!

Regards

#197874 Copied

ajgamecave

Participant

August 15, 2018 at 03:33

Just a quick note. Loco couldn’t find a Template for my Woopress-Child theme. Should I create a template or is there one already there that I should look for?

#198090 Copied

Rose Tyler

Support staff

August 16, 2018 at 07:45

Hello,

You need to translate only woopress theme, you don’t need to translate child theme. I think you did not make changes in the child theme that have child theme text domain.
Please read this article https://www.8theme.com/documentation/xstore/theme-translation/base-theme-translation/ (the same for woopress theme).
Feel free to ask if you have any other questions.

Regards

#198135 Copied
Viewing 13 results - 1 through 13 (of 13 total)