Support

Home Forums Event Espresso Premium Custom CSS help for styling

Custom CSS help for styling

Posted: March 22, 2019 at 12:37 am


jonmaxim

March 22, 2019 at 12:37 am

Hello! Sorry if I’m asking the wrong question, but I’ve taken on a project using the Event Espresso plugin (although I’ve built many WordPress sites I’ve never used this plugin). Do you offer Custom CSS support for styling?

I have copied over all the settings from the original build (custom WP theme) and was hoping all would look the same. If you scroll to the bottom of the page here https://themaxim.com/event-category/maximum-copy/ you’ll see the Event Espresso info. On my new page it looks like this https://maxim.bantergroup.com.au/courses/maximum-copy/

Are you able to offer help with how to style the new page in a similar way to the old site? Also not sure where to address styling for the registration page.

Hoping you can help.

Regards
Melanie


Tony

  • Support Staff

March 22, 2019 at 6:16 am

Hi Melanie,

Do you offer Custom CSS support for styling?

Can you clarify what you mean by this, please?

You can add additional CSS styling to your theme’s styles to target EE’s elements if preferred, but I’m not sure if that what you are referring to.

Are you able to offer help with how to style the new page in a similar way to the old site?

Event Espresso applies minimal styling to most of its output and relies on the theme’s styling, the reason for this is it allows our output to be styled consistently with the rest of your site. We don’t override the styles your theme is applying with our own which means EE will automatically look similar to the rest of your site.

However, the output from here:

https://themaxim.com/event-category/maximum-copy/

Is not the default EE output so its not just CSS styling being applied there, that’s a custom table being generated by something on the site.

The table has a class of sessions_table (which is not something EE uses) and theres specific styles for that output in the themes styles.css file but to get that to work and look exactly the same your going to need your own custom table on the next site.

Also not sure where to address styling for the registration page.

Can you explain further what you want to style?

EE doesn’t have a ‘Custom CSS’ section for you to add styles to, but in short, it doesn’t need one. You add your custom styles to either the themes styles, or you could use a custom CSS plugin if needed.


jonmaxim

March 22, 2019 at 2:38 pm

Hi Tony – thanks for your reply. I guess what I was asking is whether you guys will provide CSS code for me to apply changes. I know where to add the code, but a bit outside my skill set to write it! Sorry if that’s a stupid question, but I’m used to dealing with WP theme developers who will provide CSS code if you explain what you’re trying to achieve.

For example, how would I change the styling of the “Upcoming Events” heading and heading for course name and date? https://maxim.bantergroup.com.au/courses/maximum-copy/ Can the “View details” button be styled to suit the buttons on the site? Can the button text be changed to “Register”? Can the [more…] link be removed as it doesn’t seem to be required as well as View Details button? Can the pricing be added in at this level?

How would I hide post date, “Posted at … by Jon Maxim”, and tags from these pages? https://maxim.bantergroup.com.au/course/maximum-copy-brisbane-april-2019/

Regards
Melanie


jonmaxim

March 25, 2019 at 5:06 am

This reply has been marked as private.


Tony

  • Support Staff

March 25, 2019 at 5:46 pm

Hi Melanie,

I guess what I was asking is whether you guys will provide CSS code for me to apply changes. I know where to add the code, but a bit outside my skill set to write it!

Sure, if you let us know specifics we can help point you in the right direction here on the forums.

We won’t go through every single element on your site applying styles as that’s not a service we currently offer, but we can help.

Sorry if that’s a stupid question, but I’m used to dealing with WP theme developers who will provide CSS code if you explain what you’re trying to achieve.

There are no stupid questions 🙂

However, one thing that’s important to note is the above is very different from asking a theme provider to provide some CSS to alter the output that is already there. The table you are referring to is completely custom, so the elements aren’t there to be styled to begin with.

For example, how would I change the styling of the “Upcoming Events”

I can give you an example, but what do you want to change on that heading?

heading and heading for course name and date?

Do you mean the event titles?

You’ll need to let me know what styles you are looking to apply so I can give you an example, otherwise, I’ll just be writing CSS that is no help to you.

Can the “View details” button be styled to suit the buttons on the site?

Yes, but which button styles?

Looking at the rest of the page it looks like your theme doesn’t have button styles, for example, the ‘Register’ button in the footer is the same as the one you are asking about. Is there a button on your site you want the EE button to be styles the same as that you can point me to?

Can the [more…] link be removed as it doesn’t seem to be required as well as View Details button?

Yes, we can touch on again shortly as it may change based on your settings.

Can the pricing be added in at this level?

Yes, go to Event Espresso -> Events -> Templates -> Event list pages -> Display Ticket Selector.

Set that to Yes and you’ll see the same ticket selector as you see on the event details page on the event list.

How would I hide post date, “Posted at … by Jon Maxim”, and tags from these pages?

That’s added by your theme rather than EE so if your theme doesn’t have the option to no display ‘post meta’ you can hide it with CSS but it looks like you are already doing this.

To hide that section specifically for EE events use:

article.type-espresso_events .post_info {
    display:none;
}

Hi Tony – just wondering if you’re able to offer any further advice? I’ve been waiting a few days for a reply. Do you have documentation on how to style your plugin?

I’m sorry for the delay but just to note, support staff are available Mon-Fri 12PM – 12AM UTC so you won’t usually get a response over the weekend, we try to keep an eye on the forums for emergencies outside of support ours but officially we are available Mon-Fri.


jonmaxim

March 25, 2019 at 8:21 pm

Thanks Tony! My apologies for the follow up … I’m under a bit of pressure with this project and sometimes I forget how far ahead time-wise Australia is …
I’m going to go through all your comments and work out exactly what I’m trying to do. How many more hours are you available for support today? Currently 1.30pm Tuesday here in Australia, but I reckon I’ll be having a late one …

Regards
Melanie


jonmaxim

March 26, 2019 at 12:23 am

OK Tony, here’s what I’m trying to achieve:

ON COURSE CATGEORY PAGES
eg. https://maxim.bantergroup.com.au/courses/maximum-copy/

  • Change “Upcoming events” text from H1 to H3 (with H3 styling from Theme Options)
  • Reduce blank space under Event Title
  • Hide “add to iCal” link
  • Hide (more…) link
  • Style “View Details” button to match Default Button, as seen here https://maxim.bantergroup.com.au/courses/. Default Button settings from Theme https://pasteboard.co/I796imq.jpg. Text color is #4d4d4d and Hover Background Color is #9498ad
  • Change “View Details” button text to “Register”

  • ON COURSE PAGES
    eg. https://maxim.bantergroup.com.au/course/maximum-copy-brisbane-april-2019/

  • Hide “show details+” text
  • Align “Details” and “price” columns better, similar to the existing site https://themaxim.com/events/maximum-copy-brisbane-april-2019/
  • Style “Register Now” button to match Default Button, and move location to underneath, as per existing site https://themaxim.com/events/maximum-copy-brisbane-april-2019/
  • Can Quantity buttons be styled as per existing site?
  • Hide “add to iCal” link
  • Remove link from Venue city name, as it goes to a page with no useful info
  • ON REGISTRATION PAGE
    eg. https://maxim.bantergroup.com.au/registration-checkout/

  • Hide “Details” below Event Title
  • Change “Name and Description” to “Description”
  • Left align Column headings, eg. “Description” and “Price”
  • Style “Proceed to Payment Options” button to match Default Button, and move location to underneath, as per existing site https://themaxim.com/registration-checkout/
  • Once you reach Payment page, style “Proceed to Finalise Registration” to match default button. Change “Name and Description” to “Description”, and left align the columns of cost etc info (as requested above).
  • I’ve attempted some custom CSS, but it’s not my forte, so it doesn’t all work …

    Thank you again.
    Melanie


    Tony

    • Support Staff

    March 26, 2019 at 3:47 pm

    A lot of what you are asking for is effectively re-applying customizations a developer has made on the original site to the new one, which is not something we would normally cover under support.

    However, here is what I can answer:

    ON COURSE CATGEORY PAGES

    Are you not adding the ticket selector to this section now then? (I added details on how in my previous reply)

    The reason I’m asking is it changes some of the sections you are requesting to change.

    Change “Upcoming events” text from H1 to H3 (with H3 styling from Theme Options)

    To do this you need to be using a child theme as you need to load a custom version of the template EE uses, or at least a custom theme that you full control, are you using either of those?

    Reduce blank space under Event Title

    There’s a BR included in the form (where the button is located), you can hide the space from that using:

    .espresso-event-list-wrapper-dv .event-content form br {
        display: none;
    }

    But this may change if you add the ticket selector in.

    Hide “add to iCal” link

    Whilst you can do that with CSS, I’d recommend adding a small snippet of code to the site to remove the feature rathr than leaving it in and then hiding it.

    The snippet is here:

    https://gist.github.com/joshfeck/1bc3731cd1c468916c7f

    You can add that to a custom functions plugin on your site, we have some documentation on creating one here:

    https://eventespresso.com/wiki/create-site-specific-plugin-wordpress-site/

    Style “View Details” button to match Default Button, as seen here https://maxim.bantergroup.com.au/courses/. Default Button settings from Theme https://pasteboard.co/I796imq.jpg. Text color is #4d4d4d and Hover Background Color is #9498ad

    As it stands EE would need to have the button class added to it from your theme to allow your theme’s styles to target that button but we don’t have an option to do that currently, the other option is to copy the current styles into their own CSS selector that does apply to the button but it means any changes made in the theme panel will not apply, you’d have to update the CSS in use manually to match.

    So are the buttons styles you are using now final?

    Change “View Details” button text to “Register”


    This can be done (you’ll need another snippet to do it), but if you are going to include the ticket selector in the event lists anyway, this will change automatically.

    So are you adding the ticket selector?

    ON COURSE PAGES

    Hide “show details+” text

    We have an option for this in the plugin:

    Event Espresso -> Events -> Templates -> Ticket Selector Template Settings
    -> Show Ticket Details?

    Set that to no and save.

    Align “Details” and “price” columns better, similar to the existing site https://themaxim.com/events/maximum-copy-brisbane-april-2019/

    You can left align the ticket selector table using:

    .tkt-slctr-tbl thead th, .tkt-slctr-tbl tbody td {
        text-align: left;
    }

    Style “Register Now” button to match Default Button, and move location to underneath, as per existing site https://themaxim.com/events/maximum-copy-brisbane-april-2019/

    Same issue regarding the CSS class and styles as the previous button, so before selecting a method to do this, are the styles currently in use final?

    To move the button below on the left you can use:

    .single-espresso_events .ticket-selector-submit-btn-wrap {
        float: none;
    }

    Can Quantity buttons be styled as per existing site?

    No, not with just CSS at least as the old site is using some jQuery to add additional elements and style those.

    Hide “add to iCal” link

    This is done with the snippet I provided earlier, it’s the same output just in another location so it removes it in both pages.

    Remove link from Venue city name, as it goes to a page with no useful info

    That links to the venue’s custom page, looking at it it looks like you’ve not added anything to the venue details page.

    The link can be removed but usually users add venue details there so are you sure you want it remove rather than adding details to the venue?

    Event Espresso -> Veneus -> {Venue}

    ON REGISTRATION (CHECKOUT) PAGE

    Hide “Details” below Event Title

    You can use:

    #spco-attendee_information-dv .spco-ticket-info-dv h5 {
        display: none;
    }

    Change “Name and Description” to “Description”

    This can be done but needs some PHP, I can give you an example that can go in the same custom functions plugin you create from earlier but checking your comfortable with that first?

    Left align Column headings, eg. “Description” and “Price”

    You can use:

    .spco-ticket-info-dv thead th, 
    .spco-ticket-info-dv tbody td {
        text-align: left;
    }


    jonmaxim

    March 26, 2019 at 6:33 pm

    Thanks Tony – I’ll work through all your notes. I’m not going to add the Ticket Selector to these pages https://maxim.bantergroup.com.au/courses/maximum-copy/

    I hadn’t planned on using a Child theme – I find I can normally make all the changes I need by using the Code Snippets plugin, but can install Child theme if needed.

    Regards
    Melanie


    Tony

    • Support Staff

    March 29, 2019 at 10:47 am

    I’ll work through all your notes. I’m not going to add the Ticket Selector to these pages

    You can use this snippet to change the ‘View details’ text:

    https://gist.github.com/lorenzocaum/04209991359866938dc0

    Change the REPLACE ME text with whatever you prefer to be displayed on the button.

    I hadn’t planned on using a Child theme – I find I can normally make all the changes I need by using the Code Snippets plugin, but can install Child theme if needed.

    It all depends on the change you are trying to make, you can’t change/remove the link to the venue page using a snippet.

    You’ll need a child theme, then copy:

    \event-espresso-core-reg\public\Espresso_Arabica_2014\content-espresso_events-venues.php

    To your child theme’s root directory and set line 9 to be:

    $venue_name = espresso_venue_name( 0, 'none', FALSE );


    jonmaxim

    March 31, 2019 at 11:36 pm

    Hi Tony. Hope you had a great weekend!

    OK, I have been through all your notes, and the outstanding issues seem to be:

    1. Across ALL Event Espresso pages, style buttons to match Default Button, as seen here https://maxim.bantergroup.com.au/courses/. Default Button settings from Theme https://pasteboard.co/I796imq.jpg. Text color is #4d4d4d and Hover Background Color is #9498ad

    2. On Course Pages, eg. https://maxim.bantergroup.com.au/course/maximum-copy-brisbane-april-2019/ how do I hide the information that I’ve now added to the Venue pages? The section I wish to hide is detailed on this screenshot https://pasteboard.co/I84AFMD.jpg I’m a bit confused that the Brisbane word is a link that then takes you to exactly the same information as displays on the previous page. I tried selecting NO for ‘Display Venue Details’ in the Settings but that then Hides everything.

    3. Are you able to provide a Code Snippet (similar to provided above) to change the text on the ‘Proceed to Finalize Registration’ button on the Registration Checkout page? Also Custom CSS to left align this button as we’ve done on the other pages.

    I have installed the Code Snippets plugin and have used that for a couple of your changes. At this stage I’m NOT using a Child Theme.

    Are you able to help with these last few styling changes?

    Regards
    Melanie


    Tony

    • Support Staff

    April 1, 2019 at 7:38 am

    1. Across ALL Event Espresso pages, style buttons to match Default Button, as seen here https://maxim.bantergroup.com.au/courses/. Default Button settings from Theme https://pasteboard.co/I796imq.jpg. Text color is #4d4d4d and Hover Background Color is #9498ad

    Yes, because I asked a question on whether or not the current styles were final which I think you’ve missed, but here is a method that adds an additional class to some of EE’s buttons so that your theme’s styles should apply:

    https://gist.github.com/Pebblo/d321818666fb1ba33140558744fe9b82

    That function adds a ‘qbutton’ class to the ticket selector button and the SPCO checkout buttons.

    2. On Course Pages, eg. https://maxim.bantergroup.com.au/course/maximum-copy-brisbane-april-2019/ how do I hide the information that I’ve now added to the Venue pages? The section I wish to hide is detailed on this screenshot https://pasteboard.co/I84AFMD.jpg I’m a bit confused that the Brisbane word is a link that then takes you to exactly the same information as displays on the previous page. I tried selecting NO for ‘Display Venue Details’ in the Settings but that then Hides everything.

    For this, you need a child theme to do it properly, you can hide those details using CSS but one issue with that is Google maps is no longer free, loading it and then hiding it means you are paying for wasted page loads.

    The file that loads that content, is also the same file you need to edit to remove the link from the Venue name (which you have as the location) so either of those fixes require you load a custom version of the template.

    3. Are you able to provide a Code Snippet (similar to provided above) to change the text on the ‘Proceed to Finalize Registration’ button on the Registration Checkout page?

    We have examples of updating the string used on that button here:

    https://eventespresso.com/wiki/customize-checkout-registration-button-text/

    Also Custom CSS to left align this button as we’ve done on the other pages.

    For the alignment, try:

    .spco-whats-next-buttons {
        text-align: left;
    }

    I have installed the Code Snippets plugin and have used that for a couple of your changes. At this stage I’m NOT using a Child Theme.

    Some changes can be made using snippets, others need to be done using templates and those need a child theme.


    jonmaxim

    April 3, 2019 at 4:57 pm

    Thank you Tony! My apologies for the misunderstanding about the buttons – I thought I had explained that default styling was final.

    So that Code Snippet has changed most of the buttons, and they look great! The one button it hasn’t changed is the “REGISTER” button here https://maxim.bantergroup.com.au/courses/maximum-copy/ which is really the first impression of the process. How would I fix that one as well?

    Regards
    Melanie


    jonmaxim

    April 3, 2019 at 7:15 pm

    Hi again Tony – just going through the list of further changes requested by my client, and wondered whether it’s possible to change any of the following (screenshot to better explain https://pasteboard.co/I8vfWDY.jpg):

    On the Registration Checkout page https://maxim.bantergroup.com.au/registration-checkout/ is it possible to:
    * Change the color of the warning message for required fields, and just standard text rather than bold?
    * Add a bit more blank space to the top section of the page – it’s very cramped.
    * Change the text “Please answer all questions correctly before proceeding”.
    * Remove the info appearing below that, as it seems irrelevant (please see screenshot)
    * The Pay Now button is lost (very small) if you click Strop option – can this be styled same as other buttons we’ve changed? https://pasteboard.co/I8verSE.jpg

    Thank you.
    Regards
    Melanie


    Tony

    • Support Staff

    April 4, 2019 at 11:21 am

    So that Code Snippet has changed most of the buttons, and they look great! The one button it hasn’t changed is the “REGISTER” button here https://maxim.bantergroup.com.au/courses/maximum-copy/ which is really the first impression of the process. How would I fix that one as well?

    The snippet I gave you has 2 functions, the first one specifically targets that button, so did you add both of those functions to the site?

    * Change the color of the warning message for required fields, and just standard text rather than bold?

    Whilst you can change this, from a UX/Accessibility point of view I’d advise you don’t, red fields indicate a problem and for partially sighted users it can help, but ultimately the choice is yours.

    #ee-single-page-checkout-dv .ee-asterisk, #ee-single-page-checkout-dv .ee-input-error, #ee-single-page-checkout-dv .ee-required-text {
        font-weight: normal;
        color: blue !important;
    }

    Change the colour to whatever you prefer.

    * Add a bit more blank space to the top section of the page – it’s very cramped.

    Depends how much spacing, but try something like:

    h4.big-event-title-hdr {
        margin: 1rem 0;
    }

    * Change the text “Please answer all questions correctly before proceeding”.

    You’ll need to use a function to ‘translate’ the string, I have an example here:

    https://gist.github.com/Pebblo/8201e23daaaf479e70ad7472e9477f8e

    For your example your $strings array would need to be something like:

    $strings = array(
            'Please answer all required questions correctly before proceeding.' => 'Your custom text here',
    );

    That same function can be used to translate most of the strings within EE if needed.

    * Remove the info appearing below that, as it seems irrelevant (please see screenshot)

    It’s not irrelevant if your registration form goes below the fold, once you get to the bottom of the page and click submit its not obvious there’s an issue at the top of the registration form.

    I don’t think it can be removed but will check into this further to confirm.

    * The Pay Now button is lost (very small) if you click Strop option – can this be styled same as other buttons we’ve changed?

    The easiest way is to add the class that your theme styles using some jQuery, here is an example:

    https://gist.github.com/Pebblo/6b56ed1c33e6d6f67a2747fb40b81b96


    jonmaxim

    April 8, 2019 at 6:12 pm

    Hi Tony – back trying to get this project completed … switching between too many websites!

    Yes, I added this into Code Snippets https://gist.github.com/Pebblo/d321818666fb1ba33140558744fe9b82 Tried adding as one snippet, and also splitting into two. It doesn’t appear to be changing that first REGISTER button, seen here https://maxim.bantergroup.com.au/courses/maximum-copy/

    I agree about the red warning labels … unfortunately the very creative client has other ideas about how he would like it to look … Thanks for the Custom CSS, but it doesn’t appear to have changed the text below the fields, just the text in the popup. Any other ideas? https://pasteboard.co/I9fYubP.jpg

    Thank you for all your help – I really appreciate it.

    Regards
    Melanie


    jonmaxim

    April 8, 2019 at 7:07 pm

    Hi again – just a quick revisit of one of the above issues – I’ve installed the Child Theme – are you able to assist with removing all the information on this page, from “Description” down? https://maxim.bantergroup.com.au/course/maximum-copy-brisbane-april-2019/

    So displaying the Venue with link and address, and when you click that link you go to the page with the map https://maxim.bantergroup.com.au/venues/brisbane/ We are probably going to add more info here about parking and public transport.

    Regards
    Melanie


    Tony

    • Support Staff

    April 9, 2019 at 9:02 am

    Yes, I added this into Code Snippets https://gist.github.com/Pebblo/d321818666fb1ba33140558744fe9b82 Tried adding as one snippet, and also splitting into two. It doesn’t appear to be changing that first REGISTER button, seen here https://maxim.bantergroup.com.au/courses/maximum-copy/

    Actually, my mistake.

    Your Register button is the ‘view details’ button, which I thought was also passed through the filter I mentioned…. but digging into the code, it’s not.

    Looking into this right after this reply and will update my gist shortly.

    I agree about the red warning labels … unfortunately the very creative client has other ideas about how he would like it to look … Thanks for the Custom CSS, but it doesn’t appear to have changed the text below the fields, just the text in the popup. Any other ideas? https://pasteboard.co/I9fYubP.jpg

    The text you’re referring to doesn’t have those styles applied, so my CSS isn’t working at all.

    Because EE uses !important to set the colour both it and my CSS have the same specificity, meaning whichever one loads ‘last’ on the page will win.

    Hmm, let’s try getting a little more specific with my CSS to see if that works, so try this:

    #ee-single-page-checkout-dv .ee-asterisk, 
    #ee-single-page-checkout-dv .ee-input-error, 
    #ee-single-page-checkout-dv label.ee-required-text {
        font-weight: normal;
        color: blue !important;
    }

    Hi again – just a quick revisit of one of the above issues – I’ve installed the Child Theme – are you able to assist with removing all the information on this page, from “Description” down? https://maxim.bantergroup.com.au/course/maximum-copy-brisbane-april-2019/

    Copy \event-espresso-core-reg\public\Espresso_Arabica_2014\content-espresso_events-venues.php

    Into the root directory of your child theme.

    You’ll need to remove the calls to whatever you don’t want included on the page from that file, for example to remove the map, remove:

    <?php espresso_venue_gmap( $post->ID ); ?>

    To remove the description etc after the map, you’ll have:

    <?php  if ( espresso_venue_has_address( $post->ID )) : ?>
    	<strong><span class="dashicons dashicons-location-alt"></span><?php _e( 'Address:', 'event_espresso' ); ?></strong>
    	<?php espresso_venue_address( 'inline' ); ?>
    	<div class="clear"><br/></div>
    <?php endif;  ?>

    Then after that remove everything up to the closing </div> tag on line 54.


    Tony

    • Support Staff

    April 9, 2019 at 9:27 am

    Gist updated, it now uses jQuery to add the ‘qbutton’ class to the ticket selector button whenever the JavaScript file for the Ticket Selector is loaded on the page.

    You’ll need to remove code used previously or you’ll end up with the qbutton class being added to the button twice in some locations (which shouldn’t actually cause problems either way)

    https://gist.github.com/Pebblo/d321818666fb1ba33140558744fe9b82


    jonmaxim

    April 17, 2019 at 5:09 pm

    Thanks again Tony! Do you know if it’s possible to hide the Print section from your Custom post type? https://maxim.bantergroup.com.au/course/maximum-copy-sydney-may-2019/ I still need it to display on Blog posts, but wondering if it’s possible to hide just on Event Espresso pages?

    Regards
    Melanie


    Tony

    • Support Staff

    April 18, 2019 at 3:34 am

    Sure, it can.

    You’ve mentioned you can’t write your own CSS, but here’s a quick run down of how to do the above.

    Most themes use the body_class() function on the main body element of a page, that function returns a lot of useful classes and on single posts it will have .single-{post_type} which means you can target any single post using CSS.

    So if you use Chrome, right click on the print element and do Inspect element – https://monosnap.com/file/oHwvgYiYSTHplqJ0RaKMkAR2lh5TDp

    You can see the print icon has a its own class etc, but if you look at the box around the element if you just hide that you’ll leave the lines from the section around it, if you hover your mouse over the element in dev tools, Chrome will draw the contain on the page, like in my above screenshot – https://monosnap.com/file/6M5Sm03r1HeIQEO0rqgvjHK0Loy1QI
    (Hover on the element highlights at the bottom, and look at the element above)

    It shows you what you will hide if you target the element you are hover over.

    We probably want to hide this whole section, removing the separators etc – https://monosnap.com/file/cy9MmJJ4wo2WmTErGNrvPGTA0L1jwk

    So move up the elements around the one we want and find the ‘container’/’parent’ element you can hide for all of the section, so moving to the parent of the print icon…. the div with class ‘qode_print’ – https://monosnap.com/file/nRGPcYQzVgJ4UxwjhAiZh3jRudds86

    Still not selecting the full section, so go to the parent of that – https://monosnap.com/file/PxNSZKJ4xGxq1HTfTCn40HMdtTzBxr

    Bingo! That looks like it selects the whole section we want, right?

    A div with class ‘icon_social_holder’ holds everything we want to hide. If you’ve clicked on it like in my screenshot (its highlights in the section at the bottom), you can click on the + sight on the right for Chrome to build a CSS selector for you – https://monosnap.com/file/jzcojCYTVbUiYX6pZgUPcvtl2m34OE

    That will look like this – https://monosnap.com/file/F8yY1ozmZgIHWVpKKFK4LhOxrCfAov

    Click to the right of { to start adding your own rules and to hide something, we generally use ‘display: none;’, which would look like this – https://monosnap.com/file/Xp43tHDif1tofUbbQoFiIsfs08B6kO

    BUT, we are not finished yet as that selector applies to everywhere, it will also hide it on your blog posts. So lets use the body class I mentoned above to make it target EE events specifically.

    Scroll up in the inspector and look at the body element, you’ll see it has a lot of classes – https://monosnap.com/file/aYX7KoPw3sL1CFYJ8y71mdfHKDTVFi

    (Note that if you click anywhere in the inspector it will show you the styles that apply to whatever you clicked on, which means you will not longer see your CSS you just added on the right, you would need to find the element you hid and click on it again)

    You can see the body tag has a ‘single-espresso_events’ class and thats going to be set on any single EE event post, so we can use that to target just EE events, you need to add that into your CSS manually but clicking on the selector on the right – https://monosnap.com/file/omcnrLo0VodDfo42KqxBcCni0h5RcX

    Add .single-espresso_events (not the space at the end is important) so that your CSS becomes:

    .single-espresso_events .icon_social_holder {
        display: none;
    }

    You can see if whatever you do applies to the page as its live, the changes made will apply on the fly.

    Copy that CSS to where you are saving it and reload the event page to confirm.

    Congrats 🙂 You just wrote your own CSS.

    Note that the above may seem very long winded but it took me less than a minute to find the element and have some CSS to hide it, the more you do it the quicker you get and hiding elements is one of the best things to learn with as its very obvious if it didn’t work.


    jonmaxim

    April 30, 2019 at 12:28 am

    Thank you Tony! I know it’s definitely one of those things I need to learn more about (writing Custom CSS that is). I have managed to inspect element and write simple code a few times, but struggle with some plugins with working out the body class. I have turned all your fantastic notes into a Word doc and I’ll have a go myself next time.
    Melanie


    Tony

    • Support Staff

    April 30, 2019 at 4:08 am

    You’re most welcome.

    The support post ‘Custom CSS help for styling’ is closed to new replies.

    Have a question about this support post? Create a new support post in our support forums and include a link to this existing support post so we can help you.

    Support forum for Event Espresso 3 and Event Espresso 4.
    Documentation for EE3 and EE4
    Documentation for Event Espresso 3

    Documentation for Event Espresso 4

    Status: closed

    Updated by  Tony 1 month, 3 weeks ago ago

    Topic Tags

    Notifications

    This topic is: not resolved
    Do NOT follow this link or you will be banned from the site!