Rename block fields in the Wordpress style dropdown - wordpress

When selecting block styles in the wp editor (p, h1, h2, etc.) is there a way to change the text in the dropdown? Like instead of showing Heading 2, it will show Subhead. I think this is more user friendly for those who don't know HTML.

Not 100% certain what you mean - I see "Heading 2" rather than H2, and I'm fairly sure I'm using a standard install:
If it's those names you want to change, I don't know of a way to change them without changing the core files: wp-includes/js/tinymce/langs/wp-langs-en.js (for example); it's the block starting tinyMCE.addI18n("en.advanced"

Related

Customize/Remove these sections in "shopping cart" page woocommerce?

How do I remove these sections on woocommerce "shopping cart" page? Preferably with CSS (I'm using Site Origin CSS plugin to edit my CSS).
I found CSS code to remove "has been added to your cart" text but it did not work...
.woocommerce-checkout .woocommerce .woocommerce-message {
display:none !important;}
And while we are at it, how do I replace quantity and add to cart button with custom button (my image) for it to look like this? This is how it looks now.
Thank you.
Unless .woocommerce and .woocommerce-message are children of .woocommerce-checkout, this will not work. If these are classes styling separate elements, put a comma between them, like .woocommerce-checkout, .woocommerce, .woocommerce-message{...}
Also, make sure that these are the classes you really want to disable. Often times in WP sites, there are 10+ classes on a single element and it can be difficult to make sure you're targeting the right one. .woocommerce, for example, seems like a generic class, so hiding it could break other things throughout the site.

How to access embedded data in custom css

In the Look & Feel section of a survey, under Advanced, you can Add custom css.
I'd like to access my embedded data in my custom css.
For example, I would like to do this:
.Skin {
font-family: ${e://Field/fontFamily};
}
The above code doesn't work. The embedded data variable fontFamily isn't inserted into the custom css.
I am able to access embedded data in the Header and Footer elements. However, these elements do not allow me to specify styles for the rest of the document (qualtrics seem to strip any elements you add to that section).

Change article title and read more button style for particular articles in Joomla3.x

I am using Joomla3.2 for my site development. I wish to reduce the size of the article's title in particular pages without affecting other pages.
By default it will take <h1> and I want to reduce this into <h4>.
I would also like to reduce the size of the read more button size in the article.
First of all, the usage of <h1> for the article's title vs <h4> is not a matter of size alone; but most importantly it tells search engines what the page is about.
What you want is simply to apply a different style to the <h1> in some particular pages.
In order to achieve this you might
add a css suffix to the specific menu items that are linked to
the articles whose title is too large;
add the Itemid parameter in the <body> tag in your template
Whichever you choose, in the end you'll have a means of discriminating the articles - be it the page class or the Itemid - which you will use in your css to apply a smaller font-size.
So for example your selectors may be:
body.item-113 h1, body.item-116 h1
or
.someCustomClassYouAddedToTheMenuItem h1

Custom Directive with header and internal list reStrcuturedText

Basically what I'm trying to do is copy this style (from a word doc) but using rst.
I was thinking I might need a custom directive which I can can include the header and style the internal checkboxes.
Ideally I would like to be able to do something like:
.. handson::
The title
- Check one
- Check two
The bulltet items inside the handson block would be styled as checkboxs but the rest of the document would just have normal bullet points.
I had a look at the custom directive stuff but I'm not sure if that would be the best way to tackle this. I'm also using rst2pdf if that has any impact on the results.
If you don't want to go down the route of creating a custom directive, you could use a normal admonition block and "fake" the check boxes. Your markup could be standard reStructuredText:
.. admonition:: The title
- Check one
- Check two
You can then include some custom CSS markup within your reStructuredText file to target list items in admonitions:
.. raw:: html
<style>
.admonition ul { list-style-type: none; }
.admonition li:before { content: "\2610"; }
</style>
Here the CSS targets any list item element which is a child of any element with the class "admonition" and replaces the list item bullet points with simulated check boxes using the Unicode Ballot box character, ☐.
Docutils applies an additional class to generic admonitions which is a concatenation of "admonition" and the admonition title. So in the above example we could be more specific with the element we target with the CSS rule:
.admonition-the-title ul { /* ... */ }
This could be used to target a single admonition within your document.
Credit goes to these two answers to the SO question How to create a checklist in reStructuredText (reST)?
Obviously the above targets HTML output. However, I have not used rst2pdf, so can't comment on how the above needs to be modified to work with this program. Hopefully someone else will provide an answer to this. As far as I know, rst2pdf does support a cascading stylesheet mechanism, so it should be straightforward (for someone who knows rst2pdf style sheet syntax) to add an additional .. raw:: pdf role and to modify the above list styles.

Ignore previous css definitions

I'm developing an add-on for an existing CMS system. My add-on outputs a link to a style sheet and then outputs a table. The rest of the content(header,left column, footer etc.) is provided by the CMS.
Previously linked CSS styles seems to effect the way my table is displayed. I want to avoid this. I want my table to be shown according to my CSS style. How can I this?
You can add the !important declaration to your style:
table thead th
{
color: #ff0000 !important;
}
Your column headings should have red text now, even if another color has been previously set through another style.
There are only two options:
1) Put the table and its stylesheet in an iframe. Since it is a separate webpage entirely, it won't be affected by stylesheets on the parent webpage.
2) Fully specify the styles of all elements on your table. As long as you override everything the parent page might have specified, your table will look as you want it to.
do you mean a CSS reset? google that for thousands of results.

Resources