To me it works like it should. Each slide is different as you can see the caption are changing, but each slide has the same image uploaded (as you can also see on the website on desktop). You can change this if you edit the font page and scroll to the slider metabox.
For the slider on mobile phones you don't have to worry. The slider is optimized and is rendering 3 different image sizes. 1 size for mobile devices, 1 size for tablet devices and 1 size for desktops. Only the small image is served while visiting the website on a mobile device.
This is the way we designed the slider on mobile. Why? If we would keep the text on the slider images it needs to be resized so small the text would not be readable anymore, plus it would cover the entire slider image. We asked ourself the questions if we build it the way described above what is the purpose of the slider if it is not working anymore for text and image.
If you want to give the grey background another color you can use CSS:
It is not possible to push schema markup to the code of custom widgets, that's just not how it works unfortunately. The plugin has it's own input field and shortcodes to display the output. I just downloaded and tested the plugin and for me the plugin it working fine. Can you explain further?
the shortcodes work when implementing, I just need the schema markup in the phone, address, email hours etc. So what is the best way to accomplish schema markup within this site design?
also how can I fix this issue with the jumbotron and widget conflicting. the menu is not flipping to the mobile version on these to screen sizes.
The shortcodes of the plugin are working indeed. When you fill in the input field your contact information is already between the schema markup of the plugin, so you can use it on your where you want.
But what I tried to explain in my previous message; it is not possible to take this code and push it simply within the phone, address, email, hours icon boxes. Also because the contact information of the plugin is outputted by a single shortcode, so you can't simply spread them on various icon boxes like phone, email etc.
For the jumbotron and widget conflicting can be solved with a bit of CSS, which you can paste via Appearance > Customize > Theme Options > Custom CSS
That's correct the menu is not displaying the mobile menu on the 1st URL. The mobile navigation will only display on screens with a max width of 992 pixels. The screen size of the first link is over 1024pixels, which is a small desktop screen size.
The phone number in the topbar also can be fixed with some CSS:
can the footer have 5 columns to match the top header widget?
how can I change the background of the site (the part outside the boxed content of the site) see image highlighted red areas
lastly is it possible to reduce the "white space" from the main nav menu to the header widget and the Call us today top header? while leaving the logo spacing? see image 2 attached
1) To align the call us today text to right, fix the hover issue and make it bold please use the following CSS:
.header-topbar .col-md-8 { width: 100%; padding-right: 30px; } .header-topbar-sidebar .menu li a { font-weight: bold; } .header-topbar-sidebar .menu li:hover a { #ff7a4d; }
2) All the icon boxes have a margin right 25px. Maybe because some is shorter and some is longer is looks like it is not. The best option is to hide the social icons with:
3) The footer can't have a 5 column with out of the box. We build the front-end with Bootstrap, unfortunately Bootstrap don't provide 5 columns. But with some CSS it would be possible. Just add your 5th widget in the Appearance > Widgets > Footer panel. Then use this CSS:
.footer--top-container .col-md-3 { width: 20%; }
4) You can change the background via Appearance > Customizer > Background (Not in the 'Theme Options' section)
5) Please use this CSS to align the navigation items with the logo and keep the logo size the same:
@media (min-width: 991px) { .header .header-navigation { margin-top: 65px; } .main-navigation > li > a { padding-bottom: 29px; } }
thanks for the help, it seems the logo css i used did not play well with yours. so The logo issue remains still? I have attached the CSS im using so far.
the workaround for the footer just did not look very good. So i took it down to 3 columns and added another widget.
in regards to this is it possible to add some padding in between the widgets (top/bottom) when the viewing is greater than 991px? the mobile footer looks great but the full screen footer is a bit mushed.
the call us today CSS worked except for the hover ? still flipping to white.
how can I change the font of the titles in site-origin editor?
.widget-title { font-family: Arial; } ??
and how can I add a border/dropshadow around the Text in the jumbotron? it is difficult to see.
also the titles seem to bold half of the text? is there a way to just have normal bold titles?
how can I center titles of the widgets like the "ask a question" on the homepage?
and how do i put a button in the text of a siteorgin box? I looked but couldn't find a shortcode for this? I added another plugin for buttons but they are not uniform with the already existing buttons on the ask us a question. ideally I would like for them to match the existing buttons.
You can change the font of the theme with the Easy Google Fonts plugin. Some elements of custom widgets needs a custom font control to adjust the heading/text. You can read more about it here: Change fonts of Physio theme
To make the bold titles normal you can use the following CSS via Appearance > Customize > Theme Options > Custom CSS:
To center those tittles you can add a custom class via Edit Widget > Click the Attributes panel on the right > and add titles-center in the class field. Then add this in the custom CSS field:
Some elements in the theme need a custom font control (in the Easy Google Fonts plugin) to change the font type. You can see here how to create a custom font control: Change fonts of Physio theme
The CSS class for the FAQ titles is: .panel-group .panel .panel-heading .panel-title a
The purple background color in the buttons active state is fixed in the latest theme version. If you don't want to update the theme this issue can be fixed with some CSS:
If you want to get notified about a theme update in your WordPress dashboard area I recommend to download the 'Envato Market' plugin.
In this article you can find the download link of that plugin and some steps how-to configure the plugin. If you followed all the steps you can easily update the theme in the future with a single click.
how can i add google tag manager scripts to the site? without breaking it every time the theme updatees.
<!-- Google Tag Manager -->
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-5FCN3Q');</script> <!-- End Google Tag Manager -->
the homepage image is not working properly on phones. The image is the correct size, it seems the site is not adjusting the image.
also it might be best if the site does not show the slider at all on phones due to slow load times so possible could the
WP Mobile Detect plugin be used to hide this?
either way. please advise
Hi James
To me it works like it should. Each slide is different as you can see the caption are changing, but each slide has the same image uploaded (as you can also see on the website on desktop). You can change this if you edit the font page and scroll to the slider metabox.
For the slider on mobile phones you don't have to worry. The slider is optimized and is rendering 3 different image sizes. 1 size for mobile devices, 1 size for tablet devices and 1 size for desktops. Only the small image is served while visiting the website on a mobile device.
Let me know if you have any questions.
Best regards,
Barry
QreativeThemes.com | WordPress Themes
Barry,
the iphone display has a big grey gap on the image slider? that looks horrible. how can I remove this on phones, if it is working properly.
Hi James
This is the way we designed the slider on mobile. Why? If we would keep the text on the slider images it needs to be resized so small the text would not be readable anymore, plus it would cover the entire slider image. We asked ourself the questions if we build it the way described above what is the purpose of the slider if it is not working anymore for text and image.
If you want to give the grey background another color you can use CSS:
.jumbotron { background: #your-color; }
If you want to hide the entire slider on mobile:
@media (max-width: 480px) { .jumbotron { display: none; } }
Best regards,
Barry
QreativeThemes.com | WordPress Themes
Barry,
Thanks for the quick fix! We just hid the slider.
You're welcome :)
Best regards,
Barry
QreativeThemes.com | WordPress Themes
Hi James
It is not possible to push schema markup to the code of custom widgets, that's just not how it works unfortunately.
The plugin has it's own input field and shortcodes to display the output. I just downloaded and tested the plugin and for me the plugin it working fine. Can you explain further?
Thank you
Best regards,
Barry
QreativeThemes.com | WordPress Themes
the shortcodes work when implementing, I just need the schema markup in the phone, address, email hours etc. So what is the best way to accomplish schema markup within this site design?
also how can I fix this issue with the jumbotron and widget conflicting. the menu is not flipping to the mobile version on these to screen sizes.
http://quirktools.com/screenfly/#u=http%3A//sample.mwdigitalmarketing.com/mountpleasantpediatricspeechtherapy/&w=1024&h=600&a=1&s=1
http://quirktools.com/screenfly/#u=http%3A//sample.mwdigitalmarketing.com/mountpleasantpediatricspeechtherapy/&w=1024&h=768&a=1&s=1
and taking the number at the .topbar and moving it to the far right
"Call Us Today (843)-300-2812"
Hi James
The shortcodes of the plugin are working indeed. When you fill in the input field your contact information is already between the schema markup of the plugin, so you can use it on your where you want.
But what I tried to explain in my previous message; it is not possible to take this code and push it simply within the phone, address, email, hours icon boxes. Also because the contact information of the plugin is outputted by a single shortcode, so you can't simply spread them on various icon boxes like phone, email etc.
For the jumbotron and widget conflicting can be solved with a bit of CSS, which you can paste via Appearance > Customize > Theme Options > Custom CSS
@media (min-width: 992px) { .header-widgets .widget { margin-right: 25px; } }
That's correct the menu is not displaying the mobile menu on the 1st URL. The mobile navigation will only display on screens with a max width of 992 pixels. The screen size of the first link is over 1024pixels, which is a small desktop screen size.
The phone number in the topbar also can be fixed with some CSS:
@media (max-width: 992px) { .col-xs-12 { width: 100%; } .header-topbar-sidebar .menu { padding-left: 0; text-align: center; } }
Let me know if you have any questions.
Best regards,
Barry
QreativeThemes.com | WordPress Themes
Barry,
thanks issue with the widget resolved a couple more visual things
the drop down tabs turn white when hovered over in the main navigation how can I change the color when hovered to #009797 ?
the logo needs a bit of space above the widget, how can I increase the padding below the logo
and the font of the main navigation+ sub menus how can i change this to Arial font?
thank you for all the help!
Hi James
For now you can change the hover color submenu link by adding the line below (change the #fff color value to your own)
@media (min-width: 992px) { .main-navigation .sub-menu li:hover a { color: #fff; } }
It looks like you already figured out how to add some padding below the logo, according to your website?
You can change the menu + submenu font to Arial with the following CSS:
.main-navigation li a, .main-navigation .sub-menu li a { font-family: Arial; }
You're welcome!
Best regards,
Barry
QreativeThemes.com | WordPress Themes
Barry,
a couple more things that i cant figure out.
the call us today at the top is still not right justified?
how can I bold that call us today font at the top?
the top call us today when hovered over turns white how can i keep its changing colors?
the header widget does not have even spacing between the items in the widget and when looking at these screens
http://quirktools.com/screenfly/#u=http%3A//sample.mwdigitalmarketing.com/mountpleasantpediatricspeechtherapy/&w=1024&h=600&a=1&s=1
http://quirktools.com/screenfly/#u=http%3A//sample.mwdigitalmarketing.com/mountpleasantpediatricspeechtherapy/&w=1024&h=768&a=1&s=1
below the overflow is pushed down? can it be squeezed to fit or not show the social buttons? or can the tablet menu be used instead?
http://quirktools.com/screenfly/#u=http%3A//sample.mwdigitalmarketing.com/mountpleasantpediatricspeechtherapy/&w=768&h=1024&a=22&s=1
can the footer have 5 columns to match the top header widget?
how can I change the background of the site (the part outside the boxed content of the site) see image highlighted red areas
lastly is it possible to reduce the "white space" from the main nav menu to the header widget and the Call us today top header? while leaving the logo spacing? see image 2 attached
Hi James
1) To align the call us today text to right, fix the hover issue and make it bold please use the following CSS:
.header-topbar .col-md-8 { width: 100%; padding-right: 30px; } .header-topbar-sidebar .menu li a { font-weight: bold; } .header-topbar-sidebar .menu li:hover a { #ff7a4d; }
2) All the icon boxes have a margin right 25px. Maybe because some is shorter and some is longer is looks like it is not.
The best option is to hide the social icons with:
@media (min-width: 991px) and (max-width: 1200px) {.header-widgets .widget.widget-social-icons { display: none; } }
3) The footer can't have a 5 column with out of the box. We build the front-end with Bootstrap, unfortunately Bootstrap don't provide 5 columns. But with some CSS it would be possible. Just add your 5th widget in the Appearance > Widgets > Footer panel. Then use this CSS:
.footer--top-container .col-md-3 { width: 20%; }
4) You can change the background via Appearance > Customizer > Background (Not in the 'Theme Options' section)
5) Please use this CSS to align the navigation items with the logo and keep the logo size the same:
@media (min-width: 991px) { .header .header-navigation { margin-top: 65px; } .main-navigation > li > a { padding-bottom: 29px; } }
Let me know if you have any questions.
Best regards,
Barry
QreativeThemes.com | WordPress Themes
Barry,
thanks for the help, it seems the logo css i used did not play well with yours. so The logo issue remains still? I have attached the CSS im using so far.
the workaround for the footer just did not look very good. So i took it down to 3 columns and added another widget.
in regards to this is it possible to add some padding in between the widgets (top/bottom) when the viewing is greater than 991px? the mobile footer looks great but the full screen footer is a bit mushed.
the call us today CSS worked except for the hover ? still flipping to white.
how can I change the font of the titles in site-origin editor?
.widget-title { font-family: Arial; } ??
and how can I add a border/dropshadow around the Text in the jumbotron? it is difficult to see.
thanks again!
Hi James,
Can you provide me a login if you're ok with that? I will check the custom CSS field and will process your CSS points from your message.
Best regards,
Barry
QreativeThemes.com | WordPress Themes
Hi James,
All points are fixed.
Currently the SiteOrigin Editor widget titles are set to Arial. You can find the CSS rule in the CSS textarea to change it to your own needs.
Best regards,
Barry
QreativeThemes.com | WordPress Themes
Berry,
a couple tweaks that I just cant figure out
looking to make all the font on the site Arial
also the titles seem to bold half of the text? is there a way to just have normal bold titles?
how can I center titles of the widgets like the "ask a question" on the homepage?
and how do i put a button in the text of a siteorgin box? I looked but couldn't find a shortcode for this? I added another plugin for buttons but they are not uniform with the already existing buttons on the ask us a question. ideally I would like for them to match the existing buttons.
hope you are having fun on vacation
Hi James,
You can change the font of the theme with the Easy Google Fonts plugin. Some elements of custom widgets needs a custom font control to adjust the heading/text. You can read more about it here: Change fonts of Physio theme
To make the bold titles normal you can use the following CSS via Appearance > Customize > Theme Options > Custom CSS:
.panel-grid-cell .widget-title { font-weight: normal; }
To center those tittles you can add a custom class via Edit Widget > Click the Attributes panel on the right > and add titles-center in the class field. Then add this in the custom CSS field:
.titles-center .widget-title { text-align: center; }
You can add buttons with the following shortcode in the visual editor: [button href="#"]Text Button[/button]
Thank you, I'm enjoying it so far!
Best regards,
Barry
QreativeThemes.com | WordPress Themes
Barry,
Im still showing different fonts for these pages the titles are sans but everything else is arial
http://sample.mwdigitalmarketing.com/mountpleasantpediatricspeechtherapy/faq/
I have google fonts installed and each is set to arial? but these pages are still showing different fonts?
and when clicking on buttons like the home page send forms they turn purple?
Hi James,
Some elements in the theme need a custom font control (in the Easy Google Fonts plugin) to change the font type. You can see here how to create a custom font control: Change fonts of Physio theme
The CSS class for the FAQ titles is: .panel-group .panel .panel-heading .panel-title a
The purple background color in the buttons active state is fixed in the latest theme version. If you don't want to update the theme this issue can be fixed with some CSS:
.btn.btn-primary:hover, .btn.btn-primary:active:focus { background-color: #yourhovercolor; }
Where #yourhovercolor is the background color of the button in hover state.
Best regards,
Barry
QreativeThemes.com | WordPress Themes
Barry,
I am running VERSION: 1.1.0 is that the most up to date?
Hi James,
The latest theme version of the Physio theme is version 1.2. (released on 01-06-2016).
Best regards,
Barry
QreativeThemes.com | WordPress Themes
Barry,
Im not showing an update theme option to the newer version and I downloaded the theme only 2 months ago?
you login still is active if you would like to take a look btw
Hi James,
If you want to get notified about a theme update in your WordPress dashboard area I recommend to download the 'Envato Market' plugin.
In this article you can find the download link of that plugin and some steps how-to configure the plugin. If you followed all the steps you can easily update the theme in the future with a single click.
If you have any questions please let me know.
Best regards,
Barry
QreativeThemes.com | WordPress Themes
disregard I think I fixed it
next update maybe some schema integration :)
Hi James,
Good to hear you fixed it!
For now we don't have plans to integrate schema.org markup in the theme. We recommend this or this schema plugin for schema.
Have a nice day!
Best regards,
Barry
QreativeThemes.com | WordPress Themes
Barry,
thanks
Barry,
how can i add google tag manager scripts to the site? without breaking it every time the theme updatees.
<!-- Google Tag Manager -->
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-5FCN3Q');</script>
<!-- End Google Tag Manager -->
Hi James,
To add custom JavaScript to your website we recommend the Custom JS plugin.
In the upcoming theme update we will add the option to add custom JavaScript via the theme customizer.
If you have any questions, feel free to ask them.
Best regards,
Barry
QreativeThemes.com | WordPress Themes