Community Forums › Forums › Archived Forums › Design Tips and Tricks › Adding icons in front of H1
Tagged: Enterprise Pro, genesis_post_title_output
- This topic has 6 replies, 3 voices, and was last updated 7 years, 4 months ago by stesch.
-
AuthorPosts
-
November 8, 2016 at 10:27 am #195905steschMember
Hi all,
I have been busy trying to find an answer to the following (simple) question, unfortunately not finding a response yet. Hope you can help!
Currently, I am redesigning a website using the Enterprise PRO theme for a client. She would like to have an icon/image in front of some of the page titles (H1). We are talking here about 5-6 different images for 5-6 different pages (1 image for 1 page), designed especially for the site in questions. The images should only show up in front of the title when the page in question is displayed on screen, so not in the navigation bar.
If anyone could give me directions on where to add the icons so they'll display in front of the page title, please let me know. Any help would be very much appreciated.
November 8, 2016 at 11:43 am #195910Victor FontModeratorLook at the CSS before pseudo element. You would create CSS for h1:before {}. You would have to uniquely identify each h1 tag somehow for it to work.
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?November 9, 2016 at 6:58 am #195937steschMemberHi Victor,
Thanks a lot for your response, I very much appreaciate it. I can see how this would work if would like to add the same icon for each page. However, the problem is that I need to place five different icons on five different pages. Would I have to code this directly into CSS? Or would there be another way to do this?
Best,
StefanNovember 9, 2016 at 11:22 pm #195972Brad DaltonParticipant1. Use the post/page i.d which you can grab from the body classes in the source code
or
2. Filter the title conditionally.
November 10, 2016 at 11:42 am #195997steschMemberThanks a lot for your help braddalton! I'm close to a solution, but I'm still experiencing difficulties. I used the second solution, and adapted the code to my own situation as follows:
add_filter( 'genesis_post_title_output', 'ac_post_title_output', 15 ); function ac_post_title_output( $title ) { if ( is_singular() ) $title = sprintf( '<h1 class="(I entered the title of the page in question here"><span> (I entered the img src here)</span></h1>', apply_filters( 'genesis_post_title_text', get_the_title() ) ); return $title; }
I pasted this one in the functions.php of the child theme. Although I do see the icon, it does display in the footer of any singly page, not on the page I want. I guess the problem is in the <h1 class="entry-title"> section?
November 10, 2016 at 8:08 pm #196014Brad DaltonParticipantNovember 12, 2016 at 7:05 am #196052steschMemberSolved! Thanks for your help!
For the record, this is the code I pasted in CSS. For multiple pages, just repeat the process any page the icon should be inserted in.
.(enter page ID) .entry-header { width:100%; float:left; margin: -40px 0px 40px 0px; padding: 40px 0px; } .(enter page ID) .entry-title{ margin: 0px 0px 0px 20px; float: left; } .(enter page ID) .entry-header:before { content: url((enter URL to media source)); background-repeat:no-repeat; background-size:contain; background-position:left; float:left; width:40px; height:40px; }
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.