Custom CSS being ignored

  • Resolved nathanzachary

    (@nathanzachary)


    7 months, 2 weeks ago

    Hello,

    I’m trying to modify the widget display CSS, but it seems to be ignored. My goals are: 1) remove the image max width and height properties; 2) remove the rounded borders; 3) insert a carriage return between the image and the quote; 4) remove the dashicon before the author.

    I have added the following Custom CSS:

    /* Quotes widget modifications */
.quotes-llama-widget-random img {
	max-width: 250px;
	max-height: 250px;
	border-radius: 0px;
}

.dashicons:before, .dashicons-edit:before {
	content: '';
}

    The only part that seems to work is the removal of the dashicon. The image properties seem to be ignored (or overridden by the plugin settings).

    Thank you in advance for any advice.

    Cheers,
    Nathan Zachary

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author oooorgle

    (@oooorgle)

    Hi Nathan,

    There are some JavaScript styles that are applied and I believe the Widget is one. Those are in the quotes_llama.js file (search for “quotes-llama-widget-random img” and “quotes_llama_css_image_at_top”). I’ll make a note to review how that’s implemented. It’s been a while..

    You could try using the css important property perhaps?

    https://www.w3schools.com/css/css_important.asp

    • This reply was modified 7 months, 1 week ago by oooorgle.
    Thread Starter nathanzachary

    (@nathanzachary)

    Hello,

    Thank you very much for your response. It’s certainly not an urgent problem. For now, I have manually overwritten the settings in quotes-llama-widget.css:

    .quotes-llama-widget-random img {
	/* Changed width and height from 150px, border-radius from 5px; */
	max-width: 250px;
	max-height: 250px;
	margin-right: 10px;
	margin-bottom: 10px;
	border-radius: 0px;
	box-shadow: 3px 5px 6px 0px rgba(0,0,0,0.45);
	float: left;
}

    It’s not the best solution, but it has worked for now. ??

    Thanks again for your response, and I hope you have a great week!

    Cheers,

    Nathan Zachary

    Plugin Author oooorgle

    (@oooorgle)

    Hi nathanzachary,

    A friendly FYI, when you update WordPress plugins it overwrites any changes made to the plugin files themselves. So you would see your edits disappear after an update. If you get time, try the “!important” property in the custom CSS and see if that does the trick. That would be a permanent solution if it works.

    /* Quotes widget modifications */
.quotes-llama-widget-random img {
	max-width: 250px !important;
	max-height: 250px !important;
	border-radius: 0px !important;
}
    Thread Starter nathanzachary

    (@nathanzachary)

    Hello,

    Thank you for the suggestion of using the ‘!important’ property in my custom CSS. That appears to have fixed the problem, and now I won’t have to worry about updating the plugin. ??

    Thanks again for your help, and have a nice rest of your week.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Custom CSS being ignored’ is closed to new replies.