Modify text formats for all text areas

Support
#1

Hi there,

I’ve been experimenting with css to modify all text formats so that I have a 30px margin (indent) and increased line-height to 1.7em.

Also I’d like to change the “preformatted” styes to use a Goolge font called “lobster”.

Can you please help me with these?
Thanks in advance,
Rob

Here’s what I was using without success:
.x-text {
margin: 30px !important;
}
.x-text-content-text-primary {
margin: 30px !important;
}

#2

Hi Rob,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thank you.

#3

Thanks Jade!
http://ovpp.robstrickland.net/

#4

Hello @Rob_Strickland,

Thanks for sharing the URL. :slight_smile:

Looking at the website and content, it seems that you are using V2 text content element. In Order to change the font to Lobster, I suggest you to create a font template from X > Launch > Template > Font > Add New > Select Lobster from combo box. Also I suggest you to give a recognizable name to the font template.

Next, open the page and in the text element under Text Format > Font Family > Select the template you just created. Here is a screencast that you can refer https://screencast.com/t/hs5vv7NEbgP

In case, If you don’t want to go with the font template then please add following CSS in X > Launch > Options > CSS:

.x-text {font-family: "Lobster",display;}

I tested the code you have shared on Chrome dev tools and it seems to be working fine. Please see screencast https://screencast.com/t/VArqZqajd. Please add the code in X > Launch > Options > CSS and after then please clear browser cache.

Let us know how it goes.

Thanks.

#5

Thanks for the reply and I love the text template idea. I’ll give that a try here shortly…
I have added the code
.x-text {
margin: 30px !important;
}
.x-text-content-text-primary {
margin: 30px !important;
}
to the CSS customizer and viewed the url in a private browser which negates the need to clear the browsing cache and the font doesn’t indent. Is it possible the element is superseding the CSS?
https://www.screencast.com/t/5sxBXDVa3OhK

Thanks,
Rob

#6

Hi Rob,

It seems there is a syntax error somewhere on your custom CSS, please check that here and resolve the errors.

If your css code still did not work, please follow this:

Define a custom CLASS on Theme Options > CSS

(e.g. mytext-class )

.x-text.mytext-class {
	font-family: "Lobster", cursive;
	padding-left: 30px;
    line-height: 1.7;
}

Then add that CLASS to the text element that you want to indent.

Hope it helps,
Cheers!

#7

Thanks for this, perhaps I wasn’t 100% clear because I included 2 requests in the ticket.

What I want to do is indent ALL TEXT areas 30px, so that I do not have to go into each text area and add a class and or use the Cornerstone/xPro settings to indent each one.
So regardless of the lobster font or the inherited font from theme settings I want all texts to indent.

I hope that helps (back at ya - smile).
Thank you so much for your assistance!
Rob

#8

Hello Rob,

Thanks for updating in! The code should have worked out. Upon inspection your page css, it appears that there is a broken css which has affected the code and it did not take effect.

For best css practice, please rearrange your custom css and have it indented. It is also best if all the @media css blocks will be at the bottom of all other custom css. For example;

element {
  // your styling
}

#element-ID {
  // your styling
}

.element-class {
  // your styling
}

@media(min-width: xx){
  element {
     // your styling
  }
}

@media(max-width: xx){
  element {
     // your styling
  }
}

Hope this helps. Please let us know how it goes.

#9

Oh man, great catch, thank you. I’ve also taken your advice to leave the @media at the bottom of the css. Thanks for that tip too.
So what i have found is that the indent is working on text fields as I want - awesome. But it’s also indenting headline elements. How do I prevent that from happening. The desired stepping from Headline to text is what I am trying to achieve where the text is indented from the heading.
Kind regards,
Rob

#10

Hi Rob,

Would you mind providing a link to the speicifc page where the text and headline element are both indented?

I don’t see any reason why the headline elements will be indented if you are using .x-text to target the text element because they do not share the same class names not unless you have the headline added in a text element as well, that would result anything inside the text element to be indented.

#11

Thank you… I was able to remove a

.x-text-content-primary-text {
margin: 30px !important;
}
and it fixed the problem…
http://ovpp.robstrickland.net/live-here/

#12

Glad things sorted out on your end,

Cheers!

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.