|
Brinson Academy
|
January 27, 2016 at 1:32 pm
Hoping to get some recommendations on how to fix the following styling issues due to conflicts with our custom stylesheet.
|
|
Josh
|
January 27, 2016 at 2:27 pm
Hi there,
I can recommend using Firebug to grab the CSS selectors you’re looking for. If you’re not sure how to use Firebug, here’s a great video that shows how:
http://css-tricks.com/video-screencasts/15-introduction-to-firebug/
|
|
Lorenzo Orlando Caum
|
January 27, 2016 at 2:56 pm
Hi Beka,
Could you provide some more specific information on the changes?
For example, on this item:
https://www.brinsonbenefits.com/ee-grid-shortcode/ | image size
…what size are you looking for? Is there an existing image size that we can look for on another page?
We’ll need specific feedback like that to suggest changes.
Thanks
—
Lorenzo
|
|
Brinson Academy
|
January 27, 2016 at 3:24 pm
sure!
https://www.brinsonbenefits.com/events/ | date and time spacing | there needs to be a space between the date and time
https://www.brinsonbenefits.com/events/practical-project-management/ | event date and time size and placement | would like increase font size to be similar to ticket selector size and/or right justify; something to make it distinguishable from the event description.
‘add to event cart’ pop up | size and color of text | the text “there is currently 1 item in the event cart” needs to be larger and the buttons need to either be like the button “view event cart” on event page or the button aspect removed and only use text with link
event cart page | appearance of all buttons | the buttons either need to appear as button on previous page or be removed and use only text with link. specifically the add/remove/empty buttons load as a green square with white outline; the empty/update/return/proceed buttons load as green link text and green square with white outline
registration steps | font sizes and color and buttons | Steps numbers and description font size needs to increase; “in order to process…” text needs to be white; course title size needs to increase; “details” size needs to increase; “attendee 1” text needs to be white; “return to event cart” button needs to match “proceed to attendee information” button
https://www.brinsonbenefits.com/ee-calendar-shortcode/ | calendar fill and border colors, font size and colors | increase month text size; numbers need to be white; want to remove/change solid fill in previous month boxes and current day box
https://www.brinsonbenefits.com/ee-grid-shortcode/ | image size | grid template uses featured image, but our stylesheet doesn’t support featured images. as a result, we add media in the body of the page/post that compliments our page template (660px width). current grid image width is 200px, would like to either allow three images across, increase image size to 50% (330px) or increase image size to 100% (660px)
Thanks!
|
|
Josh
|
January 27, 2016 at 4:56 pm
Do you need help finding any of the selectors? If so please let us know which ones you could not find and we can point you in the right direction.
|
|
Brinson Academy
|
January 28, 2016 at 11:34 am
I don’t exactly know what a “selector” is or how to find it! I know how to “inspect” the code on the page enough to identify what specific code needs adjusted. Lorenzo recommended using a plug in called “Simple Custom CSS” but I’m not sure how to designate exactly which line of code and how to use the plugin to fix it.
|
|
Lorenzo Orlando Caum
|
January 28, 2016 at 12:36 pm
Hello,
Below are the changes for what you have shared. The video that Josh shared will help you understand how we are suggesting the changes that you requested. Then you’ll be able to apply new changes on your own.
1) This is something with the theme. We’ll need to come back to this.
2) This CSS will adjust the datetimes styling:
ul.ee-event-datetimes-ul {
float: right;
font-weight: 700;
}
3) This CSS will adjust the event cart pop up:
#cart-results-modal-dv h5 { font-size:18px; }
#cart-results-modal-dv a { text-decoration: none; }
4) This CSS will adjust the event cart page:
#event-cart-qty-frm a { text-decoration: none; }
5) This CSS will adjust the registration checkout page:
p#spco-attendee_information-pg.spco-steps-pg.small-text.drk-grey-text { color:#FFFFFF; }
span.spco-step-name { font-size: medium; }
.spco-attendee-lgnd { color:#FFFFFF; }
ee-spco-attendee_information-reg-step-form a { text-decoration: none; }
Please apply those changes through the Simple Custom CSS plugin and then share feedback. Once we are done there, then we can take a look at the events calendar.
—
Lorenzo
|
|
Brinson Academy
|
January 29, 2016 at 4:51 pm
Thank you so much! The examples you gave really helped me understand what I need to find/inspect/change/whatever. With a bit of modification, those worked well!
The buttons on the event cart page (https://www.brinsonbenefits.com/registration-checkout/?event_cart=view#checkout) still look pretty bad! I’ll try to explain what I found- apologies in advance for my lack of css-fluency!
these look terrible everywhere they appear:
.dashicons {content: “”;}
Can I remove them completely?
the event cart page looks tons better when I just delete this element completely, but i don’t know how to do that outside of Firebug:
<span class=”event-cart-update-buttons”>
These two buttons appear right next to each other, but look radically different!
<div class=”spco-whats-next-buttons” id=”spco-attendee_information-whats-next-buttons-dv”>
<span class=”dashicons
dashicons-cart”></span>return to Event Cart<input type=”submit” rel=”attendee_information” style=”” class=”spco-next-step-btn button button-primary button-lg” id=”spco-go-to-step-attendee_information-submit” value=”Proceed to Attendee Information”>
</div>
|
|
Brinson Academy
|
January 31, 2016 at 6:50 pm
I tried a gazillion options, but finally found one that removed the wonky icons! Woohoo!
.event-cart-add-ticket-button.button, .event-cart-remove-ticket-button.button, .event-cart-delete-ticket-button.button { display: none; }
.dashicons { display: none; }
.mini-cart-button, .cart-results-button, .event-cart-button { border: none; }
How do i attribute the same style for this button? <input id=”spco-go-to-step-payment_options-submit” class=”spco-next-step-btn button button-primary button-lg” type=”submit” rel=”attendee_information” style=”” value=”Proceed to Payment Options”>
|
|
Lorenzo Orlando Caum
|
February 1, 2016 at 11:12 am
Hello, the first example in this reply here (https://eventespresso.com/topic/fixing-styling-issues-with-custom-css-plugin/#post-190370) is hiding some content and I don’t think you want to hide the registration button.
Are you wanting the checkout button to have a similar style as the event cart buttons?
—
Lorenzo
|
|
Brinson Academy
|
February 1, 2016 at 12:39 pm
I don’t care which style, i just don’t want two styles!
|
|
Lorenzo Orlando Caum
|
February 2, 2016 at 9:51 am
Hi, you can use this CSS:
.ticket-selector-submit-btn, .spco-next-step-btn {
color: #99ff33;
background-color:transparent;
border: none !important;
font-size:medium;
}
.ticket-selector-submit-btn:hover, .spco-next-step-btn:hover {
color: #ff9900;
background-color:transparent;
border:none !important;
font-size:medium;
}
—
Lorenzo
|
|
Brinson Academy
|
February 3, 2016 at 8:04 am
great! Thanks, Lorenzo! This worked great on the hover, but the .spco-next-step-btn remains the same. I tried a couple variations, but it doesn’t seem to override this:
<input id=”spco-go-to-step-payment_options-submit” class=”spco-next-step-btn button button-primary button-lg” type=”submit” rel=”attendee_information” style=”” value=”Proceed to Payment Options” aria-invalid=”false”>
|
|
Brinson Academy
|
February 3, 2016 at 8:14 am
Nevermind! I missed a bracket on the css before the first group. This works now! Thank you so much!
|
|
Lorenzo Orlando Caum
|
February 3, 2016 at 9:51 am
You are welcome!
—
Lorenzo
|
