Пользовательский CSS для агентской биографии в IDX Broker
Я довольно новичок, когда дело доходит до кодирования, поэтому ваше терпение очень ценится. Пожалуйста, прости меня, если я не сформулировал свой вопрос должным образом.
Сайт, над которым я работаю, использует Wordpress; это сайт по недвижимости, поэтому IDX Broker привязан к нему (используемая тема Wordpress - SiteOrigin Corp, а используемый плагин Wordpress - IMPress для IDX Broker).
IDX Broker - это то место, где у меня возникают проблемы с CSS - я создал "тестовый" профиль агента в IDX Broker и пытаюсь сделать следующее:
1) Измените метки для "Офисный телефон: " и "Сотовый телефон: ", чтобы они отображались как "O: " и "C: " соответственно. Пользовательский CSS был написан для основной страницы реестра, на которой показаны все агенты ( https://gatewayrealtynp.idxbroker.com/idx/roster), но я не могу заставить CSS работать на отдельных страницах / биографиях агентов,
2) Удалите опцию "Развернуть / Свернуть" на странице отдельного агента, чтобы весь текст в биографии отображался, как только вы нажимаете на индивидуума. CSS для этого работал несколько дней назад, но внезапно перестал работать. "Живым" примером этого является Шери Борн. Мой "тестовый" профиль такой: https://gatewayrealtynp.idxbroker.com/idx/agent/143971/hope-richardson?agentHeaderID=143971
Я хотел бы отметить, что я проверил живые страницы веб-сайта и попытался убедиться, что я использовал правильные теги / атрибуты класса. Я искал базу знаний IDX Broker и их учебные пособия, но не повезло, поскольку они ничего не делают с пользовательским CSS. Кроме того, я потратил несколько дней на поиск в Интернете, в поисках решения, в том числе W3schools.
Это пользовательский CSS, который использовался на странице реестра, в отношении #1 выше:
/* 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;
}
Это CSS и HTML, которые я написал, чтобы попытаться обратиться к 1 и 2 выше:
<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>
Любая помощь / направление будет принята с благодарностью!
1 ответ
Похоже, вам может понадобиться
span.IDX-agentInfo__title {
display: none;
}
Чтобы удалить сотовый телефон: и офисный телефон:.
Для расширения я бы просто добавил JS для удаления класса.
var element = document.getElementById("IDX-agentbio");
element.classList.remove("IDX-agentbio__collapse");
Так как это страницы IDX, я бы добавил их в аккаунт в заголовках Custom CSS и Sub соответственно.