Spark - Responsive One-Page HTML5 WordPress Theme

You are right, not all widgets have problems. Only widgets “Recent posts”. “Advanced Recent Posts”, “Custom Recent posts”, “TW recent posts” cause an error, now I tried widget “Google Map Widget” and all is good.

Hello Disclaips,

Thanks for the additional details. I believe those plugins potentially interfere with The Loop, meaning that their own query to retrieve “Recent posts” breaks the original query (The Loop) that retrieve all landing-page sections.

Obviously this issue is not an issue on single posts (pages displaying a single post) because in this case The Loop has only one item so it doesn’t cause any specific problem, however when executed on a page listing multiple posts like the Blog page or in this case the Landing-Page then it prevents any remaining posts to be processed/displayed.

I’ve made some research and I found the exact origin of the issue, as well as a way to fix it! So first the problem is that most of these widgets are calling the wp_reset_query() function once they’re done, and this is what removes the remaining posts from The Loop. The solution is to not call this function, and instead call the wp_reset_postdata() function which restores the integrity of the $post global which is required for The Loop processing.

Sorry for all the technical jargon, but at least there’s an explanation to the behavior you have been encountering. Now you can either manually edit the widget’s source code and look for the wp_reset_query() function and replace it with wp_reset_postdata() instead, or you can use the [latest_posts] shortcode available in Spark and which will be fixed as well in the coming update of the theme to be released by Monday

Sorry for any inconvenience and please feel free to let me know if there’s anything else you’d like to share with me, I’d love to hear from you Best, Jonathan

Thank you very much!

Hello andresleonardo,

Thanks for your message. Make sure that your logo image is at least 80 pixel height, that’s the only requirement, it can be of any width.

I hope that helps Please feel free to let me know if you have any further questions, I’ll be happy to assist you. Best, Jonathan

Hi andresleonardo,

Thanks for your comment, you can set font color using custom CSS, and you could target any specific section on the landing-page using the available classes, here is an example to set white font color for text within the “Features” section:

.section-features {
    color: white;
}

This code is intended to be added to the “Custom CSS” tab in the Theme Option page.

Please feel free to let me know if you require further help with this Best, Jonathan

Hi Jona thank you for your great help.

I had been trying to make what you told me, but it only changes some part of the text.

The thing i need is very simple, I need to change the font color in the welcome text (main slider), section features, and contact section, because i have blue background on those sections.

Besides this i need to change the font size of the regular text, make it more bigger or maybe more pixels. I´ve tried making the text <h> to see it bigger but does not change the font color too.

My clients site is on goo.gl/JVqfe if you can take a look you will see clearly the changes that i am looking for.

I´m not very skilled with programming or css but i would do my best to get it work.

Thank you again for the great work and help.

Hello andresleonardo,

Thanks for your message. Ok now I see more clearly, the areas you’re talking about are the “contrasted” areas for which you have customized the background color to be a light blue. The reason the text is black on those areas is because Spark has automatically calculated the brightness of the blue chosen and decided to put black text on those areas rather than white, as apparently it offers the higher contrast with the chosen background color. Now this is a subjective estimation and it is entirely up to you to override this and choose your own color, so here’s how to force white text everywhere in contrasted sections:

.contrasted,
.contrasted h1, 
.contrasted h2, 
.contrasted h3, 
.contrasted h4, 
.contrasted h5, 
.contrasted h6,
.contrasted span,
.contrasted .font-icon {
    color: white !important;
    text-shadow: none;
}

Add the above to the “Custom CSS” tab in the Theme Options page.

In regard to your second question about font size, this is the same process, add a rule to set the global font size like this:

body {
    font-size: 13px;
    line-height: 18px;
}

h1 { font-size: 35px; line-height: 40px; margin-bottom: 10px; }
h2 { font-size: 28px; line-height: 34px; margin-bottom: 8px; }
h3 { font-size: 21px; line-height: 30px; margin-bottom: 4px; }
h4 { font-size: 17px; line-height: 24px; }
h5 { font-size: 14px; line-height: 21px; }
h6 { font-size: 13px; line-height: 19px; }

Add those to the “Custom CSS” tab in the Theme Options page.

However be careful when modifying those values as it might not display properly in all cases, for example check that the top menu is displaying properly for tablet and mobile views as well.

I hope that helps, and please feel free to let me know if you need further assistance Best, Jonathan

Hello evocenter,

Thank you for your message. Which version of Spark are you using? There is a new version (Spark 3.0) which now features a Spam Protection, perhaps you could give it a try! You could also use the third-party plugin “Contact Form 7” which offer the possibility to add a CAPTCHA verification.

I hope that helps, please feel free to let me know if there’s anything I can assist you with Best, Jonathan

Hello thinkcio,

Thank you for your message. This error means that the PHP mail() function returned false, and therefore did not send the email Make sure that your own email address has no typo, because sometime it can prevent the email to be sent.

If it still doesn’t work then I would suggest to get in touch with your Web Hosting provider and ask them why the PHP mail() function is not working properly. I’ve seen rare hosts prohibiting sending emails, or allowing it only through their proprietary API, in both case the best thing to do is to solve the issue with them directly! Sorry if I cannot be of any further help but I’m sure you’ll be able to sort things out with the Web Hosting provider.

Please do keep me posted as I’m interested of the outcome, and please feel free to let me know if there anything else I can assist you with, I’ll be happy to help Best, Jonathan

Thanks for the great after sales support. Truly awesome!

OK, so i spoke to my hosting provider….me. Apparently it helps to have the mail server configured. “sudo apt-get install mailutils” fixed it.

It sends now.

Thanks again. Daniel

Great! Thanks for your reply, I’m glad it’s working now Best, Jon

Hello Paul,

Thanks for your message. Yes absolutely you can customize the top menu like you want using the standard WordPress Menu Builder, and you can indeed add links to other pages. The theme supports multilevel nested menus (dropdown) as well. For instruction see this video tutorial: https://www.youtube.com/watch?v=o7SFpyzYlZw

You can see the dropdown menu in action at 4:55

I hope that answer your question, please feel free to let me know if there is anything else I can assist you with! Best, Jonathan

Hello Disclaips,

Thanks for reporting this use case, I’ll look into it for a lightweight, viable and cross-browser solution. A quick search returned this CSS technique which looks interesting, I’ll see if it can be implemented with the current layout. Keep posted for further updates of the theme and thanks again for helping improving the Spark theme even more Best, Jonathan

Hello

Thank you for your message. To achieve what you want, simply add the following code to the “Custom CSS” tab in the Theme Options page:

@media only screen and (min-width: 959px) {
  .spark-main-menu {
    font-size: 14px;
  }
  .spark-main-menu a span {
    font-size: 13px;
  }

}

The first line is to target only screens wider than 959px of width. If you would like to target tablets as well, change that value to 768px.

Customize the two font sizes to adapt the menu titles and subtitles respectively

I hope that helps! Please feel free to let me know if you need any further help, I’ll be happy to assist. Best, Jonathan

PS: the “.spark-main-menu” class is only available since Spark 3.0, if you use a previous version (Spark v2.0 or below) then you might need to replace “.spark-main-menu” with “header nav ul” instead.

Jonathan, I’ve updated the theme, but the video issue is still not resolved. When you play the video, the slideshow does not pause. It keeps sliding.

Hello PunkaTess, Thanks for your comments, for the slider you need to deactivate the auto-slide: go to the Theme Options page and under the “Main Slider” tab set the option Auto Slide to OFF. The slides will have to be controlled manually but at least when viewing the video users won’t get disturbed! That’s the simplest solution I can suggest.

p {
    text-align: center;
}

tags to be centered horizontally. For your last question, images should already be aligned with their container and therefore adapt smoothly to the mobile view, but if this is not the case then I guess there’s something weird going on either on their container either with one of the CSS rules… So here is the code that will resize all images to 50% width (of their container) like you asked:

@media only screen and (max-width: 767px) {
    img {
        max-width: 50%;
    }
}

Hi Jonathan,

I need to have a slider that plays automatically, and will pause during play. I have another I’ve used before, it’s called TN3 Gallery, but when I install it on the site, it doesn’t work on the home page. It will work on any other page, but not the home, which is the only place I need it. Do you know why this plugin will not work with the theme?

Right, I know how to align them horizontally, I’m talking about vertically though. I’ve tried ever attribute I can find, but can’t get that type of responsive placement of images vertically. I have very predefined areas of text on certain background.

Here is the link to TN3: http://www.tn3gallery.com/ I uninstalled it because I have to continue working on other elements. Since it’s a third party plugin, that probably means you won’t be able to resolve the issue. I know it’s impossible to support someone else’s product. That’s why I was trying to stick with the slider that comes with the template. Thanks.

Hey there kelleychambers,

Thanks for your message, I am aware of this issue and I have submitted another update one hour after 3.1 was released to fix this but it wasn’t processed by Envato yet, I believe it’s because of the weekend! Hopefully it should be available for download by tomorrow morning!

In the meantime: simply select any of the “Fonts Options” in the Typography tab, for example select “Remove Text-Shadow from Titles” and the error will disappear.

I hope that helps and sorry for the inconvenience!!! Best, Jon

Yeah, I kinda figured it would difficult to explain but it does seem as though you have a grasp as to what I’m trying to verbalize. Jon, send me an email address to kelley AT runswithpixels DOT com and I’ll create an account for you which as you know, will send you login credentials. I have a “maintenance page” up now so obviously, that’s not what I’m working with.

I just sent you an email Best, Jonathan

I just replied! As usual, you’re a rock star! Thank you so much!

- Kelley

Yes #internal links are being processed only on the landing-page, but now it should work everywhere

Hello cagerattle,

Thanks for your comment. You must upload in the Theme Options page, the ZIP file (untouched) that you downloaded from IcoMoon, there’s no need to unzip it or anything, just upload as is.

If you still get the error then perhaps there is something wrong during the extraction on the server side, if you want me to take a look please send me credentials to your admin panel (with FTP logins as well would be great so I can eventually debug what’s wrong on your install), just send them to me via my profile page: http://themeforest.net/user/JoNa

I look forward to your reply Best, Jonathan

Jon, have you had a chance at all to look at these pieces? I’m two days from scheduled launch and am no where closer then I was three days ago. “Help me, Obi-wan, help me! ;)”

Jon, I figured out two piece of my question: 1) the placing my logo above the slider piece. I put the logo inside the “intro” page (can’t remember what you originally named it) and it works just great. 2) the drop down caret by adding a css declaration of nav > ul > li.spark-has-submenu::after {left: 0% !important; margin-left: -13px !important; color: #ae1056;}

However, I can’t figure out how to change the color or the shape of the caret nor have I found a solution for a:active menu issue noted in “1)” from four days ago. If you could help me with that, I would be eternally grateful.

Hello Kelley,

Thanks for your messages and sorry for my late reply! I’m glad you were able to figure out those issues.

For the little arrow indicating the presence of a submenu, here is how to change its color and size:

nav > ul > li.spark-has-submenu:after {
  border-top-color: red;
  border-width: 10px;
}

This is an arrow built entirely with CSS, there is no image or SVG involved so it’s not possible to change its shape easily, only its size and color as showed above. However if you require more customization you could eventually remove it and use an image instead

Regarding the active menu item, it’s because the correct class to target is ”.current-menu-item” and not ”.active”. Here’s how to fix it in your situation, edit the rule on line 37 in the style.css CSS file of your Child Theme:

nav a.active, nav a:focus, nav a:hover {border-top: 5px solid #3266a6 !important; color: #3266a6 !important;}

nav .current-menu-item a,
nav a.active,
nav a:focus, 
nav a:hover {
    border-top: 5px solid #3266a6 !important; 
    color: #3266a6 !important;
}

That should fix it, however I’ve noticed that on your site all menu items had the ”.current-menu-item” class so all the links will have the active state, you need to fix that issue for the above CSS to work.

I hope that helps and please don’t hesitate to let me know if you require further assistance with this matter, I’ll be happy to help! Best Jonathan

Hello cselmer,

Thanks for your question. Yes it’s absolutely possible to define a custom background image and make it fullscreen. Simply go to the “Background” tab in Theme Options page and select Custom, you will then be able to upload an image.

If you would like your image to fill the entire body area, add the following code to the “Custom CSS” tab in the Theme Options page:

body {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

If you prefer you could also set a different background image for each section individually, here’s how:

/* Set background size for all sections */
.landing-page-section {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/* Define custom background images for each section */
.section-home {
  background: url('http://image.photography5.com/78381809/Landscape/Nature/Green-Plants-Birth-002.jpg');
}

.section-features {
  background: url('http://image.photography5.com/78381809/Landscape/Nature/Green-Plants-Birth-002.jpg');
}

.section-prices {
  background: url('http://image.photography5.com/78381809/Landscape/Nature/Green-Plants-Birth-002.jpg');
}

.section-contact {
  background: url('http://image.photography5.com/78381809/Landscape/Nature/Green-Plants-Birth-002.jpg');
}

Add the above code to the “Custom CSS” tab in the Theme Options page, and replace the URLs with the URL to your custom images.

I hope that helps! Please don’t hesitate to let me know if you need any further assistance with this, I’ll be more than happy to help! Best, Jonathan

Hello fts,

Thanks for your comment. The theme itself is fully translatable using the po/mo files provided. Regarding using a plugin to offer multiple languages at the same time, I know people using them successfully (look at previous comment pages), but I don’t personally have experience with it.

The Spark Theme is based on “OptionTree” which is known to be compatible with WPML, so I believe that it should work flawlessly. In case you need any assistance with the translation/customization please don’t hesitate to contact me, I’ll be happy to help Best, Jonathan