where to key in google maps api?

You can set the Google Maps API key in Theme Options -> Google Maps.

I’m sorry but the video background is available only in the Title Area. You can set it when you edit the page, scroll down to the Flora Options, select the Title Area tab to set the video background.

This theme doesn’t support video background of the row/section. You have to set it as a video slider instead. See more on how to create a video background on slider here: https://www.themepunch.com/revslider-doc/main-background/?tab=youtube

If you just changed only domain, try this plugin: https://wordpress.org/plugins/automatic-domain-changer/

If you also move your website to another hosting provider, try this: https://wordpress.org/plugins/all-in-one-wp-migration/

Also, when I provide the code, when you preview it in your email, it would be inside < pre > but you have to remove both < pre > and from the code. Actually you should copy it from the comments page instead.

I figured out that it took out all settings of the Theme Options panel and I needed to fill in everything again. Maybe because of the Wyde Core plugin? But yes the website is working now. www.s3r.news

Thank you so much for your great help and advice, definitely recommending this theme and this great custom support <3

Actually you can export and import all settings of the Theme Options in Theme Options -> Import and Export. That is a great way to move your custom settings from site to site.

1. Actually, you can show both Menu and Social Icons in the footer bar. The Social Icons will appear after the Menu. If you have many menu items and social icons, the social icons will show in the new line instead.

However, now I couldn’t see the social icons in the footer because you’ve added custom CSS to hide them all. You should remove the code below to show it so I can find if there was something wrong:

[class^="flora-icon-"], [class*=" flora-icon-"] {
    display: none;
}

2. My apology, I misunderstood! I thought that you haven’t mute it yet. Anyway, I’m not sure how you add the video to slider. If you added it as the video layer, try to set it as the video background to see if it works. I guess that the video background is always muted. Or use the MP4 video instead of YouTube or Vimeo.

3. It’s in the line:15 inside the file “templates/blog/author.php”, see the picture below:

4. I’ve never seen this issue before. Also, I just tried our demo site on Safari, Chrome and Firefox. They’re all working fine.

That’s because you’ve custom CSS but some of them are incorrect and invalid syntax. For example:

The media query should be in the format below:

@media only screen and (max-width: 991px) {

.example-class{

}

}

Also, some class are missing ‘}’, you have to check your custom CSS to make sure the whole code are all correct.

THANK YOU SO MUCH This was so helpful. And weird, I was always looking inside of the editable files inside of wordpress, and there this information was missing. But I found it on the server and adjusted. So happy. And thank you for the media only screen advice <3 Now slowly this website is finished

It’s my pleasure Happy to hear that and congrats for your great website!

The shopping cart icon will show up when you have WooCommerce plugin installed. You can install that plugin in Plugins section on your WordPress admin, it’s totally free!

After you install WooCommerce plugin, you will see the WooCommerce Setup Wizard, follow those steps to setup your shopping cart and all shop pages.

Also, if you’d like you can import product demo content from WooCommerce plugin, see more: https://docs.woocommerce.com/document/importing-woocommerce-dummy-data/

The documentation is included in your downloaded zip file. You can import demo content in Theme Options -> Home, and you will have predefined pages/posts and settings so your website will have the same look as our demo. Please see more details on how to import demo content in our documentation.

It would appear this was connected to the previous “Permissions denied” problem. Sorted that one out and this has sorted itself out!

I suppose that it’s related to the server issue as previous questions. We’ve never seen this issue from our theme.

This is a server configuration issue. Some plugins require the /wp-content/ folder be made writeable. Please make sure you’ve set the folder “wp-content” and all sub folders to be writable.

Please make sure you’ve installed the correct WordPress installable theme. After you download the zip file from ThemeForest, you have to extract the file to see all package content. Please follow the instructions in our documentation on how to install the theme.

1. Seems like you changed the custom CSS with the wrong way. You shouldn’t change the width of col-9 and col-3 because these classes are core layout classes, it’s a bootstrap column and will affect the responsive layout feature. You have to change .main and .sidebar instead.

Actually, in this case, you can add the code below to change the width of the blog post and sidebar:

.post-content .main{
width: 80%;
}

.post-content .sidebar{
width: 20%;
}

2. You can do it via custom CSS in your child theme:

.post-content .sidebar{
/*CUSTOM STYLES*/
}

3. Of course when you add tags for the post, it will show below the post content, see here: http://wydethemes.com/flora1/the-good-and-great/

However, the Tags widget in the sidebar is a WooCommerce Tags widget that displays all tags on your website. It’s not just the tags of the current post because it’s not related to the post you’re currently viewing.

4. I’m not sure how you add the video but here’s what you’re looking for: https://www.themepunch.com/revslider-doc/video-layers/

You can turn on Mute option to disable the sounds of video.

To 6. Also didnt work or changed anything. I don’t know if it might be the Stylesheet itself that doesnt apply those styles right now?

Because it is working, when adjusting it inside of the Inspect Element Function of Firefox, but not when I add it to the actual Child Stylesheet.

1. To remove the gravatar, you have to remove the code below from “templates/blog/author.php”

<?php echo sprintf(‘%s’, get_author_posts_url($author_id), $avatar); ?>

2. My apology, you can add custom CSS below to reduce the header menu:

header .header-wrapper{

height: 80px; }

4. I’ve tested it and it works with the blockquote inside the post like the one on your post here: http://s3r.co/wp/the-83rd/

Please make sure you’ve add the right code, the blockquote is an element, please don’t put dot (.) before.

As you can see in the code I provided, it’s just blockquote:before { ... } not .blockquote:before {....}

Please let me know if I’m missing something.

6. Please make sure you put the whole code I provided. It contains box-showdow too, this will make the post content box stand out from the background image.

2. Looks like the code has been remove:

Here’s the code again:

#header .header-wrapper { 
height: 80px;
}

It’s available only for the title area. You can set the default background image with color overlay for the title area in Theme Options -> Title Area. But it isn’t for the page background, you have to set it for each page and post.

Here’s the code to hide it:

.meta-category strong {
display: none;
}

Hi,

It would be better if I can see what’s happening. Could you please PM me your site URL: https://themeforest.net/user/wyde#contact

If you have other plugins installed, try to deactivate them to see if it works. If it doesn’t work, please PM me your site URL: https://themeforest.net/user/wyde#contact

1. You can add custom CSS to push the post-meta to the top of the post-title in a single post:

.post-detail .post-title{
   margin-top: 20px;
}

.post-detail .post-meta{
    position: absolute;
    top: 0;
    margin-top: 0;
}

BTW, it’s too difficult to change it’s inside the post grid because the category is in the post-footer.

2. It’s difficult to push the post-media over the post-meta, you should remove the post-meta from the post grid instead, here’s the code to remove the post-meta:

.w-blog-posts.w-grid .post-meta{
display:none;
}

Also, if you’d like here’s the code to hide the post-footer:

.w-blog-posts.w-grid .post-footer{
display:none;
}

You can add those codes into style.css in your child theme.

Here’s the code to set the width of the post:

.single-post .post-content {
   max-width: 800px !important;
}

You can add it in style.css in your child theme.

Try to open the file “index.html” inside the folder “Documentation” with Chrome or Firefox, so you will see the instructions on how to import demo content in our documentation.

If it still doesn’t work, you have to download the new documentation of the Flora theme in the Downloads tab on ThemeForest, choose “All files & documentation”.

Anyway, you can import demo content in Theme Options -> Home. This requires Wyde Core plugin to work. If it doesn’t work, try to delete this plugin first. After you delete it you will see a notification message to install it again.

You have to do it via child theme.

1. Upload your font files to “wp-content/themes/flora-child-theme/fonts”.

2. Add the code below in style.css in your child theme:

@font-face {
    font-family: 'your_font_name';
    src: url('fonts/your_font_name.eot');
    src: url('fonts/your_font_name.eot?#iefix') format('embedded-opentype'),
        url('fonts/your_font_name.woff') format('woff'),
        url('fonts/your_font_name.ttf') format('truetype'),
        url('fonts/your_font_name.svg#your_font_name') format('svg');
    font-weight: normal;
    font-style: normal;
}

h2 {
    font-family: 'your_font_name' !important;    
}

Hey, thank yu for answering. How can I install child theme?

You can find the Flora Child theme in the main downloaded zip file. Upload flora-child-theme.zip in Appearance -> Themes on your WordPress admin (like when you install the Flora theme). And then activate the Flora Child theme.

In this theme, you can add CSS class below to the Extra CSS Class field in the element settings to hide it on small and medium screens.

sm-hide  = hide it on small screens (tablets - portrait mode)
xs-hide = hide it on extra small screens (smartphones)

Thanks, I was using bootstrap (xs-hidden, sm-hidden, md-hidden and lg-hidden). I will change to xs-hide…..

Would it work the same for 

md-hide & lg-hide

I am trying those functions but it isn’t acting correctly. The xs-hide and sm-hide is working though. 

When I set an image for md-hide. It works when I refresh the page but the moment I change the size of the browser a very small amount the image comes back in until I refresh the page again. Then it disappears again. 

I have the Ajax turned off currently.

https://rohslers.wpengine.com

If you can go to the link and scroll down to the “Landscape Services” section. You should see and image to the left and the “landscape” text to the right. If you move the browser however and image set to (md-hide) will appear underneath until you refresh the page again. Then it will disappear.  

The goal is, I want the large image the is showing up underneath to be hidden on the desktop and visible on the tablet and mobile. 

Any ideas what could be causing this?

In chrome it doesn’t disappear at all but Safari it does until I move the browser.

Also is there a class for xs-show, sm- show or xs-visible?

Thanks (Screen shots below)

Unfortunately, this theme doesn’t include the Bootstrap so those classes won’t work in the theme.

I’m sorry but the md-hide and lg-hide are not available because we didn’t use them in this theme. If you’d like to change the order of the column on mobile, you don’t need to hide anything but just change the order by following this:

1. Add custom CSS below into style.css in your child theme:

@media (max-width: 767px) {
    .order-xs-last {
        -ms-flex-order: 10;
        -webkit-box-ordinal-group: 10;
        -webkit-order: 10;
        order: 10;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .order-sm-last {
        -ms-flex-order: 10;
        -webkit-box-ordinal-group: 10;
        -webkit-order: 10;
        order: 10;
    }
}

2. Edit your page, put the order-xs-last into the Extra CSS Class field of the first column so it will move to the last and appear at the bottom of the second column on mobile.