|
miranda rota
|
July 11, 2013 at 1:41 pm
I want to make a button as is so well described in this video here: https://eventespresso.com/wiki/using-css3-to-style-links/
I have made the button and put the code on the custom.css style sheet of the theme (thesis) but nothing is showing up. This is what I’ve done:
On this page: http://bridale-architectural-antiques.co.uk/yep_3/6__payment-buttons-EE__DELETE.jpg
This is what I’ve put in themeroller.css but it obviously wasn’t right as the links are still there but no button or even the border they had previously:
.payment_container, .payment-option-dv { position: relative; margin:0 .25em .25em 0; }
.payment-option-closed { display: inline-block; }
/* my payment options link to make button */
/* EE yellow pay buttons */
.invoice-payment-option-lnk {
border-top: 1px solid #ffdd00;
background: #f7d92e;
background: -webkit-gradient(linear, left top, left bottom, from(#ffdd00), to(#f7d92e));
background: -webkit-linear-gradient(top, #ffdd00, #f7d92e);
background: -moz-linear-gradient(top, #ffdd00, #f7d92e);
background: -ms-linear-gradient(top, #ffdd00, #f7d92e);
background: -o-linear-gradient(top, #ffdd00, #f7d92e);
padding: 16px 32px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #2c4154;
font-size: 21px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
.invoice-payment-option-lnk:hover {
border-top-color: #f2e827;
background: #f2e827;
color: #cb5b00;
}
.invoice-payment-option-lnk:active {
border-top-color: #ffffff;
background: #ffffff;
}
/*
.payment-option-lnk {
display: inline-block; position: relative; max-width:140px; padding:15px; margin:0 0 1em;
border:1px solid #ddd; border-radius:3px;
text-align: center; line-height:1em; vertical-align: middle; cursor:pointer;
}
.payment-option-lnk:hover {
top:-1px; border-color:#d5d5d5; text-decoration:none;
-webkit-box-shadow: 4px 10px 15px -3px rgba(0,0,0,.05), 1px 2px 4px -1px rgba(0,0,0,.1), -2px -1px 5px rgba(0,0,0,.025);
-moz-box-shadow:4px 10px 15px -3px rgba(0,0,0,.05), 1px 2px 4px -1px rgba(0,0,0,.1), -2px -1px 5px rgba(0,0,0,.025);
box-shadow:4px 10px 15px -3px rgba(0,0,0,.05), 1px 2px 4px -1px rgba(0,0,0,.1), -2px -1px 5px rgba(0,0,0,.025);
*/
}
.payment-option-lnk img { max-width:140px !important; padding:0; margin:0; }
.payment-option-lnk.algn-vrt { display: table !important; height:30px; }
.payment-option-lnk.algn-vrt .vrt-cell { display: table-cell !important; vertical-align: middle; }
#event_espresso_checkout_form { margin: 5px 0; padding: 5px; }
.choose-diff-pay-option-pg { margin:0 0 6em; font-size:.8em; }
.off-site-payment-gateway-img { position: absolute; top:-4px; right:-5px; }
#external-link-msg-pg { margin:0 0 4em; color:#ccc; font-size:.8em; text-align: center;; }
#external-link-msg-pg img { position: relative; top:2px; }
Many thanks for your help 🙂
|
|
miranda rota
|
July 11, 2013 at 1:45 pm
Sorry, trying to get the right sort of blockquote for the code in my previous comment I just made …hope I will get it right this time 😉
<code>
/* Managed by themeroller */
/*___ General site wide styles for event-data / espresso_events ___*/
.ee-featured-image{
float: right;
margin:5px;
padding:10px;
}
.payment_container, .payment-option-dv { position: relative; margin:0 .25em .25em 0; }
.payment-option-closed { display: inline-block; }
/* my payment options link to make button */
/* EE yellow pay buttons */
.invoice-payment-option-lnk {
border-top: 1px solid #ffdd00;
background: #f7d92e;
background: -webkit-gradient(linear, left top, left bottom, from(#ffdd00), to(#f7d92e));
background: -webkit-linear-gradient(top, #ffdd00, #f7d92e);
background: -moz-linear-gradient(top, #ffdd00, #f7d92e);
background: -ms-linear-gradient(top, #ffdd00, #f7d92e);
background: -o-linear-gradient(top, #ffdd00, #f7d92e);
padding: 16px 32px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #2c4154;
font-size: 21px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
.invoice-payment-option-lnk:hover {
border-top-color: #f2e827;
background: #f2e827;
color: #cb5b00;
}
.invoice-payment-option-lnk:active {
border-top-color: #ffffff;
background: #ffffff;
}
/*
.payment-option-lnk {
display: inline-block; position: relative; max-width:140px; padding:15px; margin:0 0 1em;
border:1px solid #ddd; border-radius:3px;
text-align: center; line-height:1em; vertical-align: middle; cursor:pointer;
}
.payment-option-lnk:hover {
top:-1px; border-color:#d5d5d5; text-decoration:none;
-webkit-box-shadow: 4px 10px 15px -3px rgba(0,0,0,.05), 1px 2px 4px -1px rgba(0,0,0,.1), -2px -1px 5px rgba(0,0,0,.025);
-moz-box-shadow:4px 10px 15px -3px rgba(0,0,0,.05), 1px 2px 4px -1px rgba(0,0,0,.1), -2px -1px 5px rgba(0,0,0,.025);
box-shadow:4px 10px 15px -3px rgba(0,0,0,.05), 1px 2px 4px -1px rgba(0,0,0,.1), -2px -1px 5px rgba(0,0,0,.025);
*/
}
.payment-option-lnk img { max-width:140px !important; padding:0; margin:0; }
.payment-option-lnk.algn-vrt { display: table !important; height:30px; }
.payment-option-lnk.algn-vrt .vrt-cell { display: table-cell !important; vertical-align: middle; }
#event_espresso_checkout_form { margin: 5px 0; padding: 5px; }
.choose-diff-pay-option-pg { margin:0 0 6em; font-size:.8em; }
.off-site-payment-gateway-img { position: absolute; top:-4px; right:-5px; }
#external-link-msg-pg { margin:0 0 4em; color:#ccc; font-size:.8em; text-align: center;; }
#external-link-msg-pg img { position: relative; top:2px; }
</code>
|
|
miranda rota
|
July 11, 2013 at 6:18 pm
Please can you delete this (awful) post, so I can ask again in a simple way that doesn’t confuse …which is where do I put the code for the payment option buttons in themeroller.css? what is the class that I should use to reference it?
Thank you 🙂
|
|
Dean
|
July 12, 2013 at 4:32 am
Hi Miranda,
Don’t worry about the post, its our silly code system!
OK, so you want to style the invoice/cheque/etc buttons?
Thats quite easy. Add something like the following to the bottom of your themes style.css file or via a plugin like My Custom CSS (a free and useful plugin).
#check-payment-option-lnk {
border: none; /* only needed if you dont add a border */
background-color: yellow;
border-radius: 10px;
border: #000 thick solid;
}
Obviously you will want it to look better than what I have done screenshot
|
|
miranda rota
|
July 12, 2013 at 8:11 am
Many thanks Dean 🙂
I haven’t worked on it yet but could you leave this thread open for longer than usual and I give you my word that I will do my utmost to remember to come and say when it’s finished?
The client is having a brand launching reception in london on 24th july and is rightfully expecting to have the site up on their domain and all running perfectly and beautiful by then… and it’s all being a bit of a nightmare at my end! 🙂
Btw, I can’t tell you enough how much I appreciate all of you here on this forum, you are an absolute life-line, including how patient you are.
|
|
Dean
|
July 12, 2013 at 8:28 am
Hi Miranda,
No problem glad we can help. The threads stay open until there has been no activity for 14 days and then they close automatically.
If it has closed just feel free to open a new thread.
|
|
miranda rota
|
July 13, 2013 at 1:19 am
Dean, I have several questions if you wouldn’t mind.
1. Where exactly would I go to be able to edit where, on the left hand side of this image below, it says: <h2>Miranda Rota,</h2> (to make it, for example, an <h3>)
http://bridale-architectural-antiques.co.uk/yep_3/8__change EE heading from h3 to h2.jpg
2. I’ve made some progress with my original question, which was how to style the buttons on the ‘payment-option-lnk’ but now the paypal button has also become a bit customised! I tried doing this sort of thing:
.payment-option-lnk #check-payment-option-lnk, .payment-option-lnk #invoice-payment-option-lnk
but it didn’t work.
If I just wanted to target for example the: #check-payment-option-lnk (but leave out the paypal and the #invoice-payment-option-lnk) …how would I do it, along the lines of my bit of code above?
Many thanks for your time and patience, as always!
|
|
miranda rota
|
July 13, 2013 at 1:44 am
Oops, sorry …I forgot to remove the gaps in the url to the screenshot image above and I see it needs to be copied and pasted
|
|
Dean
|
July 15, 2013 at 4:01 am
Hi Miranda,
1) Well you could edit the template file, in this case payment_page.php. Do a search for
tags too!
OR you could fake it with CSS. Target the following in your themes style.css or My Custom CSS plugin
.espresso_payment_overview h2 {
/* add h3 css styles here*/
}
2) to target something specifically its standard CSS, use:
#check-payment-option-lnk
to target the check and
#invoice-payment-option-lnk
to target the invoice and so on.
|
|
miranda rota
|
July 17, 2013 at 6:24 am
Thanks! Done that, and now could you tell me where I would find the page to edit, that shows on the top left of this image, which is called:
<body class=”custom page page-id-21 page template default logged-in admin-bar
http://gator3027.hostgator.com/~yep1/9_-LIn_twit_icons-link.jpg
…where would I find that page? going through all the folders of the site in filezilla I can’t find any page of that name. It’s really baffling
Many thanks for your time.
|
|
Dean
|
July 17, 2013 at 6:34 am
I would guess its a Page, so if you head over to the dashboard, then Pages, All Pages and hover your mouse over each page link, at the bottom of the screen you should see a small pop up with a long url in it, look for post=XX where XX is a number, thats the page id. So you are looking for page id 21 screenshot
|
|
miranda rota
|
July 17, 2013 at 3:53 pm
That was a lovely useful tip thank you 🙂 Though it doesn’t solve all issues, like this one for example:
I need to edit the actual text on the ‘Please Choose a Payment Option’ section (eg. it says click for the pdf invoice on the link ABOVE, when actually the link is below)
On the left hand side of the google tools it says the relevant page is:
<body class=”custom page page-id-141 page-template-default logged-in admin-bar” data-twttr-rendered=”true”>
Where can I find this page please, what is the file name of it?
Many thanks for your time – I’m seeing light at the end of the tunnel thanks to your help 🙂
|
|
Josh
|
July 17, 2013 at 4:58 pm
Hi Miranda,
The text that you’re describing doesn’t sound like something coming from a file, but rather the Invoice instructions that can be changed in Event Espresso>Payment settings under “Invoice Payment Settings”.
If this is something different than what you’re referring to, can you post a screenshot?
|
|
miranda rota
|
July 19, 2013 at 4:11 pm
Josh, you are so right!
Could you tell me where and how I can find that page though, the ‘page-id-141’?
<body class=”custom page page-id-141 page-template-default logged-in admin-bar” data-twttr-rendered=”true”>
Many thanks for your help.
|
|
Dean
|
July 22, 2013 at 3:12 am
Hi Miranda,
As per my previous message, if you hover over the pages names in your admin it will show post= XX so go through them until you find the one with post=141
http://www.wpexplorer.com/videos/find-post-page-id-wordpress/
Or use a plugin such as http://wordpress.org/plugins/reveal-ids-for-wp-admin-25/
|
|
miranda rota
|
August 1, 2013 at 5:25 am
Dean, I’ve taken so long to reply because I could not work out why your instructions above just weren’t working for me, I thought it was because I was not understanding properly.
Finally, after much help on the Thesis theme forum, we have realised that the site is actually a great example of horrible coding and use of patches again and again. eg. one small change needs either about 10 files to be altered OR yet another patch to be added.
Going through every file of the site in filezilla I’ve found references to ‘oil pumps, cooler systems, nuitritionists, food recipes’ etc. – the developer has used an old site and just patched it for us.
So at least I understand why it is being such a nightmare to alter – just have to plug on as best I can and in the future, in my own time and own expense, update to the new thesis2, which will be a LOT of work but will get rid of all this bad coding.
Many thanks 🙂
|
|
Dean
|
August 1, 2013 at 5:27 am
Wow, really sorry to hear that! Bad web designers and developers make life much harder for the rest of us. Perhaps it would be worthwhile to find a trusted developer?
Anyway, I hope that you do get it sorted soon!
|
|
miranda rota
|
August 3, 2013 at 5:45 pm
Oh Dean, I would love to find a trusted developer!! but finances make that not an option at the moment. It’s a catch22 type scenario at present. Anyway, onwards and upwards 🙂
|
|
Dean
|
August 5, 2013 at 12:25 am
I hear you! Good luck with it.
|
