Community Forums › Forums › Archived Forums › Design Tips and Tricks › Change Header Title and Tagline in eleven40 Pro/Genesis 2.0
- This topic has 20 replies, 2 voices, and was last updated 10 years, 7 months ago by Martin.
-
AuthorPosts
-
August 21, 2013 at 12:00 am #57851MartinMember
Hello,
I just installed Genesis 2.0 and the new eleven40 Pro child theme (very cool, BTW!). For now, I just want to:
1. Change the size of the font of the Header Title on the left and the Menu buttons on the right hand side of the header banner.
2. I know the tagline is now centered and below the Header banner in this theme; nevertheless, in addition to the new, lower tagline, I want to put a traditional tagline under my Header Title (my name) in a slightly smaller font size (this will be my professional title).
Please advise on how to do these edits--this theme doesn't have the "Design Settings" I'm used to in Prose, so I figure we have to go into the Editor and do a little coding ("Gasp!"), but, if that's correct, I'm just an amateur and need some hand-holding for that sort of thing.
Thanks!
August 21, 2013 at 2:18 am #57859photasticMemberhere you go, add these styles to style.css which is sitting in your Eleven40 Pro theme folder :
header title :
.site-title { font-size: 50px; //* or whatever value you want ;) }
menubuttons font :
.site-header .genesis-nav-menu li { font-size: 35px; }
The extra tagline is a bit more complicated but I'll try to get some working code for you.
It also helps if you provide us with a link to your website 🙂
Trying to craft webstuff at Photastic Webdesign
Learning Genesis by solving unanswered topicsAugust 21, 2013 at 2:51 am #57861photasticMemberThis should do the trick for a custom tagline underneath the title :
add_filter( 'genesis_seo_title', 'my_tagline', 10,3 ); function my_tagline() { $inside = sprintf( '<a href="http://www.yourdomain.com" title="%s">%s</a><p class="mytagline">YOUR TAGLINE GOES HERE</p>', esc_attr( get_bloginfo('name') ), get_bloginfo('name') ); $title = sprintf('<div class="site-title">%s</div>', $inside ); return $title; }
you can then style the title by targetting it in css like in my previous post.
To edit the tagline, target it like this in your style.css :p.mytagline { font-size: 50px; color: red; }
Hopefully I made myself clear 🙂
Trying to craft webstuff at Photastic Webdesign
Learning Genesis by solving unanswered topicsAugust 21, 2013 at 11:14 pm #58127MartinMemberThanks so much for your quick response, photastic!
Your first two suggestions for changing the font sizes worked; however, my title now overflows to the next line below.
Here is a link to the site: http://www.martinjschoen.com
You can see my degree is on the second line; in fact, I want to make the name and degree even larger, but stay on one line. I tried to figure out where I could change the padding, but no luck. Here's the code I played with:
**************
.site-title {
font-size: 24px;
font-size: 2.4rem;
letter-spacing: 2px;
letter-spacing: 0.2rem;
line-height: 1;
margin: 0;
padding: 20px 0;
padding: 2.0rem 0;
text-transform: uppercase;
}***************
I usually copy the default code so I can remember what it was; but please forgive me--I forgot to do it with this one! But good thing I only changed the first "padding" entry and I'm not sure "20px" is the actual default value (anybody know what it is?). At any rate, it made no difference when I messed with it.The code from your second post did nothing, unfortunately. I'm not sure about this: does it matter where I enter the code?! I did put it in (with comment tags so I could remember what it was for) in the "/* Title area..................*/" area, but I'm not really sure where any of this should go.
Here's the complete Custom Code I entered in the style.css section under "Appearance-->Editor"
*****************
/*Custom Code to change font size of Header Title */
.site-title {
font-size: 30px; /
}/*Custom Code to change font size of Menu navigation buttons on right side of header */
.site-header .genesis-nav-menu li {
font-size: 25px;
}/* Custom Code To add custom tagline under Header Title */
add_filter( 'genesis_seo_title', 'my_tagline', 10,3 );
function my_tagline() {
$inside = sprintf( '%s<p class="mytagline">Licensed Psychologist</p>', esc_attr( get_bloginfo('name') ), get_bloginfo('name') );
$title = sprintf('<div class="site-title">%s</div>', $inside );
return $title;
}p.mytagline {
font-size: 20px;
}***************
I changed your code after the "www.yourdomain.com" part because it looked like a typographical error with the close quotations marks--is that correct? And is that semicolon supposed to be right after the close quotes right there?
So, anyway, you'll see on my site that I need to:
*move the title (my name and degree) to the left and increase the font size without messing up the whole header (I tried some stuff but the navigation menu kept moving down and the black background would cover up the tagline below).
*add this tagline, "Licensed Psychologist," right under title (name and degree). Also, I want that in italics--would you show me how to do that?Thank you!
August 22, 2013 at 12:37 am #58135photasticMembersorry, my bad... didn't tell you but my second post's code :
add_filter( 'genesis_seo_title', 'my_tagline', 10,3 ); function my_tagline() { $inside = sprintf( '<a href="http://www.yourdomain.com" title="%s">%s</a><p class="mytagline">YOUR TAGLINE GOES HERE</p>', esc_attr( get_bloginfo('name') ), get_bloginfo('name') ); $title = sprintf('<div class="site-title">%s</div>', $inside ); return $title; }
needs to go into your theme's functions.php file and not in your css file 🙂
Try that out first and then we'll see for styling the rest 🙂
Trying to craft webstuff at Photastic Webdesign
Learning Genesis by solving unanswered topicsAugust 22, 2013 at 7:20 am #58179MartinMemberSorry, but that crashed the site. Correct me if I'm wrong, but used the functions.php file in the wp-includes folder, is that right? And I just put the code at the end of the file, if that's OK.
Also, just want to clarify that this section:
'<a href="http://www.yourdomain.com"
should actually look like this:
'<a href="http://www.yourdomain.com";
And how would I make the tagline appear in italics?
Thanks!
August 22, 2013 at 7:58 am #58185photasticMemberno, it should go in the functions.php file in wp-content/themes/your-child-theme 🙂
the a href should end with " : http://www.yourdomain.com" and no ;
something goes wrong when pasting the code here on the forum...
To make the tagline italic, insert this code in your theme's style.css :
div#mytagline { font-style: italic; }
Trying to craft webstuff at Photastic Webdesign
Learning Genesis by solving unanswered topicsAugust 22, 2013 at 8:09 am #58187MartinMemberWell, I must be doing something wrong--the site crashed again. Here's the exact code I pasted into wp-content/themes/my-child-theme:
Edit: I just tried 3 or 4 times to paste in the code, but when I hit "submit," the result is messed up. So I see what you're dealing with! Perhaps the reason it's not working for me is that this forum keeps screwing up the code...?
I'll try again without using the "code" button above:
************
/* Custom Code To add custom tagline under Header Title */
add_filter( 'genesis_seo_title', 'my_tagline', 10,3 );
function my_tagline() {
$inside = sprintf( '%s<p class="mytagline">Licensed Psychologist</p>', esc_attr( get_bloginfo('name') ), get_bloginfo('name') );
$title = sprintf('<div class="site-title">%s</div>', $inside );
return $title;
}p.mytagline {
font-size: 20px;
}August 22, 2013 at 8:19 am #58193MartinMemberOK, now the post Edit button is gone!
So, let me try this again using the "code" button:
/* Custom Code To add custom tagline under Header Title */ add_filter( 'genesis_seo_title', 'my_tagline', 10,3 ); function my_tagline() { $inside = sprintf( '<a href="http://www.martinjschoen.com"; title="%s">%s</a><p class="mytagline">Licensed Psychologist</p>', esc_attr( get_bloginfo('name') ), get_bloginfo('name') ); $title = sprintf('<div class="site-title">%s</div>', $inside ); return $title; } p.mytagline { font-size: 20px; }
Is that the correct code?
August 22, 2013 at 10:22 am #58218photasticMemberthe p.mytagline goes into the styles.css file of your theme, not in the functions.php file 🙂
the code has to be (seems to be a forum issue : http://pastebin.com/Lq6zMHCn
Trying to craft webstuff at Photastic Webdesign
Learning Genesis by solving unanswered topicsAugust 22, 2013 at 9:59 pm #58351MartinMemberWell, things are still pretty kittywompus (sp?).
I would like to attach a screen shot of what the header looks like after I put the custom tagline code in the wp-content/themes/my child them file, but I cannot find any buttons etc. to do so. WTF?! In lieu of that, what I see is this:
**************Martin J. Schoen
Psy.D. <p
CLASS="MYTAGLINE">LICENSED
PSYCHOLOGIST</P>***************
Instead of 2 lines, we have 4, and, after "Psy.D.", everything is a light gray and hard to see.One other thing: I still need to get the degree ("Psy.D.") back up on the same line as the name, right after it. Any idea how to do that?
It seems this community forum's functionality is wanting; do you think our problems are mostly due to the fact that your code does not get published correctly?
Anyway, I did follow your link to the "Pastbin" site and put what you posted there into your code. Perhaps I inserted incorrectly? This is where it gets frustrating because how can we check on this if what we post is not rendered properly in our posts?
And, by the way, with the height change of the header after I inserted your code, it revealed social media icons that were hiding in the lower right corner! Go figure. What do you make of that?!
August 23, 2013 at 1:40 am #58371photasticMembersent you an email...
Trying to craft webstuff at Photastic Webdesign
Learning Genesis by solving unanswered topicsAugust 23, 2013 at 9:54 am #58426MartinMemberThanks, photastic, now we're gettin' somewhere! I really appreciate your generosity with your time!
Please take a look at the site: http://www.martinjschoen.com
The tagline is now in place; however, the italics did not work.
What I'd like to be able to do is:
1. get the "Psy.D." back up on the first line at the end of my name;
2. change the all-caps tagline to this standard usage with just the first letter in caps, "Licensed Psychologist"
3. put the tagline in italics, and also center it under "Martin J. Schoen, Psy.D." instead of have it aligned to the left.Thanks!
August 23, 2013 at 11:44 am #58450photasticMemberok, here goes 🙂 all this code goes in the styles.css file residing under wp-content/themes/eleven40pro at the BOTTOM of the file.
put your title on 1 line :
div.title-area { width: auto; } aside.header-widget-area { width: 60%; } section.widget_nav_menu { display: none; }
To have the tagline capitalized, add this piece of css to your p.mytagline :
text-transform: capitalize;
See if that comes out as you want it 🙂
Trying to craft webstuff at Photastic Webdesign
Learning Genesis by solving unanswered topicsAugust 23, 2013 at 5:52 pm #58541MartinMemberSorry, the code made the navigation menu disappear and increased the height of the header background (not sure that's the right terminology, but it's the black stripe across the top etc.).
I tried reducing the width percentage in the second section of code ("aside.header-widget-area") to 30%, but that had no effect.
Regarding the tagline, I do not want to capitalize it, I want it to appear with standard usage but with italics, exactly like this:
Licensed Psychologist
Thanks!
August 25, 2013 at 1:35 pm #58752MartinMember(Sorry, I would just edit my last post, but the Edit button is missing....)
Also, the social media buttons are showing but cut off in the lower right corner of the header banner--please refer to the site: http://www.martinjschoen.com
Thanks.
August 30, 2013 at 12:31 pm #59725photasticMembersorry for the late reply, been very busy with some projects...
don't understand... I made the exact same modifications on a base genesis 2.0 install with the eleven40pro theme and it doesn't react at all like you say :s
did you make any other adjustments in the styles.css or functions.php file?
Trying to craft webstuff at Photastic Webdesign
Learning Genesis by solving unanswered topicsSeptember 2, 2013 at 3:30 pm #60305MartinMemberWell, let's do an inventory so you can see exactly what's up, I guess:
Here are all the custom code changes in the Styles.css file:
**********
/*CUSTOM CODE SECTION*/
/*Custom Code to change font size of Header Title */
.site-title {
font-size: 25px; /
}/*Custom Code to change font size of Menu navigation buttons on right side of header */
.site-header .genesis-nav-menu li {
font-size: 20px;
}/*Custom Code to style the custom tagline under the Header Title*/
p.mytagline {
font-size: 20px;
color: white;
}/*To put the line in italics, put this in style.css: */
div#mytagline {
font-style: italic;
}/*Custom Code to keep header title on 1 line after increasing font size:
div.title-area {
width: auto;
}
aside.header-widget-area {
width: 60%;
}
section.widget_nav_menu {
display: none;
} */**************
And here are all the changes in the functions.php file:
***************
/*Custom Code to add tagline under Header Title*/
remove_filter('genesis_seo_title');
add_filter( 'genesis_seo_title', 'my_tagline', 10,3 );
function my_tagline() {
$inside = sprintf( '%s<p class="mytagline">Licensed Psychologist</p>', esc_attr( get_bloginfo('name') ), get_bloginfo('name') );
$title = sprintf('<div class="site-title">%s</div>', $inside );
return $title;
}*********************
Do you see any problems?
EDIT: Boy, I'm really seeing some problems with the way this forum publishes what we copy and paste. Perhaps that's the source of our problems here....? I will keep comparing all the various posts and your functions.php file you sent me and see what I come up with and repost an edit with results. (I'm sure everyone's just on the edge of their seat waiting.....)
September 9, 2013 at 1:17 pm #61562photasticMemberHey Marty,
I made all the changes we've been through on a fresh WP 3.6 install with Genesis & Eleven 40 Pro and this is how it comes out on my testsite : http://www.photastic-test.be/
I've sent you an email with the functions.php & style.css files I have used. Save them under themes/evelen40-pro overwriting the existing ones and check how it comes up then 🙂
Trying to craft webstuff at Photastic Webdesign
Learning Genesis by solving unanswered topicsSeptember 20, 2013 at 2:09 pm #63577photasticMemberhey Marty,
I have tweeted for help... I received 3 business projects to which I have to spend all my time so I'm affraid I can't respond anymore in a quite timely matter (as you probably noticed...)
Trying to craft webstuff at Photastic Webdesign
Learning Genesis by solving unanswered topics -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.