|
gary cox
|
July 9, 2014 at 11:42 am
Hi,
I am having problems customizing the registration form.
I want to change the width of the form.
I have located the code in the themeroller-base.css file
#event_espresso_registration_form {
margin: 10px 3px;
}
I want to update this to
#event_espresso_registration_form {
margin: 3px 3px;
height:750px;
width:650px;
}
So that its tighter. I have changed the file and uploaded it to the correct folder however the changes are not being picked up.
Can you give me some guidance.
THanks
Gary
|
|
Lorenzo Orlando Caum
|
July 9, 2014 at 1:51 pm
Hi Gary,
Was that change made to a copy of the stylesheet in the following location?
wp-content/uploads/espresso
—
Lorenzo
|
|
gary cox
|
July 11, 2014 at 3:55 am
Hi,
The changes were picked uo actually but u made my change to
/wp-content/plugins/event-espresso/templates/css/themeroller/themeroller-base.css
the only file in my uploads is espresso_default.css. There are no files in my /wp-content/uploads/espresso/templates/css/espresso_default.css
Is this correct
Thanks
Gary
|
|
gary cox
|
July 11, 2014 at 4:30 am
Hi,
I trying to make changes now at the first address above and none are being picked up now. Where is the correct place or where should i locate the file.
Thanks
Gary
|
|
Lorenzo Orlando Caum
|
July 11, 2014 at 7:00 am
Hi, You should not edit the core files as your changes will be lost on a software update.
You could add the new style to your stylesheet for your child theme or a plugin like My Custom CSS.
Are you using a tool like Firebug or Chrome Developer Tools to inspect elements?
This will tell you the exact CSS that is in use.
—
Lorenzo
|
|
Tony
|
July 11, 2014 at 7:04 am
I would recommend using either the My Custom CSS or Reaktiv CSS Builder plugins to add custom styles such as these.
This will make it much easier to edit from within the Dashboard itself. For example using My Custom CSS you would simple go to Dashboard -> Custom CSS and input your custom styles, like so – http://take.ms/1FbcI
Its possible to edit the files in the way you have done above however it looks like you are editing ‘espresso_default.css’, which is only loaded when NOT using theme-roller themes so is not what you are intending.
You could copy the themeroller-base.css file to wp-content/uploads/espresso/themeroller/themeroller-base.css and make changes there if you prefer.
Does that help?
|
|
gary cox
|
July 11, 2014 at 9:07 am
Hi,
Thanks i understand why you would do this so I’m now using custom css manager and its working great.
/* Remove “Free Event” text from event description */
p.event_prices, p.start_date, p.event_time{
display: none;
}
However whet if i want to change something on more that one page with the same details.For example
/* Remove “Registration Details Heading*/
h3.section-heading{
display: none;
}
What if i want to change the h3 on another page how does it know which page I’m referencing
Thanks
Gary
|
|
Tony
|
July 11, 2014 at 9:45 am
Almost all output from Event Espresso is wrapped in some kind of event_espresso wrapper.
The easiest way to find this is using Chrome Dev Tools.
Using Chrome right click on the element you want to style, as you mention a h3 we’ll go with that – http://take.ms/ec7Dv
You should see a context menu with Insepct Element – http://take.ms/7C2kV
The will open dev tools and select the current element – http://take.ms/GXVr7
(It will look different from mine)
You can then see the wrappers around that elements, the parent div has an ID of event_espresso_registration_form so you could use
#event_espresso_registration_form h3 {}
To only style that element, or use the class event-display-boxes so
.event-display-boxes h3 {}
The more you use the more you can grasp the concept and you’ll be able to style all h3’s within the event-display-box on the ‘My custom event list’ page in no-time 🙂
Hope that helps.
|
|
gary cox
|
July 22, 2014 at 8:32 am
Hi,
I am editing the css and i am trying to get the form to be positioned in the middle of the screen so when it views on mobile it adjusts accordingly.
I am using this
#event_espresso_registration_form {
margin: 3px 3px;
height: 100%;
width: 100%;
position: center;
}
It makes the form look fine on mobile but takes up the whole screen on pc. Is there any way to keep it centred but not take up whole screen.
Thanks
Gary
|
|
Josh
|
July 22, 2014 at 3:19 pm
Hi Gary,
The width: 100% is likely why it’s taking up the whole screen. Have you looked into trying CSS media queries?
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
|
