Community Forums › Forums › Archived Forums › Design Tips and Tricks › How to add an additional class to headlines
- This topic has 8 replies, 3 voices, and was last updated 11 years, 4 months ago by Jen Baumann.
-
AuthorPosts
-
December 25, 2012 at 2:18 pm #7397vicMember
Lets say I have written a custom CSS class by the name "headline-wrap" and want to wrap my h2 headlines (post titles) with this new class. Since I want this to be strictly a child theme, I don't want to edit the template structure file manually. Maybe its something I have to add in the functions.php
Can someone assist me with this?
December 25, 2012 at 2:57 pm #7400RiavonMemberIt would be helpful to know what theme you're using and/or a link to your site so we can take a look. I don't know what it is you intend to do with your h2 wrap, but if you just want to add style to a particular header, such as the post titles, just look in your stylesheet (style.css) you can find h1.entry-title { which will style your post titles. Just apply the style you want to the element you want. Also, you can consider using the Genesis Simple Hooks plugin to add your own code to the theme, as well. I hope this is helpful to you.
PS - Note to mods, this post needs to be in the "Design tips and tricks" area rather than in the Forum Bugs and Suggestions area. Not sure if you have the power to move it or not? ~ Ria
Twitter: @riavonentprises
December 25, 2012 at 3:16 pm #7403vicMemberI am trying to make my own child theme. I am trying to get a ribbon effect on the post titles. So the horizontal part of the ribbon is pretty manageable by editing the elements in the CSS file but the small triangle part that forms the fold of the ribbon which goes outside the headline needs me to use an additional CSS class so that it fits the ribbon correctly.
I am working on my local installation of WP.
The ribbon css that I have is this :
#content #title {
width: 684px;
height: 61px;
margin-left: -79px !important;
background: url(http://static.tumblr.com/bl61tiy/YSplmw2a2/title_bar.png);
display: block;
margin: 20px 0px;
position: relative;
font-family: 'Arvo', arial;
line-height: 34px;
z-index: 12;
box-shadow: 0px 0px 5px black;}
#content #title .shad {
width: 26px;
height: 26px;
position: absolute;
bottom: -26px;
right: 0px;
background: url(http://static.tumblr.com/bl61tiy/8svln7c0b/title_shad.png);}
The first snippet adds a horizontal line of the ribbon and the second one adds a small triangle that acts as the fold. I want to add that to the h2 headings. If it makes it easier, lets say I am using the Focus child theme.
December 25, 2012 at 3:22 pm #7404vicMemberIt is something about adding a filter and an echo
filter (fn_add_headline)
<h2 <?php echo class="headline-wrap"/>>title</h2>Something like that. I searched everywhere but could not get the syntax right. If someone could please type that line for me so that I can paste it in my functions.php that would be great.
December 25, 2012 at 3:23 pm #7405RiavonMemberOh cool, I really like that effect. I did that same thing on one of my client sites ( lakefestnc dot com ) and just so happens I built that one using my own child theme, too! It was my first child theme, and I remember wanting to learn how to do that CSS ribbon effect! 🙂 Anyway... you can look at how that site is coded, if you want. I followed the css tutorials I found on the subject and utilized the CSS :after pseudo-element to do the ribbons. I'll see if I can find the tutorial for you so you can learn, too.
In case anyone is interested in learning how to make a ribbon effect using simple CSS, > HERE < is the link I mentioned above. CSS Tricks is an amazing resource for CSS, by the way.
Vic, good luck finding your echo. 🙂
Twitter: @riavonentprises
December 25, 2012 at 3:26 pm #7406vicMemberI am not so much after the output of the ribbon effect than the knowledge part itself. I would genuinely like to know how to wrap an element in the class that I want via PHP. Its something as simple as adding an echo, but I don't get the syntax right.
December 26, 2012 at 11:18 am #7483Jen BaumannParticipantHere's an example for h1 titles:
//Filter Post Title add_filter('genesis_post_title_output', 'custom_post_title_output'); function custom_post_title_output( $title ) { if( is_singular() ) return sprintf( '<h1 class="entry-title"><span>%s</span></h1>', apply_filters( 'genesis_post_title_text', get_the_title() ) ); }
December 26, 2012 at 11:24 am #7485vicMemberThanks, but where do I insert the class name in the code above?
December 26, 2012 at 2:54 pm #7560Jen BaumannParticipantYou can alter the code to give any output you need. I'm not entirely clear on the markup you need because, until today, code hasn't pasted well in the forums.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.