I'm using Elementor with an OceanWP theme. I'm trying to customize a text editor that has many lines of text. I have 2 questions about how to tailor the content of the text editor:
Is it possible to prevent Elementor from adding space between paragraphs (in a similar way to how MS Word handles this matter)?
When I click on bold font, the text editor is actually using the expression <strong> rather than <bold> as I was expecting. The thing is that I would like to increase the contrast with the regular font but <bolder> and <stronger> do not work.
So I'd add some custom CSS
You could add some custom CSS to override the margin on the paragraph elements within Elementor text block. Here's some psuedocode:
.elementor-text-editor-block p {
margin-bottom:0!important;
}
Similarly, add something like
strong {
font-weight: 600;
}
Related
How can I turn all bold text in a post's content to a h2 or h3 tag using CSS?
I can change the color of bold text in a WordPress post to red, but I also want to make (only) the bold text in the WordPress post into h2 or h3.
b, strong {
color: red;}
if there is any other way like from functions.php or else, please share, basically i have more than 1000 pages and want a quick fiz to turn all the bold text in post into h2.
Unfortunately, you cannot do this in CSS. Tags are assigned in HTML---In CSS you can only edit the format of these tags.
One simple solution is to create a class or a few classes which all contain the format for boldness, the color you want, etc. and assign all the H2 and H3 tags in HTML to the respective classes you created.
How to change the background and text color of every read more button on my website?
The site has "swift" theme.
There should be a option in Wordpress admin panel to edit website's appearance, including font size, color and stuff like that. I have not worked on the Swift theme but from the little experience I have, theme's options have such features to modify color/size/font without having to write CSS for it.
OR you can add custom CSS to your website, but for that you will need to write CSS which may overlap with other settings on the website if not done carefully.
The 'Read More' element has 'moretext' class, so you need to work on CSS to customize it. Something like this:
.moretext { background: #ffffff; color: 000000; }
Here's the documentation https://codex.wordpress.org/Customizing_the_Read_More
I am making my first steps of coding. I have finished HTML, CSS, JavaScript, mySQL and PHP courses on the Internet. And now I decided to continue learning from the practice while I make a Wordpress theme.
The thing is that I am working with custom fields. I have a field for the text and I can't find a way to customize the css of specific parts of that text.
I know that I can apply a class to that field but how can I apply a class to specific parts of that field?
For example if I want to make some bolder words?
When you insert your text in the custiom field, you can use some html tags such as <b>I am bold</b> or <i>I am italic</i>
Or you can add <span> tags, but add a class name like <span class="boldAndRed">some content</span>, then in css do this:
.boldAndRed{
font-weight: bold;
color:red;
}
I have a Share Point 2013 web site and a blog in it. Since my posts will include a lot of special text content, I need to add more styles that I will use on all posts. Typically all styles appear in the top ribbon bar when creating a new post.
How to add the new style in Share Point Designer 2013?
What do I need to do?
What you are looking for are custom styles for the SharePoint RichText editor. The nice thing is that all you have to do is add some custom CSS and SharePoint will magically render new text styles. you can also do this with SharePoint Designer if you have a custom master page or if you just specify the alternate CSS somewhere.
The "magic" CSS is something like the following:
.ms-rteStyle-MySpecialStyle {
-ms-name: "My special style";
font-style: bold;
color: red;
}
h2.ms-rteElement-SpecialHeading{
-ms-name: "Special Heading";
font-style: bold;
color: green;
}
The difference between the two is the rteElement vs. rteStyles, but the difference becomes clear once you look at your screenshot: Page Elements and Text Styles. The difference is that you style particular elements with one, e.g. H1, H2, SPAN, and you style text passages with the other - SharePoint actually adds a span tag around the text and assigns it your style.
Enough of the words, a couple of complete blog articles to help you get started:
How to add custom styles to the ribbon in SharePoint 2013
Add new stlyes to Rich Text Editor ribbon in SP2013 Online
Do you know how to custom styles for RichHtmlEditor in SharePoint 2013?
Please try this code for custom heading and text
h2.ms-rteStyle-customHeading
{-ms-name:"custom heading";
color:gray; }
.ms-rteElement-customTest
-ms-name:"customize text";
{color:black; }
I’ve got the following CSS to add a PDF icon to any link that links to a PDF:
a.pdf-link:after { padding-left: 2px; content: url(../images/icon-pdf-link.gif);}
Is it possible to put some title and alt attributes on this image? I would like it so that the user is able to hover over the icon and get some text like “This links to a .pdf file.” Which I’ve typically done just by putting title attributes to it, but can’t figure out if I can do that through this method.
No, content only accepts raw text and image data, not HTML.
You need to use JavaScript to dynamically add tooltips to your existing HTML elements.
As for the icon, you could use a background image and some padding:
a.pdf-link {
padding-left: 2px;
padding-right: 20px;
background: url(../images/icon-pdf-link.gif) right center no-repeat;
}
If you need to specifically have a tooltip only on the icon, though, you need to do everything in JavaScript as the comments say.
You can this, these days, using CSS3.
According to https://www.w3.org/TR/css-content-3/#alt:
1.2. Alternative Text for Speech
Content intended for visual media sometimes needs alternative text for speech output. The content property thus accepts alternative text to be specified after a slash (/) after the last . If such alternative text is provided, it must be used for speech output instead.
This allows, for example, purely decorative text to be elided in speech output (by providing the empty string as alternative text), and allows authors to provide more readable alternatives to images, icons, or text-encoded symbols.
Here the content property is an image, so the alt value is required to provide alternative text.
.new::before {
content: url(./img/star.png) / "New!";
/* or a localized attribute from the DOM: attr("data-alt") */
}
Based on the answer I just did the following with jQuery:
$(".pdf-link").before("<img src='../images/icon-pdf-link.gif' title='This link is a pdf' />");