|
johnlang
|
March 1, 2017 at 6:46 pm
I’m using the short embed code to create my ticket selector page (https://oxyfoodconference.org/registration/) but the text and button styling seems entirely out of whack – I seem unable to control color and size. Any suggestions?
|
|
Seth Shoultes
|
March 2, 2017 at 8:12 am
Hey there,
In your theme’s CSS file you have some style that is making the text white:
https://oxyfoodconference.org/wp-content/themes/khore/css/schedule.css
Around line 191:
.vertical-center > div > div {
color: #ffffff;
font-size: 2.5645vw;
font-weight: 100;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 1.285vw;
padding-right: 1.285vw;
padding-top: 0;
text-transform: uppercase;
}
You should be able to override that by adding the following CSS to in your WP dashboard > Appearance > Customize > Additional CSS settings:
.vertical-center > div > div { color: #000; }
Hope that helps. Please let us know if you have further questions.
|
|
johnlang
|
March 2, 2017 at 1:23 pm
Thanks. Incredibly helpful. I added the following to the Additional CSS
I added the following to the custom css:
.vertical-center > div > div
{
color: #000;
font-size: 1.5vw;
text-transform: capitalize;
}
and that seems to have cured the display issues on that page. But I’ve added a few free tickets to test some of the other functionality and it looks like there are css issues in the subsequent pages. Have I just exchanged one problem for another?
|
|
Lorenzo Orlando Caum
|
March 2, 2017 at 2:03 pm
Hi,
Could you let us know the styling that you are wanting to change?
You can share a screenshot of the specific areas:
https://eventespresso.com/wiki/troubleshooting-checklist/#screenshots
—
Lorenzo
|
|
johnlang
|
March 2, 2017 at 2:23 pm
In this image:
https://oxyfoodconference.org/wp-content/uploads/2017/03/Screenshot-2017-03-02-13.15.58.png
the text above the input boxes smashes against the menu. It is also too small to read comfortably; ideally I’d want it the same size as the text descriptions for the user input. Also, the proceed to registration button is flush against the right side, as is the cancel registration link.
For this one: https://oxyfoodconference.org/wp-admin/upload.php?item=1118
I’d like to make the register now button text and the # of ticket selector text more prominent. Also, the ticket description seems to be centered on the line, rather than aligned left or right. I’d like to remove the (USD) description after the dollar amount
Thanks again for any help.
|
|
Seth Shoultes
|
March 6, 2017 at 10:10 am
Hi,
These issues you are seeing seem to be issues with the theme, in this file:
https://oxyfoodconference.org/wp-content/themes/khore/css/main.css
Try adding this CSS using the method I mentioned above (using the CSS editor inthe WP admin):
.page {
margin-left: 20px;
margin-top: 30px
width:80%;
}
If you have further issues, I would recommend contacting the theme developer, as they should be responsible for fixing these issues and updating their theme files.
Please let us know if you have further questions.
|
|
Josh
|
March 6, 2017 at 10:43 am
Hi there,
I can’t see your second screenshot, but here’s something you can add that will help:
#ee-single-page-checkout-dv {
width: 90%;
margin: 0 auto;
font-size: 1.50em;
}
|
|
Seth Shoultes
|
March 6, 2017 at 10:48 am
Almost forgot, you might want to check the theme settings in the WordPress Admin > Appearance > Customize page to see if you are able to adjust any of the items you are trying to fix because the second part of your question seems to be related to the font-size styling, which is currently set at 12px in your theme’s CSS file.
If there are no options to adjust the CSS in the theme settings, then you can use something like this to increase the font size for the the submit button and ticket select inputs:
input, select, button, textarea {
font-size: 18px; /* Change this to suit your needs. */
}
Also, if you are interested in learning more about CSS, I would suggest this resource: https://www.w3schools.com/css/default.asp
I also use the Firefox Developer tool, called Page Inspector, to inspect the problem elements and see what CSS has been applied. I can also edit the CSS directly in the page to see the live results: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector
Hope that helps. Please let us know if you have further questions.
|
