Request: Take out !important from all CSS

Resolved Noah Hearle
(@designextreme)

3 years, 10 months ago
Hello,

Please can you take out all !important CSS as I want to implement my own design choices and this forces me to use the plugin’s styling.

I have included an example in the post – where I removed this from the CSS so that I can apply my own styling.

I recommend something like this to make it responsive across window sizes:
```
.row.ufg-gallery {
	gap: 1.4rem;
	margin-inline: 0;
}
.row.ufg-gallery > * {
	flex: 1 0 164px;
	max-width: 300px;
	padding: 0;
	margin-block: 0;
	margin-inline: 0;
}
```
This will adapt more easily to various sizes and adjust the number of columns to fit.

I am posting this because I know that any future updates will overwrite my changes and I’d like to be able to continue using your plugin going forward rather than making my own.

The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

Plugin Author FARAZFRANK
(@farazfrank)

3 years, 10 months ago

Let us know which CSS file you modified.
Thread Starter Noah Hearle
(@designextreme)

3 years, 10 months ago
I modified these files:
1. ./admin/assets/bootstrap-4.6.0/css/ufg-bootstrap-frontend-min.css
2. ./admin/assets/bootstrap-4.6.0/css/bootstrap.css
3. ./shortcode.php
The last edit was to take out the <style> block from the HTML output. This meant I could apply my own styling more easily (because there is no “use page default” styling otherwise).
Plugin Author A WP Life
(@awordpresslife)

3 years, 10 months ago

Can you send us a complete modification with instructions?

We will also apply the same.

Thanks
Thread Starter Noah Hearle
(@designextreme)

3 years, 10 months ago
@awordpresslife Thanks for getting in touch… all my changes were just for me and will be overwritten when the next update occurs, so it isn’t a long-term fix (unless the developer makes their own changes).
1. I did a search and replace of all files containing the !important CSS and removed the !important part.
2. I looked for <style> in the shortcode.php file and commented this out.
3. I added my own CSS in the Child theme’s style sheet (so, I put it somewhere it would load up) – see below
This is the CSS that I’ve used. Please replace .x-row with any parent class or ID – this will make the CSS more relevant than the CSS provided within the plugin and means it appears correctly. The variables in there will also need to be set to whatever you want – this just refers to my design’s colour palette.
```
.x-row .row.ufg-gallery {
	gap: 1.4rem;
	margin-inline: 0;
}
.x-row .row.ufg-gallery > * {
	flex: 1 0 164px;
	max-width: 290px;
	padding: 0;
	margin-block: 0;
	margin-inline: 0;
}
.x-row .btn-primary,
.x-row .btn-danger,
.x-row .btn.btn-sm.btn-primary {
	font-weight: 600;
	color: var(--background);
	background-color: var(--highlight);
	border: 0 none;
	box-shadow: none;
}
.x-row .btn-primary.active,
.x-row .btn-primary:hover,
.x-row .btn-danger:hover,
.x-row .btn-primary:not(:disabled):not(.disabled).active,
.x-row .btn-primary:not(:disabled):not(.disabled):active,
.x-row .show > .btn-primary.dropdown-toggle {
	background-color: var(--highlight-light);
	box-shadow: none;
}
.x-row .btn-primary.focus,
.x-row .btn-primary:focus,
.x-row .btn-primary:active,
.x-row .btn-primary:focus:active {
	box-shadow: none;
}
.x-row .ufg-all-filter-button,
.x-row .ufg-parent-filter-button,
.x-row .ufg-level-one-button {
	color: var(--background);
	background-color: var(--link);
}
.x-row .ufg-thumbnail-border {
	border: 0 none;
	border-radius: 0;
}
.x-row .ufg-image-title {
	font-size: 0.85rem;
	background-color: transparent;
	margin-block: 0.3rem;
}
.x-row .ufg-lightbox {
	display: block;
	overflow: hidden;
	min-height: 1.5rem;
	max-height: 120px;
	box-shadow: 0 0 0 3px var(--highlight-light-background);
	border-radius: 4px;
}
```
Change this rule: .row.ufg-gallery > * to alter the size of the thumbnails. It will work quite well at all resolutions.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Request: Take out !important from all CSS’ is closed to new replies.