Adding color to what appears as transparent font

Support
#8

sorry, one other thing…

Because of the background image I’ve been requested to use the black font at the bottom of the picture doesn’t show up very well. Is there a way to use a black font that has a white outline? How would I do this?

Thanks again!!

#9

Hello There,

Thanks for updating in!

1.) The button is supposed to be in white text color. It is displaying black color because you have added this code:

.entry-wrap * {
    color: #000;
}

Please remove that code and you should have something like this:

If you are going to change the text color of your page/post content, please do it the right way. You will have to go to X > Theme Options > Typography > Body and Content > Body Font Color then select the black color using the color picker.

2.) yes it is not black because the setting in X > Theme Options > Typography > Body and Content > Body Font Color is using the transparent color.

3.) To add a white text shadow, please do the following:

  • Edit the home page back in Cornerstone
  • In each element, (custom headline and the text element) add a custom .add-text-shadow class
  • And then insert the following custom css in the settings tab, Settings > Custom CSS 
.add-text-shadow {
    text-shadow: 1px 2px 3px rgba(255,255,255,0.85);
}

You should have something like this:

#10

Hi again,

1- Thank you, that corrected the contact form / ‘send’ button issue!!
2- Again, thank you…the font color on the blog post when clicked is now black as it should be!

3-So very sorry, but I must be missing something when trying to add the white shadow to the font on the home and about pages. When I enter cornerstone and click on the individual line items I went to the ‘CSS’ button on the side of the screen and tried entering the code you sent but it didn’t work. Sorry, i’m still very new to this if you could somehow further breakdown these steps I’d greatly appreciate it!

#11

Hello @lyndsaylaveau,

Thanks for updating the thread.

I have recorded a screencast that you can take a look to make the changes that my colleague shared.

Thanks.

1 Like
#12

Thanks so much!! When I watched the video I realized the add-text-shadow to the class line it doesn’t the ‘.’ at the beginning! Really appreciate your help.

I have another question - I currently use MailChimp and have it tied to a contact form on my homepage that takes the user to a new page to enter their email address and subscribe. I was hoping to change it from a button to something more like the below. Is this possible? Do you have instructions on how to do this and keep it tied to MailChimp? -

#13

Hello Lyndsay,

If you want to have a subscription form integrated with Mailchimp, please install Email Forms extension. You can get this in X > Validation > Extensions. To know more about this extension, you can check this out: https://theme.co/apex/forum/t/extension-email-forms/82

Hope this helps.

#14

This was a HUGE help, thanks so much!!!

Is there a way for me to have the email entry line and subscribe buttons side by side or do they have to be stacked like on my page at the moment? Not sure if this can be done inside the custom styling section or not?

Thank you!!

#15

sorry, I’m also struggling to get my home page image to properly fit. I’d like the full picture to fit. Any advice on this?

Thanks again!

#16

Hi Lyndsay,

Sure, please add this CSS to your global or home page’s custom CSS .

@media ( min-width: 768px ) {
.tco-subscribe-form fieldset {
    width: 46%;
    float: left;
    margin-right: 1%;
}
}

As for the image, please change your page template to Blank - No Container | Header, Footer. It’s currently set to Blank - Container.

Thanks!

#17

This code helped to put them side by side, but I’d like it to look similar to the insert above where the boxes are the same height and the email address entry box is longer so that you can read the entire thing (Email Address). Is there additional code I should add to fix this?

As always, thank you so much for your continued support. Your team is awesome and so helpful!!

#18

Hello Lyndsay,

You can adjust the width of the form in X > Email Forms settings when you edit your form. AT the moment, it is set only with 250 pixel wide. If you increase the width, the the email address field will also be wider.

Please let us know how it goes.

#19

Thank you! This helped to widen the ‘Email Address’ box so now both words can be seen. Are you able to view the home page? For some reason the boxes ‘email address’ and ‘subscribe’ are still different heights and one is squared and one is rounded. Can this be fixed?

I also decided to take a look at the blog on a cell phone device and the home page isn’t translating well at all. I’m not sure where I’ve gone wrong with this?

I tried doing as stated above to adjust the 'Blank- No Container | Header, Footer, but that didn’t correct the image all fitting into the background. When I added additional rows in cornerstone layout that allowed the full picture to be seen, but I’m wondering if this is causing problems with the translation to other devices now or messing with the overall layout?

lastly, I’d like the ‘No Charge. No Spam. Unsubscribe Anytime.’ to be moved closer to the subscription boxes. Can you please advise on this as well? I tried playing with the padding on the column individually but that didn’t seem to work.

Sorry for all the questions and continued support required, I’m still very new to all of this…your help is always greatly appreciated!

#20

Hi Lyndsay,

Please add this to Theme Options > CSS

.tco-subscribe-form input[type="email"],
.tco-subscribe-form input[type="submit"] {
	border-radius: 0.25em;
    margin-top: 0;
    margin-bottom: 0;
    height: 3em;
    box-shadow: none;
}

That will make the button and email field same height.

The issue on your mobile view is because you applied to much padding on the column.



Set that to 2em only, and use the ROW’s max-width option instead if you want to narrow column width.



Hope it helps,
Cheers!

#21

Thanks! That fixed the buttons!

I’m not sure why, but I can’t locate the screen you have sent above to adjust the Row’s max-width option. I went in and reset the column padding to 2px on Left and Right. Is this right? How can I get to the screen you have sent above?

Thanks again!

#22

Still having issues with the background image as well…it’s not fitting on the screen the right way and half goes missing on mobile device.

Thanks!

#23

Hi Lyndsay,

  1. To go to Row settings, you can go to layout, select the section and row then clcik on magnifying glass.

  1. You can adjust it by adding an ID to your section.

Then add this in Theme Options > CSS

@media(max-width:767px) {
   .my-section {
          background-size: 80%;
          background-position: 50% 50%; 
   }
}

Change 80% and 50% to adjust

For your reference:

https://www.w3schools.com/cssref/pr_background-position.asp
https://www.w3schools.com/cssref/css3_pr_background-size.asp

Hope that helps

#24

Sorry, this didn’t work for me. My screen doesn’t seem to have that as an option for the row size.

My current outstanding issues to get my page running are as follows -

1)Background image isn’t properly fitting. (There also appears to be another background image that I had up before that keeps reappearing and I don’t know where it is located.)

2)Font needs to be shifted over so not to cover the left side of the image with the person.

3)I need my homepage to properly transfer to mobile/smaller devices.

Are you able to assist?

Thank you!

#25

Hi Lyndsay,

Please turn on advanced option under Settings > Preferences then follow the instructions provided above.

If you are still having a problem after that, kindly provide us your wordpress admin login in Secure Note(key icon)

Thanks

#26

Hi - I sent my Username/Pass in secure note.

  1. Homepage - on a laptop/computer size screen the background image doesn’t fit properly.

  2. Homepage - there is some odd space at the bottom of the screen.

  3. None of my homepage is translating well to smaller screen/mostly mobile devices.

Are you able to assist with these 3?

Thank you.

#27

Hi Lyndsay,

I did go ahead and fixed those issues, the background image is responsive in a different way, what we can only do is to position your background properly. Please read this thread for more details about background-position.

Hope it helps,
Cheers!