Services feature

Hi :)

thanks for the Demo again.

Client would like to use the Services tabs, and they have certain icons they would like to use.

Please advise how to use the Services feature from scratch (like on Home page right below the Slider) which currently are 3 tabs with icons. In case there are  CSS / style, please show me also. I'll need 4 tabs :)

https://www.webfulcreations.com/themes/items?theme=Dermatology-html

Thank you in advance ;)

(icons they'd like to use:
http://midstateskin.com/wp-content/uploads/Medical-870x470.png
http://midstateskin.com/service/surgical-dermatology/
http://midstateskin.com/wp-content/uploads/Cosmetics-Icon-870x470.png
...)

I copied this code from the Demo's home pg, but the icons are missing and not sure how to replace them:

[wc_featured_box wc_featured_title="Advanced Dermatology" wc_featured_description="A collection of textile samples lay spread out on the table - Samsa was a travellig salesman and above it there hung a picture that he had recently cut out in the situation of lines. Quick brown fox jumps over the lazy." wc_featured_readmore_title="Learn More ..." wc_featured_readmore_link="url:https%3A%2F%2Fwww.webfulcreations.com%2Fthemes%2Fdermatologist%2Fservice%2Fcosmetic-dermatology%2F|||" wc_featured_icon_image="265"][wc_featured_box wc_featured_title="Cosmetic Dermatology" wc_featured_description="A collection of textile samples lay spread out on the table - Samsa was a travellig salesman and above it there hung a picture that he had recently cut out in the situation of lines. Quick brown fox jumps over the lazy." wc_featured_readmore_title="Learn More ..." wc_featured_readmore_link="url:https%3A%2F%2Fwww.webfulcreations.com%2Fthemes%2Fdermatologist%2Fservice%2Fcosmetic-dermatology%2F|||" wc_featured_icon_image="266"][wc_featured_box wc_featured_title="Laser Dermatology" wc_featured_description="A collection of textile samples lay spread out on the table - Samsa was a travellig salesman and above it there hung a picture that he had recently cut out in the situation of lines. Quick brown fox jumps over the lazy." wc_featured_readmore_title="Learn More ..." wc_featured_readmore_link="url:https%3A%2F%2Fwww.webfulcreations.com%2Fthemes%2Fdermatologist%2Fservice%2Fcosmetic-dermatology%2F|||" wc_featured_icon_image="267"]

See example icon equal height and width > > https://www.webfulcreations.com/html-templates/dermatology/assets/images/help/information-boxes/icon-2.png

Your selected icons wouldn't fit in this design

Thanks that was quick :)

I'm adding to Main page, but quick question, why do "Read more" show up on some but not the others? depending on how much text on the Description?! seems tricky

Please provide example for what are you talking about thanks.

Nevermind, I think the Read More show now on all 4.

On Main page, how can I format the 4th "feature box" Aesthetic so that it fits ? It's currently smaller than the other 3 boxes.

When you want to make 4 boxes instead of 3. In that case you can add this CSS in wp-admin >> Appearance >> customize >> Additional CSS. 

.information-box {
 width:25%;
}

Thank you!

The 4 tabs show up great on desktop but NOT on mobile. Please lmk how to fix that, ty!

_{I added the following in CSS and it seems to work so far:}

.information-box {
    width:310px;
    padding: 8px;
    margin: auto;
      align-content: center;
}

On Services, How can I list the Pages in the following order? (I used page order on Quick edit but didn't seem to affect it):

http://midstateskin.com/our-services/

Medical Dermatology

Surgical Dermatology

Cosmetic Dermatology

Aesthetic

You have to edit these services and change their date of publish or time so they can show in the order you want to show them. 

About the issue on mobile, 

I think you should create a Row and use 4 columns in it and add the boxes there, but for that you would need to remove the CSS you have added that would be better and responsive. thanks 

Thanks for the suggestions. I did and things look better on Home page's 4 Services tabs :)

Just a few small things:
Top Bar, certain things are not showing on mobile. Like top Left with Social icons (using Selective Social Icons). The top right side only 1 button show up (using Small Buttons).

Still struggling to have the right order, I tried so many ways incl. changing the Data setting > Ordered by and the Publish time.

1. Medical Dermatology  2. Surgical Dermatology

3. Cosmetic Dermatology 4. Aesthetic

Thank you for your help :) They are loving the site so far.

Edit services and change their dates . Chose past dates for 1: select 24 August for 2: select 25 August for 3: select 26 August for 4: select 27 august 

then order them ASC or DESC that's it. 

Add this CSS into wp-admin >> Apperance >> Customize >> Additional CSS  and your Social Icons would start appearing on small devices. 

@media screen and (max-width: 39.9375em) {
.topBar .menu.social .social {
    display: inline-block;
}
}

Thank you! The Media icons look great on top.

They would like to make the links goopen in a new window, could you please help?

sorry typo: links open in a new window ...regarding the Social icons on Top

Thank you for your quick respons :)

I'll test out the Provider images as you've suggested tomorrow with editing Function & Regenrate thumbnails plugin. TY! It's midnite here ;)

Could you please show me how to adjust Page titles? Is it in CSS or elsewhere?!
I'm still checking with them.

To increase the page title go to >> Appearance >> Customize >> inner Pages >> Page Title and there increase the top and bottom padding of page title that would increase the height. 

Yes regenerate the thumbnails it will bring 360, 540 size. 

Ok just seems like a long way to do it instead of maybe opt out the cropping, so that's why I was checking. Like delete the thumbnails code..somewhere?!

What about Customizing ▸ Inner Pages Styles/Layouts Title Section,

I changed padding to 20px and it made the bg graphic shorter, but didn't effect the font size though. Please help - Getting so close

update: Regenrate thumbnails plugin works. TY!

Just the Page title needs tweaking.

Increase padding or decrease padding to play with the height 

And to increase or decrase the Font size of title section add this

in wp-admin >> Appearance >> customizer >> Additional CSS

.title-section h1 {
  font-size:55px;
}

You may change 55px to your desired font size

Great TY soo much ;)

What's the best way to go about allowing Testimonial submissions?

I had to temporarily <hide> the contact form on Contact Us page since none of the contact form seem to work so far. I tried the theme's Contact 7, WPform, Ninja... but can't get any to be able to receive email submissions.

For Contact form 7 "Testimonial Sidebar Form"

The Email is being sent on this Email so make sure the email can be received on this id. https://monosnap.com/file/UlTWRz6dqbsCUruDvf55HL3EOTfl1J 

From id is related to domain name which is good, the To id can be gmail or anything as well. If you are not receiving emails then check the SPAM folder also. 

And you can also try https://wordpress.org/plugins/wp-mail-smtp/ 

Thanks. I would not able to provide you help for any third party plugins and the forms are also related to server and setup configuration. you should try to figure it out we would be very limited to help you in this matter thanks.

Where do I add this to regarding contact form? I have the SMPT plugin now

https://monosnap.com/file/UlTWRz6dqbsCUruDvf55HL3EOTfl1J

Hi I appreciate you're trying to help

Could you please elaborate on this? I haven't done this before (I do check all my Spam folders) They are not happy that the forms are not working now:

"The Email is being sent on this Email so make sure the email can be received on this id. https://monosnap.com/file/UlTWRz6dqbsCUruDvf55HL3EOTfl1J 
From id is related to domain name which is good, the To id can be gmail or anything as well. If you are not receiving emails then check the SPAM folder also. "

First you should know that we are talking about Contact form 7 Plugin. 

Before doing change to Email address to test you should know which form you are trying to update or edit. So on which page the form is edit taht page and see the shortcode there. Which is something like this

[contact-form-7 id="72" title="Contact form 1"]

You see the id="72" Now you know which form you have to edit to make changes in it. 

Now click on Contact in sidebar menu of WordPress and edit the form. 

https://monosnap.com/file/6sSW9uQ7m3bE8p62kkYPLBJpRb283n

While you are editing the form you can see there different tabs. 

Form  Mail  Messages  Additional Settings

Click on Mail https://monosnap.com/file/Gn6G2AnbcOxWTaheAkM4BWcPL5OxwH

Now here you can change the Email address where you are sending the email. 

First try to change it to some GMAIl or , Yahoo or Hotmail id's so you can confirm you are receiving email once you know you are rececing email then you can change it back to your webstie's email address. This would confirm the website is sending email but you have some problem with your receving email address. 

Ok those link you sent were screenshots..sorry I thougth they meant to be added into the SMTP somehow to make the form works...Anyway it submits to my email now, just waiting for their SMTP info.

They did have a concern about Page titles,  how to break them after each word instead:

Also on mobile, the title of the pages (such as Medical Dermatology) are broken up and it is not easy to read. Are the titles not responsive?

You can adjust the font size for the mobile screens for header title section.  add following CSS into wp-admin >> appearance >> Customize >> Additional CSS

@media screen and (max-width: 39.9375em) {
 .title-section h1 {
         font-size:2rem;
  }
}

currently font size is 3 REM but you can change it to 2REM as per above given code. or try 2.5 whatever suits you.

Your other question cannot be done dynamically you may check this reference. https://stackoverflow.com/questions/4212909/can-css-force-a-line-break-after-each-word-in-an-element

and apply as per your requirements thanks.