FB banner on my quiz
I tried to add the short code without styler and it gave me a big facebook banner with the quiz underneath. At this point I dnt know whats going on. I used other apps and I don’t have any problem with their short code not producing what is seen on the preview,
Hi Derrick,
can you please provide a link to a quiz instead of your homepage? I need to be able to see the page myself to be able to provide any support.
HD Quiz does not have a facebook banner. Whatever is causing this is NOT HD Quiz. If I can see the page, I can look at what plugin is causing this for you and provide instructions on how to fix.
Thank you for providing a link to a quiz.
The problem is that the page is a preview — it is not published. There is no way for me to view unpublished pages, only you can see those.
Please publish the page so I can view it and then I can help further.
There was a separate issue with the styler that’s why i posted another thread.
Thanks for providing a link to a live quiz!
No worries about the multiple threads. I just wanted to consolidate everything here to make things easier.
Taking a look now. There are definitely some… interesting things happening on your site.
First up is the “Facebook banner”.
What I think is happening is this. Your site is set up to require every page to have a “featured image”. This image is displayed in the header of your site, just below the page title. However, you do not have a featured image set up for this page, so your site is looking at the content of the page, and grabbing the first image it finds to use instead.
To fix, try setting a featured image on the page. Also look at any other plugins you may have installed to see if they are adding this “functionality” in. I cannot tell if this is coming from Divi or another plugin, but I can assure you that it is not HD Quiz doing this.
As for the styles
Can you confirm what you changed in the styler settings? Any font colours, sizes, etc (or better, provide a screenshot of your styler settings page if possible).
Looking at your site, I can see that the styler is loading, but the loaded styles seem to be default. Normally this would be caused by any page caching solution you are using (old styles are cached, need to be cleared out so that new styles can load), but it doesn’t look like you are using one?
If you are using any caching (either a caching plugin, or caching enabled on your host), please try clearing out the cache to see if that works.
ok. let me restyle then screenshot you the results
Link to Screen shot
Thanks for posting, I think I can see the problem now.
The custom CSS rules are being overridden by your theme. Luckily, this is usually a very easy fix.
If you could please re-enable those custom styles and keep them up so I can see it on the page, I can send you some custom rules that you can add to the “Custom CSS” section of the addon that will fix it for you.
I added a featured image and the short code worked but the styler didn’t
Thanks for showing.
The good news is that will be an easy fix for you, but first, an explanation of what the issue is.
HD Quiz inherits as much from your theme as possible (font sizes, colours, etc). This is what allows it to still look good “out of the box” regardless of your theme.
Because of this, the styler works by checking to see if you added a custom value to something (example: custom font size). If you did, great, we use that new value. If you didn’t, then we do nothing and allow the whatever the original value was to load.
The problem on your site, is that something (probably your host. WordPress nor any plugin I am aware of does this), is forcing the fields you leave blank to still have a value. Since it detects that the values are supposed to be numbers, it is setting “empty” to the number 0.
So what is happening for you is that if you do not set, for example, a Question Title or Answer Font Size, it is being saved/loaded as 0.
The Solution: Set those values.
I’ve looked through your other pages and have selected the following values that I think will look good on your site. Feel free to change them as you need of course.
On the Questions tab:
- “Question Title Font Size” to
22 - “Question Padding” to
16 - “Question Spacing” to
16
On the Answers tab:
- “Answer Font Size” to
16
Set Results tab:
- “Results Title / Heading Font Size” to
32 - “Results Score Font Size” to
18
And finally, under the Custom CSS section, add the following:
.post-content .hdq_quiz_wrapper .hdq_quiz {max-width: 600px !important}. This will stop your site from setting the maximum width to 0 if you leave that field blank.
I am not a coding or design guy. Can you give me instructions on how to re-enable custom styles?
These are all settings from the Styler addon, you don’t need to change any code (well, except for the Custom CSS section, which all you have to do is copy/paste what I sent).
Here are screenshots with the relevant fields highlighted.
ok. if i add another Quiz how does the styler knows which short code to add to?
It sill didnt work
I’m so sorry; I made a small mistake in the Custom CSS section.
You did everything right!
Please change the custom CSS from
.post-content .hdq_quiz_wrapper .hdq_quiz {max-width: 600px !important}
to
.hdq_quiz_wrapper .hdq_quiz {max-width: 600px !important}
We are removing the beginning .post-content. Sorry about this, it was an oversight on my part.
Also, just some advice, I see that you are using a background image for your questions. The problem is that you are using black as the text colour, which is hard to read over the background image you chose. Changing the font colours to White will make them much more visible #ffffff.
Without the styler everything looks just fine.
ok that worked. But I still need to know how does the styler knows which short code goes to which quiz if i have more than one quiz?
Excellent! Glad we got that sorted out for you.
> does the styler knows which short code goes to which quiz if i have more than one quiz
The styler styles all quizzes the same. However, right now, it is still possible to override individual styles per quiz. So how feasible this is for you depends on what you’d want to change per quiz.
For example, from what I remember about your site, you probably want to keep the colours and font sizes, etc the same. But you might want to update the background image. Let me know if I’m right here or if there are other things you’d want to change per quiz and I can provide instructions.
Also, I’m actively working on a big upgrade to the addon (won’t be ready for at least a month though), that allows you to save “style templates”, and choose the template on each quiz settings.
Yes I would like to change the background image to be consistent with the topic of each blog
Great, we can use the Custom CSS feature for this. It’s just one line we need to add 🙂
You’ll need two things in order to do this. The Quiz Id, and the URL of the image you want to use.
Let’s start with getting the Quiz ID.
On the main HD Quiz where the Shortcode is listed, each shortcode has a number. This number is the quiz ID.
To get the image URL, first upload the image. Once the image is uploaded, WordPress will have a field called File URL in the sidebar. You can copy this or click on the Copy URL to clipboard button.
Reference images:
Now that you have both the Quiz ID and the Image URL, we can create our custom CSS rule. The format is:
body #hdq_QUIZ_ID .hdq_question { background-image: url(IMAGE_URL) !important; }
Just replace QUIZ_ID and IMAGE_URL with the real values and add it to the Custom CSS section of the Styler addon.
ok. One last thing. Where is the featured image upload?
Setting the featured image depends on your site and what editor you are using. It can usually be set in the sidebar when editing a page or post though.
Here is how it looks in Gutenberg (which I think you are using on your site).
If you are instead asking how to upload an image to get the URL, the easiest way is to use your site’s Media Library page (found in the main WordPress admin menu)
No it says in the styler I can set the featured image roundness value but there is no upload for a featured image in the styler only a question background image?
I think there has been some confusion here, so I want to make sure we are using the same terminology.
The only time that I referenced a Featured Image was in relation to one of your original issues where since you did not set a featured image for the page you added the quiz to, your site was grabbing the first image on the page to use instead.
This is why I provided instructions for two different things in my previous response.
The first was on how to set a featured image on your page or post since what you asked was “Where is the featured image upload?”. My second instructions “If you are instead asking how to upload an image to get the URL” was how to upload an image and get the URL to use with the Custom CSS section to set a Question Background Image.
There is also the featured image that can be set for each question, but I do not think this is what you are asking about?