Working on plone and am just getting experience with it. In my portlet I am currently editing a static text portlet to look like an RSS feed (so I can have some customization with my news items). I've gotten the format to work perfectly - with the exception of removing the underline from the hyperlink. I've tried using methods from all the different forums with CSS and HTML formatting...it's not working. Anyone able to help?
Use FireFox + FireBug to find which css property is used on portlet hyperlink.
Probably you wrote a property too general and one more specific is used.
Take a look:
....
<style>
.portlet a {text-decoration: underline;}
a {text-decoration: none;}
</style>
<div class="portlet">
1
</div>
....
Hyperlink will be underline because the first css property has a more specific "path".
Related
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 am using TinyCME html editor with the angular directive
and I render the output of the editor -which is data-bidden to property "description" in the scope- into a div using ng-html-bind.
<div ng-bind-html="description" ></div>
everything is working fine but I didn't get in the div what I see in the editor
especially when it comes to styling like the background color and text color
here is what I get in the editor
and here is what I get in the div
it sounds like all the styles applied in the editor will eventually be overwritten by the styles in the div context
I don't have any experience in CSS so please excuse my lack of knowledge
What I really want to do is to render the editor output in a div in a way exactly the way it looks in the editor any help?
I have solved the problem the issue comes from that the ng-bind-html strips out all the styling info comes from the editor that's why there is no styling info
to solve the problem we should use angularjs service $sec which tells the ng-bind-html not to strip out anything from the html string
so to use it in the angular expression we should make it as a filter
app.filter('trustAsHtml', ["$sce", function ($sce) { return $sce.trustAsHtml; } ] );
then you can use this filter in the binding expression like the following:
<div ng-bind-html="currentModel.description | trustAsHtml" ></div>
I am getting this strike through error over the content in my drupal website
please help me with this.
You may have a rogue CSS rule on your text.
.myclass {
text-decoration: line-through;
}
If you right-click on your page and hit inspect element you should be able to figure out where that is coming from. Or you could search for this in the css of your theme and alter it there.
the error was with my html , i had a typo instead of and that was creating the bad html.
Sorry for being a newbie but i really need your help.
Heres the problem: i have my main wordpress theme with woocommerce, everything works fine. The thing is: i have a secondary theme with another woocommerce style and i need to get this woocommerce css to my main theme.
How could i do this? Because even if i copy paste the .css file, i will still need the html class's from the other theme.
I dont know what to do anymore, i really apprecite any help.
Thanks and sorry, english is not my native language.
#edit
i forgot to say: i dont need all the woocommerce css, i just this the product view. Like this: https://image.ibb.co/kkPtEc/Sem_t_tulo.png
You can use:
https://es.wordpress.org/plugins/custom-css-js/
Use appropiate selectors to target the elements that you want and reach them with more precision to take priority over other css.
For example:
.elementor-745 .elementor-element.elementor-element-lueowvi .elementor-image-box-content .elementor-image-box-title {
color: #0351d8;
font-size: 27px;
font-weight: 500;
}
this is a css selector with it's properties and values (copied from a wordpress that i did some time ago)
if i want this text for being red instead of this kinda blue and change the font size, for example, i'll have to:
div.elementor-image-box-wrapper > div.elementor-image-box-content > h3.elementor-image-box-title {
color: red;
font-size: 30px;
}
Why i did this selector?
i know that this element is inside a div with elementor-image-box-content class, which is inside a div with elementor-image-box-wrapper.
Note that i also specified the html tag in css selector.
Why should it work?
the selector i set is more specific compared to the main theme one. So it will take priority when the css is rendered.
If you deal with id-based classes you'll need javascript (i recommend you to use jQuery as it's loaded by the theme or by some plugin almost always and will let you work faster an cleaner.
when i say id-based classes i mean those like:
<div class="product-id-25">
<!-- other code -->
</div>
<div class="product-id-26">
<!-- other code -->
</div>
You'll need to select product-id-* and make a for each loop to add the css through jQuery (for example)
HTML name#dmain.com works as normal in an MVC 3 View - except that the display is invisible - white text on a white background and if I mouse over it I see the e-mail address that's "displayed" isn't underlined.
So, I tried adapting George's answer at MailTo link in Razor to
`#helper EmailTextBox(string email, string title) {
#title
}
and
#EmailTextBox("name#domain.com", "name#domain.com") (both in a view)
and this also works - also generates an e-mail message with the e-mail address pre-populated like a normal HTML e-mail hyperlink - except that the display is still invisible - white text on a white background and if I mouse over it I see it also isn't underlined.
Applying a style to the containing tag doesn't work.
So, how can I apply a style to get the e-mail address to display (or is there perhaps some other method)?
Sounds like a css issue, try seeing what styles are applied to this tag (right click -> inspect element in Chrome, Firefox with the firebug extension, etc.)
You can always override the style being applied with something like
<style>
a {
color : black !important;
}
</style>
But it would be much better to find out what rule is causing the color in the first place.
EDIT
I have not worked with the razor view engine in MVC, always keep in mind that this is emitting html, anything you can do in html should be achivable. Make good use of Firebug or equivalent to view what html you are generating.
I would be very surprised if you could not do
`#helper EmailTextBox(string email, string title) {
<a class="email" href="mailto:#email">#title</a>
}
then
<style>
a.email {color:black;}
</style>
But it really sounds like you should make the rule turning links white much more narrow.