Hi I’ve inserted a visual composer widget into the sidebar of my website.
I’d like the heading & font to be the same as in the settings of my website. How do I make this the same. Title colour should be #24b6b7 and size 20 and content size 14.
Also how do I decrease the width of the contact form text box as on my one laptop the box is wider than the sidebar so sticks out of the website border. I’ll send you the login details privately as it has a ‘Coming soon’ page on it.
Also do you know how I’d put the contact form onto the metaslider like on http://fascinationcourt.co.uk/?
URL: http://217.199.187.65/tregowanstives.co.uk/apartment-3/
This is a private message.
You’ll see on the home page how it is meant to look. I didn’t use the sidebar visual composer widget there, I used the pagebuilder visual composer widget & the title & font size is correct.
Also the visual editor widget in the heading doesn’t use the same settings as the site either. I’d like the link ‘Contact us’ to be the same as the headings in the website and I’ve got it set on ‘Heading 3’ but the font is smaller than it should be.
Hi Elise
You can fix this with some custom CSS. If you navigate to Appearance > Custom CSS, you’ll get our custom CSS editor. Just add the following code.
#secondary .widget .widget-title { font-size: 20px; color: #24b6b7; font-weight: normal; } #secondary .widget .textwidget { font-size: 14px; }Let us know how you get on
Magus
Thank you for your quick response, that worked well.
What about my 2 other queries or should I open a new ticket for each of them?
How do I decrease the width of the contact form text box as on my one laptop the box is wider than the sidebar so sticks out of the website border. I’ll send you the login details privately as it has a ‘Coming soon’ page on it.
Also do you know how I’d put the contact form onto the metaslider like on http://fascinationcourt.co.uk/?
Hi Elise
Sorry about that, missed the other two questions.
For the contact form please add this to Appearance->Custom CSS
#secondary .wpcf7-form-control { max-width: 100%; }The overlay feature required for adding a contact form to the slider is part of Metaslider Pro. You can upgrade to this by navigating to MetaSlider->Go Pro.
Magus
Hi thank you, the code to keep the contact form within the sidebar worked but now I’ve made a change to the contact form (ie it is now in tables code) it is now going out of the border again. See http://217.199.187.65/tregowanstives.co.uk/apartment-1/.
Please help.
The code for the form is
Your Name (required)
[text* your-name]
Your Email (required)
[email* your-email]
Telephone
[text your-telephone]
Arrival date
[date* date-209]
Nights
Adults
Children
[select Nights “7” “14” “21”]
[select Adults “1” “2” “3” “4”]
[select Children “1” “2” “3” “4”]
Your Message
[textarea your-message]
[submit “Send”]
I see the code didn’t show up with the tables etc, you welcome to login to see what I mean, send the login details above
Hi Elise
Please try this
The issue is that tables are not responsive. I have redesigned the table to make the most of the space and set the width of the text elements so they do not break the sidebar margin.
Let us know how you get on
Magus
Thank you, that worked for most of it.
The message text area is still going out – even when I add
[textarea your-message size:30]
Also the Adults & Children drop box are completely off the page – do you know how to get it back in?
[select Nights “7” “14” “21”]
[select Adults “1” “2” “3” “4”]
[select Children “1” “2” “3” “4”]
Actually I think for the 3 apartments I won’t put it into tables as it makes it too complicated & might mess it up when looking on other devices, so don’t worry, thanks.
Elise
OK, so I’ve removed the tables so now the checkboxes – Nights / Adults / Children are one under each other.
It doesn’t look as good as it is so spaced out so if you think of a way for it to go on one line without putting the whole form into a table please let me know. Otherwise don’t worry it’s fine. See http://217.199.187.65/tregowanstives.co.uk/apartment-3/
I read that you just had to put them on one line, ie -[select Nights “Nights” “7” “14” “21”] [select Adults “Adults””1” “2” “3” “4”] [select Children “Children””1” “2” “3”]
I tried this on http://217.199.187.65/tregowanstives.co.uk/apartment-1/ – it looks ok but then looks strange after selecting as it doesn’t look right not having the title above each of the drop down options.
Let me know if you have any suggestions.
Thanks Elise
Hi Elise
Please try this in the custom CSS to align the dropdowns with the labels for Apartment 1.
#secondary .wpcf7-select { margin-right: 8px; } #secondary :first-child.wpcf7-select { margin-right: 2px; margin-left: 1px; }Magus