Jump to content
Sign in to follow this  
dainiswmichel

adding css styled buttons on the rt. site of the platform pro header

Recommended Posts

dainiswmichel

hey, here's how far i've gotten on my own. 1) made a neat looking button over here http://css-tricks.com/examples/ButtonMaker/ copied the css and pasted it into Custom Code | Custom CSS here's the CSS /************************************* +Buttonz4Header *************************************/ '.mlbutton { border-top: 1px solid #96d1f8; background: #65a9d7; background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7)); background: -webkit-linear-gradient(top, #3e779d, #65a9d7); background: -moz-linear-gradient(top, #3e779d, #65a9d7); background: -ms-linear-gradient(top, #3e779d, #65a9d7); background: -o-linear-gradient(top, #3e779d, #65a9d7); padding: 8.5px 17px; -webkit-border-radius: 14px; -moz-border-radius: 14px; border-radius: 14px; -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: white; font-size: 17px; font-family: Georgia, serif; text-decoration: none; vertical-align: middle; } .mlbutton:hover { border-top-color: #28597a; background: #28597a; color: #ccc; } .mlbutton:active { border-top-color: #1b435e; background: #1b435e; } ' --not sure if i need some other files like jquery stuff or just css 2) added the following to header.php through Appearance |? Themes |? PlatformPro | Header '

. <?php pagelines_register_hook('pagelines_before_header');?>' u can check it out here: http://www.curetinnitus.org/ and you will see a little dot at the top left. my issues are: * how can i get the CSS to really show (so i'm doin' sumthin' wrong with the anchor or the class or something cuz it's not showing the css) * how can i position this button once i get the css to show? should i use relative positioning, absolute, margin... i know there's a solution with hooks n all -- but this seems to be a path that would be pretty fast loading n would look good or? -- i could switch and add an image map, but eh, this is a pretty cool option and seemed accessible to me, except i messed up the css. can you lend a hand? sincerely, dainis w michel

Share this post


Link to post
Share on other sites
dainiswmichel
wow, i have put this style in classes, divs, id's, can't seem to get the css to display. will try a few more experiments and call it quits. i figure buddypress, pagelines, and ??? are competing for this style...

Share this post


Link to post
Share on other sites
dainiswmichel
ok, copying from http://css-tricks.com/examples/ButtonMaker/ created some nasty characters in the css file. paste as plain text b4 pasting into pagelines css rules

Share this post


Link to post
Share on other sites
dainiswmichel
now trying to position ps: getting great help from www.webapphelp on this :-)

Share this post


Link to post
Share on other sites
kastelic
Since you have it position:absolute you can adjust the position with "top" and "left". But you also need to make its containing element position:relative. So try this: [code] #page-canvas {position:relative;} .mlposition { top:10px; left: 500px; } [/code]

Share this post


Link to post
Share on other sites
dainiswmichel
ok, here is my css /************************************* +Buttonz4Header *************************************/ .mlposition { text-align: center; position: absolute; z-index:100; margin: 72px 0px 0px 750px; } .joinposition { text-align: center; position: absolute; z-index:101; margin: 72px 0px 0px 750px; padding: 8.5px 17px; } .mlposition a.mlbutton { border-top: 1px solid #96d1f8; background: #65a9d7; background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7)); background: -webkit-linear-gradient(top, #3e779d, #65a9d7); background: -moz-linear-gradient(top, #3e779d, #65a9d7); background: -ms-linear-gradient(top, #3e779d, #65a9d7); background: -o-linear-gradient(top, #3e779d, #65a9d7); padding: 8.5px 17px; -webkit-border-radius: 14px; -moz-border-radius: 14px; border-radius: 14px; -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: white; font-size: 17px; font-family: Georgia, serif; text-decoration: none; vertical-align: middle; } .mlposition a.mlbutton:hover { border-top-color: #28597a; background: #28597a; color: #ccc; } .mlposition a.mlbutton:active { border-top-color: #1b435e; background: #1b435e; }

Share this post


Link to post
Share on other sites
dainiswmichel
if you could help me figure out a way to position the join us text under the member login button centered along a vertical axis, then i'd be golden. also, honestly, maybe i should just make these into text links. this was pretty brutal. almost there...

Share this post


Link to post
Share on other sites
dainiswmichel
ok, i did some css "dinking" and this "looks" right in my browser http://screencast.com/t/RjlCpIjL3zy but i'd really like the centering to actually work via css, can you help with that? here's how i'm positioning right now: .mlposition { text-align: center; position: absolute; z-index:100; margin: 72px 0px 0px 750px; } .joinposition { text-align: center; position: absolute; z-index:101; margin: 109px 0px 0px 795px; }

Share this post


Link to post
Share on other sites
kastelic
Have you tried putting the join us text inside the same div along with the button? You could have it on a new line with a
tag. And then you could try: [code] .joinposition { text-align: center } [/code]

Share this post


Link to post
Share on other sites
dainiswmichel
i tried that initially, can't remember exactly what happened -- maybe i can come back to that, i think it would be better

Share this post


Link to post
Share on other sites
dainiswmichel
ahh, now i remember. i could not figure out how to use padding or margin to keep the join us text from colliding with the bottom portion of the button. so even this .mlposition { text-align: center; position: absolute; z-index:100; margin: 72px 0px 0px 690px; } .joinposition { text-align: center; margin: 98px; } using margin or padding, results in: http://screencast.com/t/cyX7kC8TPfK

Share this post


Link to post
Share on other sites
dainiswmichel
i'm going to need to put this back to the "dinking" method, however, if you can let me know how to keep the text from colliding within one div tag like: or similar (so that the elements are centered along the same vertical axis, that would be great.

Share this post


Link to post
Share on other sites
catrina
Try adding this CSS to bring the "Join Us!" link down a bit: [code]a.joinposition {margin-top: 5px;}[/code]

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
dainiswmichel
i hosed the whole site thinking that Restore Options To Default only applied to that page of settings. it is 4:11 AM where i live. kind of silly of me to stay up so late that i would make such mistakes. needed to re-do all of the settings. it was looking good and the RSS link was to my old site -- it happens :-( i may have had the centering working, i can't remember now. will get the site looking pretty much like it did b4 and get some rest! :-)

Share this post


Link to post
Share on other sites
dainiswmichel
yeah, and "download theme settings" was calling out to me LOL! oh well, almost done will be getting some rest soon and will look at the centering issue on the buttons in my header. thanks for your support.

Share this post


Link to post
Share on other sites
Danny
I'm sorry to hear that. I have accepted your answer but if you need further support, reply to this post and the answer will change.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
dainiswmichel
thanks guys. i used a solution i find less "reliable" from a css perspective and will post it below: /************************************* +Buttonz4Header *************************************/ .mlposition { text-align: center; position: absolute; z-index:100; margin: 37px 0px 0px 690px; } .joinposition { text-align: center; position: absolute; z-index:101; margin: 77px 0px 0px 736px; } .mlposition a.mlbutton { border-top: 1px solid #96d1f8; background: #65a9d7; background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7)); background: -webkit-linear-gradient(top, #3e779d, #65a9d7); background: -moz-linear-gradient(top, #3e779d, #65a9d7); background: -ms-linear-gradient(top, #3e779d, #65a9d7); background: -o-linear-gradient(top, #3e779d, #65a9d7); padding: 8.5px 17px; -webkit-border-radius: 14px; -moz-border-radius: 14px; border-radius: 14px; -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: white; font-size: 17px; font-family: Georgia, serif; text-decoration: none; vertical-align: middle; } .mlposition a.mlbutton:hover { border-top-color: #28597a; background: #28597a; color: #ccc; } .mlposition a.mlbutton:active { border-top-color: #1b435e; background: #1b435e; } and the header.php file is: ----------------------------- for me, the above solution relies on "css dinking" which may display oddly on certain platforms. of course, the platform where i have a presentation, or when i'm at a friend's place -- you know -- whenever it's really inconvenient for that button to display halfway off the screen! LOL so, ideally, the whole thing would be wrapped in another div, or the padding would work with the
, or i put the button and text link into a table cell -- something that will reliably align the text and the button centered along a vertical axis. next, i am modifying the header.php file within PlatformPro (so the theme itself), and i am not, for example, pulling out header.php and putting the php file into the platformbase directory (which is how child theming works in genesis for example). so, my question is: what is the most reliable way for me to include this code so that updates of pagelines happen seamlessly and with "no worries" about losing these buttons? right now, it could be that i would have to 1) save my edited header.php file 2) upgrade pagelines 3) edit the new header.php file 4) insert the button code 5) save. and well -- if possible, i'd like to set things up now in a way where that's not necessary upon each upgrade of pagelines. however, i am just thinking that i don't know how pagelines upgrading works, so i'll need to devour some docs!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×