Feature List Settings

pavanzato · July 2022

Hello,

Is there a way to turn off the highlight or change the colour of the hover while using the Feature List?

The previous web builder created a large list of items using WP Bakery Feature list

He isn't working here anymore and now the client has asked that I turn off any type of hovering when mouse over this list.

I don't see a way to add a CSS tag in this editor, perhaps you might know a way to modify it in the content section?

pavanzato · July 2022

This is the Feature list - when hovering over any item on this list it highlights by reversing this item area. If I can turn it off or just change the color to white without reversing it perhaps it will look like its not doing anything during a mouse over.

Phil · July 2022

Hi,

Please always attach a link to your website so we can check it out. If the page is offline(localhost), then our help will be limited. You will have to contact us when the page is online. Also, please make sure that the page is not under maintenance before you provide us with the link.

Thanks

pavanzato · July 2022

oooopss

Please let me know if you can see this, sometimes the staging is blocked, this site is under development.

https://advantagetitlewp.wpcomstaging.com/national-commercial-title-insurance-2/

Phil · July 2022

You can try to use the following CSS code:

.feature_list ul li:hover,
.feature_list ul li:hover .icon i{
   background: unset!important;
   color: unset!important;
}

Thanks

pavanzato · July 2022

Hey Phil!

Thanks I will try this today!

Phill

pavanzato · July 2022

Thanks again Phil....

It worked perfectly!!

Phil · July 2022

I am happy I could help. ?

Best regards

pavanzato · October 2022

Hello,

I'm trying to force bullet points to be triangles using CSS but when I write it into the editor and save it I have both the default circle and my triangle bullet, is there a way to stop the circle from showing up?

I did find another triangle bullet point -

this example works in HTML on short lists of items - Single family residences

but when I use it on longer list items it will not indent correctly.

Here's my CSS code for triangle shaped bullets -

/* Triangle Bullets */

ul,

ol {

margin: 0.75em 0;

padding: 0 1em;

list-style: none;

}

ul li::before {

content: "";

border-color: transparent #111;

border-style: solid;

border-width: 0.35em 0 0.35em 0.45em;

display: block;

height: 0;

width: 0;

left: -1em;

top: 0.9em;

position: relative;

}

ol li::marker {

content: "▶";

}

perhaps there is a better way of doing this?

Thanks

pavanzato · October 2022

As It turns out, after a few months, they didn't like the feature list element anyway... so now I'm trying to do it in a text block with a standard bullet list.

Phil · October 2022

I can see that you handle it.

Do you still need help with that?

Best regards

pavanzato · October 2022

wow, That does look correct but unfortunately that is not the newest updated page. I've made several changes requested by my supervisor. The issue was the bullets would not indent correctly when a list item was too long.... please check out the newer version, is there a way for force a browser to use the newest version? I guess it's a cached version of the site.

There are a line items that are longer than my margins can handle so when using the alternate method of forcing a triangle as a bullet point it does not indent correctly -

image 1 has the correct indents but I can see it is overlaying the triangle on the standard round bullet point written as a <ul> list in HTML

<ul>

<li>Development and redevelopment transactions</li>

<li>Development rights</li>

<li>Golf courses and recreational facilities</li>

<li>Hotels, office, industrial and special use properties</li>

<li>Industrial Development Agency (IDA) financing</li>

<li>Leasehold transactions</li>

<li>Mezzanine financing</li>

</ul>

image 2 has good triangle bullet points but when the line is too long the indents are not being handled correctly by my HTML code:

Development and redevelopment transactions

Development rights

Golf courses and recreational facilities

Hotels, office, industrial and special use properties

Industrial Development Agency (IDA) financing

Leasehold transactions

Mezzanine financing

Perhaps what I should be asking is how do I get better control of margins and paddings on these three columns, what settings are you using in Chrome INSPECT - if I can somehow see the adjusted columns I can apply the correct margins or paddings.

WPBakery's alignment tools are not that intuitive, I would've been better off learning how to use BeBuilder but I don't think I can redo the entire site with it.

Phil · October 2022

Can you send me a link to the page where the list has overlaying effect, please?

I will look at it and see what I can suggest because I think correcting it will be easier than adjusting your second structure.

And yes, recreating a whole website with BeBuilder might be time-consuming, but I suggest using it with your next project. I might sound biased, but in my opinion, BeBuilder is much better than WPB. ?

Best regards

pavanzato · October 2022

Yes,

I was handed a project that was already in progress, so I had to use what was already built.

Here's the page.

https://advantagetitlewp.wpcomstaging.com/national-commercial-title-insurance-4/

I'm just thankful they have allowed me to take on this project without having any HTML or CSS background, it's certainly been fun to work with. Once you taught me how to identify or create classes, I made some global line-height adjusting commands that allow me to make changes on all pages with one command.

Phil · October 2022

Please, try the following CSS code:

ul,
ol{
 list-style: none!important;
}
ol li::marker,
ul li::marker {
 content: "▶ "!important;
 font-size: 11px!important;
}

I am always happy to I can help you. ?

Best regards

pavanzato · October 2022

WOW... that worked!

How was I getting that circle to stay?... it was driving me crazy!

I just need to put a space next to the triangle arrow so it matches my other page:

perhaps adding padding?

https://advantagetitlewp.wpcomstaging.com/residential-title-insurance-3/

thanks again Phil you are a life saver!

Phill (I'm double LL Phill)

Phil · October 2022

The easiest way is that you can add space after the triangle, like this:

ul li::marker {
 content: "▶  "!important;
 font-size: 11px!important;
}

or:

ul li::marker {
 content: "▶     "!important;
 font-size: 11px!important;
}

Best regards

pavanzato · October 2022

Digging deeper into the CSS world, I'm trying to adjust indents on forms, I hope this isn't beyond the scope of support but you have taught me so much about using Chrome Inspect it has opened up a whole new world for me. I've been able to make some changes that I would never have attempted.

is there a way to force this indent?

tracking down the div class - div.wpforms-container-full .wpforms-form .wpforms-field.wpforms-field-checkbox ul li .wpforms-field-label-inline

Trying to find a balance between the Theme options and CSS adjustments.

thanks

please let me know if I'm out of control here...

Phil · October 2022

Can you send a link to this page, please?

I will take a look if I can suggest you something.

Best regards

pavanzato · October 2022

ooopss..... I realised that I should have included the link on the way home from the office too...

https://advantagetitlewp.wpcomstaging.com/acris-2/

Also, I'm using FIXED mode in the BeTheme Theme options, but now I'm being asked if it is possible to have a FIXED submenu?

https://advantagetitlewp.wpcomstaging.com/

I've created custom sub-menus that change according to each of the three categories: (Company - Services - Resources)

any suggestions would be greatly appreciated!

Phil · October 2022

1) I am afraid that I am not able to help you with that. I do not see anything that could be done to achieve this indent. You can try contacting the plugin author if they can suggest you something about it.

2) To accomplish that you need to use the Header Builder.

Please, check the following video tutorial about it:

https://support.muffingroup.com/video-tutorials/header-builder-2-0/

Best regards

pavanzato · December 2022

The CSS for triangle Bullet points works great, unfortunately it is invading some of my other pages where I don't want them on a WPFoms page.

Is there any way to specify ul /li to only the pages where I need them?

https://advantagetitlewp.wpcomstaging.com/info-search-2/

In this case I've duplicated the page where it allows me to keep the form wrappers consistent, however here we have the triangle bullets.

the really odd thing here is that it works fine on another page

https://advantagetitlewp.wpcomstaging.com/order-an-informational-search-2/

But in this case I am unable to match both forms by making the form wrappers width 80%, it works perfectly on the

https://advantagetitlewp.wpcomstaging.com/insured-title-search-2/ page

but refuses to obey the exact same setting on the original Informational search page.

Any ideas would be very helpful

Phil · December 2022

At the beginning of your CSS code, you can put your class and later use it in the places where you need the triangle markers.

.trianlgeMarkers ul li::marker {
 content: "▶     "!important;
 font-size: 11px!important;
}

Best regards

pavanzato · December 2022

Hi Phil

Thanks,

OK, I thought about that on the way home last night,

I had already defined those blocks with another CSS class so I could control the line height

Can I just include the line height adjustment along with the .triangleMarkers class?

pavanzato · December 2022

Thanks! Phil

worked great... just needed to delete some of my older attempts at the triangle markers, I had leftovers in my CSS -

Phil · December 2022

https://forum.muffingroup.com/betheme/discussion/comment/225824#Comment_225824

So did you handle this part?

Is everything fine?

Best regards

pavanzato · December 2022

Yes... all good, thank you for your help... you have saved my neck several times!!

Feature List Settings

Comments