I'm pretty much a novice when it comes to coding, so your patience is greatly appreciated. Please forgive me if I haven't worded my question properly.
The website I'm working on uses Wordpress; it's a real estate website, so IDX Broker is tied into it (the Wordpress theme used is SiteOrigin Corp, and the Wordpress plugin used is IMPress for IDX Broker).
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 (https://gatewayrealtynp.idxbroker.com/idx/roster), but I can't get the CSS to work on the individual agent pages/bios.
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: https://gatewayrealtynp.idxbroker.com/idx/agent/143971/hope-richardson?agentHeaderID=143971
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. I have searched IDX Broker's knowledgebase and their tutorials, with no luck since they don't do anything with custom CSS. Additionally, I have spent days searching the internet, looking for a solution, including W3schools.
This is the custom CSS that was used on the Roster page, in regards to #1 above:
/* 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:
<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!
Looks like you might need
span.IDX-agentInfo__title { display: none; }To remove the Cell Phone: and Office Phone:.
For expanding I would just add some JS to remove the class.
var element = document.getElementById("IDX-agentbio"); element.classList.remove("IDX-agentbio__collapse");Since it's IDX pages I would add these in the account in the Custom CSS and Sub header respectively.