I've problems related to how-to-separate-apostrophe-syles-from-the-front-end-template.
How can I style <a>-tags without breaking the Admin UI?
Do I have to give each <a> in my own widgets a style-class <a class="mystyle">?
What's the way to style the links of the provided richtext-widget?
Do I have to use .apos-rich-text a to stop changing the admin-control ui of the widget?
Because the following breaks the Admin UI.
.custom-main-container a:hover {
color: #ffffff !important;
}
The menus texts become white on hover and can't be read.
What's the way to handle the styling and to be sure you don't oversee anything?!
The Apostrophe dev team typically stays away from styling at the element level for exactly this reason, however CKEditor doesn't allow you to apply classes on links easily.
An easy and tight way to scope styles to the a element and not interfere with Apostrophe's admin UI is to add a project level class to the rich text widget wrapper.
In your project level /lib/modules/apostrophe-rich-text-widgets/views/widget.html
<div data-rich-text class="apos-rich-text MY-RICH-TEXT">{{ data.widget.content | safe }}</div>
Then in your CSS you can write
.MY-RICH-TEXT a:hover { //whatever }
Be sure to leave data-rich-text in the wrapper, Apostrophe is using that attribute to enhance the widget on the front-end.
My shame... the problem is the !important above.
This makes the specificity too high. Somehow I didn't get this too my mind before.
Although it would be great if the admin UI would get more specificity so that it is not so easy to overwrite its rules by 2 class-selectors.
Related
I'm migrating my site from Bootstrap to Tailwind 3 and, in the process, built-in solutions (Dropdown, Tabs, Accordion...) needed to be replaced with alternatives. The section I'm working on right now is a custom Comments Editor I created.
I'll leave a link to what Tailwind's Playground generated for me in a CodePen because the code is longer than the maximum number of allowed characters here. The decision to create a Pen is only because in the Playground it doesn't work as the anchors open in new windows/tabs.
Anyway, the code that really matters, what makes the tabs work, is this one:
[data-target] {
scroll-margin-top: 10rem;
}
[data-target]:last-of-type + [role="tabpanel"], :target + [role="tabpanel"]{
display: flex;
}
[role="tabpanel"], :target ~ [data-target]:last-of-type + [role="tabpanel"]{
display: none;
}
As the title says, I'm looking for a way to change the background-color of the tabs, hinting to the User which one is currently active.
To accomplish that, I would need to switch Tailwind's bg-color-0 with bg-color-100 and take border-b-color-0 out of the once active tab and give it to the new one. But I don't know if I can do that only with CSS.
Not add/remove the classes per se, only their corresponding styles
I've seen a lot of implementations of Pure CSS Tabs, and all of them used hidden <input> fields. Though this implementation doesn't use them, I've added and named them accordingly, but I could only target them with CSS if the User clicked exactly where they're positioned (top-left of the tabs) instead of any part of them.
I'm aware I'll eventually have to add JS to switch the ARIA attributes, but is the basic functionality possible to be accomplished with CSS only? If not, is there an alternative implementation with which I could?
Thank you for your time :)
I am working on a website, https://wordpress-625707-2032312.cloudwaysapps.com/, with the WP Shopify Plugin, and trying to change the default button colors. I have gone into dev tools and found the div class to change the button background. I can clearly see it's labeled as "wps-btn wps-btn-secondary wps-add-to-cart css-7k7g1c-buttonCSS-addToCartCSS-AddButton"
But when I use this class for my css changes, it doesn't work. The change is "wps-btn wps-btn-secondary wps-add-to-cart css-7k7g1c-buttonCSS-addToCartCSS-AddButton {
background-color: #D71614 !important;
}"
Why is this not working?? I can't attach screenshots since I'm too new on here...sorry!
Actually you are pretty lost here.
This is not actually a class:
wps-btn wps-btn-secondary wps-add-to-cart css-7k7g1c-buttonCSS-addToCartCSS-AddButton
There are 4 classes there, separated by spaces. The last one is actually unique for the first button. And in css, when you are styling a class, you should start with a dot, like: .class-name
The code you are looking for is:
.wps-btn.wps-btn-secondary.wps-add-to-cart {
background: red;
}
We concatenate 3 classes here with dots and NO spaces.
You should take a look at CSS Selectors:
https://www.w3schools.com/cssref/css_selectors.asp
I have created a UI (for wordpress plugin) in which I give user choice to add text, image, and video in a div ( lets call this div, container).
I have been working on it for a quite sometime. I recently added tinyMCE (WYSIWYG editor) to add text inside container.
Now, I realized that I did a big mistake. The text user writes is being overridden by css rules defined for wp admin panel.
for example,
User enters <h1>Hello</h1> (with the help of tinyMCE), and then I grab that content from tinyMCE and append that in the container.
But here the problem arises, wordpress's admin css can have css rule like this,
h1 {
color : #d6d6d6;
line-height: 40px;
font-size: 30px;
}
So, it looks different in tinyMCE and in my container. (as tinyMCE's code is inside iframe and that remains unaffected by wordpress's css rules, but my container doesnt)
I want something so that any element inside container remains unaffected by wordpress's admin css.
I know a good solution would be putting container inside iframe. But I have written a lot of code without thinking of an iframe and I would need 3-4 days just to adjust everything for iframe. There may be some cross browser issues.
I can reset some wordpress rules, but it will fail sometimes, as user may enter anything. I need something fullproof.
well if you want to undo a specific rule (say the h1 rule you mentioned) you can use css to override it by being more specific.
.container h1 {
color:#000000;
line-height: 24px;
font-size: 24px;
}
This will overwrite the css rule you mentioned with the given values but only when the element is inside the container class, (I'm guessing at the default values you want to use.)
Unfortunately you would have to add in an undo rule for everything that wordpress's admin css changes.
Another possible solution is to edit the page tinyMCE returns in it's frame to add in wordpress's CSS file. This means the end user will see the same formatting when they enter the information as when it gets posted.
Do you have code-level access to the iframe contents tinyMCE creates?
Use !important in your CSS document. This way your CSS will not be overridden as it takes precence over everything, including inline styles.
h1 {
color:#ff0 !important;
}
I am building a jQuery UI site. I can see how easy it is to add widgets or dialogs and also I have seen it is possible to style elements using the theming api:
http://jqueryui.com/docs/Theming/API
So how do I style things like normal text or html headers 1-3 or html tables?
I would like to use the classes and styles from jQuery UI so everything fits together and changes when I change the theme.
I have tried to apply ui-widget-content or ui-widget-header to divs or h1,h2, but maybe there is a better way, or an in depth tutorial somewhere.
I usually detect the class of the theme I want to customize, and then instead of changing directly in the jquery css, (because I prefer to have udner control my changes, and ebcuase if I update the theme, don't need to add the changes again) , I add these modified classes in an "override" block or how you want to name it, so that are same classes, but with an important;! or other hierarchy trick added. For instance, calling the parent ID to give it more weight: #content .ui-widget-content {whatever} , or .ui-widget-content {whatever property:whatever value !important;}
Is usually some small bits, never a large portion of things that I want to customize, so adding these 2 or 3 classes in my main.css does not hurt. It depends, though.
edit: Oh... with "oder" you meant "order". Sorry, was not understanding well your question (is a bit unclear).
If you are not supporting IE7, you might be interested in using:
tr:nth-child(even) {background: #fff}
tr:nth-child(odd) {background: #000}
I'm currently developing a widget that can be embedded within a page. However, when embedded, it affects the style (font, text, layout, etc.) of the page it is embedded in.
I wonder how Clearspring and other widget frameworks encapsulate their widgets so as not to affect the embedding page.
Thanks.
Make your widget, say under one div with a unique Id (or class if there will be multiple) that is least likely to clash with others on the host page. A good example might be #company-widjet-name. See how jQuery UI does it (.ui-widget input).
Then you might need to perform a sort of localised reset, to avoid the parent page's CSS from stuffing up your design. Modify something like Eric Meyer's reset to suit. Please avoid the #uniqueId * { padding: 0, margin: 0 } as it can cause headaches.
As long as you do
#uniqueId a {
property: value;
}
The specificity should be strong enough to style the elements correctly without letting the host page's CSS from changing it unintentionally.