An update.
I was able to update enfold using the plug-in but when I clicked on go to themes page my screen showed white with an error message. All WP dashboard and functions were inaccessible but the website showed ok.
My hosting co helped by updating to PHP 7.2 which then allowed me to access the WP dashboard again.

So I then created the personal token in ENVATO. I tried two different ones inside enfold but both were rejected with the black box error message. Not sure what more I can do with that. Any ideas what could cause that ?
Thanks
Pete

Hi Rikard
Thanks so much for a clear and thorough reply.
I will hold off updating my Enfold theme for now.

I am still considering updating WP though, to version 5.XX onwards.

What issues am I likely to encounter with my current Enfold 4.4 installation when I update to the WP 5.XX with the Gutenberg Block-Based Editor.
Note that I am still happy to continue editing with the Enfold editor so I don’t expect to use the WP block editor.

Look forward to any advice or links you can offer.

Thanks and best regards,
Pete

Hi Ismael,
When I updated to Enfold 4.4 I didn’t have any caching plugins running at all or any lazy loader plugins and the problem on that page was there straight away.

Note that its not just the video that is black – the problem also shifts the text/accordian from the screen right hand side (final third) of the screen to below the third video. Please compare to the other portfolio item pages which are working perfectly.

I now have WP Rocket running – but Lazy Loader is only turned ON for images – not videos.

My private login info is below.

thanks and best regards,
Pete

Thanks Victoria.

I only have a small query about the animated play bar within the audio player.
In Enfold 3.8 it was like a moving barber shop stripe in Yellow. (same I use on progress bars on my Studio page)

But now I moved to Enfold 4.4 the nice yellow stripes are replaced with a simple solid yellow bar.

Any idea how I can bring back the barber shop stripes?

thanks

Pete

Hi Ismael,
Thanks for the info. I have everything working now.
In case anyone else is looking to solve this – listed below I used a combination of your CSS ideas with a few small changes to take all input field borders (apart from the Contact Form 7 borders) back to the default theme colour of E1E1E1. Best regards. Pete

———-

/* Reset all but CF7 Input Fields to default E1E1E1 border*/

#top .sidebar #s {
border-color: #e1e1e1;
}

#top #s {
border-color: #e1e1e1;
}

#top #comment {
border-color: #e1e1e1;
}

HI Ismael,
Thanks for that CSS it does work but I prefer to use an alternative solution which is to go back to Victorias original suggestion of CSS to restrict the border #232323 to JUST the Contact Form 7.

This was the code she gave me ( I called it SOLUTION #2 above).
——-
/* CF7 Input Field border and radius */
#top .main_color .wpcf7 .input-text,
#top .main_color .wpcf7 input[type=’text’],
#top .main_color .wpcf7 input[type=’input’],
#top .main_color .wpcf7 input[type=’password’],
#top .main_color .wpcf7 input[type=’email’],
#top .main_color .wpcf7 input[type=’number’],
#top .main_color .wpcf7 input[type=’url’],
#top .main_color .wpcf7 input[type=’tel’],
#top .main_color .wpcf7 input[type=’search’],
#top .main_color .wpcf7 textarea,
#top .main_color .wpcf7 select {
border-color: #232323;
border-radius: 3px;
margin-top: 5px;
}

————
It almost works! The only problem is that for some reason it doesn’t make the borders #232323 on the following fields:-
-Name
-Email
-Subject.

For some reason it only makes the borders #232323 on the Message field. See screenshot below.

Can you offer an idea on what CSS is needed to make sure the other fields are also border #232323?
I have been looking at the inspector but I dont have the skill to find the CSS I need. I’m sure it must be a relatively easy solution?

Thanks in advance.
Pete

here is the page:

here’s the screenshot.

https://screencast.com/t/K1wmQHge

hi Vinay / Victoria,

1. I didn’t really fix the border issue – I just went back to the previous version of the CSS give to me by Victoria – as below. This creates the borders around the contact page fields as needed – BUT it also creates the same border around the search field which is something I don’t want – any idea how I can fix this?

SOLUTION #1

/* CF7 Input Field border and radius */
#top .main_color .input-text,
#top .main_color input[type=’text’],
#top .main_color input[type=’input’],
#top .main_color input[type=’password’],
#top .main_color input[type=’email’],
#top .main_color input[type=’number’],
#top .main_color input[type=’url’],
#top .main_color input[type=’tel’],
#top .main_color input[type=’search’],
#top .main_color textarea,
#top .main_color select {
border-color: #232323;
border-radius: 3px;
margin-top: 5px;
}

WHEN I TRIED TO USE THE SECOND BATCH OF CSS, AS BELOW, TO FIX THE SEARCH FIELD – IT HAD THE EFFECT OF TAKING THE BORDER AWAY FROM THE NAME AND EMAIL INPUT FIELDS ON THE CONTACT FORM – SO I SEEM TO BE STUCK BETWEEN TWO CSS SOLUTIONS WHICH ALMOST WORK BUT NOT QUITE.

SOLUTION #2

/* CF7 Input Field border and radius */
#top .main_color .wpcf7 .input-text,
#top .main_color .wpcf7 input[type=’text’],
#top .main_color .wpcf7 input[type=’input’],
#top .main_color .wpcf7 input[type=’password’],
#top .main_color .wpcf7 input[type=’email’],
#top .main_color .wpcf7 input[type=’number’],
#top .main_color .wpcf7 input[type=’url’],
#top .main_color input[type=’tel’],
#top .main_color .wpcf7 input[type=’search’],
#top .main_color .wpcf7 textarea,
#top .main_color .wpcf7 select {
border-color: #232323;
border-radius: 3px;
margin-top: 5px;
}

2. The gap above the submit button is made better by VInays code – but should this gap be the same between all responsive views. Currently it seems to change in size between views. I wonder if you have any thoughts on this? NOTE: The gap above summit button was constant for all views before I added Victoria’s CSS to help switch the first two input fields – name and email – to stacked on top of each other when in the narrower mobile view.

Hope the above makes sense and you are able to help.

thanks
Pete

thanks
Pete

Hi Victoria – thanks for your latest CSS. See Screenshot below.

1. The new CSS works great at balancing the vertical gap between fields – but has the side effect of closing the gap above the Send button completely – which was an undesired affect. Any way I can fix this?

2. As mentioned in last message, the CSS To limit the border to only the CF7 has the effect of leaving a black border around the text area / message field. but the black border style is lost from the NAME and EMAIL fields. Any way I can fix this? I have put a list of my current CSS for this page below the screenshot.

Thanks, Pete

https://screencast.com/t/SuebzuyeqP

CURRENT CSS to match screenshot.
—————————————–

/* CF7 Submit Button CSS Styles */
.wpcf7 input[type=submit] {
padding:15px 45px;
background:#FCE228;
color:#232323;
font-size:16px;
font-weight:bold;
border:1px solid #232323;
cursor:pointer;
-webkit-border-radius: 3px;
border-radius: 3px;
}

/* CF7 Submit Button CSS Hover Styles */
.wpcf7 input[type=submit]:hover {
background-color: #232323;
color: #FCE228;
border:1px solid #232323;
}

/* CF7 Label Text Styles */
.wpcf7 label {
padding: 0 0 10px 0;
font-size: 20px;
color:#232323;
}

/* CF7 File Upload Button CSS Styles */

.wpcf7 input[type=file] {
padding:0px 0px;
background:none;
color:#000;
font-size:14px;
border:none;
-webkit-border-radius: 3px;
border-radius: 3px;
}

/* CF7 Input Field Heights */
.wpcf7 input[type=text] {height:40px;}
.wpcf7 input[type=email] {height:40px;}

/* CF7 Input Field border and radius */
#top .main_color .wpcf7 .input-text,
#top .main_color .wpcf7 input[type=’text’],
#top .main_color .wpcf7 input[type=’input’],
#top .main_color .wpcf7 input[type=’password’],
#top .main_color .wpcf7 input[type=’email’],
#top .main_color .wpcf7 input[type=’number’],
#top .main_color .wpcf7 input[type=’url’],
#top .main_color input[type=’tel’],
#top .main_color .wpcf7 input[type=’search’],
#top .main_color .wpcf7 textarea,
#top .main_color .wpcf7 select {
border-color: #232323;
border-radius: 3px;
margin-top: 5px;
}

/* CF7 name and email Fields alongside but not on mobile */
@media only screen and (min-width: 1024px) {
#top .wpcf7-form-control-wrap.your-name input[type=text] {
width: 95%;

}
.wpcf7-form div + p, .wpcf7-form div + p + p {
width: 50%;
float: left;

}
.wpcf7-form div + p + p {
clear: right;
}
}

/* CF7 name and email Fields alongside but not on mobile */
@media only screen and (min-width: 1024px) {
#top .wpcf7-form-control-wrap.your-name input[type=”text”],
#top .wpcf7-form-control-wrap.your-email input[type=”text”] {
margin-bottom: 0px;
}
.wpcf7-form div + p, .wpcf7-form div + p + p {
margin: 0;
}
}

yes thanks – you can close this one.
cheers
Pete

• This reply was modified 7 years, 2 months ago by premedia.

hey guys
I found an answer on this thread.

https://kriesi.at/support/topic/fontello-icon-inline-with-text-block/#post-447273

All sorted now
cheers
Pete

hi Yigit!

Thanks for the idea. It has the exact opposite effect of what I want. Maybe my request wasn’t so clear.

For normal view / desktop etc – I want to keep the padding on left and right of tab container.

For mobile / responsive view I want to remove he padding on left and right of tab container.

My attempt to solve was to use the .responsive CSS version – this worked for mobile view – but I found that this was also affecting the normal view and removing padding that I wanted to keep.

Any idea how I can restrict the .responsive CSS to make sure it doesn’t get used everywhere?

cheers

Pete

hi Rikard

I managed to find some CSS to remove padding on mobile view – but it also removes padding on desktop view as well which is not ideal.
http://screencast.com/t/locvocnKUNM mobile view – left and right padding removed. (small white band still shows at top and bottom of container).
I used this:-
—–
.responsive .tabcontainer .tab_content {
padding: 0px 0px;
}
—–

Desktop view in private link below shows the padding also taken away on left and right. If there’s a way to fix this I would been keen to hear this.

Also in the mobile view – is there a CSS fix to remove the small white band/padding at top and bottom as shown by the arrowheads in my screenshot?

thanks for your support as always.
Pete

• This reply was modified 8 years ago by premedia.