Tagged: child theme, header, social
-
AuthorPosts
-
January 27, 2014 at 11:26 pm #215564
Is there a way to remove the vertical line separators from between the social icons with quick CSS? So you can only see the social icons without the lines between them?
January 28, 2014 at 6:14 pm #215939Hey Jasmer!
Please add following code to Quick CSS in Enfold theme options under Styling tab
#top .social_bookmarks li { border-right-style: none; }
Best regards,
YigitJanuary 29, 2014 at 5:01 am #216230THANK YOU Yigit!
ICON EFFECT: Currently the rollover effect is “colored block background”. How can I change it to where the icon ONLY changes color with no background change? You can see the plug in for my icons in my footer that change colors when you hover
It would be great to have the header effect match my footer effect!ICON CHANGE: I changed one of the social icons to an Apple logo. It looks horrible! Since then, I have uploaded the fontello fonts to the theme in Enfold in General Settings. How can I get an actual font Apple logo there instead of this ugly pixelated .png? I’ll also have to undo what I did I think. Ugh!
ICON ADD: I need a YELP icon!! I imagine this is the same process in the above?
–
I know this has been covered in existing posts but when I read them they are confusing and contradictory in some cases. There seems to be many ways I can do these Icon changes (Yelp, Apple). It has been difficult sorting through all the different ways to see which one is best. Can you explain it to me please?Question 1: Is there an update coming that will allow uploading fonts and changing them out easily?
Question 2: Better yet, is there an update coming where YELP will be available?Thanks for your time Yigit! Jas
- This reply was modified 10 years, 10 months ago by Jasmer.
January 29, 2014 at 11:43 am #216323Hi Yigit,
I just noticed that the CSS to remove the lines between and around the social icons doesn’t carry through to the mobile site. How can we address that?
Thank you, Jas
January 29, 2014 at 12:18 pm #216333This reply has been marked as private.January 29, 2014 at 3:25 pm #216388Hey!
Please add following code to Quick CSS as well
1-#top .social_bookmarks_pinterest:hover a { color: #cb2027; background-color: transparent; } #top .social_bookmarks_twitter:hover a { color: #46d4fe; background-color: transparent; } #top .social_bookmarks_gplus:hover a { color: #de5a49; background-color: transparent; } #top .social_bookmarks_facebook:hover a { color: #37589b; background-color: transparent; } #top .social_bookmarks_linkedin:hover a { color: #419cca; background-color: transparent; } #top .social_bookmarks_rss:hover a { color: #ffa133; background-color: transparent; } #top .social_bookmarks_mail:hover a { color: #9fae37; background-color: transparent; }
2&3- Please refer to Peter’s post here https://kriesi.at/support/topic/adding-custom-social-icons/#post-170356
4- As far as i know, no, but you can request it here https://kriesi.at/support/topic/enfold-feature-requests/
5-@media only screen and (max-width: 767px) { .responsive #header_meta .social_bookmarks li { border-style: none; } .responsive #top #header_meta .social_bookmarks li:last-child a { border-right-style: none; }}
Regards,
YigitJanuary 30, 2014 at 1:27 am #216715Thanks 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-170356Here 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/VGqGCcD) 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
January 30, 2014 at 10:23 am #216877Hey!
You don’t need to hack the theme files – please insert this code into the functions.php file: https://kriesi.at/support/topic/adding-slideshare-to-header-social-icons/#post-200202 and make sure that the font family name and icon char code is correct.
Regards,
PeterJanuary 30, 2014 at 10:59 am #216891Hi 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 10 years, 9 months ago by Jasmer.
January 30, 2014 at 2:07 pm #216943Hi!
I’m not sure why the filter is not working but please download the font that you want on http://fontello.com/ then upload it via Enfold > General Settings > Icon Font Manager. Edit functions.php, find this code:
'scrolltop' => array( 'font' =>'entypo-fontello', 'icon' => 'ue876'),
Below, add this code:
'slideshare' => array( 'font' =>'fontello', 'icon' => 'ue802'),
I used the checkmark from Font Awesome. Edit includes > admin > register-admin-options.php, find this code on line 971:
'Youtube' => 'youtube',
Below, add this code:
'Slideshare' => 'slideshare',
You can now select the Slideshare social icon. You can do the same with yelp icons. Regarding the icon codes, you need to remove the plus sign. U+E802 should be converted to ue802.
Cheers!
IsmaelFebruary 1, 2014 at 12:08 pm #218233Hi Ismael,
I’m confused. I’m having the same problem I had last time I tried to do this. I’m going to explain in great detail so I can put this problem to rest. These three items below show you the three different ways I’ve been told to do this.
1. Peter’s post here https://kriesi.at/support/topic/adding-custom-social-icons/#post-170356 tells me that I do the following.
– edit register-admin-options.php
– edit functions.php2. Dude then posted above “You don’t need to hack the theme files – please insert this code into the functions.php file:” https://kriesi.at/support/topic/adding-slideshare-to-header-social-icons/#post-200202
– this is telling me to edit the functions.php only NO editing of register-admin-options.php3. You told me to:
– edit functions.php BUT you suggested different code than Peter’s post.
– register-admin-options.phpConclusion:
– It appears to me there are three slightly different way s of accomplishing this task. I would like to find the simplest way possible to achieve this task. Would you PLEASE study these three ways and explain to me which is the best way? Talk to me like a baby. I really appreciate your time but this is a tricky one and quick comments have left me confused.Question:
– I do not update the Enfold theme via FTP because doing so via the WordPress dashboard tend to restore more settings. Which of these files will remain after I do an Enfold update via the WordPress dashboard? Finding the simplest way to achieve my goal will mean that I have to restore less code after an update.Thank you for your time, Jasmer
February 2, 2014 at 1:55 am #218323February 2, 2014 at 2:06 am #218327Hi Ismael,
I’ll give it a shot and get back to you. Thank you. By the way, which of these files will remain after I do an Enfold update via the WordPress dashboard?
Thanks, Jas
February 2, 2014 at 4:22 am #218353Hey!
Sadly, the functions.php and register-admin-options.php files will be overwritten when you update the theme.
Regards,
IsmaelFebruary 2, 2014 at 1:03 pm #218394Hey!
Please place this code: https://kriesi.at/support/topic/adding-slideshare-to-header-social-icons/#post-200202 into the child theme functions.php. By going this way you don’t need to modify the parent theme files.
Cheers!
PeterFebruary 2, 2014 at 1:53 pm #218403Hey Dude,
Ok you are going to have to point me in the right direction. Where is the “child theme functions.php”? Or do I have to create one? And also the register-admin-options.php. Is there a child for that or do I create one?
Thanks, Jas
- This reply was modified 10 years, 9 months ago by Jasmer.
February 3, 2014 at 9:13 am #218666Hi!
I recommend to download the default child theme here: http://kriesi.at/documentation/enfold/using-a-child-theme/ – install it like a standard theme, and activate it. Then paste the code into the functions.php file which can be found in the child theme folder.
Cheers!
PeterFebruary 3, 2014 at 12:37 pm #218754Hi guys,
I read the WordPress page on child themes and watched the video. Thank you.
Before I follow the directions in the video, I need to be completely clear on what to expect. I don’t want any surprises. I have an important question that is not answered in the video and I have not found answers for in the forum.
1. If I update the parent theme, functions.php (child theme) is loaded to the site in addition to the functions.php (parent theme). The functions.php file is an exception in the way child themes are treated…
2. So, this is not true of other php files such as register-admin-options.php. It seems in this case, the register-admin-options.php (child theme) will totally replace the register-admin-options.php (parent theme).
3. My question is, if this is true, what happens if…. an Enfold theme update includes an updated register-admin-options.php file? If the child theme is replacing that then it seems I would never get the updated register-admin-options.php file?
4. As I understand it, this would create the same problem I am trying to avoid and I’d have to manually update the file. Am I missing something?
I really need to understand this in detail. Please answer as completely as you can and then I’ll follow the directions in the video and get back to you with my experience.
Thank you, Jas
Urgent
- This reply was modified 10 years, 9 months ago by Jasmer.
February 5, 2014 at 9:06 am #219829Hey!
1) Yes, the child theme functions.php loads first, then all parent theme files will be loaded.
2) Yes exactly. WordPress loads just the functions.php file. An exception is made for the template files (single.php, page.php, header.php, footer.php and the “loop-XXX” files in the enfold/includes folder.
4) If you overwrite entire functions (by adding them to the child theme functions.php) or if you overwrite template files (like header.php, footer.php) you’re right. In this case you must check if we updated the file in the parent theme folder and if yes you must also update your child theme. The advantage is that you know which files you modified (because all changes can be found in the child theme folder) and often you don’t need to update files because many updates do not touch the template files or framework functions.
Best regards,
PeterFebruary 5, 2014 at 9:32 am #219835Thanks Peter for answering my urgent request,
Last question before I proceed:
I notice it says “theme specific plugins” might have to be reset. I’m not sure I understand this. What would be the difference between a regular plugin and a “theme specific plugin”? What plugins would be specific to Enfold theme? I have about 12 plugins.
Anything else I should watch out for??
Thanks for your time, Jas
February 5, 2014 at 10:49 am #219869Hi!
You can ignore the “theme specific plugins” – they won’t be affected by the child theme.
Anything else I should watch out for??
Yes,1) Import the parent theme settings after you switched to the child theme (Enfold > Theme Options).
2) You must configure the menu location again (Appearance > Menus) because WordPress saves it with the theme name and the child theme has a different name.Regards,
PeterFebruary 5, 2014 at 10:54 am #219874Hi Peter,
Great so just do this again right? Since I don’t have much yet, it looks like it will take just a minute.
https://dl.dropboxusercontent.com/u/1049926/Menu%20Location.pngThanks, Jas
February 5, 2014 at 11:03 am #219880Hey!
No you just need to assign the menu to the theme location (other tab).
Regards,
PeterFebruary 5, 2014 at 11:07 am #219883Ah ok,
So this. Easy. Thanks
https://dl.dropboxusercontent.com/u/1049926/Menu.pngI’m going to do the following then post my experience:
1. Create a child theme
2. Upload fonts to the Iconfont manager.
3. Create functions.php child
4. Create register-admin-options.php child
5. Add the icon to the header.
Thanks! Jas
February 6, 2014 at 5:44 am #220319We looking forward to hearing from you Jas :)
Regards,
JosueFebruary 6, 2014 at 1:21 pm #220441Josue, Peter, Ismael, Yigit!
I applied the child theme. Went very smoothly for the most part. Here are the results.
1. Import Enfold Child Theme
2. Enfold > Theme Options > Import Parent Theme Settings
3. Appearance > Menus and reset the Menu locations (might want to add this to your “Using a Child Theme” page)
4. Refreshed the site in the browser twice
5. Quick CSS code did not load and site returned to default before Quick CSS was applied. However, when I checked the Quick CSS the code was there. So, I put the cursor at the bottom of the Quick CSS window hit the space bar and clicked “Save All Changes” Hmmm. Is this normal or did I just encounter a glitch?
6. Refreshed the site in the browser and all CSS was applied.
7. Icy Social Plugin was missing from the footer. Appearance > Widgets then dragged it back in. It applied as before successfully.
Everything seems to be back to normal. If I run into any issues I’ll report here. I am moving on to the social header now. Get back to you soon.
Continued appreciation, Jas
February 6, 2014 at 2:37 pm #2204522 Questions: Re: social icon header
FIRST QUESTION
I understand how to edit parent files but in a child theme I think this will be a little different. I’m not sure how to append child theme files to make them compatible with parent theme files.
I understand I am editing functions.php and register-admin-options.php.
Am I including the full original content of the Enfold Parent files (functions and register-admin-options), making the edits, then copying to Enfold Child folder?
OR am I ONLY putting the edits in the Enfold Child theme files? Like this.. (I’m sure this is wrong) https://dl.dropboxusercontent.com/u/1049926/functions.png
The reason I am asking is because in the case of the functions.php the site loads both the parent and the child so the child would amend the parent file.
However, the the case of the register-admin-options.php the child would completely replace the parent.
It would seem that editing the two child files would be different approaches to each since the two files are treated differently by the site.
SECOND QUESTION
SO, after you clarify the above, am I putting these two files in the root of the child theme folder?
Almost there! Thank you for responding to my urgent request on this, Jas
PLANNED EDITS
functions.php
'apple' => array( 'font' =>'social-fontello', 'icon' => 'ue803'), 'crown' => array( 'font' =>'social-fontello', 'icon' => 'ue801'), 'foursquare' => array( 'font' =>'social-fontello', 'icon' => 'ue802'), 'yelp' => array( 'font' =>'social-fontello', 'icon' => 'ue800'),
register-admin-options.php
'Apple' => 'apple', 'Foursquare' => 'crown', 'Foursquare' => 'foursquare', /*I will have two icons titled Foursquare*/ 'Yelp' => 'yelp',
February 7, 2014 at 11:32 am #220845Bump ;)
February 10, 2014 at 9:55 am #221601Hey!
The child theme functions.php will be loaded first and you just need to add this code: https://kriesi.at/support/topic/adding-slideshare-to-header-social-icons/#post-200202 into it. You must not copy the functions.php file from the parent theme. The register-admin-options.php is not editable (and you can’t overwrite it) with a child theme at all and you can delete this file from the child theme folder.
Best regards,
PeterFebruary 10, 2014 at 11:52 am #221643Peter,
I’m getting really confused. Here you say to edit the register-admin-options.php
https://kriesi.at/support/topic/adding-custom-social-icons/#post-170356Ismael says it can be edited here
https://kriesi.at/support/topic/head-with-social-media-and-large-logo/#post-218323In your last message above you say “The register-admin-options.php is not editable”
Did you mean to say the PARENT register-admin-options.php CAN be edited but it needs to be left in the parent folder?
-
AuthorPosts
- The topic ‘Head With Social Media and Large Logo’ is closed to new replies.