I cannot remove default background

Asked

Viewed 61 times

1

Next guys, I’m using a wordpress plugin to organize the menu dishes of the restaurant, this: (food-and-drink-menu - url: https://br.wordpress.org/plugins/food-and-drink-menu/)

All right, let’s go! The plugin settings are quite simple and by default it adds a light pink background as follows the image: (http://prntscr.com/k24wzm). But, the bottom of the site is another, I want to remove this background, I tried several ways and could not, because in ". css" it is not. How do I fix it ?

/**
 * CSS Stylesheet for the front-end interface for Food and Drink Menu
 *
 * @package Food and Drink Menu
 */

.fdm-menu.clearfix,
.fdm-menu .clearfix {
	clear: both;
}

.fdm-menu,
.fdm-section {
	margin: 0;
	padding: 0;
}
.fdm-menu,
.fdm-menu>li,
.fdm-section,
.fdm-section>li {
	list-style: none;
}
.fdm-columns-2 .fdm-column {
	width: 47%;
	float: left;
}
.fdm-menu .fdm-column {
	margin: 0 3% 0 0;
}
.fdm-columns-1  .fdm-column {
	margin-right: 0;
}
.fdm-columns-2 .fdm-column-last {
	float: right;
	margin: 0 0 0 3%;
}
.fdm-section-header {
	border-bottom: 2px solid #777;
}
.fdm-section-header,
.fdm-section-header h3,
.fdm-section-header p,
.fdm-item-panel,
.fdm-item-panel p {
	margin: 0;
	margin-bottom: 1em;
}
.fdm-section-header h3 {
	margin-bottom: 0.5em;
}
.fdm-item {
	margin-bottom: 2em;
}
.fdm-item-panel {
	position: relative;
}
.fdm-item-panel p {
	margin: 0;
	margin-bottom: 0.5em;
}
.fdm-item-panel .fdm-item-title {
	font-weight: bold;
}
.fdm-item-has-image .fdm-item-panel p  {
	padding-left: 35%;
}
.fdm-item-image {
	float: left;
	width: 33%;
	height: auto;
}
.fdm-item-has-price .fdm-item-panel p {
	padding-right: 20%;
}
.fdm-item-price-wrapper {
	position: absolute;
	width: 20%;
	text-align: right;
	top: 0;
	right: 0;
	white-space: nowrap;
}
.fdm-menu-footer {
	font-size: 85%;
	font-style: italic;
}

/**
 * This media query is pegged to Bootstrap 3's breakpoint
 *
 * Edit the max-width to match your responsive site's collapsed columns
 * breakpoint
 ********************************************************/
@media (max-width: 991px) {

	 .fdm-columns-2 .fdm-column {
		width: 100%;
		float: none;
		margin: 0;
	}

}

/**
 * Fully vertical layout for very small screens
 **********************************************/
@media (max-width: 450px) {

	.fdm-item-image {
		width: 100%;
		float: none;
		margin-bottom: 2em;
	}
	.fdm-item-has-image .fdm-item-panel p,
	.fdm-item-has-price .fdm-item-panel p {
		padding: 0;
	}
	.fdm-item-price-wrapper {
		text-align: left;
		white-space: normal;
		position: relative;
		margin-bottom: 1em;
		width: 100%;
	}

}

css3 wordpress twitter-bootstrap bootstrap-3 less

  • Dude you have a project link? In the plugin documentation images does not appear this background pink no, it is coming from elsewhere....

  • Do you speak of my site or its project ? If you want I’ll pass the link of the site: http://cantinafratello.com.br/index.php/cardapio/ look there!

2 answers

1


Your problem is that in linha 173 of your style.css has this style that this leaving the background pink.

.content-page ul {
    background: #FFD1D1; /* aqui vc coloca a cor que quiser */
    margin-left: 10px;
    color: #900;
}

If you can’t change this color, create a new css rule and include UL in the div .content-page

Type:

.content-page ul.cor {
    background: #minha cor aqui!
    margin-left: 10px;
    color: #900;
}

  • Hello, Hugo I took the test on localhost and it worked... But, I will investigate if this will not affect other classes, or I will create another class as Voce informed... Thanks already helped a lot!

  • @Demetriusreis good that it already worked on localhost, check if the color will not change elsewhere and if change create the new class and add in UL you need that there is no error. Test well and if you solve the problem consider marking an answer as accepted , so the question is not pending on the site as Accepted Question without Answer. Good luck with the project.

  • 1

    Done! Thanks again for the tips!

0

Can use !important to overwrite the background priorities. https://zenorocha.com/css-important/

Check the browser developer screen (inspect element) which element is applying the background and overwrite it.

Browser other questions tagged css3 wordpress twitter-bootstrap bootstrap-3 less

You are not signed in. Login or sign up in order to post.