Jump to content
Sign in to follow this  
rtysmith

Change CSS based on MagicMembers login

Recommended Posts

rtysmith

Alright experts, I got a challenge for you! I want to change one CSS line based on a users magicmember.com logged in status In platformbase, I have:

#primary-nav{
		background:url(images/nav_bg.gif) repeat-x;
		height:44px;
		padding-top:6px;
I want to change this to:
#primary-nav{
		background:url(images/[u]nav_bg2.gif[/u]) repeat-x;
		height:44px;
		padding-top:6px;
Based on a logged in user. From magicmembers i got this far: There is a way to output the membership level with php. You can attach it between your class="..." .
global $current_user;
	$mgm_member = mgm_get_member($current_user->ID);
	echo $mgm_member->membership_type;
I was still lost so I replied: I'm still a bit lost on this though, I don't understand where it would go. What I want to do is have two different css for different member types, your example is not clear enough for me to understand :( If I wanted: Promember to see:
#pullquote.copy{
	background: #f7f7f7 url(images/pullquote.png) no-repeat 15px 15px;
	padding: 15px 20px 15px 45px;
	margin-bottom: 1.5em;
	}
and Jrmember to see:
#pullquote.copy{
	background: #ffffff url(images/pullquote7.png) no-repeat 25px 25px;
	padding: 25px 22px 25px 25px;
	margin-bottom: 2.5em;
	}

How would I accomplish that using the code you provided? They replied: Wherever you want to output the membership level, you should put the code there. The first 4 line can be anywhere. You will customize the last line. I see that you use pullquote as an id. What you can do is change you css first to: #pullquotepromember #pullquotejrmember then put the php codes on the last line to your php page where you have #pullquote . Like this: id="pullquote< ?php echo $mgm_member->membership_type; ? >" When Promember member visits the site, it will display as: id="pullquotepromember" If Jrmember member visits the site, it will display as: id="pullquotejrmember" Please help me, I'm so lost!

Share this post


Link to post
Share on other sites
Simon

`global $current_user;` `$mgm_member = mgm_get_member($current_user->ID);` `$image = ( $mgm_member->membership_type == 'jrmember' ) ? 'pullquote7.png' : 'pullquote.png';` `echo '#pullquote.copy{';` `echo 'background: #ffffff url(images/' . $image . ')` `no-repeat 15px 15px;';` `echo 'padding: 25px 22px 25px 25px; margin-bottom: 2.5em;}';`

Share this post


Link to post
Share on other sites
rtysmith

Hi Simon, thanks so much, but you did the example with the wrong css, just trying to change: #primary-nav{ background:url(images/nav_bg2.gif) repeat-x; And where would I put this code??

Share this post


Link to post
Share on other sites
kastelic

You would have to place it in the head, which you can do by using the

pagelines_head
hook. You would also have to wrap the CSS in
<style></style>

using the echo command. But are there no CSS classes in the body tag or elsewhere that are generated depending on what level of user is logged in?

Share this post


Link to post
Share on other sites
rtysmith

I'm still lost, Jimmy are you saying its not possible?

Share this post


Link to post
Share on other sites
kastelic

I'm saying that it is. CSS code needs to go in between the

<head></head>
tags of your document wrapped in
<style></style>
tags, so the best way is to use the hook I mentioned. Here is the doc on using hooks: http://www.pagelines.com/docs/base-child-theme or if you don't care about losing changes when you upgrade and can remember to put the code back in every time you do you can skip that and just put the code directly in header.php. What you have there is php code so it needs to fall within
<?php ?>
tags and also within the
<head></head>

of your document. My last sentence was regarding the possibility that your plugin inserts classes somewhere in the code that would allow you to target logged in users via pure CSS which would make the job much easier.

Share this post


Link to post
Share on other sites
rtysmith

OK, so I have it in the head in pagelinespro (not base) And it is there but is not changing the image. From view source: <div id="primary-navmember"> From base.css (platformbase) #primary-nav{ background:url(images/nav_bg.gif) repeat-x; height:44px; padding-top:6px; } #primary-navmember{ background:url(images/nav_bg2.gif) repeat-x; height:44px; padding-top:6px; } #primary-navpro_member{ background:url(images/nav_bg2.gif) repeat-x; height:44px; padding-top:6px; } What am I missing?

Share this post


Link to post
Share on other sites
rtysmith

From view source, I have: <style><div id="primary-navmember"></style>

Share this post


Link to post
Share on other sites
catrina
<style><div id="primary-navmember"></style>
^ Instead of
<div id="primary-navmember">

The CSS code needs to go between the <style></style> tags (in header.php)


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
rtysmith

Here's what I have, but still not working? <?php global $current_user; $mgm_member = mgm_get_member($current_user->ID); ?> <style><div id="primary-nav<?php echo $mgm_member->membership_type;?>"></style> </head>

Share this post


Link to post
Share on other sites
catrina

I don't think the DIV layer can go between the style tags. The style tags should only be used this way: http://www.tedmontgomery.com/tutorial/style.html (See below the Heading #2/Heading #3 headline) It's the CSS styling that goes between the style tags.


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
rtysmith

Are you saying I should move below out of base.css in platformbase to header? #primary-navmember{ background:url(images/nav_bg2.gif) repeat-x; height:44px; padding-top:6px; } #primary-navpro_member{ background:url(images/nav_bg2.gif) repeat-x; height:44px; padding-top:6px; } #primary-nav ul.main-nav{width:960px !important;} .main_nav { line-height: 38px; height:38px; border-left:1px solid #C96419; border-right:none !important; }

Share this post


Link to post
Share on other sites
rtysmith

Sorry, should have posted: /*Navigation*/ #primary-nav{ background:url(images/nav_bg.gif) repeat-x; height:44px; padding-top:6px; } #primary-navmember{ background:url(images/nav_bg2.gif) repeat-x; height:44px; padding-top:6px; } #primary-navpro_member{ background:url(images/nav_bg2.gif) repeat-x; height:44px; padding-top:6px; }

Share this post


Link to post
Share on other sites
timlinson

It sounds like you're just editing header files and such, which isn't really what Jimmy was saying. I saw in another thread that you managed to get a hook working. The idea here is the same here, except you'd use the `pagelines_head` hook that Jimmy mentioned above and the PHP code from the magicmember forums and Simon. This isn't copy/paste material, as I don't fully understand the membership tiers and the css you want. It should get you started though. ` add_action('pagelines_head', 'my_magicmembers_nav'); function my_magicmembers_nav() { global $current_user; $mgm_member = mgm_get_member($current_user->ID); $image = ( $mgm_member->membership_type == 'jrmember' ) ? 'nav_bg2.gif' : 'nav_bg.gif'; echo ''; } `

Share this post


Link to post
Share on other sites
rtysmith

Alright, thanks - got it all in there, but still not working: add_action('pagelines_head', 'my_magicmembers_nav'); function my_magicmembers_nav() { global $current_user; $mgm_member = mgm_get_member($current_user->ID); $image = ( $mgm_member->membership_type == 'member' ) ? 'nav_bg2.gif' : 'nav_bg.gif'; echo '<style>'; echo '#primary-nav {'; echo 'background: url(images/' . $image . ') repeat-x;'; echo 'height: 44px;'; echo 'padding-top: 6px}'; echo '</style>'; } Any ideas?

Share this post


Link to post
Share on other sites
Simon

What exactly is it putting into the head?

Share this post


Link to post
Share on other sites
rtysmith

<style>#primary-nav {background: url(images/nav_bg2.gif) repeat-x;height: 44px;padding-top: 6px}</style>

Share this post


Link to post
Share on other sites
rtysmith

Is it possible CSS later in the HTML is overwriting this?

Share this post


Link to post
Share on other sites
rtysmith

whew! Got it with !important

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  

×