Menu
Community /Pin to ProfileBookmark
CSS Not Working
I’m pretty much a novice when it comes to coding, so your patience is greatly appreciated. The website I’m working on uses WordPress; it’s a real estate website, so IDX Broker is tied into it (there is a plugin that is used in WordPress). IDX Broker pulls in the MLS data for the company, and is also where we can set up specific sub-headers for some of the pages, as well as write custom CSS.
IDX Broker is where I’m running into problems with the CSS – I’ve created a “test” agent profile in IDX Broker, and I’m trying to do the following things:
1) Change the labels for “Office Phone: ” and “Cell Phone: ” to display as “O: ” and “C: “, respectively. Custom CSS was written for the ‘main’ Roster page that shows all of the agents (
2) Remove the “Expand/Collapse” option on the individual agent page so that all of the text in the bio displays as soon as you click on the individual. The CSS for this was working a few days ago, but suddenly quit working. A ‘live’ example of this is Sheri Bourne. My “test” profile is this:
I would like to note that I have inspected the live pages of the website, and tried to make sure that I was using the correct class tags/attributes.
This is the custom CSS that was used on the Roster page, in regards to #1 above:
[code]
/* Remove Blank Left Column */
.site-main {
margin: 0px !important;
}
/* Change “Cell Phone: ” */
.IDX-roster-agentCellPhone .IDX-rosterLabel {
display: none;
}
.IDX-roster-agentCellPhone::before {
content: “C: “;
}
/* Change “Office Phone: ” */
.IDX-roster-agentOfficePhone .IDX-rosterLabel {
display: none;
}
.IDX-roster-agentOfficePhone::before {
content: “O: “;
}
/* Smaller Display Name */
.IDX-rosterDisplayName {
font-size: 0.8em;
}
/* Smaller Email or wrap if needed */
.IDX-rosterAgentEmailLink {
word-wrap: break-word;
}
.IDX-rosterAgentEmailLink a,
.IDX-rosterStaffEmailLink a {
font-size: 0.7em;
}
/* Less padding around Agents */
.IDX-rosterAgentWrap {
padding-left: 5px !important;
padding-right: 5px !important;
}
/* Less padding for agent’s text */
.IDX-row ul {
margin: 0 0 27px 0px;
}
.IDX-wrapper-standard .IDX-nav > li > a {
padding: 0 !important;
}
.IDX-wrapper-standard .IDX-actionLinks > li > a > i {
margin-right: 0;
}
This is the CSS & HTML I wrote to try to address both 1 & 2 above:
[code]
<style>
}
div#IDX-bio-collapse {
display: none !important;
}
}
div#IDX-bioExpand {
display: none !important;
}
/* Change “Cell Phone: ” */
.IDX-agentCellPhone .IDX-agentInfo {
display: none;
}
.IDX-agentCellPhone::before {
content: “C: “;
}
/* Change “Office Phone: ” */
.IDX-agentOfficePhone .IDX-agentInfo {
display: none;
}
.IDX-agentOfficePhone::before {
content: “O: “;
}
ul.bottomnav {
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
align-items: center;
justify-content: center;
overflow: hidden;
background-color: #ffffff;
}
ul.bottomnav li a {
float: left;
position: relative;
display: inline-block;
width: fit-content;
color: #000000;
font-family: Verdana, Arial, sans-serif;
font-size: 16px;
font-style: bold;
margin: 0;
padding: 20px 20px;
text-decoration: none;
}
ul.bottomnav li a:hover:not(.active) {background-color: #ffe4e1;}
ul.bottomnav li a.active {background-color: #ffffff;}
ul.bottomnav li.center {float: center;}
@media screen and (max-width: 600px){
ul.bottomnav li.left,
ul.bottomnav li {float: none;}
</style>
<body>
<p style=”text-align: left;”>This is a test profile. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla pharetra diam sit amet nisl suscipit adipiscing bibendum.</p>
<p style=”text-align: left;”>Sit amet purus gravida quis blandit turpis cursus in hac. Scelerisque eu ultrices vitae auctor. Sem fringilla ut morbi tincidunt augue interdum velit euismod. Sed libero enim sed faucibus. Nulla aliquet enim tortor at auctor urna nunc. Varius vel pharetra vel turpis nunc eget lorem dolor sed. Et netus et malesuada fames. Sed enim ut sem viverra aliquet eget sit. Sollicitudin ac orci phasellus egestas tellus rutrum tellus pellentesque eu. Lobortis scelerisque fermentum dui faucibus in.</p>
<ul class=”bottomnav”>
<li><a href=”https://gatewayrealtynp.com/buy//”>Buy Your Dream Home</a></li>
<li><a href=”https://gatewayrealtynp.com/sell/”>Sell Your Home</a></li>
<li><a href=”https://visitnorthplatte.com/” target=”_blank”>About North Platte</a></li>
</ul>
<p style=”text-align: left; font-family: Verdana, Arial, sans-serif; font-style: italic; font-size: 12px;”>When we decided to move to North Platte, we didn’t have a Realtor, so we just picked JoAnn out of the clear blue sky. She was a great find! We were very pleased with the service we received from JoAnn. We found our retirement home in a fantastic neighborhood where we have such good neighbors. I would recommend JoAnn to anyone needing any Real Estate assistance, she will go the distance for you.<p/>
<p style=”text-align: left; font-family: Verdana, Arial, sans-serif; font-style: bold; font-size: 12px;”>- Tim & Cindy Bundy</p>
<p style=”text-align: left; font-family: Verdana, Arial, sans-serif; font-style: italic; font-size: 12px;”>Jodi is a true rockstar at her job with a genuine passion for helping people find the home of their dreams! She has helped us find 2 homes now with zero hassle. Jodi makes buying a house easier than buying a gallon of milk from Walmart.</p>
<p style=”text-align: left; font-family: Verdana, Arial, sans-serif; font-style: bold; font-size: 12px;”>- Eric Moeller</p>
</body>
Any help/direction would be greatly appreciated!
Sign in
to post a comment