Hi Ismael,

Thanks for the reply.
I Changed the Memory Limit via wp-config.php, added define(‘WP_MEMORY_LIMIT’, ’64M’)
Before I click the Import Dummy Data button again: will there be functions missing if I don’t?
I want a very clean and simple site and am just looking for a couple of adjustments on http://www.groenwerkensierbestrating.nl, such as:
– looking for the full-width foto under the menu as shown in the sample.
– looking for the underlined menu style as shown in sample
– can I remove theme name in footer?
– iconset as shown in sample
– some pages need portfolio

Kind regards,
Corine

While those social icons are cool, is there a way to add my own colored ones in there to use in the header?
and I am not sure how to put something on either one of those so you can take a look, instructions pls, thanks

Secondly the moment I add this code and put a function.php in the child theme folder my site goes down. Below is everything in the functions.php When I added this, the site went down completely and I had to delete it to get the site back up. I did not edit the register-admin-options.php yet.

This tells me that there is either bad code here or that I am applying it incorrectly. Per my understanding, the purpose of the child functions.php is to be applied “in addition to” the parent functions.php. I need to know of I did this incorrectly below or if there is perhaps some bad code there.

I’m really out of ideas here guys. I’m going on two weeks now. Urgent.

Thanks for your help, Jas

<?php

/*
* Add your own functions here. You can also copy some of the theme functions into this file. 
* WordPress will use those functions instead of the original functions then.
*/

/*Apple*/

add_filter('avf_default_icons','avia_add_custom_icon', 10, 1);
function avia_add_custom_icon($icons)
{
$icons['apple']	 = array( 'font' =>'social-fontello', 'icon' => 'ue803');
return $icons;
}

add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1);
function avia_add_custom_social_icon($icons)
{
$icons['Apple'] = 'apple';
return $icons;
}

/*Yelp*/

add_filter('avf_default_icons','avia_add_custom_icon', 10, 1);
function avia_add_custom_icon($icons)
{
$icons['yelp']	 = array( 'font' =>'social-fontello', 'icon' => 'ue800');
return $icons;
}

add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1);
function avia_add_custom_social_icon($icons)
{
$icons['Yelp'] = 'yelp';
return $icons;
}

Hi there,
Thanks for your continued help on this. So close… but neither of these snippets or putting it into Enfold Child> style.css worked. And now the Reserve Now button which had been working on the smartphone, is no longer appearing at all.
I hate to do this (because it gets so long) but I’ve pasted all my code in the style.css below. Can you see anything wrong, conflicting or have any ideas on what to do next? Thanks again, Lynn

/*
Theme Name: Enfold Child
Description: A Child Theme for the Enfold WordPress Theme. If you plan to do a lot of file modifications we recommend to use this Theme instead of the original Theme. Updating wil be much easier then.
Version: 1.0
Author: Kriesi
Author URI: http://kriesi.at
Template: enfold
*/

/*Add your own styles here:*/
/* Hide layerslider on Smartphones and protrait Tablets */
@media only screen and (max-width: 768px) {
.avia-layerslider { display: none; }}
/* Place Reserve now on tablets */
@media only screen and (max-width: 989px) and (min-width: 768px) {
.header_color .header-button a { left: -40%!important; }}
/* Add Reserve Now button to Header-added code to header.php*/
.header-button {
position: absolute;
border: none;
top: 0;
left: 255px;
right: 180px;
}
.header_color .header-button a {
display: block;
padding: 2px 5px 10px 12px;
font-size: 22px;
text-align:justify;
font-weight: bold;
float: left;
color: #f8d699;
border-radius:0px 0px 15px 15px;
}
.header-button a.header-chat { background-color: #985e06; left center no-repeat; }
.header-button a.header-chat {link: href=”http://reservation.worldweb.com/hotel/1227″ target=”_blank” }
}
/* Remove from home page only (right side)#, */
.breadcrumbs { display: none; }
.page-id-2 .entry-title { display: none; }
.sub_menu {
right: 175px !important;
}
/* Added TripAdvisor to ‘register-admin-options.php’ file, then to child functions.php Moves social icons to right of page */
#top .social_bookmarks li {
float: right !important;
}
/*Dropdown menu on top of LayerSlider*/
.container_wrap, #header_main { z-index: 1; }
/* Sizes/styles phone#, */
#top .social_bookmarks li a { font-size: 18px; }
.social_header .phone-info span {
font-size: 18px;
color: #f8d699;
font-style: italic;
padding-right: 28px;}
}
/* Change color of header social fonts*/
.header_color .social_bookmarks a { color: #f8d699; }
/*size main menu font*/
#avia-menu a {
font-size: 17px !important;
}
/* Color hover of TripAdvisor*/
#top .social_bookmarks_tripadvisor:hover a {
color:#fff;
background-color: #29A959!important;
}
/* Color main menu dropdown font*/
#top .main_menu .menu li ul a {
color: #f8d699 !important;
opacity: .7;
}
.header_color .main_menu ul:first-child > li > a { color: #f8d699; }
.slide-meta {display: none;}
.blog-categories.minor-meta {display: none;}
.text-sep.text-sep-cat {display: none;}
.header-buttons {
position: absolute;
right: 0;
border: none;
}
/* Get Reserve Now button on iPhone*/
@media only screen and (max-width: 480px) {
.header-button {
position:absolute;
top:90px;
left:30px;
right:20px;
}
}
/*Dropdown menu on top of LayerSlider*/
.container_wrap { z-index: 1;
}
/* Sidebar styling -latest portfolio widget*/
#portfoliobox-2 .news-headline {
font-size: 16px !important;
}
#portfoliobox-2 .news-excerpt {
font-size: 12px !important;
}
.image_size_widget .news-thumb {
height: 50px;
width: 50px;
}
.image_size_widget .news-thumb img {
width: 46px;
height: 46px;
}
}
add_theme_support(‘avia_template_builder_custom_css’);

Hi Dude,

This didn’t work. This is what I did.

1. I removed the code I added to register-admin-options.php because you said I didn’t need to hack the theme file.
2. On fontello site, I selected a Yelp font from the zocial font family and downloaded the zip
3. I added the code below to the bottom of functions.php and saved.
4. I went to Enfold – General Settings and uploaded the zip as you can see here http://goo.gl/PUZ9n2
5. I then went to Enfold – Header and added a social item and looked for “Yelp” in the “Social Icon” drop down list.
6. I don’t see Yelp in the list. What did I do wrong? Please talk to me like I am a baby. Ha.

Thank you, Jas

Here is my code.

add_filter('avf_default_icons','avia_add_custom_icon', 10, 1);
function avia_add_custom_icon($icons)
{
$icons['yelp']	 = array( 'font' =>'fontello', 'icon' => 'ue800');
return $icons;
}

add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1);
function avia_add_custom_social_icon($icons)
{
$icons['Yelp'] = 'yelp';
return $icons;
}

• This reply was modified 12 years, 2 months ago by Jasmer.

Thanks Yigit!

1. CSS worked!

2. I followed Peter’s post here but it didn’t work.
https://kriesi.at/support/topic/adding-custom-social-icons/#post-170356

Here is what I did:

A) register-admin-options.php

(added Apple and Yelp entires in alphabetical order. This worked, As you can see there are two empty place holders in the header on my site. They are functional but no icons.)

'avf_social_icons_options', array(

									'500px' 	=> 'five_100_px',
									'Apple' 	=> 'apple',
									'Behance' 	=> 'behance',
									'Dribbble' 	=> 'dribbble',
									'Facebook' 	=> 'facebook',
									'Flickr' 	=> 'flickr',
									'Google Plus' => 'gplus',
									'Instagram'  => 'instagram',
									'LinkedIn' 	=> 'linkedin',
									'Pinterest' 	=> 'pinterest',
									'Skype' 	=> 'skype',
									'Soundcloud'=> 'soundcloud',
									'Tumblr' 	=> 'tumblr',
									'Twitter' 	=> 'twitter',
									'Vimeo' 	=> 'vimeo',
									'Xing' 		=> 'xing',
									'Yelp' 	=> 'yelp',
									'Youtube'   => 'youtube',
									'Special: RSS (add RSS URL, leave blank if you want to use default WordPress RSS feed)' => 'rss',
									'Special: Email Icon (add URL to a contact form)' => 'mail', => 'mail',

B) Downloaded font zip from Fontello

C) Checked social-fontello-codes.css for code and Fontello website (I only tried one icon because I wasn’t sure how to add two)
See here
http://goo.gl/Wbw1F3
http://goo.gl/VGqGCc

D) functions.php

(added at very bottom)

add_filter('avf_default_icons','avia_add_custom_icon', 10, 1);
function avia_add_custom_icon($icons)
{
$icons['yelp']	 = array( 'font' =>'social-fontello', 'icon' => 'ue800');
return $icons;
}

Doesn’t seem to work. Any ideas? Thanks, Jasmer

Thank 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

• This reply was modified 12 years, 2 months ago by keithcrest.

khalidmuharragi, thanks for the compliment of course but really it was just a hack. I just tried my best to duplicate what Kriesi did. So credit goes to him or course. But to your question. The code completed the way Kriesi does it, is more elegant, his logo is the hexagon and it is the same size regardless of browser window. He embellishes is with adding the text to the right when the browser window is large and then hides the text as the browser gets smaller. With the social icon code modified this way on a mobile browser screen size the social icons are left in the middle of the header. When Kriesi hides the logo text he is left with a clean header. Logo left social icons center and nav menu button right.

You however on running into the problem that I had. Your logo is horizontal. so it is taking up the space were the social icons end up. Before I tell you what I did know this. I am only learning css and html, and php is foreign to me so take this with a grain of salt please. Depending on the number of social media links you try and use you could altogether have another problem. There is only so much room at the top between the logo and menu button. So i found with even say 5 icons you were running out of room up there so bear that in mind.

So you have probably many solutions but the simple answer is you need to change/shrink your logo as the browser window gets smaller. You can probably accomplish this many ways, My first thought would be in the header php file. actually make 2 logos with unique ids. then with Media queries in your custom css file, show the large full logo in all browsers but the small mobile size and at that time hide the large one and show the small one. I however doen’t know how to right php so I didn’t do it this way. So if someone knows how please add this solution as it is probably the best. If there is a better one then please enlighten us.

What I did was a bit of a hack. I hid the logo image and add a background that was a icon version of my logo when the screen size got to a certain size. This works but it has one huge drawback. The clickable portion of the logo is still actually the original wider size and if someone tries to drag the icon to the desktop they actually get the logo not the visible icon. If this doesn’t bother you or you can tweek it to make it better, then make a smaller squareish version of your logo and then add this code.

/* Smaller than standard 960 (devices and browsers) (ipad Portrait)*/
@media only screen and (max-width: 989px) {

	/* adds the jack and addi icon as a background */
	div .logo {
		background: url(https://yourownpath/logoicon.png) top left no-repeat;
		top: 11px;
	}
	
	/* makes the default logo transparent */
	.logo img {
		opacity: 0;
		filter: alpha(opacity=0); /* For IE8 and earlier */
	}
	
}

I then had a problem with placement on a vertical iphone so i did this. yours will be different based on your logo size. I also enlarged the social icons for more ease of clicking on a phone

@media only screen and (max-width: 767px) {
/* Add your Mobile Styles here */

	/* moves the icon logo on smaller screens */
	.responsive .mobile_slide_out .logo {
		margin-top: 10px;
		margin-bottom: -10px;
	}
	
	/* change social icons */
	#top .social_bookmarks li a {
		font-size: 19px;
		width: 40px;
	}
	
}

Hope this helps

• This reply was modified 12 years, 2 months ago by allegrabillings.