Jump to content
Sign in to follow this  
gayatriom

Move Logo to Right and add Custom Text to Header

Recommended Posts

catrina

You can use CSS to change the logo position and a hook with a DIV layer to add the text to the left (please see here on hook implementation: http://www.pagelines.com/docs/base-child-theme). Can you post a link to your site?


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
gayatriom

Hey. Thanks. Let me try that out.

Share this post


Link to post
Share on other sites
gayatriom

Hey question how do i call out this in css. It's not showing up in my inspect tool.

Share this post


Link to post
Share on other sites
catrina

What are you referring to? The text you want to put on the left or the logo?


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
gayatriom

hey, at this point i'm talking about the logo.

Share this post


Link to post
Share on other sites
catrina

One more note: make sure the child base theme (as described in the tutorial I posted above) is activated and you are editing in there.


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
gayatriom

ok. now I'm going to try out the hook.

Share this post


Link to post
Share on other sites
catrina

The hooks are quite self-explanatory. If the hook you select doesn't put the element you're positioning in the right place, that could be fixed using CSS or you can try a different hook.


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
gayatriom

OK i added the following and it works! add_action('pagelines_inside_top_branding', 'add_text_to_branding'); function add_text_to_branding(){ // This hook adds text to branding // and is the image from the CSS is placed in the images folder ?> this is text <?php } Now question . when trying to add the text - how do I style it? do I just put in html ?

Share this post


Link to post
Share on other sites
catrina
Now question . when trying to add the text - how do I style it? do I just put in html ?
Yes, you just add the text inside a DIV layer. The DIV layer can be placed where it says "this is text" in the hook you created. The DIV layer can be styled the way you want using CSS. Example HTML to put:
<div class="headertext">THE TEXT YOU WANT HERE.</div>
Example CSS to add to Custom CSS:
/* SLOGAN STYLING */
	div.headertext {font-family: YOURFONT; font-size: SIZEpx; color: #FONTCOLOR; text-align: center;}
	/* LINK STYLING */
	div.headertext a {font-family: YOURFONT; font-size: SIZEpx; color: #FONTCOLOR;}


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
gayatriom

add_action('pagelines_inside_top_branding', 'add_text_to_branding'); function add_text_to_branding(){ // This hook adds text to branding // and is the image from the CSS is placed in the images folder ?> <div class="headertext">Marketing That Works For You</div> <div class="headerslogan">Connecting customers to conversations?„? Social Media management to market your business Call (203) 414-5509 for a Free social Media consultation</div> <?php }

Share this post


Link to post
Share on other sites
gayatriom

My css is div.headertext { position: absolute; margin: 0; padding: 0 5px 0 0; font: normal 38px Gill Sans MT, Georgia, 'Times New Roman', Times, serif; letter-spacing: -1px; color: #65523f;/*#789F59;*/ text-decoration: none; left: 0px; top: 90px; width: 518px; height: 44px ;} div.headerslogan{color: #B648FC; font-size: medium; font-variant: small-caps; height: 85px; left: 20px; top: 152px; width: 474px; align:center;}

Share this post


Link to post
Share on other sites
gayatriom

Ok one last thing. How do I add line breaks in the hook? Right now my text isn't changing lines at the right places.

Share this post


Link to post
Share on other sites
catrina

I'm looking at your site again and the positioing looks better than it did before. Here's revised CSS:

div.headertext
	{position: absolute;
	margin: 0;
	padding: 0 5px 0 0;
	font: normal 38px Gill Sans MT, Georgia, 'Times New Roman', Times, serif;
	letter-spacing: -1px;
	color: #65523f;/*#789F59;*/
	text-decoration: none;
	left: 0px; top: 90px;
	width: 518px; height: 44px;
	text-align: center;}
	
	div.headerslogan
	{color: #B648FC;
	font-size: medium;
	font-variant: small-caps;
	height: 85px;
	left: 20px;
	top: 152px;
	width: 474px;
	text-align:center;} 


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
gayatriom

ok that worked! thanks so much. one last thing. my lines aren't breaking at the right points in the slogan. how do I fix that?

Share this post


Link to post
Share on other sites
gayatriom

did it! added </br> ! thanks So much for all your help!! You're awesome! I'm about to ask a new question about the navigation . Will start a new topic.

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  

×