gayatriom 0 Report post Posted October 1, 2011 I used function add_header_text_to_branding() to add header text to this website : http://www.esww-law.com However, in IE and on phones, the header text moves all the way to the left and overlaps the branding logo. this is the code i used // function name function add_header_text_to_branding(){ ?> 1200 One Securities Centre 3490 Piedmont Road Atlanta, Georgia 30305 404-841-9400 / 866-266-6607 <?php } // end function And then I used div.header_text{margin-left:900px; color:white;margin-top:-110px;font-size:16px;text-align:center;margin-bottom:0px;} To align it. What am I doing wrong? Share this post Link to post Share on other sites
catrina 103 Report post Posted October 1, 2011 I think there's a more elegant way of implementing the styling of the header text by using CSS. For example, this styling can be applied using Custom CSS: [code] [/code] ...and the following styling can be included in it: [code]div.header_text{margin-left:900px; color:white;margin-top:-110px;font-size:16px;text-align:center;margin-bottom:0px;}[/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 gayatriom 0 Report post Posted October 1, 2011 ahh. hmm. ok. so you're saying not to put the top css in functions area? what you just put up there looks pretty similar to what I pasted. what am I missing? Share this post Link to post Share on other sites catrina 103 Report post Posted October 1, 2011 I pasted what you pasted to show you what can be adjusted. Here is the revised CSS you can add to the Custom CSS section: [code]div.header_text { background: #27378b; /* old browsers */ background: -moz-linear-gradient(top, rgba(39,55,139,1) 47%, rgba(55,90,186,1) 100%); /* ff3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(47%,rgba(39,55,139,1)), color-stop(100%,rgba(55,90,186,1))); /* chrome,safari4+ */ background: -webkit-linear-gradient(top, rgba(39,55,139,1) 47%,rgba(55,90,186,1) 100%); /* chrome10+,safari5.1+ */ background: -o-linear-gradient(top, rgba(39,55,139,1) 47%,rgba(55,90,186,1) 100%); /* opera11.10+ */ background: -ms-linear-gradient(top, rgba(39,55,139,1) 47%,rgba(55,90,186,1) 100%); /* ie10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#27378b', endColorstr='#375aba',GradientType=0 ); /* ie6-9 */ background: linear-gradient(top, rgba(39,55,139,1) 47%,rgba(55,90,186,1) 100%); /* w3c */ border: 2px solid #5E6A71; padding-top:10px; width:210px; margin-left:900px; color:white; margin-top:-110px; font-size:16px; text-align:center; margin-bottom:0px;}[/code] Please remove all styling in the function. It should look like this now: [code] 1200 One Securities Centre 3490 Piedmont Road Atlanta, Georgia 30305 404-841-9400 / 866-266-6607[/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 gayatriom 0 Report post Posted October 1, 2011 thanks Catrina. Let me try this. Share this post Link to post Share on other sites gayatriom 0 Report post Posted October 1, 2011 ok. now the overlapping issue has stopped. The only thing is that instead of being aligned with my content so that the right side of the header is in line with the right side of my content, it's off to the right. (this only happens in IE and on the phone) Share this post Link to post Share on other sites catrina 103 Report post Posted October 2, 2011 It could be something to do with the code below or the padding: [code]background: -ms-linear-gradient(top, rgba(39,55,139,1) 47%,rgba(55,90,186,1) 100%); /* ie10+ */[/code] Is the problem occurring on an iPhone? 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 0 Report post Posted October 3, 2011 It's occuring on my smart phone - android. I'm not too sure about the iphone since I don't have one. :( . Share this post Link to post Share on other sites kastelic 6 Report post Posted October 3, 2011 You can always try different hook such as: pagelines_before_branding pagelines_inside_top_branding pagelines_inside_bottom_branding pagelines_after_branding pagelines_before_branding_icons pagelines_branding_icons_start pagelines_branding_icons_end pagelines_after_branding_wrap Share this post Link to post Share on other sites gayatriom 0 Report post Posted October 6, 2011 hmm. yes. maybe that will help. will try that out.. so i guess i could tru pagelines_after_branding Share this post Link to post Share on other sites gayatriom 0 Report post Posted October 11, 2011 I used pagelines_before_branding_icons instead and it worked perfectly! everything on my smart phone is perfectly aligned! however, i can't check IE right now, so crossing my fingers that it looks perfect in IE also! 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 Login via PageLines Signup To PageLines Sign in to follow this Followers 0
gayatriom 0 Report post Posted October 1, 2011 ahh. hmm. ok. so you're saying not to put the top css in functions area? what you just put up there looks pretty similar to what I pasted. what am I missing? Share this post Link to post Share on other sites
catrina 103 Report post Posted October 1, 2011 I pasted what you pasted to show you what can be adjusted. Here is the revised CSS you can add to the Custom CSS section: [code]div.header_text { background: #27378b; /* old browsers */ background: -moz-linear-gradient(top, rgba(39,55,139,1) 47%, rgba(55,90,186,1) 100%); /* ff3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(47%,rgba(39,55,139,1)), color-stop(100%,rgba(55,90,186,1))); /* chrome,safari4+ */ background: -webkit-linear-gradient(top, rgba(39,55,139,1) 47%,rgba(55,90,186,1) 100%); /* chrome10+,safari5.1+ */ background: -o-linear-gradient(top, rgba(39,55,139,1) 47%,rgba(55,90,186,1) 100%); /* opera11.10+ */ background: -ms-linear-gradient(top, rgba(39,55,139,1) 47%,rgba(55,90,186,1) 100%); /* ie10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#27378b', endColorstr='#375aba',GradientType=0 ); /* ie6-9 */ background: linear-gradient(top, rgba(39,55,139,1) 47%,rgba(55,90,186,1) 100%); /* w3c */ border: 2px solid #5E6A71; padding-top:10px; width:210px; margin-left:900px; color:white; margin-top:-110px; font-size:16px; text-align:center; margin-bottom:0px;}[/code] Please remove all styling in the function. It should look like this now: [code] 1200 One Securities Centre 3490 Piedmont Road Atlanta, Georgia 30305 404-841-9400 / 866-266-6607[/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
gayatriom 0 Report post Posted October 1, 2011 thanks Catrina. Let me try this. Share this post Link to post Share on other sites
gayatriom 0 Report post Posted October 1, 2011 ok. now the overlapping issue has stopped. The only thing is that instead of being aligned with my content so that the right side of the header is in line with the right side of my content, it's off to the right. (this only happens in IE and on the phone) Share this post Link to post Share on other sites
catrina 103 Report post Posted October 2, 2011 It could be something to do with the code below or the padding: [code]background: -ms-linear-gradient(top, rgba(39,55,139,1) 47%,rgba(55,90,186,1) 100%); /* ie10+ */[/code] Is the problem occurring on an iPhone? 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 0 Report post Posted October 3, 2011 It's occuring on my smart phone - android. I'm not too sure about the iphone since I don't have one. :( . Share this post Link to post Share on other sites
kastelic 6 Report post Posted October 3, 2011 You can always try different hook such as: pagelines_before_branding pagelines_inside_top_branding pagelines_inside_bottom_branding pagelines_after_branding pagelines_before_branding_icons pagelines_branding_icons_start pagelines_branding_icons_end pagelines_after_branding_wrap Share this post Link to post Share on other sites
gayatriom 0 Report post Posted October 6, 2011 hmm. yes. maybe that will help. will try that out.. so i guess i could tru pagelines_after_branding Share this post Link to post Share on other sites
gayatriom 0 Report post Posted October 11, 2011 I used pagelines_before_branding_icons instead and it worked perfectly! everything on my smart phone is perfectly aligned! however, i can't check IE right now, so crossing my fingers that it looks perfect in IE also! Share this post Link to post Share on other sites