-
Posts
-
Using the “Header with Social Icons and Bottom,” I would like to use the space to the right of the logo area (where you add social icons) for a phone number instead.
I know how to delete all the social icon choices by clicking the red “x” in the “Theme Options” panel…but how do I replace that content area with a text area instead, which I can then style myself using CSS? It seems as though I need to add the text in a div in the header.php file, but I don’t know where/how. Everything I’ve tried results in a PHP error.
1) Please help me add a text div in the correct area in whichever PHP file I need to target.
2) It would be great to add “Add custom content instead” in the “Social Icon” dropdown in the Header “Theme Options” admin page, where we could add our own text or image content instead of the social media icons!Thank you for your help,
KeithHi keithcrest!
Please go to Appearance > Editor and open Header.php file and find
$phone = avia_get_option('phone'); $phone_class = !empty($nav) ? "with_nav" : ""; if($phone) echo "<div class='phone-info {$phone_class}'><span>{$phone}</span></div>";cut it and paste it right under
if(strpos($headerS,'social_header') !== false && strpos($headerS,'bottom_nav_header') !== false) avia_social_media_icons($social_args);then add following code to Quick CSS in Enfold theme options under Styling tab
.social_header .phone-info { float: right; margin-top: 20px; } .social_header .phone-info.with_nav span { border-left-style: none; }You can adjust margin-top value to position the height of your text
Cheers!
YigitThank you, Yigit. I see what you did there, but it doesn’t work for my needs.
I should have sent you a link for reference: http://pgutters.jonevan.com/
You will see that I added HTML to the “phone number” insert area already. It gives you the review icons at the very top of the page. So I cannot move the header.php telephone code as you suggested.
What I am trying to do involves the currently blank area to the right of the logo. By default, that area inserts the social icons. I am trying to, instead, put a large phone number in that area. I think I need to code that phone number (or any other original content I want to use instead of the by-default social icons) into the header.php file via my own div(s) which I can then control with CSS…but whatever I try causes a PHP error.
How do I accomplish this….adding my own div in the header.php that will show in the blank area to the right of the logo?
Because it currently needs to be hard-coded into the php file, that is why I also suggested that perhaps in an update to the theme, you could introduce an “if social icons” and “if original content” choice for that right area of the header within your back-end interface :-)
Keith
Hey!
You can request such feature here https://kriesi.at/support/topic/enfold-feature-requests/
Please open Header.php file again and right under following lineif(strpos($headerS,'social_header') !== false && strpos($headerS,'bottom_nav_header') !== false) avia_social_media_icons($social_args);add following line
echo "<div class='my-text'>here goes your text</div>";And you can style your text using .my-text style in Quick CSS, for example
.my-text { float: right; margin-top: 30px; }Cheers!
YigitHmmm…no, that isn’t working.
I added it as you directed to header.php, and you can see that it is being inserted in the top logos area (in the gray strip above the main large logo). You can see it jammed above the “See Our Reviews” text.
I need it in the white area to the right of the “princeton gutters” logo!
Keith
Hey!
Please try adding under following line
if(strpos($headerS,'bottom_nav_header') !== false){ $extraClose = "</div></div><div id='header_main_alternate' class='container_wrap'><div class='container'>"; }and remove margin-top rule from your custom CSS. Float: right would be enough
Cheers!
YigitThat did it!
I can’t mess with the styling right this minute…but now the text is placed where I can work with it :-)
Thank you so much, Yigit, and I will make a feature request along these lines via the link you indicated.
All the best,
Keith
- The topic ‘Header with Social Icons and Bottom — Use Text Instead of Social Icons’ is closed to new replies.